Tài liệu tham khảo API về tính năng Đăng nhập bằng Google HTML API

Trang tham khảo này mô tả API thuộc tính dữ liệu HTML của tính năng Đăng nhập bằng Google. Bạn có thể sử dụng API để hiển thị lời nhắc Một lần chạm hoặc nút Đăng nhập bằng Google trên các trang web của mình.

Phần tử có mã "g_id_onload"

Bạn có thể đặt các thuộc tính dữ liệu của tính năng Đăng nhập bằng Google trong mọi phần tử hiển thị hoặc ẩn, chẳng hạn như <div><span>. Yêu cầu duy nhất là mã nhận dạng phần tử phải được đặt thành g_id_onload. Đừng đặt mã nhận dạng này trên nhiều phần tử.

Thuộc tính dữ liệu

Bảng sau đây liệt kê các thuộc tính dữ liệu cùng với nội dung mô tả của các thuộc tính đó:

Thuộc tính
data-client_id Mã ứng dụng khách của đơn đăng ký của bạn
data-auto_prompt Hiện thao tác nhấn của Google One.
data-auto_select Bật tính năng tự động chọn trên Google One Tap.
data-login_uri URL của điểm cuối đăng nhập của bạn
data-callback Tên hàm của trình xử lý mã thông báo mã nhận dạng JavaScript
data-native_login_uri URL của điểm cuối của trình xử lý thông tin xác thực mật khẩu
data-native_callback Tên hàm của trình xử lý thông tin xác thực mật khẩu JavaScript
data-native_id_param Tên tham số cho giá trị credential.id
data-native_password_param Tên tham số cho giá trị credential.password
data-cancel_on_tap_outside Kiểm soát việc có huỷ lời nhắc nếu người dùng nhấp vào bên ngoài lời nhắc hay không.
data-prompt_parent_id Mã DOM của phần tử vùng chứa lời nhắc Một lần chạm
data-skip_prompt_cookie Bỏ qua tính năng Một lần chạm nếu cookie được chỉ định có giá trị không trống.
data-nonce Một chuỗi ngẫu nhiên cho mã thông báo giá trị nhận dạng
data-context Tiêu đề và từ trong lời nhắc Một lần chạm
data-moment_callback Tên hàm của trình nghe thông báo trạng thái trên giao diện người dùng có lời nhắc
data-state_cookie_domain Nếu bạn cần gọi một lần chạm trong miền gốc và miền con của miền đó, hãy chuyển miền gốc đến thuộc tính này để sử dụng một cookie dùng chung duy nhất.
data-ux_mode Quy trình trải nghiệm người dùng qua nút Đăng nhập bằng Google
data-allowed_parent_origin Các nguồn gốc được phép nhúng iframe trung gian. Tính năng Một lần chạm sẽ chạy ở chế độ iframe trung gian nếu có thuộc tính này.
data-intermediate_iframe_close_callback Ghi đè hành vi của iframe trung gian mặc định khi người dùng đóng tính năng Một lần chạm theo cách thủ công.
data-itp_support Bật trải nghiệm người dùng Một lần chạm đã nâng cấp trên trình duyệt ITP.
data-login_hint Bỏ qua bước lựa chọn tài khoản bằng cách cung cấp gợi ý cho người dùng.
data-hd Giới hạn lựa chọn tài khoản theo miền.
data-use_fedcm_for_prompt Cho phép trình duyệt kiểm soát lời nhắc đăng nhập của người dùng và dàn xếp quy trình đăng nhập giữa trang web của bạn và Google.

Các loại thuộc tính

Các phần sau đây chứa thông tin chi tiết về từng loại thuộc tính và một ví dụ.

mã ứng dụng khách dữ liệu

Thuộc tính này là mã ứng dụng khách của ứng dụng. Mã này được tìm thấy và tạo trong Play Console của Google. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string data-client_id="CLIENT_ID.apps.googleusercontent.com"

lời nhắc tự động dữ liệu

Thuộc tính này xác định xem có hiển thị tính năng Một lần nhấn hay không. Giá trị mặc định là true. Thao tác chạm Google One không hiển thị khi giá trị này là false. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
boolean Không bắt buộc data-auto_prompt="true"

tự_ động_chọn_dữ_liệu

Thuộc tính này xác định liệu có tự động trả về mã thông báo mã nhận dạng mà không cần người dùng tương tác hay không nếu chỉ có một phiên của Google đã phê duyệt ứng dụng của bạn. Giá trị mặc định là false. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
boolean Không bắt buộc data-auto_select="true"

data-login_uri

Thuộc tính này là URI của điểm cuối đăng nhập của bạn.

Giá trị này phải khớp chính xác với một trong các URI chuyển hướng được uỷ quyền cho ứng dụng OAuth 2.0 mà bạn đã định cấu hình trong Bảng điều khiển API và phải tuân thủ các quy tắc xác thực URI chuyển hướng của chúng tôi.

Bạn có thể bỏ qua thuộc tính này nếu trang hiện tại là trang đăng nhập của bạn, trong trường hợp đó, thông tin xác thực được đăng lên trang này theo mặc định.

Phản hồi thông tin xác thực của mã thông báo giá trị nhận dạng được đăng lên điểm cuối đăng nhập khi không có chức năng gọi lại nào được xác định và người dùng nhấp vào các nút Đăng nhập bằng Google hoặc Một lần nhấn hoặc ký tự động.

Hãy xem bảng sau để biết thêm thông tin:

Loại Không bắt buộc Ví dụ:
URL Giá trị mặc định là URI của trang hiện tại hoặc giá trị mà bạn chỉ định.
Bỏ qua khi đặt data-ux_mode="popup"data-callback.
data-login_uri="https://www.example.com/login"

Điểm cuối đăng nhập phải xử lý các yêu cầu POST chứa khoá credential có giá trị mã thông báo mã nhận dạng trong phần nội dung.

Sau đây là một yêu cầu mẫu đối với điểm cuối đăng nhập của bạn:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

gọi lại dữ liệu

Thuộc tính này là tên của hàm JavaScript xử lý mã thông báo mã nhận dạng được trả về. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Đây là trường bắt buộc nếu bạn chưa đặt data-login_uri. data-callback="handleToken"

Bạn có thể sử dụng một trong các thuộc tính data-login_uridata-callback. Nó phụ thuộc vào các cấu hình thành phần và chế độ trải nghiệm người dùng sau đây:

  • Thuộc tính data-login_uri là bắt buộc đối với chế độ trải nghiệm người dùng redirect của nút Đăng nhập bằng Google. Chế độ này bỏ qua thuộc tính data-callback.

  • Một trong hai thuộc tính này phải được đặt cho chế độ trải nghiệm người dùng popup của nút Google One Tap và nút Đăng nhập bằng Google. Nếu bạn đặt cả hai giá trị, thuộc tính data-callback sẽ có mức độ ưu tiên cao hơn.

HTML API không hỗ trợ các hàm JavaScript trong một không gian tên. Thay vào đó, hãy sử dụng hàm JavaScript chung mà không có không gian tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.

data-native_login_uri

Thuộc tính này là URL của điểm cuối của trình xử lý thông tin xác thực mật khẩu. Nếu bạn đặt thuộc tính data-native_login_uri hoặc thuộc tính data-native_callback, thư viện JavaScript sẽ quay lại trình quản lý thông tin xác thực gốc khi không có phiên Google. Bạn không được phép đặt cả thuộc tính data-native_callbackdata-native_login_uri. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-login_uri="https://www.example.com/password_login"

data-native_callback

Thuộc tính này là tên của hàm JavaScript xử lý thông tin xác thực mật khẩu được trả về từ trình quản lý thông tin xác thực gốc của trình duyệt. Nếu bạn đặt thuộc tính data-native_login_uri hoặc thuộc tính data-native_callback, thư viện JavaScript sẽ quay lại trình quản lý thông tin xác thực gốc khi không có phiên Google. Bạn không được phép đặt cả data-native_callbackdata-native_login_uri. Hãy xem bảng sau đây để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-native_callback="handlePasswordCredential"

HTML API không hỗ trợ các hàm JavaScript trong một không gian tên. Thay vào đó, hãy sử dụng hàm JavaScript chung mà không có không gian tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.

data-native_id_param

Khi gửi thông tin xác thực mật khẩu đến điểm cuối của trình xử lý thông tin xác thực mật khẩu, bạn có thể chỉ định tên tham số cho trường credential.id. Tên mặc định là email. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
URL Không bắt buộc data-native_id_param="user_id"

data-native_password_param

Khi gửi thông tin xác thực mật khẩu đến điểm cuối của trình xử lý thông tin xác thực mật khẩu, bạn có thể chỉ định tên tham số cho giá trị credential.password. Tên mặc định là password. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
URL Không bắt buộc data-native_password_param="pwd"

data-cancel_on_tap_outside

Thuộc tính này thiết lập liệu có huỷ yêu cầu Một lần chạm nếu người dùng nhấp vào bên ngoài lời nhắc hay không. Giá trị mặc định là true. Để tắt tính năng này, hãy đặt giá trị thành false. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
boolean Không bắt buộc data-cancel_on_tap_outside="false"

data-prompt_parent_id

Thuộc tính này đặt ID DOM của phần tử vùng chứa. Nếu bạn không đặt chính sách này, thì lời nhắc Một lần chạm sẽ hiển thị ở góc trên cùng bên phải của cửa sổ. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-prompt_parent_id="parent_id"

Thuộc tính này bỏ qua tính năng Một lần chạm nếu cookie được chỉ định có giá trị không trống. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-skip_prompt_cookie="SID"

data-n một lần

Thuộc tính này là một chuỗi ngẫu nhiên mà mã thông báo mã nhận dạng sử dụng để ngăn chặn các cuộc tấn công phát lại. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-nonce="biaqbm70g23"

Độ dài của số chỉ dùng một lần bị giới hạn ở kích thước JWT tối đa mà môi trường của bạn hỗ trợ, cũng như các giới hạn kích thước HTTP của từng trình duyệt và máy chủ.

ngữ cảnh dữ liệu

Thuộc tính này thay đổi văn bản của tiêu đề và thông điệp xuất hiện trong lời nhắc bằng một lần chạm. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-context="use"

Bảng sau đây liệt kê các ngữ cảnh có sẵn và nội dung mô tả của các ngữ cảnh đó:

Bối cảnh
signin "Đăng nhập bằng Google"
signup "Đăng ký bằng Google"
use "Sử dụng bằng Google"

data-moment_callback

Thuộc tính này là tên hàm của trình nghe thông báo trạng thái trên giao diện người dùng có lời nhắc. Để biết thêm thông tin, hãy tham khảo loại dữ liệu PromptMomentNotification.

Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-moment_callback="logMomentNotification"

HTML API không hỗ trợ các hàm JavaScript trong một không gian tên. Thay vào đó, hãy sử dụng hàm JavaScript chung mà không có không gian tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.

Nếu bạn cần hiển thị tính năng Một lần chạm trong miền gốc và miền con của miền đó, hãy chuyển miền gốc đến thuộc tính này để sử dụng một cookie trạng thái dùng chung duy nhất. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-state_cookie_domain="example.com"

data-ux_mode

Thuộc tính này thiết lập quy trình trải nghiệm người dùng mà nút Đăng nhập bằng Google sử dụng. Giá trị mặc định là popup. Thuộc tính này không ảnh hưởng đến trải nghiệm người dùng bằng một lần chạm. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-ux_mode="redirect"

Bảng sau đây liệt kê các chế độ trải nghiệm người dùng hiện có và nội dung mô tả của các chế độ đó.

Chế độ trải nghiệm người dùng
popup Thực hiện quy trình đăng nhập trải nghiệm người dùng trong cửa sổ bật lên.
redirect Thực hiện quy trình trải nghiệm người dùng đăng nhập bằng chuyển hướng toàn bộ trang.

data-allowed_parent_origin

Các nguồn gốc được phép nhúng iframe trung gian. Tính năng Một lần chạm sẽ chạy ở chế độ iframe trung gian nếu thuộc tính này xuất hiện. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
chuỗi hoặc mảng chuỗi Không bắt buộc data-allowed_parent_origin="https://example.com"

Bảng sau đây liệt kê các loại giá trị được hỗ trợ và nội dung mô tả của các loại giá trị đó.

Loại giá trị
string Một URI miền duy nhất. "https://vidu.com"
string array Danh sách URI miền được phân tách bằng dấu phẩy. "https://news.example.com,https://local.example.com"

Nếu giá trị của thuộc tính data-allowed_parent_origin không hợp lệ, thì quá trình khởi chạy chế độ iframe trung gian sẽ không thành công và dừng lại.

Hệ thống cũng hỗ trợ tiền tố ký tự đại diện. Ví dụ: "https://*.example.com" khớp với example.com và các miền con của nó ở mọi cấp (ví dụ: news.example.com, login.news.example.com). Những điều cần lưu ý khi sử dụng ký tự đại diện:

  • Chuỗi mẫu không được chỉ bao gồm một ký tự đại diện và miền cấp cao nhất. Ví dụ: https://*.comhttps://*.co.uk là không hợp lệ. Như đã lưu ý ở trên, "https://*.example.com" khớp với example.com và các miền con của lớp này. Bạn cũng có thể sử dụng một danh sách được phân tách bằng dấu phẩy để đại diện cho 2 miền khác nhau. Ví dụ: "https://example1.com,https://*.example2.com" khớp với các miền example1.com, example2.com và các miền con của example2.com
  • Miền có ký tự đại diện phải bắt đầu bằng một lược đồ https:// bảo mật, nên "*.example.com" bị coi là không hợp lệ.

data-intermediate_iframe_close_callback

Ghi đè hành vi của iframe trung gian mặc định khi người dùng đóng tính năng Một lần nhấn theo cách thủ công bằng cách nhấn vào nút "X" trong giao diện người dùng Một lần chạm. Hành vi mặc định là xoá iframe trung gian khỏi DOM ngay lập tức.

Trường data-intermediate_iframe_close_callback chỉ có hiệu lực ở chế độ iframe trung gian. Tính năng này chỉ ảnh hưởng đến iframe trung gian, thay vì iframe Một lần chạm. Giao diện người dùng Một lần chạm sẽ bị xoá trước khi gọi lệnh gọi lại.

Loại Bắt buộc Ví dụ:
hàm Không bắt buộc data-intermediate_iframe_close_callback="logBeforeClose"

HTML API không hỗ trợ các hàm JavaScript trong một không gian tên. Thay vào đó, hãy sử dụng hàm JavaScript chung mà không có không gian tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.

Data-itp_support

Trường này xác định xem bạn có nên bật trải nghiệm người dùng bằng một lần chạm đã nâng cấp trên các trình duyệt hỗ trợ tính năng Ngăn chặn theo dõi thông minh (ITP) hay không. Giá trị mặc định là false. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
boolean Không bắt buộc data-itp_support="true"

data-login_hint

Nếu biết trước người dùng nào cần đăng nhập, ứng dụng của bạn có thể cung cấp gợi ý đăng nhập cho Google. Khi thành công, lựa chọn tài khoản sẽ được bỏ qua. Các giá trị được chấp nhận là: địa chỉ email hoặc trường phụ của mã thông báo.

Để biết thêm thông tin, hãy xem tài liệu về OpenID Connect cho login_hint.

Loại Bắt buộc Ví dụ:
Chuỗi. Có thể là địa chỉ email hoặc giá trị trường sub từ mã thông báo mã nhận dạng. Không bắt buộc data-login_hint="elisa.beckett@gmail.com"

data-hd

Khi người dùng có nhiều tài khoản và chỉ nên đăng nhập bằng tài khoản Workspace, hãy sử dụng tính năng này để cung cấp gợi ý về tên miền cho Google. Khi thành công, những tài khoản người dùng hiển thị trong quá trình lựa chọn tài khoản sẽ giới hạn trong miền đã cung cấp. Giá trị ký tự đại diện: * chỉ cung cấp tài khoản Workspace cho người dùng và loại trừ tài khoản người dùng cá nhân (user@gmail.com) trong quá trình lựa chọn tài khoản.

Để biết thêm thông tin, hãy xem tài liệu về OpenID Connect cho hd.

Loại Bắt buộc Ví dụ:
Chuỗi. Tên miền đủ điều kiện hoặc *. Không bắt buộc data-hd="*"

data-use_fedcm_for_prompt

Cho phép trình duyệt kiểm soát lời nhắc đăng nhập của người dùng và dàn xếp quy trình đăng nhập giữa trang web của bạn và Google. Giá trị mặc định là false. Xem trang Di chuyển sang FedCM để biết thêm thông tin.

Loại Bắt buộc Ví dụ:
boolean Không bắt buộc data-use_fedcm_for_prompt="true"

Phần tử có lớp "g_id_signin"

Nếu bạn thêm g_id_signin vào thuộc tính class của một phần tử, thì phần tử đó sẽ hiển thị dưới dạng nút Đăng nhập bằng Google.

Bạn có thể hiển thị nhiều nút Đăng nhập bằng Google trên cùng một trang. Mỗi nút có thể có các chế độ cài đặt hình ảnh riêng. Chế độ cài đặt được xác định bằng các thuộc tính dữ liệu sau đây.

Thuộc tính dữ liệu hình ảnh

Bảng sau đây liệt kê các thuộc tính dữ liệu hình ảnh và nội dung mô tả của các thuộc tính đó:

Thuộc tính
data-type Loại nút: biểu tượng hoặc nút tiêu chuẩn.
data-theme Giao diện của nút. Ví dụ: fill_blue hoặc filled_black.
data-size Kích thước nút. Ví dụ: nhỏ hoặc lớn.
data-text Văn bản của nút. Ví dụ: "Đăng nhập bằng Google" hoặc "Đăng ký bằng Google".
data-shape Hình dạng nút. Ví dụ: hình chữ nhật hoặc hình tròn.
data-logo_alignment Cách căn chỉnh biểu trưng Google: sang trái hoặc chính giữa.
data-width Chiều rộng của nút, tính bằng pixel.
data-locale Văn bản của nút hiển thị bằng ngôn ngữ được đặt trong thuộc tính này.
data-click_listener Nếu bạn đặt chính sách này, hàm này sẽ được gọi khi người dùng nhấp vào nút Đăng nhập bằng Google.

Các loại thuộc tính

Các phần sau đây chứa thông tin chi tiết về từng loại thuộc tính và một ví dụ.

loại dữ liệu

Loại nút. Giá trị mặc định là standard. Hãy xem bảng sau đây để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string data-type="icon"

Bảng sau đây liệt kê các loại nút có sẵn và nội dung mô tả của các loại nút đó:

Loại
standard
Nút có văn bản hoặc thông tin dành riêng cho bạn.
icon
Nút biểu tượng không có văn bản.

giao diện dữ liệu

Giao diện của nút. Giá trị mặc định là outline. Hãy xem bảng sau đây để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-theme="filled_blue"

Bảng sau đây liệt kê các giao diện có sẵn và nội dung mô tả tương ứng:

Giao diện
outline
Một nút tiêu chuẩn có nền trắng Nút biểu tượng có nền trắng Nút được cá nhân hoá với nền trắng
Giao diện tiêu chuẩn của nút.
filled_blue
Một nút tiêu chuẩn có nền màu xanh dương Nút biểu tượng có nền màu xanh dương Nút được cá nhân hoá trên nền màu xanh dương
Giao diện nút có màu xanh dương.
filled_black
Một nút tiêu chuẩn có nền đen Nút biểu tượng có nền màu đen Nút được cá nhân hoá có nền đen
Giao diện nút có màu đen.

data-size

Kích thước nút. Giá trị mặc định là large. Hãy xem bảng sau đây để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-size="small"

Bảng sau đây liệt kê các kích thước nút có sẵn và nội dung mô tả của các kích thước đó.

Kích thước
large
Nút lớn, tiêu chuẩn Nút biểu tượng lớn Nút lớn được cá nhân hoá
Một nút lớn.
medium
Nút tiêu chuẩn trung bình Nút biểu tượng trung bình
Nút có kích thước trung bình.
small
Nút nhỏ Nút biểu tượng nhỏ
Một nút nhỏ.

văn bản dữ liệu

Văn bản của nút. Giá trị mặc định là signin_with. Văn bản của các nút biểu tượng không có điểm khác biệt nào về thuộc tính data-text. Trường hợp ngoại lệ duy nhất là khi văn bản được đọc để hỗ trợ tiếp cận màn hình.

Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-text="signup_with"

Bảng sau đây liệt kê các văn bản nút có sẵn và nội dung mô tả của các văn bản đó:

Văn bản
signin_with
Nút tiêu chuẩn có nhãn &quot;Đăng nhập bằng Google&quot; Nút biểu tượng không có văn bản hiển thị
Văn bản của nút là "Đăng nhập bằng Google".
signup_with
Nút tiêu chuẩn có nhãn &quot;Đăng ký bằng Google&quot; Nút biểu tượng không có văn bản hiển thị
Văn bản của nút là "Đăng ký bằng Google".
continue_with
Nút tiêu chuẩn có nhãn &quot;Tiếp tục bằng Google&quot; Nút biểu tượng không có văn bản hiển thị
Văn bản của nút là "Tiếp tục bằng Google".
signin
Nút tiêu chuẩn có nhãn &#39;Đăng nhập&#39; Nút biểu tượng không có văn bản hiển thị
Văn bản của nút là "Đăng nhập".

hình dạng dữ liệu

Hình dạng nút. Giá trị mặc định là rectangular. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-shape="rectangular"

Bảng sau đây liệt kê các hình dạng nút có sẵn và nội dung mô tả về chúng:

Hình dạng
rectangular
Nút hình chữ nhật tiêu chuẩn Nút biểu tượng hình chữ nhật Nút được cá nhân hoá trong hình chữ nhật
Nút hình chữ nhật. Nếu được sử dụng cho loại nút icon, thì tuỳ chọn này sẽ giống với square.
pill
Nút tiêu chuẩn hình viên thuốc Nút biểu tượng hình viên thuốc Nút được cá nhân hoá hình viên thuốc
Nút hình viên thuốc. Nếu được dùng cho loại nút icon, thì tuỳ chọn này giống với circle.
circle
Nút hình tròn tiêu chuẩn Nút biểu tượng hình tròn Nút hình tròn được cá nhân hoá
Nút hình tròn. Nếu được sử dụng cho loại nút standard, thì nó giống với pill.
square
Nút hình vuông chuẩn Nút biểu tượng hình vuông Nút hình vuông được cá nhân hoá
Nút hình vuông. Nếu được sử dụng cho loại nút standard, thì nó giống với rectangular.

dữ liệu-logo_alignment

Căn chỉnh của biểu trưng Google. Giá trị mặc định là left. Thuộc tính này chỉ áp dụng cho loại nút standard. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-logo_alignment="center"

Bảng sau đây liệt kê các cách căn chỉnh có sẵn và nội dung mô tả của chúng:

logo_alignment
left
Nút tiêu chuẩn có biểu trưng chữ G ở bên trái
Căn trái biểu trưng của Google.
center
Nút tiêu chuẩn có biểu trưng chữ G ở giữa
Căn giữa biểu trưng của Google.

chiều rộng dữ liệu

Chiều rộng tối thiểu của nút, tính bằng pixel. Chiều rộng tối đa hiện có là 400 pixel.

Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-width=400

ngôn ngữ dữ liệu

Không bắt buộc. Hiển thị văn bản nút bằng ngôn ngữ được chỉ định, nếu không, đặt mặc định theo chế độ cài đặt Tài khoản Google hoặc trình duyệt của người dùng. Thêm tham số hl và mã ngôn ngữ vào lệnh src khi tải thư viện, ví dụ: gsi/client?hl=<iso-639-code>.

Nếu bạn không đặt chính sách này, ngôn ngữ mặc định của trình duyệt hoặc lựa chọn ưu tiên của người dùng trong phiên của Google sẽ được sử dụng. Do đó, mỗi người dùng có thể thấy các phiên bản khác nhau của các nút đã bản địa hoá và có thể có kích thước khác nhau.

Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
string Không bắt buộc data-locale="zh_CN"

click_listener

Bạn có thể xác định một hàm JavaScript sẽ được gọi khi nút Đăng nhập bằng Google được nhấp bằng thuộc tính click_listener.

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

Trong ví dụ này, thông báo Đã nhấp vào nút Đăng nhập bằng Google... sẽ được ghi vào bảng điều khiển khi người dùng nhấp vào nút Đăng nhập bằng Google.

Tích hợp phía máy chủ

Điểm cuối phía máy chủ phải xử lý các yêu cầu HTTP POST sau.

Điểm cuối của trình xử lý mã thông báo giá trị nhận dạng

Điểm cuối của trình xử lý mã thông báo giá trị nhận dạng sẽ xử lý mã thông báo giá trị nhận dạng đó. Dựa trên trạng thái của tài khoản tương ứng, bạn có thể đăng nhập cho người dùng và chuyển họ đến trang đăng ký hoặc chuyển họ đến trang liên kết tài khoản để biết thêm thông tin.

Yêu cầu HTTP POST chứa các thông tin sau:

Định dạng Tên Nội dung mô tả
Bánh quy g_csrf_token Một chuỗi ngẫu nhiên thay đổi theo mỗi yêu cầu tới điểm cuối của trình xử lý.
Thông số yêu cầu g_csrf_token Một chuỗi giống với giá trị cookie trước đó, g_csrf_token.
Thông số yêu cầu credential Mã thông báo nhận dạng mà Google cấp.
Thông số yêu cầu select_by Cách hệ thống chọn giấy chứng nhận.

thông tin xác thực

Khi được giải mã, mã thông báo mã nhận dạng sẽ có dạng như ví dụ sau:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

Trường sub là giá trị nhận dạng duy nhất trên toàn cầu cho Tài khoản Google. Chỉ sử dụng trường sub làm giá trị nhận dạng cho người dùng vì trường này là duy nhất trong số tất cả Tài khoản Google và không bao giờ được sử dụng lại. Không sử dụng địa chỉ email làm thông tin nhận dạng vì một Tài khoản Google có thể có nhiều địa chỉ email tại các thời điểm khác nhau.

Khi sử dụng các trường email, email_verifiedhd, bạn có thể xác định xem Google có lưu trữ và có xác thực đối với một địa chỉ email hay không. Trong trường hợp Google có thẩm quyền, người dùng được xác nhận là chủ sở hữu tài khoản hợp pháp.

Những trường hợp mà Google có thẩm quyền:

  • email có hậu tố @gmail.com. Đây là một tài khoản Gmail.
  • email_verified là đúng và hd đã được đặt, đây là tài khoản Google Workspace.

Người dùng có thể đăng ký Tài khoản Google mà không cần sử dụng Gmail hoặc Google Workspace. Khi email không chứa hậu tố @gmail.com và không có hd, Google không có thẩm quyền và bạn nên dùng mật khẩu hoặc các phương thức xác thực khác để xác minh người dùng. email_verfied cũng có thể đúng vì ban đầu Google đã xác minh người dùng khi Tài khoản Google được tạo. Tuy nhiên, quyền sở hữu tài khoản email bên thứ ba có thể đã thay đổi.

Trường exp cho biết thời gian hết hạn để bạn xác minh mã thông báo ở phía máy chủ. Sẽ mất một giờ để mã thông báo mã nhận dạng lấy được từ tính năng Đăng nhập bằng Google. Bạn cần xác minh mã thông báo trước thời gian hết hạn. Đừng sử dụng exp để quản lý phiên. Mã thông báo mã nhận dạng hết hạn không có nghĩa là người dùng đã đăng xuất. Ứng dụng của bạn chịu trách nhiệm quản lý phiên của người dùng.

select_by

Bảng sau đây liệt kê các giá trị có thể có cho trường select_by. Bạn có thể dùng loại nút cùng với phiên hoạt động và trạng thái đồng ý để đặt giá trị,

  • Người dùng nhấn nút Một lần chạm hoặc Đăng nhập bằng Google hoặc sử dụng quy trình Tự động đăng nhập không chạm.

  • Đã tìm thấy một phiên hoạt động hiện có hoặc người dùng được chọn và đăng nhập vào Tài khoản Google để thiết lập một phiên mới.

  • Trước khi chia sẻ thông tin xác thực của mã nhận dạng với ứng dụng của bạn, người dùng phải

    • đã nhấn nút Xác nhận để đồng ý chia sẻ thông tin xác thực, hoặc
    • trước đây đã đồng ý và đã sử dụng tính năng Chọn tài khoản để chọn Tài khoản Google.

Giá trị của trường này sẽ được đặt thành một trong những loại sau,

Giá trị Nội dung mô tả
auto Tự động đăng nhập của một người dùng đang hoạt động nhưng trước đó đã đồng ý chia sẻ thông tin đăng nhập.
user Một người dùng hiện có phiên đồng ý và trước đây đã đồng ý đã nhấn nút "Tiếp tục dưới dạng" bằng một lần nhấn để chia sẻ thông tin đăng nhập.
user_1tap Một người dùng đang tham gia phiên sử dụng đã nhấn nút "Tiếp tục với" bằng một lần nhấn để đồng ý và chia sẻ thông tin xác thực. Chỉ áp dụng cho Chrome phiên bản 75 trở lên.
user_2tap Một người dùng chưa có phiên sử dụng đã nhấn nút "Tiếp tục với" bằng một lần nhấn để chọn một tài khoản, sau đó nhấn nút Xác nhận trong cửa sổ bật lên để đồng ý và chia sẻ thông tin xác thực. Áp dụng cho các trình duyệt không dựa trên Chromium.
btn Một người dùng hiện có phiên đồng ý và trước đây đã đồng ý đã nhấn nút Đăng nhập bằng Google và chọn một Tài khoản Google trong mục "Chọn tài khoản" để chia sẻ thông tin đăng nhập.
btn_confirm Một người dùng đang tham gia một phiên sử dụng đã nhấn nút Đăng nhập bằng Google rồi nhấn nút Xác nhận để đồng ý và chia sẻ thông tin xác thực.
btn_add_session Một người dùng chưa có phiên làm việc trước đây đã đồng ý đã nhấn nút Đăng nhập bằng Google để chọn một Tài khoản Google và chia sẻ thông tin đăng nhập.
btn_confirm_add_session Trước tiên, một người dùng chưa có phiên đăng nhập nào đã nhấn nút Đăng nhập bằng Google để chọn Tài khoản Google, sau đó nhấn nút Xác nhận để đồng ý và chia sẻ thông tin xác thực.

Điểm cuối của trình xử lý thông tin xác thực mật khẩu

Điểm cuối của trình xử lý thông tin xác thực mật khẩu xử lý thông tin xác thực mật khẩu mà trình quản lý thông tin xác thực gốc truy xuất.

Yêu cầu HTTP POST chứa các thông tin sau:

Định dạng Tên Nội dung mô tả
Bánh quy g_csrf_token Một chuỗi ngẫu nhiên thay đổi theo mỗi yêu cầu tới điểm cuối của trình xử lý.
Thông số yêu cầu g_csrf_token Một chuỗi giống với giá trị cookie trước đó, g_csrf_token.
Thông số yêu cầu email Mã thông báo nhận dạng này do Google cấp.
Thông số yêu cầu password Cách hệ thống chọn giấy chứng nhận.