Thiết lập

Trước khi bạn 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ính năng Tự động đăng nhập vào trang web, hãy thiết lập cấu hình OAuth và tuỳ ý định cấu hình Chính sách bảo mật nội dung cho trang web.

Lấy 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, 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 khách web. 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ý.
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ã ứng dụng khách hiện có, hãy chọn một trong các loại Ứng dụng web.

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

5. Bạn có thể tuỳ ý trả về thông tin xác thực bằng cách dùng lệnh 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. Nếu vậy, hãy thêm URI chuyển hướng 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 xin phép bằ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 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.

   2. Biểu trưng ứng dụng: Hình ảnh này xuất hiện trên màn hình đồng ý để giúp người dùng nhận ra ứng dụng của bạn. Biểu trưng xuất hiện trên màn hình đồng ý Đăng nhập bằng Google và trên 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 nhấn.

   3. Email hỗ trợ: Xuất hiện trên màn hình yêu cầu đồ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 sẽ hiển thị cho người dùng trên màn hình đồ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. Đối với quy trình 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, 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 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.

   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 ý 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 trong 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.

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 để xác minh. Hãy tham khảo các yêu cầu về việc xác minh 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 của mình và ngăn chặn các cuộc tấn công 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 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 bao gồm:

• lệnh connect-src, hãy thêm https://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.
• lệnh frame-src, hãy thêm https://accounts.google.com/gsi/ để cho phép URL gốc của các iframe nút Đăng nhập bằng một lần chạm và Đăng nhập bằng Google.
• lệnh script-src, hãy thêm https://accounts.google.com/gsi/client để 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) sẽ không phải là lệnh dự phòng trong trường hợp có bất kỳ lệnh nào trước đó (connect-src, frame-src, script-src hoặc style-src) không được chỉ định. Hãy thêm https://accounts.google.com/gsi/ để cho phép trang tải URL mẹ cho các đ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ê từng URL của hệ thống thông tin địa lý (GIS) khi sử dụng connect-src. Điều này giúp giảm thiểu lỗi khi GIS được cập nhật. Ví dụ: thay vì thêm https://accounts.google.com/gsi/status, hãy sử dụng URL gốc của hệ thống thông tin địa lý (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 Tap có thể yêu cầu bạn thay đổi Cross-Origin-Opener-Policy (COOP) để tạo thành công cửa sổ bật lên.

Khi bật FedCM, 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 thực hiện thay đổi nào.

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