Để cho phép truy cập vào các API của Google trong ứng dụng web bằng thư viện JavaScript của Dịch vụ nhận dạng của Google (google.accounts.oauth2), trước tiên, bạn cần:
- Lấy mã ứng dụng khách OAuth 2.0.
- Định cấu hình màn hình xin phép bằng OAuth và phạm vi.
- Tải thư viện ứng dụng.
- Bạn có thể thiết lập Chính sách bảo mật nội dung (CSP) và Chính sách mở khác nguồn gốc (COOP).
Lấy mã ứng dụng khách Google API
Để bật tính năng Uỷ quyền Tài khoản Google trên trang web của mình, trước tiên, bạn cần thiết lập mã ứng dụng API Google. Hãy hoàn tất các bước sau:
- Mở trang Clients (Ứng dụng khách) của Google Cloud Console.
- Tạo hoặc chọn một dự án trên Cloud Console. Khi tạo ứng dụng chính thức, bạn có thể cần nhiều dự án; hãy lặp lại các bước còn lại của phần này cho từng dự án mà bạn quản lý.
- Nhấp vào Create client (Tạo ứng dụng khách) và đối với Application type (Loại ứng dụng), hãy chọn Web application (Ứng dụng web) để tạo mã ứng dụng khách mới. Để sử dụng mã ứng dụng khách hiện có, hãy chọn một mã thuộc loại Ứng dụng web.
Thêm URI của trang web vào Nguồn gốc JavaScript được uỷ quyền. URI chỉ bao gồm giao thức và tên máy chủ đủ điều kiện. Ví dụ:
https://www.example.com.Nếu bạn sử dụng mô hình mã uỷ quyền với
ux_mode: 'redirect'(hoặc trao đổi mã uỷ quyền tại một điểm cuối phụ trợ), hãy thêm URI chuyển hướng của bạn vào URI chuyển hướng được uỷ quyền. URI chuyển hướng bao gồm giao thức, tên máy chủ đủ điều kiện và đường dẫn, đồng thời phải tuân thủ Quy tắc xác thực URI chuyển hướng. Ví dụ:https://www.example.com/oauth2callback
Sau khi hoàn tất việc thiết lập, hãy ghi lại mã ứng dụng khách đã được tạo.
Bạn sẽ truyền giá trị này trong thuộc tính client_id khi khởi chạy initCodeClient() hoặc initTokenClient(). (Một khoá bí mật của ứng dụng khách cũng được tạo. Bạn phải giữ bí mật khoá này và chỉ sử dụng cho các hoạt động trao đổi mã thông báo phía máy chủ.)
Định cấu hình màn hình xin phép bằng OAuth
Khi ứng dụng web của bạn yêu cầu quyền truy cập vào dữ liệu người dùng bằng phạm vi OAuth 2.0, Google sẽ hiển thị một màn hình xin phép để cho người dùng biết ứng dụng nào đang yêu cầu quyền truy cập, phạm vi dữ liệu nào được yêu cầu và các điều khoản áp dụng.
- Mở trang Thương hiệu trong phần Nền tảng xác thực của Google trên Cloud Console.
- Nếu được nhắc, hãy chọn dự án mà bạn đã định cấu hình.
- Điền thông tin vào biểu mẫu xây dựng thương hiệu (Tên ứng dụng, Biểu trưng ứng dụng, Email hỗ trợ, Miền được uỷ quyền, Đường liên kết đến trang chủ ứng dụng và Đường liên kết đến Chính sách quyền riêng tư) rồi nhấp vào Lưu.
- Chuyển đến trang Truy cập dữ liệu để định cấu hình phạm vi API Google mà ứng dụng của bạn yêu cầu. Bạn nên yêu cầu phạm vi theo cách tăng dần, tại thời điểm cần quyền truy cập, thay vì yêu cầu trước.
- Kiểm tra Trạng thái xác minh của bạn. Nếu ứng dụng của bạn yêu cầu phạm vi nhạy cảm hoặc bị hạn chế, hãy gửi ứng dụng để xác minh. Hãy tham khảo Yêu cầu xác minh OAuth để biết thông tin chi tiết.
Chính sách bảo mật nội dung và COOP
Nếu ứng dụng web của bạn thực thi Chính sách bảo mật nội dung (CSP), hãy cho phép các nguồn gốc sau đây của Dịch vụ nhận dạng của Google:
script-src:https://accounts.google.com/gsi/clientframe-src:https://accounts.google.com/gsi/connect-src:https://accounts.google.com/gsi/
Đối với quy trình uỷ quyền bật lên (initTokenClient hoặc initCodeClient có ux_mode: 'popup'), hãy định cấu hình tiêu đề phản hồi HTTP Cross-Origin-Opener-Policy (COOP) thành same-origin-allow-popups để cửa sổ hộp thoại có thể truyền phản hồi uỷ quyền trở lại trang của bạn.
Các bước tiếp theo
Tiếp theo, hãy tải thư viện ứng dụng trên trang web của bạn để bắt đầu khởi chạy ứng dụng uỷ quyền.