Dịch vụ nhận dạng của Google đang di chuyển sang API FedCM. Làm theo hướng dẫn di chuyển để xem xét những thay đổi có thể xảy ra và tránh tác động tiêu cực đến việc người dùng đăng nhập vào trang web của bạn.

Trang này được dịch bởi Cloud Translation API.

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 này để hiển thị lời nhắc bằng 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 Đăng nhập bằng Google trong bất kỳ phần tử nào hiển thị hoặc ẩn, chẳng hạn như <div> và <span>. Yêu cầu duy nhất là mã nhận dạng phần tử đượ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ả:

Thuộc tính
`data-client_id`	Mã ứng dụng khách của ứng dụng
`data-auto_prompt`	Hiển thị thao tác nhấn vào 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
`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 huỷ lời nhắc nếu người dùng nhấp vào bên ngoài lời nhắc.
`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 nhấn nếu cookie được chỉ định có giá trị không trống.
`data-nonce`	Chuỗi ngẫu nhiên cho mã thông báo nhận dạng
`data-context`	Tiêu đề và từ trong lời nhắc Đăng nhập/Đăng ký bằng 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 giao diện người dùng nhắc
`data-state_cookie_domain`	Nếu bạn cần gọi tính năng Một lần nhấn trong miền mẹ và các miền con của miền đó, hãy truyền miền mẹ đến thuộc tính này để sử dụng một cookie dùng chung.
`data-ux_mode`	Quy trình trải nghiệm người dùng của 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 nhấn 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 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 bằng tính năng Một lần chạm đã nâng cấp trên các trình duyệt ITP.
`data-login_hint`	Bỏ qua lựa chọn tài khoản bằng cách đưa ra 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.
`data-enable_redirect_uri_validation`	Bật quy trình chuyển hướng nút tuân thủ Quy tắc xác thực URI chuyển hướng.

Loại thuộc tính

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

data-client_id

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

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

data-auto_prompt

Thuộc tính này xác định liệu có hiển thị tính năng Một lần chạm hay không. Giá trị mặc định là true. Tính năng nhấn một lần của Google One sẽ không xuất hiện 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"`

data-auto_select

Thuộc tính này xác định việc có tự động trả về mã nhận dạng hay không, mà không cần người dùng tương tác, nếu chỉ có một phiên 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.

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 API Console 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 này, thông tin xác thực sẽ được đăng lên trang này theo mặc định.

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

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ị bạn chỉ định. Bỏ qua khi bạn đặt `data-ux_mode="popup"` và `data-callback`.	`data-login_uri="https://www.example.com/login"`

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

Sau đây là ví dụ về yêu cầ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

data-callback

Thuộc tính này là tên của hàm JavaScript xử lý mã thông báo 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ụ:
chuỗi	Bắt buộc nếu bạn không đặ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_uri và data-callback. Điều này phụ thuộc vào các cấu hình chế độ UX và thành phần sau:

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 sẽ bỏ qua thuộc tính data-callback.
Bạn phải đặt một trong hai thuộc tính này cho Google One Tap và chế độ trải nghiệm người dùng popup của nút Đăng nhập bằng Google. Nếu bạn đặt cả hai, thì thuộc tính data-callback sẽ có mức độ ưu tiên cao hơn.

API HTML không hỗ trợ các hàm JavaScript trong không gian tên. Thay vào đó, hãy sử dụng hàm JavaScript chung không có vùng chứa 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 bằng 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 sử dụng trình quản lý thông tin xác thực gốc khi không có phiên hoạt động trên Google. Bạn không được phép đặt cả thuộc tính data-native_callback và data-native_login_uri. Hãy xem bảng sau để biết thêm thông tin:

Loại	Bắt buộc	Ví dụ:
chuỗi	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 bằng 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ì thư viện JavaScript sẽ quay lại sử dụng trình quản lý thông tin xác thực gốc khi không có phiên hoạt động trên Google. Bạn không được phép đặt cả data-native_callback và data-native_login_uri. Hãy xem bảng sau để biết thêm thông tin:

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

API HTML không hỗ trợ các hàm JavaScript trong không gian tên. Thay vào đó, hãy sử dụng một hàm JavaScript toàn cục 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 đặt xem có huỷ yêu cầu Một lần nhấn hay không nếu người dùng nhấp vào bên ngoài lời nhắc. 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 mã nhận dạng DOM của phần tử vùng chứa. Nếu bạn không đặt, lời nhắc Một lần nhấn sẽ xuất hiện ở 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ụ:
chuỗi	Không bắt buộc	`data-prompt_parent_id="parent_id"`

data-skip_prompt_cookie

Thuộc tính này sẽ bỏ qua tính năng Một lần nhấn 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ụ:
chuỗi	Không bắt buộc	`data-skip_prompt_cookie="SID"`

data-nonce

Thuộc tính này là một chuỗi ngẫu nhiên mà mã thông báo 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ụ:
chuỗi	Không bắt buộc	`data-nonce="biaqbm70g23"`

Độ dài 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 hạn chế về kích thước HTTP của trình duyệt và máy chủ riêng lẻ.

data-context

Thuộc tính này thay đổi văn bản của tiêu đề và tin nhắn xuất hiện trong lời nhắc 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ụ:
chuỗi	Không bắt buộc	`data-context="use"`

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

Ngữ cảnh
`signin`	"Đăng nhập bằng Google"
`signup`	"Đăng ký bằng Google"
`use`	"Sử dụng với Google"

khoảnh khắc_gọi lại cho dữ liệu

Thuộc tính này là tên hàm của trình nghe thông báo trạng thái giao diện người dùng. Để 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ụ:
chuỗi	Không bắt buộc	`data-moment_callback="logMomentNotification"`

data-state_cookie_domain

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à các 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. Hãy xem bảng sau để biết thêm thông tin:

Loại	Bắt buộc	Ví dụ:
chuỗi	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 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ụ:
chuỗi	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 có sẵn và nội dung mô tả các chế độ đó.

Chế độ trải nghiệm người dùng
`popup`	Thực hiện quy trình trải nghiệm người dùng đăng nhập trong một 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 cách chuyển hướng toàn 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 nhấn 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 đây để 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ả về các loại giá trị đó.

Các kiểu giá trị
`string`	Một URI miền duy nhất.	"https://example.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 tính năng Một lần nhấn của chế độ iframe trung gian sẽ không thành công và dừng lại.

Tiền tố ký tự đại diện cũng được hỗ trợ. Ví dụ: "https://*.example.com" khớp với example.com và các miền con của miề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 ký tự đại diện và miền cấp cao nhất. Ví dụ: https://*.com và https://*.co.uk 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 nó. Bạn cũng có thể sử dụng danh sách được phân tách bằng dấu phẩy để biểu thị 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à miền con của example2.com
Miền ký tự đại diện phải bắt đầu bằng giao thức https:// an toàn, vì vậy, "*.example.com" được coi là không hợp lệ.

data-intermediate_iframe_close_callback

Ghi đè hành vi 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 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á ngay iframe trung gian khỏi DOM.

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

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

API HTML không hỗ trợ các hàm JavaScript trong vùng chứa tên. Thay vào đó, hãy sử dụng một hàm JavaScript toàn cục 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 có nên bật trải nghiệm người dùng một lần chạm đã nâng cấp trên các trình duyệt có 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"`

gợi_ý_đăng_nhập_dữ_liệu

Nếu biết trước người dùng nào sẽ đă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 sub của mã thông báo nhận dạng.

Để 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ị của 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"`

dữ liệu 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 thông tin này để cung cấp gợi ý tên miền cho Google. Khi thành công, các tài khoản người dùng hiển thị trong quá trình chọn tài khoản sẽ bị giới hạn ở 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 tiêu dùng (user@gmail.com) trong quá trình chọn tài khoản.

Để biết thêm thông tin, hãy xem tài liệu về ID Mở Kết nối 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. Hãy 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"`

data-enable_redirect_uri_validation

Bật quy trình chuyển hướng nút tuân thủ Quy tắc xác thực URI chuyển hướng.

Loại	Bắt buộc	Ví dụ:
boolean	Không bắt buộc	`data-enable_redirect_uri_validation="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ó chế độ cài đặt hình ảnh riêng. Các chế độ cài đặt này do các thuộc tính dữ liệu sau xác định.

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 nút. Ví dụ: filled_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: trái hoặc 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 được đặt, 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.
`data-state`	Nếu được đặt, chuỗi này sẽ trả về cùng với mã thông báo mã nhận dạng.

Loại thuộc tính

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

data-type

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

Loại	Bắt buộc	Ví dụ:
chuỗi	Có	`data-type="icon"`

Bảng sau đây liệt kê tất cả các loại nút hiện có và mô tả về các loại nút đó:

Loại
`standard`	Một nút có văn bản hoặc thông tin được cá nhân hoá.
`icon`	Nút biểu tượng không có văn bản.

data-theme

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

Loại	Bắt buộc	Ví dụ:
chuỗi	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:

Chủ đề
`outline`	Giao diện chuẩn của nút.
`filled_blue`	Giao diện của nút được tô màu xanh dương.
`filled_black`	Giao diện nút có màu đen.

kích thước dữ liệu

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

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

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

Kích thước
`large`	Một nút lớn.
`medium`	Một nút có kích thước trung bình.
`small`	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. Không có sự khác biệt về hình ảnh giữa văn bản của các nút biểu tượng có thuộc tính data-text khác nhau. Trường hợp ngoại lệ duy nhất là khi văn bản được đọc cho tính năng 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ụ:
chuỗi	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 hiện có và nội dung mô tả của các văn bản đó:

Văn bản
`signin_with`	Văn bản của nút là "Đăng nhập bằng Google".
`signup_with`	Nội dung nút là "Đăng ký bằng Google".
`continue_with`	Văn bản của nút là "Tiếp tục bằng Google".
`signin`	Văn bản của nút là "Đăng nhập".

data-shape

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ụ:
chuỗi	Không bắt buộc	`data-shape="rectangular"`

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

Hình dạng
`rectangular`	Nút có hình chữ nhật. Nếu được dùng cho loại nút `icon`, thì giá trị này sẽ giống với `square`.
`pill`	Nút có hình viên thuốc. Nếu được dùng cho loại nút `icon`, thì thuộc tính này sẽ giống như `circle`.
`circle`	Nút hình tròn. Nếu được dùng cho loại nút `standard`, thì thuộc tính này sẽ giống như `pill`.
`square`	Nút hình vuông. Nếu được dùng cho loại nút `standard` thì nút này cũng giống như `rectangular`.

data-logo_alignment

Cách căn chỉnh 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ụ:
chuỗi	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ả về các cách đó:

logo_alignment
`left`	Căn trái biểu trưng Google.
`center`	Căn giữa biểu trưng Google.

data-width

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

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

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

data-locale

Không bắt buộc. Hiển thị văn bản nút bằng ngôn ngữ đã chỉ định, nếu không, hãy đặt mặc định là Tài khoản Google của người dùng hoặc chế độ cài đặt trình duyệt. 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 giá trị này, thì 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 trên Google sẽ được sử dụng. Do đó, người dùng có thể thấy các phiên bản nút được bản địa hoá khác nhau 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ụ:
chuỗi	Không bắt buộc	`data-locale="zh_CN"`

trình nghe_nhấp_vào_dữ_liệu

Bạn có thể xác định một hàm JavaScript để gọi khi người dùng nhấp vào nút Đăng nhập bằng Google bằng thuộc tính data-click_listener.

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

Trong ví dụ này, thông báo Nút Đăng nhập bằng Google đã được nhấp... 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.

data-state

Không bắt buộc, vì nhiều nút Đăng nhập bằng Google có thể hiển thị trên cùng một trang, nên bạn có thể gán mỗi nút bằng một chuỗi duy nhất. Cùng một chuỗi đó sẽ trả về cùng với mã thông báo mã nhận dạng, vì vậy, bạn có thể xác định nút mà người dùng đã nhấp vào để đăng nhập.

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

Loại	Bắt buộc	Ví dụ:
chuỗi	Không bắt buộc	`data-state="button 1"`

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

Các điểm cuối phía máy chủ của bạn phải xử lý các yêu cầu POST HTTP sau đây.

Đ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 nhận dạng sẽ xử lý mã thông báo 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ướng họ đến trang đăng ký hoặc trang liên kết tài khoản để biết thêm thông tin.

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

Định dạng	Tên	Mô tả
Cookie	`g_csrf_token`	Một chuỗi ngẫu nhiên thay đổi theo từng yêu cầu đến điểm cuối của trình xử lý.
Yêu cầu tham số	`g_csrf_token`	Một chuỗi giống với giá trị cookie trước đó, `g_csrf_token`.
Tham số yêu cầu	`credential`	Mã thông báo mã nhận dạng mà Google cấp.
Yêu cầu tham số	`select_by`	Cách hệ thống chọn thông tin xác thực.
Yêu cầu tham số	`state`	Tham số này chỉ được xác định khi người dùng nhấp vào nút Đăng nhập bằng Google để đăng nhập và thuộc tính `state` của nút được chỉ định.

giấy chứng nhận

Khi được giải mã, mã thông báo 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 tất cả Tài khoản Google và không bao giờ được sử dụng lại. Đừng sử dụng địa chỉ email làm giá trị 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.

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

Các trường hợp Google là nguồn thông tin chính xác:

email có hậu tố @gmail.com, đây là 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 sẽ không có thẩm quyền và bạn nên sử dụng mật khẩu hoặc các phương thức thử thách khác để xác minh người dùng. email_verified cũng có thể đúng vì Google ban đầu đã xác minh người dùng khi tạo Tài khoản Google, tuy nhiên, quyền sở hữu tài khoản email bên thứ ba có thể đã thay đổi kể từ đó.

Trường exp cho thấy thời gian hết hạn để bạn xác minh mã thông báo ở phía máy chủ. Thời gian này là một giờ đối với mã thông báo nhận dạng thu đượ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 khi hết hạn. Đừng sử dụng exp để quản lý phiên. Mã thông báo 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. Hệ thống sẽ dùng loại nút dùng cùng với trạng thái phiên 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 cần chạm.
Tìm thấy một phiên hiện có hoặc người dùng đã chọn và đăng nhập vào một 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 mã thông báo nhận dạng với ứng dụng, người dùng
- nhấn vào nút Xác nhận để đồng ý chia sẻ thông tin xác thực, hoặc
- đã đồng ý và sử dụng tính năng Chọn một tài khoản để chọn Tài khoản Google.

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

Giá trị	Mô tả
`auto`	Tự động đăng nhập cho người dùng có phiên hoạt động hiện tại và trước đó đã đồng ý chia sẻ thông tin xác thực. Chỉ áp dụng cho các trình duyệt không hỗ trợ FedCM.
`user`	Một người dùng có phiên hoạt động hiện tại và đã đồng ý trước đó nhấn vào nút "Tiếp tục dưới dạng" trong tính năng Một lần nhấn để chia sẻ thông tin xác thực. Chỉ áp dụng cho các trình duyệt không được hỗ trợ FedCM.
`fedcm`	Một người dùng đã nhấn nút "Tiếp tục bằng tài khoản" Một lần chạm để chia sẻ thông tin đăng nhập bằng FedCM. Chỉ áp dụng cho các trình duyệt được hỗ trợ FedCM.
`fedcm_auto`	Tự động đăng nhập cho người dùng có phiên hiện tại và đã đồng ý chia sẻ thông tin xác thực bằng tính năng FedCM One Tap. Chỉ áp dụng cho các trình duyệt được hỗ trợ của FedCM.
`user_1tap`	Một người dùng có phiên đang hoạt động đã nhấn vào nút "Tiếp tục dưới dạng" trong tính nă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 không có phiên hiện tại đã nhấn vào nút "Tiếp tục dưới dạng" trong tính năng Một lần nhấn để chọn một tài khoản, sau đó nhấn vào 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 có phiên hiện tại đã đồng ý trước đó nhấn vào nút Đăng nhập bằng Google rồi chọn một Tài khoản Google trong phần "Chọn tài khoản" để chia sẻ thông tin xác thực.
`btn_confirm`	Một người dùng có phiên hiện tại đã nhấn vào nút Đăng nhập bằng Google rồi nhấn vào 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 không có phiên hiện tại và trước đó đã đồ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 xác thực.
`btn_confirm_add_session`	Trước tiên, một người dùng chưa có phiên hoạt động đã nhấn nút Đăng nhập bằng Google để chọn một Tài khoản Google rồi nhấn nút Xác nhận để đồng ý và chia sẻ thông tin đăng nhập.

tiểu bang

Thông số này chỉ được xác định khi người dùng nhấp vào nút Đăng nhập bằng Google để đăng nhập và thuộc tính data-state của nút đã nhấp được chỉ định. Giá trị của trường này giống với giá trị mà bạn đã chỉ định trong thuộc tính data-state của nút.

Vì có thể hiển thị nhiều nút Đăng nhập bằng Google trên cùng một trang, nên bạn có thể gán cho mỗi nút một chuỗi duy nhất. Do đó, bạn có thể sử dụng tham số state này để xác định nút mà người dùng đã nhấp để đăng nhập.

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

Điểm cuối của trình xử lý thông tin xác thực bằng mật khẩu xử lý thông tin xác thực bằng 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 có chứa các thông tin sau:

Định dạng	Tên	Mô tả
Cookie	`g_csrf_token`	Một chuỗi ngẫu nhiên thay đổi theo từng yêu cầu đến điểm cuối của trình xử lý.
Yêu cầu tham số	`g_csrf_token`	Một chuỗi giống với giá trị cookie trước đó, `g_csrf_token`.
Tham số yêu cầu	`email`	Mã thông báo nhận dạng do Google phát hành.
Tham số yêu cầu	`password`	Cách chọn thông tin xác thực.