Trước khi thêm tính năng Đăng nhập bằng Google, tính năng Một lần chạm hoặc Tự động đăng nhập vào trang web sẽ thiết lập cấu hình OAuth và định cấu hình Chính sách bảo mật nội dung cho trang web (không bắt buộc).
Nhận mã ứng dụng khách Google API của bạn
Để bật tính năng Đăng nhập bằng 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 khách Google API. Để thực hiện điều này, vui lòng hoàn thành các bước sau:
- Mở trang Thông tin xác thực trong Bảng điều khiển API của Google.
- Tạo hoặc chọn một dự án API của Google. Nếu bạn đã có một dự án cho nút Đăng nhập bằng Google hoặc Google One Tap, hãy sử dụng dự án hiện có và mã ứng dụng khách web. Khi tạo các ứng dụng chính thức, bạn có thể cần đế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 credentials > OAuth client ID (Tạo thông tin xác thực > Mã ứng dụng khách OAuth) 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 trong các loại Ứng dụng web.
Thêm URI của trang web vào phần Nguồn gốc JavaScript được cho phép. URI chỉ bao gồm giao thức và tên máy chủ đủ điều kiện. Ví dụ:
https://www.example.com.(Không bắt buộc) Bạn có thể trả về thông tin xác thực bằng cách chuyển hướng đến một điểm cuối mà bạn lưu trữ thay vì thông qua lệnh gọi lại JavaScript. Trong trường hợp này, 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/auth-receiver
Định cấu hình Màn hình đồng ý OAuth
Cả tính năng Đăng nhập bằng Google và tính năng xác thực bằng một lần chạm đều có màn hình đồng ý để cho người dùng biết ứng dụng đang yêu cầu quyền truy cập vào dữ liệu của họ, loại dữ liệu họ được yêu cầu và các điều khoản áp dụng.
- Mở trang màn hình xin phép bằng OAuth trong phần API và dịch vụ của Google Developer Console.
- Nếu được nhắc, hãy chọn dự án bạn vừa tạo.
Trên trang "màn hình xin phép bằng OAuth", hãy điền vào biểu mẫu và nhấp vào nút "Lưu".
Tên ứng dụng: Tên của ứng dụng yêu cầu sự đồng ý. Tên này phải phản ánh chính xác ứng dụng của bạn và nhất quán với tên ứng dụng mà người dùng thấy ở nơi khác.
Biểu trưng ứng dụng: Hình ảnh này xuất hiện trên màn hình xin phép để giúp người dùng nhận ra ứng dụng của bạn. Biểu trưng này xuất hiện trên màn hình đồng ý Đăng nhập bằng Google và trong phần cài đặt tài khoản, nhưng không xuất hiện trên hộp thoại Một lần chạm.
Email hỗ trợ: Hiển thị trên màn hình đồng ý để hỗ trợ người dùng và để quản trị viên G Suite đánh giá quyền truy cập vào ứng dụng của bạn cho người dùng của họ. Địa chỉ email này hiển thị với người dùng trên màn hình yêu cầu sự đồng ý của tính năng Đăng nhập bằng Google khi người dùng nhấp vào tên ứng dụng.
Phạm vi cho API Google: Các phạm vi cho phép ứng dụng của bạn truy cập vào dữ liệu riêng tư của người dùng. Để xác thực, phạm vi mặc định (email, hồ sơ, openid) là đủ, bạn không cần thêm bất kỳ phạm vi nhạy cảm nào. Nhìn chung, phương pháp hay nhất là yêu cầu phạm vi dần dần, thay vì từ trước đến khi cần truy cập. Tìm hiểu thêm
Miền được cấp phép: Để bảo vệ bạn và người dùng của bạn, Google chỉ cho phép những ứng dụng xác thực bằng OAuth sử dụng Miền được cấp phép. Đường liên kết đến ứng dụng của bạn phải được lưu trữ trên Miền được cấp phép. Tìm hiểu thêm.
Đường liên kết đến trang chủ của ứng dụng: Xuất hiện trên màn hình Đăng nhập bằng tài khoản Google đồng ý và thông tin tuyên bố từ chối trách nhiệm tuân thủ Quy định chung về việc bảo vệ dữ liệu (GDPR) chỉ với một lần nhấn trong nút "Tiếp tục bằng tài khoản". Phải được lưu trữ trên Miền được uỷ quyền.
Đường liên kết đến Chính sách quyền riêng tư của ứng dụng: Xuất hiện trên màn hình đăng nhập bằng Google và hiển thị thông tin tuyên bố từ chối trách nhiệm tuân thủ Quy định chung về việc bảo vệ dữ liệu (GDPR) bằng một lần nhấn bên dưới nút "Tiếp tục bằng tài khoản". Phải được lưu trữ trên Miền được uỷ quyền.
Đường liên kết đến Điều khoản dịch vụ của ứng dụng (Không bắt buộc): Xuất hiện trong màn hình Đăng nhập bằng sự đồng ý của Google và thông tin tuyên bố từ chối trách nhiệm tuân thủ GDPR (Quy định chung về việc bảo vệ dữ liệu) chỉ với một lần nhấn bên dưới nút "Tiếp tục bằng". Phải được lưu trữ trên Miền được uỷ quyền.
Chọn "Trạng thái xác minh". Nếu đơn đăng ký của bạn cần được xác minh thì hãy nhấp vào nút "Gửi để xác minh" để gửi đơn đăng ký để xác minh. Vui lòng tham khảo Các yêu cầu để xác minh qua OAuth để biết thông tin chi tiết.
Hiển thị chế độ cài đặt OAuth trong quá trình đăng nhập
Tính năng Một lần chạm bằng FedCM
Miền được uỷ quyền cấp cao nhất hiển thị trong quá trình người dùng đồng ý trên Chrome.
Một lần chạm mà không cần FedCM
Tên ứng dụng sẽ hiện trong quá trình người dùng đồng ý.
Hình 1. Chế độ cài đặt lấy sự đồng ý OAuth hiển thị qua tính năng Một lần chạm trong Chrome.
Chính sách bảo mật nội dung
Mặc dù không bắt buộc, nhưng bạn nên sử dụng Chính sách bảo mật nội dung để bảo mật ứng dụng của mình và ngăn các cuộc tấn công vào tập lệnh trên nhiều trang web (XSS). Để tìm hiểu thêm, hãy xem phần Giới thiệu về CSP và CSP và XSS.
Chính sách bảo mật nội dung của bạn có thể bao gồm một hoặc nhiều lệnh, chẳng hạn như connect-src, frame-src, script-src, style-src hoặc default-src.
Nếu CSP của bạn có:
connect-src, hãy thêmhttps://accounts.google.com/gsi/để cho phép một trang tải URL gốc cho các điểm cuối phía máy chủ của Dịch vụ nhận dạng của Google.frame-src, hãy thêmhttps://accounts.google.com/gsi/để cho phép URL gốc của các iframe nút Một lần chạm và Đăng nhập bằng Google.script-src, thêmhttps://accounts.google.com/gsi/clientđể cho phép URL của thư viện JavaScript trong Dịch vụ nhận dạng của Google.style-src, hãy thêmhttps://accounts.google.com/gsi/styleđể cho phép URL của Biểu định kiểu dịch vụ nhận dạng của Google.- Lệnh
default-src, nếu được sử dụng, sẽ không phải là lệnh dự phòng nếu có bất kỳ lệnh nào ở trước (connect-src,frame-src,script-srchoặcstyle-src) không được chỉ định, hãy thêmhttps://accounts.google.com/gsi/để cho phép một trang tải URL gốc cho điểm cuối phía máy chủ của Dịch vụ nhận dạng của Google.
Tránh liệt kê các URL của hệ thống thông tin địa lý (GIS) riêng lẻ khi sử dụng connect-src. Điều này giúp giảm thiểu lỗi khi cập nhật GIS. Ví dụ: thay vì thêm https://accounts.google.com/gsi/status, hãy sử dụng URL mẹ của GIS https://accounts.google.com/gsi/.
Tiêu đề phản hồi mẫu này cho phép Dịch vụ nhận dạng của Google tải và thực thi thành công:
Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;
Chính sách về tiện ích mở trên nhiều nguồn gốc
Bạn có thể phải thay đổi nút Đăng nhập bằng Google và tính năng Chạm của Google One để tạo thành công cửa sổ bật lên Cross-Origin-Opener-Policy (COOP).
Khi FedCM được bật, trình duyệt sẽ trực tiếp hiển thị cửa sổ bật lên và bạn không cần thay đổi gì.
Tuy nhiên, khi FedCM bị tắt, hãy đặt tiêu đề COOP:
- đến
same-originvà - bao gồm
same-origin-allow-popups.
Việc không đặt tiêu đề phù hợp sẽ làm gián đoạn hoạt động giao tiếp giữa các cửa sổ, dẫn đến cửa sổ bật lên trống hoặc các lỗi tương tự.