Thực đơn
trang chủTrình duyệt

Tạo form đăng ký theo số. Tạo mẫu đăng ký chỉ bằng một cú nhấp chuột

Bạn có biết rằng bạn có thể sử dụng dịch vụ Google, tạo nên Mẫu đăng ký cho trang web của bạn chỉ bằng một cú nhấp chuột? Mọi người có tài khoản Google, có thể nhấp vào nút và đăng nhập ngay vào ứng dụng của bạn, bằng email, tên và ảnh của anh ấy.

Dịch vụ này được gọi là đăng nhập liên kết và được xây dựng trên giao thức OAuth2. Cái này quá trình khó khăn, bao gồm việc chia sẻ dữ liệu giữa máy chủ của bạn và Google, nhưng chúng tôi sẽ giao tất cả công việc đó cho thư viện PHP của Google, thư viện này sẽ xử lý hầu hết mọi thứ phía máy chủ.

Sử dụng dịch vụ này, bạn có thể đơn giản hóa đáng kể quy trình ủy quyền/đăng ký cho bạn và người dùng của bạn. Dưới đây là một số lợi ích:

  • Không cần phải tạo và xác minh các biểu mẫu đăng ký và ủy quyền;
  • Không cần tính năng khôi phục mật khẩu bị quên;
  • Ủy quyền/đăng ký rất đơn giản - bạn sẽ nhận được e-mail người, tên và ảnh chỉ bằng một cú nhấp chuột;
  • Địa chỉ đã được Google xác minh nên bạn không cần gửi tin nhắn để xác minh.
  • Bảo mật nghiêm túc từ Google.

Tất nhiên, điều này sẽ chỉ hoạt động nếu người đó có tài khoản Google, vì vậy sẽ rất hợp lý khi sử dụng dịch vụ này như một sự bổ sung cho hệ thống hiện có sự đăng ký. Vậy hãy bắt đầu!

Cài đặt

Bước đầu tiên là tạo một ứng dụng mới thông qua Bảng điều khiển API của Google. Làm theo hướng dẫn để nhận thông tin thêm. Sau khi quá trình hoàn tất, hãy sao chép các khóa nhận được vào tệp setup.php.

Chạy mã từ lược đồ.sql (bạn có thể tìm thấy mã trong kho lưu trữ) trong PhpMyAdmin hoặc một công cụ tương tự. Nó sẽ tạo một bảng glogin_users trong cơ sở dữ liệu, bảng này sẽ được sử dụng để lưu trữ thông tin về tài khoản người dùng trong ứng dụng của bạn. Sau đó, viết chi tiết kết nối cơ sở dữ liệu của bạn vào setup.php.

PHP

Chúng tôi tạo một biểu mẫu đăng nhập bằng cách sử dụng thông tin đăng nhập Liên kết của Google. Điều này có nghĩa là khách truy cập trang web của bạn nhấp vào liên kết đến trang Google, nơi họ cấp cho ứng dụng quyền truy cập vào tài khoản của mình và sau đó sẽ được chuyển hướng trở lại. Sau đó, bạn nhận được mã thông báo truy cập mà bạn có thể sử dụng để yêu cầu thông tin về họ. Dưới đây là mô tả đơn giản về quy trình ủy quyền:

  • Khi người dùng nhấp vào nút "Đăng nhập bằng Google" trong bản demo của chúng tôi, họ sẽ được đưa đến trang đăng nhập của Google nơi họ xem ứng dụng của chúng tôi yêu cầu những quyền gì.
  • Sau khi cho phép truy cập vào ứng dụng này, họ sẽ được chuyển hướng trở lại trang web, trong khi tham số đặc biệt mã sốđược chuyển vào URL. Ứng dụng của chúng tôi sẽ sử dụng mã này để nhận mã thông báo truy cập;
  • Sử dụng mã thông báo, ứng dụng sẽ yêu cầu thông tin về người dùng và thông tin này được lưu trữ trong cơ sở dữ liệu.

Để đọc và chèn vào cơ sở dữ liệu, tôi sử dụng thư viện Idiorm nhỏ mà bạn có thể tìm thấy trong thư mục thư viện.

Mã PHP của chúng tôi được tổ chức như sau:

  • index.php là tệp ứng dụng chính;
  • setup.php - tệp này chứa thông tin kết nối cơ sở dữ liệu và các khóa thu được từ Bảng điều khiển API của Google;
  • Thư mục thư viện - chứa thư viện Idiorm, PHP Thư viện Google và một lớp để bao gồm dấu thời gian tương đối.

Chúng ta hãy xem đoạn mã ở đầu file index.php:

yêu cầu "setup.php"; // Tạo một cái mới API Google khách hàng
$client = apiClient mới();
//$client->setApplicationName("Tutorialzine"); // Cấu hình nó
$client -> setClientId ($client_id);
$client -> setClientSecret ($client_secret);
$client -> setDeveloperKey ($api_key);
$client -> setRedirectUri ($redirect_url);
$client -> setApprovalPrompt ( sai );
$oauth2 = apiOauth2Service mới($client ) ; // Tham số mã biểu thị rằng đây là
// chuyển hướng từ google, mang mã tạm thời
if (isset ($_GET [ "code" ] ) ) ( // Phương thức này sẽ lấy mã thông báo truy cập thực tế từ Google,
// để chúng ta có thể yêu cầu thông tin người dùng
$client -> xác thực () ; // Lấy dữ liệu người dùng
$info = $oauth2 -> thông tin người dùng -> get () ; // Tìm người này trong cơ sở dữ liệu
$person = ORM::for_table ("glogin_users") -> ở đâu ("email" , $info [ "email" ] ) -> find_one () ; nếu (! $person ) (
// Không tìm thấy người như vậy. Đăng ký! $person = ORM::for_table("glogin_users")->create(); // Đặt các thuộc tính sẽ được chèn vào db
$person -> email = $info [ "email" ] ;
$person -> name = $info [ "name" ] ;

if (isset ($thông tin [ "hình ảnh" ] ) ) (
// Nếu người dùng đã đặt công khai tài khoản Google hình chụp
$person -> photo = $info [ "picture" ] ;
}
khác(
// nếu không thì sử dụng mặc định
$person -> photo = "asset/img/default_avatar.jpg" ;
) // chèn bản ghi vào cơ sở dữ liệu
$person -> lưu () ;
) // Lưu id người dùng vào phiên
$_SESSION [ "user_id" ] = $person -> id () ; // Chuyển hướng đến URL demo cơ sở
header("Vị trí: $redirect_url");
lối ra ;
) //Xử lý đăng xuất
if (isset ($_GET [ "đăng xuất" ] ) ) (
bỏ đặt ($_SESSION [ "user_id" ] );
) $người = null ;
if (isset ($_SESSION [ "user_id" ] ) ) (
// Lấy người từ cơ sở dữ liệu
$person = ORM::for_table("glogin_users") -> find_one($_SESSION["user_id"]) ;
}

Điều đang xảy ra ở đây là chúng tôi đang kiểm tra mã trong $_ NHẬN thông số. Như tôi đã đề cập ở trên, cài đặt này được Google thiết lập khi người dùng được chuyển hướng trở lại sau khi cho phép truy cập vào ứng dụng. Sau đó chúng tôi yêu cầu thông tin về người dùng và ghi lại thông tin đó vào cơ sở dữ liệu. ID người dùng (giá trị ID trong cơ sở dữ liệu) được ghi vào phiên. Nó được lưu giữa các yêu cầu và được sử dụng làm cờ cho biết người dùng đã được xác thực

Nếu bạn muốn tìm hiểu thêm về OAuth, hãy đọc thông tin liên quan từ Google về chủ đề này. Ở đó bạn cũng có thể thấy một bảng chứa các trường mà phương thức get() trả về.

Đến cuối cùng, chúng tôi xác định biến $person. Nó chứa một đối tượng được thư viện Idiorm trả về, với các thuộc tính cho từng cột trong bảng glogin_users. Bạn có thể xem đối tượng này được sử dụng như thế nào trong phần tiếp theo.

HTML

Mã HTML cho ví dụ của chúng tôi nằm ở cuối tệp index.php. Do đó, chúng ta có quyền truy cập vào đối tượng $person, điều này rất hữu ích khi hiển thị tên và ảnh của người dùng. Bản thân trang này là tài liệu chuẩn HTML5:





Biểu mẫu đăng nhập do Google cung cấp




mẫu đăng nhập