Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Tài liệu tham khảo về Sign in with 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, dùng để hiển thị nút Đăng nhập bằng Google hoặc lời nhắc Một lần chạm trên các trang web.

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 vào 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ử 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 kèm theo nội dung mô tả:

Thuộc tính
`data-client_id`	Mã ứng dụng khách của ứng dụng
`data-color_scheme`	Bảng phối màu áp dụng cho lời nhắc của tính năng Một lần chạm.
`data-auto_prompt`	Hiển thị tính năng Một lần nhấn của Google.
`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 xử lý mã thông báo mã nhận dạng JavaScript
`data-native_login_uri`	URL của điểm cuối trình xử lý thông tin đăng nhập bằng mật khẩu
`data-native_callback`	Tên hàm 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 hay không 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 One Tap
`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 nhận dạng
`data-essential_claims`	Các thông báo xác nhận quyền sở hữu bổ sung cần đưa vào mã thông báo giá trị nhận dạng do Google trả về.
`data-context`	Tiêu đề và từ ngữ trong lời nhắc của tính năng Đăng nhập 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 của câu lệnh
`data-state_cookie_domain`	Nếu bạn cần gọi tính năng Một lần chạm 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 duy nhất.
`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 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 iframe trung gian mặc định khi người dùng đóng One Tap 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 chọn tài khoản bằng cách cung cấp gợi ý về 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`	Không dùng nữa: Thuộc tính này không còn được dùng nữa và sẽ bị bỏ qua nếu được sử dụng. 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à điều chỉnh quy trình đăng nhập giữa trang web của bạn và Google.
`data-use_fedcm_for_button`	Trường này xác định xem có nên sử dụng trải nghiệm người dùng nút FedCM trên Chrome hay không (máy tính M125 trở lên và Android M128 trở lên). Giá trị mặc định là `false`.
`data-button_auto_select`	Có bật tuỳ chọn tự động chọn cho quy trình nút FedCM hay không. Nếu bạn bật tính năng này, người dùng cũ có phiên hoạt động trên Google sẽ tự động được đăng nhập mà không cần thông qua lời nhắc của Trình chọn tài khoản. Giá trị mặc định là `false`.

Loại thuộc tính

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

data-client_id

Thuộc tính này là mã ứng dụng khách 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-color_scheme

Trường này là bảng phối màu được áp dụng cho lời nhắc của tính nă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. Giá trị mặc định là bảng phối màu theo giá trị mặc định của hệ thống người dùng.	`data-color_scheme="dark"`

Bảng sau đây liệt kê các bảng phối màu hiện có và nội dung mô tả về các bảng phối màu đó.

Phối màu
`default`	Áp dụng bảng phối màu mặc định của hệ thống của người dùng, tuỳ thuộc vào bảng phối màu mà người dùng ưu tiên là sáng hay tối.
`light`	Áp dụng bảng phối màu sáng.
`dark`	Áp dụng bảng phối màu tối.

data-auto_prompt

Thuộc tính này xác định 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 Đăng nhập bằng một lần chạm của Google 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 xem có tự động trả về mã thông báo giá trị 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 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 Nền tảng xác thực của Google và phải tuân thủ 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 đăng nhập 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 giá trị 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 callback 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 nút Một lần chạm, hoặc khi quá trình đăng nhập tự động diễn ra.

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

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

data-callback

Thuộc tính này là tên của hàm JavaScript xử lý mã thông báo giá trị 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 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_uri và data-callback. Điều này 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.
Bạn phải đặt một trong hai thuộc tính này cho chế độ trải nghiệm người dùng popup của tính năng Đăng nhập bằng một lần chạm của Google và 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 một không gian tên. Thay vào đó, hãy sử dụng hàm JavaScript chung không có không gian tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.

Hàm callback được truyền một đối tượng CredentialResponse dưới dạng tham số. Hãy xem CredentialResponse để biết thông tin chi tiết về các giá trị phản hồi có thể có.

data-native_login_uri

Thuộc tính này là URL của điểm cuối trình xử lý thông tin đăng nhập 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ì thư viện JavaScript sẽ quay lại trình quản lý thông tin xác thực tích hợp sẵn khi không có phiên Google. Bạn không được phép đặt cả hai 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 mật khẩu được trả về từ trình quản lý thông tin xác thực tích hợp sẵn 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 trình quản lý thông tin xác thực tích hợp sẵn khi không có phiên hoạt động nào 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"`

data-native_id_param

Khi gửi thông tin đăng nhập bằng mật khẩu đến điểm cuối của trình xử lý thông tin đăng nhập bằng 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 đăng nhập bằng mật khẩu đến điểm cuối của trình xử lý thông tin đăng nhập bằng 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 việc có huỷ yêu cầu Một lần chạm 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ã DOM của phần tử vùng chứa. Nếu bạn không đặt thuộc tính này, lời nhắc của tính năng Một lần chạm 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

Sử dụng cookie để kiểm soát việc hiển thị lời nhắc Đăng nhập bằng một lần chạm. Nếu cookie được chỉ định bởi thuộc tính này có giá trị không trống, thì lời nhắc sẽ không 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	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 được mã thông báo giá trị 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 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 quy định ràng buộc về kích thước HTTP của từng trình duyệt và máy chủ.

data-essential_claims

Thuộc tính này là một chuỗi dùng để yêu cầu thêm các thông báo xác nhận quyền sở hữu vào mã thông báo giá trị nhận dạng do Google trả về. Để xem danh sách đầy đủ các tuyên bố được Google chấp nhận, hãy xem bài viết về các tuyên bố được hỗ trợ.

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-essential_claims="auth_time, amr"`

bối cảnh dữ liệu

Trường này thay đổi văn bản của tiêu đề và thông báo xuất hiện trong lời nhắc của tính năng Một lần chạm, không ảnh hưởng đến trình duyệt ITP. Giá trị mặc định là signin.

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ả bối cảnh hiện có và nội dung mô tả về các bối cảnh đó:

Ngữ cảnh
`signin`	"Đăng nhập vào"
`signup`	"Đăng ký"
`use`	"Sử dụng"

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 giao diện người dùng của 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ụ
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 nhấn trong một 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 trạng thái chia sẻ duy nhất. 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 đặt 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 của tính nă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 hiện có và nội dung mô tả về 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 cửa sổ bật lên.
`redirect`	Thực hiện quy trình trải nghiệm người dùng khi đă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. One Tap 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ả về các loại giá trị đó.

Loại 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 chạm 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 này ở 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à một miền cấp cao nhất. Ví dụ: https://.com và https://.co.uk không hợp lệ vì "https://.example.com" khớp với example.com và tất cả miền con của miền này. Sử dụng danh sách được phân tách bằng dấu phẩy để biểu thị hai miền khác nhau. Ví dụ: "https://example1.com,https://.example2.com" khớp với 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 One Tap 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 One Tap. 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. Và điều này chỉ ảnh hưởng đến iframe trung gian, thay vì iframe của tính năng 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 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"`

data-itp_support

Trường này xác định xem có nên bật trải nghiệm người dùng Đăng nhập 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="false"`

data-login_hint

Nếu ứng dụng của bạn biết trước người dùng nào nên đăng nhập, thì ứng dụng đó có thể cung cấp gợi ý đăng nhập cho Google. Khi thành công, bước chọn tài khoản sẽ bị 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 giá trị 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ị trường `sub` từ mã thông báo giá trị 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ài khoản này để cung cấp gợi ý về tên miền cho Google. Khi thành công, 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 được cung cấp. Giá trị ký tự đại diện: * chỉ cung cấp tài khoản Workspace cho người dùng tài khoản và loại trừ tài khoản người dùng cá nhân (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ề 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à điều phối 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 được dùng nữa	`data-use_fedcm_for_prompt="true"`

data-use_fedcm_for_button

Trường này xác định xem có nên sử dụng trải nghiệm người dùng nút FedCM trên Chrome (máy tính M125 trở lên và Android M128 trở lên) 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-use_fedcm_for_button="true"`

data-button_auto_select

Trường này xác định xem có bật tuỳ chọn tự động chọn cho quy trình nút FedCM hay không. Nếu bạn bật tính năng này, người dùng cũ có phiên hoạt động trên Google sẽ tự động được đăng nhập mà không cần thông qua lời nhắc của Trình chọn tài khoản. Giá trị mặc định là false. Bạn cần bật rõ ràng tính năng tự động đăng nhập bằng nút trong quá trình ra mắt tính năng chọn sử dụng. 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-button_auto_select="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 được xác định bằng các thuộc tính dữ liệu sau.

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ả:

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ụ: 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 trên 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 sẽ 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 giá trị nhận dạng.

Loại thuộc tính

Các phần sau đây trình bày thông tin chi tiết về từng loại thuộc tính và 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à nội dung 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`	Một nút biểu tượng không có văn bản.

data-theme

Giao diện 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 hiện có và nội dung mô tả về các giao diện đó:

Giao diện	Mẫu	Thông số kỹ thuật
`outline`	Giao diện nút chuẩn.	Tô màu: #FFFFFF Nét vẽ: #747775 \| 1px \| bên trong Phông chữ: #1F1F1F \| Roboto Medium \| 14/20 Cá nhân hoá: #1F1F1F \| Roboto \| Medium 12/14 \| Regular 11/13
`filled_blue`	Giao diện nút màu xanh dương.	Tô: #0B57D0 Nét: #OB57D0 \| 1px \| bên trong Phông chữ: #FFFFFF \| Google Sans Medium \| 14/20 Cá nhân hoá: #FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13
`filled_black`	Giao diện nút màu đen với biểu trưng tương phản.	Tô màu: #202124 Nét vẽ: #OB57D0 \| 1px \| bên trong Phông chữ: #FFFFFF \| Google Sans Medium \| 14/20 Cá nhân hoá: #FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13
`outline_dark`	Giao diện nút có màu đen.	Tô: #131314 Nét: #8E918F \| 1px \| bên trong Phông chữ: #FFFFFF \| Google Sans Medium \| 14/20 Cá nhân hoá: #FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13

data-size (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ả về các kích thước đó.

Kích thước
`large`	Một nút lớn.
`medium`	Nút có kích thước trung bình.
`small`	Một nút nhỏ.

data-text

Văn bản trên nút. Giá trị mặc định là signin_with. Không có sự khác biệt về hình ảnh đối với 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 để 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ả:

Văn bản
`signin_with`	Văn bản trên nút là "Đăng nhập bằng Google".
`signup_with`	Văn bản trên nút là "Đăng ký bằng Google".
`continue_with`	Văn bản trên nút là "Tiếp tục bằng Google".
`signin`	Văn bản trên 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 hình chữ nhật. Nếu được dùng cho loại nút `icon`, thì giá trị này giống với `square`.
`pill`	Nút hình viên thuốc. Nếu được dùng cho loại nút `icon`, thì nút này sẽ giống với `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 với `pill`.
`square`	Nút hình vuông. Nếu được dùng cho loại nút `standard`, thì thuộc tính này sẽ giống với `rectangular`.

data-logo_alignment

Vị trí 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ụ
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 hiện có và nội dung mô tả:

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 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 trên nút bằng ngôn ngữ được chỉ định, nếu không thì mặc định là Tài khoản Google hoặc các chế độ cài đặt của 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, 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 hoạt động trên Google sẽ được sử dụng. Do đó, những người dùng khác nhau 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"`

data-click_listener

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 cách sử dụ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 Đã 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.

data-state

Không bắt buộc, vì nhiều nút Đăng nhập bằng Google có thể được hiển thị trên cùng một trang, nên bạn có thể chỉ định cho mỗi nút một chuỗi riêng biệt. Chuỗi này sẽ được trả về cùng với mã thông báo giá trị nhận dạng để 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ủ

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

Điểm cuối của trình xử lý mã thông báo 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 trang liên kết tài khoản để biết thêm thông tin. Ứng dụng khách PHẢI bỏ qua các tham số phản hồi không nhận dạng được.

Ví dụ về yêu cầu gửi đến điểm cuối đăng nhập:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

Yêu cầu HTTP POST chứa 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 mỗi yêu cầu đến điểm cuối đăng nhập do `data-login_uri` chỉ định, phải khớp với giá trị trong tham số yêu cầu `g_csrf_token`.
Tham số yêu cầu	`g_csrf_token`	Một chuỗi ngẫu nhiên thay đổi theo mỗi yêu cầu đến điểm cuối đăng nhập do `data-login_uri` chỉ định, phải khớp với giá trị của cookie `g_csrf_token`.
Tham số yêu cầu	`credential`	Mã thông báo mã nhận dạng JWT được mã hoá mà Google phát hành.
Tham số yêu cầu	`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 giá trị 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 Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "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 creation time
  "exp": 1596477600, // Unix timestamp of the assertion expiration time
  "jti": "abc161803398874def"
}

Ứng dụng PHẢI bỏ qua các thông báo xác nhận quyền sở hữu JWT không nhận dạng được.

Trường sub là giá trị nhận dạng riêng biệ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.

Khi 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ó thẩm quyền đố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 hợp pháp của tài khoản.

Các trường hợp Google có thẩm quyền:

email có hậu tố @gmail.com, đây là tài khoản Gmail.
email_verified là true và hd được đặt, đây là một 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 sử 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_verified cũng có thể đúng vì Google ban đầu đã 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 kể từ đó.

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ủ. Thời gian này là một giờ đối với mã thông báo giá trị nhận dạng có đượ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 mã thông báo hết hạn. Đừng sử dụng exp để quản lý phiên. Mã thông báo giá trị 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.

g_csrf_token

Mã thông báo trạng thái chống giả mạo. Đây là mã thông báo Giả mạo yêu cầu trên nhiều trang web (CSRF) do thư viện gsi/client tạo. Một giá trị ngẫu nhiên được đưa vào cả Cookie và Tham số yêu cầu trong phần nội dung tải trọng POST. Nếu hai giá trị này không khớp nhau khi xử lý yêu cầu trên máy chủ, thì yêu cầu đó sẽ được coi là không hợp lệ.

tiểu bang

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 data-state của nút được nhấp vào được chỉ định. Giá trị của trường này giống với giá trị bạn đã chỉ định trong thuộc tính data-state của nút.

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ể chỉ định cho mỗi nút một chuỗi riêng biệ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 vào để đăng nhập.

Điểm cuối của trình xử lý thông tin đăng nhập 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 sẽ 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 tích hợp sẵn truy xuất.

Yêu cầu HTTP POST chứa 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 mỗi yêu cầu đến điểm cuối đăng nhập do `data-native_login_uri` chỉ định, phải khớp với giá trị trong tham số yêu cầu `g_csrf_token`.
Tham số yêu cầu	`g_csrf_token`	Một chuỗi ngẫu nhiên thay đổi theo mỗi yêu cầu đến điểm cuối đăng nhập do `data-native_login_uri` chỉ định, phải khớp với giá trị của cookie `g_csrf_token`.
Tham số yêu cầu	`email`	Mã thông báo nhận dạng này do Google phát hành.
Tham số yêu cầu	`password`	Cách chọn thông tin xác thực.

Tài liệu tham khảo về Sign in with Google HTML API Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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

Thuộc tính dữ liệu

Loại thuộc tính

data-client_id

data-color_scheme

data-auto_prompt

data-auto_select

data-login_uri

data-callback

data-native_login_uri

data-native_callback

data-native_id_param

data-native_password_param

data-cancel_on_tap_outside

data-prompt_parent_id

data-skip_prompt_cookie

data-nonce

data-essential_claims

bối cảnh dữ liệu

data-moment_callback

data-state_cookie_domain

data-ux_mode

data-allowed_parent_origin

data-intermediate_iframe_close_callback

data-itp_support

data-login_hint

data-hd

data-use_fedcm_for_prompt

data-use_fedcm_for_button

data-button_auto_select

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

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

Loại thuộc tính

data-type

data-theme

data-size (kích thước dữ liệu)

data-text

data-shape

data-logo_alignment

data-width

data-locale

data-click_listener

data-state

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

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

giấy chứng nhận

g_csrf_token

tiểu bang

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

Tài liệu tham khảo về Sign in with Google HTML API