Thiết lập

Trước khi thêm tính năng Đăng nhập bằng Google, Một lần nhấn hoặc Tự động đăng nhập vào trang web, hãy thiết lập cấu hình OAuth và tuỳ ý thiết lập Chính sách bảo mật nội dung của trang web.

Lấy mã ứng dụng khách Google API

Để 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:

1. Mở trang Thông tin xác thực của Bảng điều khiển API của Google.
2. 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 web. Khi tạo các ứng dụng phát hành công khai, 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 mỗi dự án bạn quản lý.
3. Nhấp vào Tạo thông tin xác thực > Mã ứng dụng khách OAuth và chọn Ứng dụng web cho Loại ứng dụng để tạo mã ứng dụng khách mới. Để sử dụng một client ID chọn một trong số loại Web application (Ứng dụng web).

4. 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.

5. (Không bắt buộc) Thông tin đăng nhập có thể được trả về bằng lệnh chuyển hướng đến điểm cuối mà bạn thay vì thông qua lệnh gọi lại JavaScript. Nếu trường hợp này xảy ra, hãy thêm URI chuyển hướng của bạn đến URI chuyển hướng được phép. 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à xác thực Một lần nhấn đều có màn hình yêu cầu sự đồ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 mà họ được yêu cầu và các điều khoản áp dụng.

1. Mở trang Màn hình đồng ý OAuth trong mục API và dịch vụ của Google Developers Console.
2. Nếu bạn nhận được lời nhắc, hãy chọn dự án bạn vừa tạo.

3. Trên trang "Màn hình xin phép bằng OAuth", hãy điền thông tin vào biểu mẫu rồi nhấp vào nút "Lưu".

   1. 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 đơn đăng ký của bạn và nhất quán bằng tên ứng dụng mà người dùng thấy ở những nơi khác.

   2. Biểu trưng của ứ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 trang Đăng nhập bằng Google màn hình đồng ý và chế độ cài đặt tài khoản, nhưng không hiện trên hộp thoại Một lần chạm.

   3. Email hỗ trợ: Hiển thị trên màn hình đồng ý để hỗ trợ người dùng và hiển thị với G Quản trị viên 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 sẽ hiển thị với người dùng trên trang Đồng ý Đăng nhập bằng Google khi người dùng nhấp vào tên ứng dụng.

   4. Phạm vi cho API của Google: 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. Phạm vi mặc định đối với việc xác thực (email, profile, openid) là đủ, bạn không cần phải thêm phạm vi nhạy cảm. Nhìn chung, tốt nhất bạn nên yêu cầu phạm vi 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. Tìm hiểu thêm

   5. Miền được uỷ quyền: Để bảo vệ bạn và người dùng, Google chỉ cho phép các ứng dụng xác thực bằng OAuth sử dụng Miền được uỷ quyền. Đường liên kết của ứng dụng phải được lưu trữ trên Miền được uỷ quyền. Tìm hiểu thêm.

   6. Đường liên kết đến trang chủ của ứng dụng: Xuất hiện trên màn hình yêu cầu đồng ý Đăng nhập bằng Google và thông tin tuyên bố từ chối trách nhiệm tuân thủ GDPR bằng tính năng Một lần nhấn bên dưới nút "Tiếp tục dưới dạng". Phải được lưu trữ trên Miền được uỷ quyền.

   7. Đườ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 ý với tính năng Đăng nhập bằng Google và thông tin từ chối trách nhiệm tuân thủ GDPR bằng tính năng Một lần nhấn bên dưới nút "Tiếp tục dưới dạng". Phải được lưu trữ trên một Miền được uỷ quyền.

   8. Đườ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 trên màn hình đồng ý Đăng nhập bằng Google và thông tin từ chối trách nhiệm tuân thủ GDPR theo phương thức Một lần nhấn bên dưới nút "Tiếp tục dưới dạng". Phải được lưu trữ trên một Miền được uỷ quyền.

4. Kiểm tra "Trạng thái xác minh", nếu đơn đăng ký của bạn cần xác minh, hãy nhấp vào nút "Gửi để xác minh" để gửi đơn đăng ký của bạn đi xác minh. Tham khảo Yêu cầu đối với việc 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

Hình 1. Chế độ cài đặt về sự đồng ý OAuth hiển thị bằng tính năng Một lần chạm trên 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 và ngăn chặn các cuộc tấn công thông qua tập lệnh trên nhiều trang web (XSS). Để tìm hiểu thêm, hãy xem bài viết 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 chỉ thị, chẳng hạn như connect-src, frame-src, script-src, style-src hoặc default-src.

Nếu CSP của bạn bao gồm:

• connect-src, hãy thêm https://accounts.google.com/gsi/ để cho phép để tải URL mẹ cho Dịch vụ nhận dạng của Google phía máy chủ điểm cuối.
• frame-src, hãy thêm https://accounts.google.com/gsi/ để cho phép URL gốc của iframe nút Một lần chạm và Đăng nhập bằng Google.
• lệnh script-src, thêm https://accounts.google.com/gsi/client vào cho phép URL của thư viện JavaScript Dịch vụ nhận dạng của Google.
• lệnh style-src, hãy thêm https://accounts.google.com/gsi/style để cho phép URL của Trang tính kiểu Dịch vụ nhận dạng của Google.
• Lệnh default-src (nếu được sử dụng) không phải là lệnh dự phòng nếu có bất kỳ các lệnh trước đó (connect-src, frame-src, script-src hoặc style-src) chưa được chỉ định, hãy thêm https://accounts.google.com/gsi/ vào cho phép trang tải URL mẹ cho Dịch vụ nhận dạng của Google phía máy chủ điểm cuối.

Tránh liệt kê từng URL GIS 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 gốc 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ề trình mở trên nhiều nguồn gốc

Nút Đăng nhập bằng Google và tính năng Google One Chạm có thể yêu cầu thay đổi đối với Cross-Origin-Opener-Policy (COOP) theo thứ tự để tạo thành công cửa sổ bật lên.

Khi bật FedCM, trình duyệt trực tiếp hiển thị cửa sổ bật lên và không có thay đổi nào là cần thiết.

Tuy nhiên, khi FedCM bị tắt, hãy đặt tiêu đề COOP:

• đến same-origin và
• bao gồm same-origin-allow-popups.

Việc không đặt tiêu đề thích hợp sẽ làm gián đoạn quá trình 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ự.