Thiết lập

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 của bạn sẽ 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 của trang web.

Nhận mã ứng dụng khách Google API

Để 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. Để làm được đ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 trong Bảng điều khiển API của Google.
  2. Tạo hoặc chọn một dự án API 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 trên web. Khi tạo các ứng dụng chính thức, bạn có thể cần phải 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 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 Loại ứng dụng, hãy chọn Ứ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 số loại Ứng dụng web.

  4. Thêm URI của trang web vào Các nguồn gốc JavaScript được cho phép. URI chỉ bao gồm lược đồ và tên máy chủ đủ điều kiện. Ví dụ: https://www.example.com.

  5. Nếu muốn, thông tin xác thực có thể được trả về bằng lệnh chuyển hướng đến đ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 lượ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

Cả tính năng Đăng nhập bằng Google và tính năng xác thực Một lần chạm đều có màn hình xin phép để 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ần cung cấp và các điều khoản áp dụng.

  1. Mở trang màn hình xin phép bằng OAuth của phần API và dịch vụ trong Google Developer Console.
  2. Nếu được 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 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 ứ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 ở những 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 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 nhập bằng sự đồng ý của 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 chạm.

    3. Email hỗ trợ: Hiển thị trên màn hình xin phép để 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 Đăng nhập bằng sự đồng ý của 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. Để 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 truy cập thay vì yêu cầu từ trước. Tìm hiểu thêm

    5. Miền được cấp phép: Để bảo vệ bạn và người dùng, Google chỉ cho phép ứng dụng xác thực bằng OAuth sử dụng Miền được uỷ quyền. Đườ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.

    6. Đường liên kết đến Trang chủ của ứng dụng: Hiển thị trên màn hình Đăng nhập bằng sự đồng ý của Google và thông tin về tuyên bố từ chối trách nhiệm tuân thủ GDPR (Quy định chung về bảo vệ dữ liệu) bằng một lần nhấn bên dưới nút "Tiếp tục với tên". 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: Hiển thị trên màn hình Đăng nhập bằng Google và thông tin về 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) bằng một lần nhấn bên dưới nút "Tiếp tục với tên". Phải được lưu trữ trên 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): Hiển thị trên màn hình Đăng nhập bằng sự đồng ý của Google và thông tin về 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) bằng một lần nhấn bên dưới nút "Tiếp tục với tên". Phải được lưu trữ trên Miền được uỷ quyền.

  4. Kiểm tra "Xác minh trạng thái", 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. Hãy tham khảo phần Các yêu cầu đối với việc xác minh bằng OAuth để biết thông tin chi tiết.

Hiển thị chế độ cài đặt OAuth trong quá trình đăng nhập

Một lần chạm

Chế độ cài đặt lấy sự đồng ý của OAuth như hiển thị bằng tính năng Một lần chạm

Tên ứng dụng sẽ hiển thị trong quá trình người dùng đồng ý.

Tính năng Một lần chạm bằng FedCM

Chế độ cài đặt đồng ý OAuth như hiển thị của Chrome One Tap bằng FedCM

Miền được uỷ quyền cấp cao nhất sẽ hiển thị trong quá trình người dùng đồng ý trong Chrome.

Hình 1. Chế độ cài đặt về sự đồng ý OAuth hiển thị trên màn hình 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 vẫn nên 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 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 hoặc style-src.

Nếu Chính sách bảo mật nội dung (CSP) của bạn có:

  • connect-src, thêm https://accounts.google.com/gsi/ để cho phép một 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.
  • frame-src, thêm https://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êm https://accounts.google.com/gsi/client để cho phép URL của thư viện JavaScript của Dịch vụ nhận dạng của Google.
  • style-src, thêm https://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.

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 GIS được cập nhật. 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 các 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ở nhiều nguồn gốc

Nút Đăng nhập bằng Google và 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 FedCM được bật, trình duyệt 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ị vô hiệu hoá, hãy đặt tiêu đề COOP:

  • đến same-origin và
  • 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 một cửa sổ bật lên trống hoặc các lỗi tương tự.