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

Tài liệu tham khảo API JavaScript của Google Đăng nhập bằng Google

Trang tham khảo này mô tả Sign-In JavaScript API. Bạn có thể dùng API này để hiển thị lời nhắc One Tap hoặc nút Đăng nhập bằng Google trên các trang web của mình.

Phương thức: google.accounts.id.initialize

Phương thức google.accounts.id.initialize khởi chạy ứng dụng khách Đăng nhập bằng Google dựa trên đối tượng cấu hình. Hãy xem ví dụ về mã sau đây của phương thức:

google.accounts.id.initialize(IdConfiguration)

Ví dụ về mã sau đây triển khai phương thức google.accounts.id.initialize bằng hàm onload:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

Phương thức google.accounts.id.initialize tạo một phiên bản ứng dụng Đăng nhập bằng Google mà tất cả các mô-đun trong cùng một trang web có thể sử dụng một cách ngầm ẩn.

Bạn chỉ cần gọi phương thức google.accounts.id.initialize một lần ngay cả khi sử dụng nhiều mô-đun (chẳng hạn như One Tap, nút được cá nhân hoá, thu hồi, v.v.) trong cùng một trang web.
Nếu bạn gọi phương thức google.accounts.id.initialize nhiều lần, thì chỉ những cấu hình trong lệnh gọi cuối cùng được ghi nhớ và sử dụng.

Bạn thực sự đặt lại cấu hình bất cứ khi nào gọi phương thức google.accounts.id.initialize và tất cả các phương thức tiếp theo trong cùng một trang web sẽ ngay lập tức sử dụng cấu hình mới.

Loại dữ liệu: IdConfiguration

Bảng sau đây liệt kê các trường và nội dung mô tả của kiểu dữ liệu IdConfiguration:

Trường
`client_id`	Mã ứng dụng khách của ứng dụng
`auto_select`	Cho phép tự động chọn.
`callback`	Hàm JavaScript xử lý mã nhận dạng. Chế độ trải nghiệm người dùng `popup` của tính năng Google Một lần chạm và nút Đăng nhập bằng Google sử dụng thuộc tính này.
`login_uri`	URL của điểm cuối đăng nhập. Nút Đăng nhập bằng Google `redirect` ở chế độ trải nghiệm người dùng sử dụng thuộc tính này.
`native_callback`	Hàm JavaScript xử lý thông tin xác thực mật khẩu.
`cancel_on_tap_outside`	Huỷ lời nhắc nếu người dùng nhấp vào bên ngoài lời nhắc.
`prompt_parent_id`	Mã nhận dạng DOM của phần tử vùng chứa lời nhắc One Tap
`nonce`	Một chuỗi ngẫu nhiên cho mã nhận dạng
`context`	Tiêu đề và các từ trong lời nhắc Đăng nhập bằng một lần chạm
`state_cookie_domain`	Nếu bạn cần gọi tính năng Đăng nhập bằng một lần nhấn trong miền chính và các miền con của miền đó, hãy truyền miền chính vào trường này để sử dụng một cookie dùng chung duy nhất.
`ux_mode`	Quy trình trải nghiệm người dùng của nút Đăng nhập bằng Google
`allowed_parent_origin`	Các nguồn gốc được phép nhúng iframe trung gian. One Tap sẽ chạy ở chế độ iframe trung gian nếu trường này xuất hiện.
`intermediate_iframe_close_callback`	Ghi đè hành vi mặc định của iframe trung gian khi người dùng đóng One Tap theo cách thủ công.
`itp_support`	Bật UX Một lần chạm đã nâng cấp trên các trình duyệt ITP.
`login_hint`	Bỏ qua bước chọn tài khoản bằng cách cung cấp gợi ý cho người dùng.
`hd`	Giới hạn lựa chọn tài khoản theo miền.
`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 chỉnh quy trình đăng nhập giữa trang web của bạn và Google.
`use_fedcm_for_button`	Trường này xác định xem có nên sử dụng UX 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`.
`button_auto_select`	Có bật lựa chọn tự động chọn cho quy trình nút FedCM hay không. Nếu được bật, những người dùng cũ có phiên hoạt động trên Google sẽ tự động đăng nhập mà không cần phải qua lời nhắc Trình chọn tài khoản.Giá trị mặc định là `false`.

client_id

Trường 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ó	`client_id: "CLIENT_ID.apps.googleusercontent.com"`

auto_select

Trường này xác định xem mã nhận dạng (ID) có được tự động trả về mà không cần người dùng tương tác hay không khi chỉ có một phiên hoạt động trên Google đã phê duyệt ứng dụng của bạn trước đó. 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	`auto_select: true`

callback

Trường này là hàm JavaScript xử lý mã nhận dạng người dùng do lời nhắc Đăng nhập bằng một lần nhấn hoặc cửa sổ bật lên trả về. Bạn phải dùng thuộc tính này nếu sử dụng chế độ trải nghiệm người dùng popup của nút Đăng nhập bằng Google hoặc Google One Tap. Hãy xem bảng sau để biết thêm thông tin:

Loại	Bắt buộc	Ví dụ:
hàm	Bắt buộc đối với tính năng Đăng nhập bằng một lần nhấn và chế độ trải nghiệm người dùng `popup`	`callback: handleResponse`

login_uri

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

Giá trị 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 Google Cloud 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 đó, 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 nhận dạng được đăng lên điểm cuối đăng nhập của bạn khi người dùng nhấp vào nút Đăng nhập bằng Google và chế độ UX chuyển hướng được sử dụ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. Chỉ được dùng khi bạn đặt `ux_mode: "redirect"`.	`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 có chứa tham số credential với giá trị mã nhận dạng trong phần nội dung.

native_callback

Trường này là tên của hàm JavaScript xử lý thông tin xác thực mật khẩu do trình quản lý thông tin xác thực tích hợp sẵn của trình duyệt trả về. Hãy xem bảng sau để biết thêm thông tin:

Loại	Bắt buộc	Ví dụ:
hàm	Không bắt buộc	`native_callback: handleResponse`

cancel_on_tap_outside

Trường này đặt xem có huỷ yêu cầu Đăng nhập bằng 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. Bạn có thể tắt tính năng này nếu đặ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	`cancel_on_tap_outside: false`

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 chưa đặ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	`prompt_parent_id: 'parent_id'`

nonce

Trường này là một chuỗi ngẫu nhiên được mã thông báo nhận dạng 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	`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 hạn chế về kích thước HTTP của từng trình duyệt và máy chủ.

bối cảnh

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 Đăng nhập bằng một lần nhấn, không ảnh hưởng đến các 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	`context: "use"`

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

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

state_cookie_domain

Nếu bạn cần hiển thị tính năng Đăng nhập bằng một lần nhấn trong miền gốc và các miền con của miền đó, hãy truyền miền gốc vào trường 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ụ:
chuỗi	Không bắt buộc	`state_cookie_domain: "example.com"`

ux_mode

Sử dụng trường 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 One Tap. 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	`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ế độ UX
`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 bộ trang.

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 có trường này. 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	`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://example.com"`
`string array`	Một mảng URI miền.	`["https://news.example.com", "https://local.example.com"]`

Tiền tố có 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ả các miền phụ của miền đó. 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à các miền con của example2.com
Các miền ký tự đại diện phải bắt đầu bằng một giao thức https:// an toàn, vì vậy "*.example.com" được coi là không hợp lệ.

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

intermediate_iframe_close_callback

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

Trường 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 Đăng nhập bằng một lần nhấn. 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	`intermediate_iframe_close_callback: logBeforeClose`

itp_support

Trường này xác định xem có nên bật UX Một lần nhấn đã 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	`itp_support: true`

login_hint

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 một gợi ý đăng nhập cho Google. Nếu thành công, bước 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 giá trị trường sub của mã thông báo nhận dạng.

Để biết thêm thông tin, hãy xem trường login_hint trong tài liệu OpenID Connect.

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

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 dùng tham số này để cung cấp gợi ý về tên miền cho Google. Khi thành công, các tài khoản người dùng xuất hiện trong quá trình chọn tài khoản sẽ bị giới hạn trong 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 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 trường hd trong tài liệu OpenID Connect.

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	`hd: '*'`

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 bắt buộc	`use_fedcm_for_prompt: true`

use_fedcm_for_button

Trường này xác định xem có nên sử dụng UX 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	`use_fedcm_for_button: true`

button_auto_select

Trường này xác định có bật lựa chọn tự động chọn cho quy trình nút FedCM hay không. Nếu được bật, những người dùng cũ có phiên hoạt động trên Google sẽ tự động đăng nhập mà không cần phải 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 khởi chạy 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	`button_auto_select: true`

Phương thức: google.accounts.id.prompt

Phương thức google.accounts.id.prompt sẽ hiển thị lời nhắc Đăng nhập bằng một lần nhấn hoặc trình quản lý thông tin đăng nhập tích hợp sẵn của trình duyệt sau khi phương thức initialize() được gọi. Hãy xem ví dụ về mã sau đây của phương thức này:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

Thông thường, phương thức prompt() được gọi khi tải trang. Do trạng thái phiên và chế độ cài đặt người dùng ở phía Google, giao diện người dùng của lời nhắc Đăng nhập bằng một lần nhấn có thể không xuất hiện. Để nhận thông báo về trạng thái giao diện người dùng tại các thời điểm khác nhau, hãy truyền một hàm để nhận thông báo về trạng thái giao diện người dùng.

Thông báo sẽ được gửi vào những thời điểm sau:

Thời điểm hiển thị: Thời điểm này xảy ra sau khi phương thức prompt() được gọi. Thông báo này chứa một giá trị boolean cho biết giao diện người dùng có hiển thị hay không.
Khoảnh khắc bị bỏ qua: Trường hợp này xảy ra khi lời nhắc Đăng nhập bằng một lần nhấn bị đóng do tính năng tự động huỷ, huỷ theo cách thủ công hoặc khi Google không phát hành được thông tin đăng nhập, chẳng hạn như khi phiên đã chọn đã đăng xuất khỏi Google.

Trong những trường hợp này, bạn nên tiếp tục chuyển sang nhà cung cấp danh tính tiếp theo (nếu có).
Thời điểm bị loại bỏ: Trường hợp này xảy ra khi Google truy xuất thành công một thông tin đăng nhập hoặc người dùng muốn dừng quy trình truy xuất thông tin đăng nhập. Ví dụ: khi người dùng bắt đầu nhập tên người dùng và mật khẩu trong hộp thoại đăng nhập, bạn có thể gọi phương thức google.accounts.id.cancel() để đóng lời nhắc Một lần nhấn và kích hoạt thời điểm bị đóng.

Cảnh báo: Khi ở một thời điểm bị bỏ qua, đừng thử bất kỳ nhà cung cấp danh tính nào tiếp theo.

Ví dụ về mã sau đây triển khai khoảnh khắc bị bỏ qua:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

Loại dữ liệu: PromptMomentNotification

Bảng sau đây liệt kê các phương thức và nội dung mô tả của kiểu dữ liệu PromptMomentNotification:

Phương thức
`isDisplayMoment()`	Thông báo này có phải là thông báo cho một khoảnh khắc hiển thị không? Lưu ý: Khi FedCM được bật, thông báo này sẽ không được kích hoạt. Hãy xem trang Di chuyển sang FedCM để biết thêm thông tin.
`isDisplayed()`	Thông báo này có phải là thông báo cho một thời điểm hiển thị và giao diện người dùng được hiển thị không? Lưu ý: Khi FedCM được bật, thông báo này sẽ không được kích hoạt. Hãy xem trang Di chuyển sang FedCM để biết thêm thông tin.
`isNotDisplayed()`	Thông báo này có phải dành cho một thời điểm hiển thị và giao diện người dùng không hiển thị không? Lưu ý: Khi FedCM được bật, thông báo này sẽ không được kích hoạt. Hãy xem trang Di chuyển sang FedCM để biết thêm thông tin.
`getNotDisplayedReason()`	Lý do chi tiết khiến giao diện người dùng không hiển thị. Sau đây là các giá trị có thể có: `browser_not_supported` `invalid_client` `missing_client_id` `opt_out_or_no_session` `secure_http_required` `suppressed_by_user` `unregistered_origin` `unknown_reason` Lưu ý: Khi FedCM được bật, phương thức này sẽ không được hỗ trợ. Hãy xem trang Di chuyển sang FedCM để biết thêm thông tin.
`isSkippedMoment()`	Thông báo này có phải là về một khoảnh khắc bị bỏ qua không?
`getSkippedReason()`	Lý do chi tiết cho khoảnh khắc bị bỏ qua. Sau đây là các giá trị có thể có: `auto_cancel` `user_cancel` `tap_outside` `issuing_failed` Lưu ý: Khi FedCM được bật, phương thức này sẽ không được hỗ trợ. Hãy xem trang Di chuyển sang FedCM để biết thêm thông tin.
`isDismissedMoment()`	Thông báo này có phải là về một khoảnh khắc đã bị loại bỏ không?
`getDismissedReason()`	Lý do chi tiết cho việc loại bỏ. Sau đây là các giá trị có thể có: `credential_returned` `cancel_called` `flow_restarted`
`getMomentType()`	Trả về một chuỗi cho loại khoảnh khắc. Sau đây là các giá trị có thể có: `display` `skipped` `dismissed`

Loại dữ liệu: CredentialResponse

Khi hàm callback của bạn được gọi, một đối tượng CredentialResponse sẽ được truyền dưới dạng tham số. Bảng sau đây liệt kê các trường có trong đối tượng phản hồi thông tin đăng nhập:

Trường
`credential`	Mã thông báo JWT ID được mã hoá mà Google phát hành.
`select_by`	Cách người dùng đăng nhập.
`state`	Trường 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

Trường này là mã nhận dạng người dùng dưới dạng chuỗi mã thông báo cho trang web theo chuẩn JSON (JWT) được mã hoá base64.

Khi được giải mã, JWT 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": "Elisa",
  "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 dùng lại.

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ó quyền đối với một địa chỉ email hay không. Trong trường hợp Google là nguồn đáng tin cậy, 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 xác thực:

email có hậu tố @gmail.com, đây là Tài khoản Gmail.
email_verified là true 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à hd không có, Google không phải là nguồn đáng tin cậy 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 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à 1 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 thời gian hiệu lực. Khô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. Loại nút được dùng cùng với trạng thái phiên và trạng thái đồng ý được dù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.
Hệ thống 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 đăng nhập mã thông báo nhận dạng với ứng dụng của bạn, người dùng có thể
- nhấn nút Xác nhận để đồng ý chia sẻ thông tin đăng nhập, hoặc
- trước đây đã đồng ý và sử dụng tính năng Chọn một tài khoản để chọn một 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 người dùng có phiên hiện tại và trước đó đã đồng ý chia sẻ thông tin đăng nhập. 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 hiện tại đã từng đồng ý nhấn nút "Tiếp tục với" của tính năng Đăng nhập một lần để chia sẻ thông tin đăng nhập. Chỉ áp dụng cho các trình duyệt không hỗ trợ FedCM.
`fedcm`	Người dùng nhấn vào nút "Tiếp tục với" của tính năng Đăng nhập bằng một lần nhấn để chia sẻ thông tin xác thực bằng FedCM. Chỉ áp dụng cho các trình duyệt hỗ trợ FedCM.
`fedcm_auto`	Tự động đăng nhập người dùng có phiên hiện tại và trước đó đã đồng ý chia sẻ thông tin đăng nhập bằng FedCM One Tap. Chỉ áp dụng cho các trình duyệt hỗ trợ FedCM.
`user_1tap`	Một người dùng có phiên hiện tại đã nhấn vào nút "Tiếp tục với" của tính năng Đăng nhập một lần để đồng ý và chia sẻ thông tin đăng nhập. 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 với" của tính năng Đăng nhập một lầ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 đăng nhập. Áp dụng cho các trình duyệt không dựa trên Chromium.
`itp`	Một người dùng có phiên hiện tại đã cấp sự đồng ý trước đó nhấn vào tính năng Đăng nhập bằng một lần nhấn trên trình duyệt ITP.
`itp_confirm`	Một người dùng có phiên hiện tại đã nhấn vào tính năng Đăng nhập bằng một lần chạm trên trình duyệt ITP và nhấn vào nút Xác nhận để đồng ý và chia sẻ thông tin đăng nhập.
`itp_add_session`	Một người dùng không có phiên hiện tại và trước đây đã đồng ý nhấn vào tính năng Đăng nhập bằng một lần nhấn trên trình duyệt ITP để chọn một Tài khoản Google và chia sẻ thông tin đăng nhập.
`itp_confirm_add_session`	Người dùng chưa có phiên hiện tại trước tiên nhấn vào One Tap trên trình duyệt ITP để chọn một Tài khoản Google, sau đó nhấn vào nút Xác nhận để đồng ý và chia sẻ thông tin đăng nhập.
`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 và chọn một Tài khoản Google trong phần "Chọn tài khoản" để chia sẻ thông tin đăng nhập.
`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 và nhấn vào nút Xác nhận để đồng ý và chia sẻ thông tin đăng nhập.
`btn_add_session`	Người dùng chưa có phiên hiện tại và trước đó đã đồng ý nhấn vào 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`	Người dùng chưa có phiên hiện tại trước tiên nhấn nút Đăng nhập bằng Google để chọn một Tài khoản Google, sau đó nhấn nút Xác nhận để đồng ý và chia sẻ thông tin đăng nhập.

tiểu bang

Trường 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 đã 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 state của nút.

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 duy nhất. Do đó, bạn có thể dùng trường state này để xác định nút mà người dùng đã nhấp vào để đăng nhập.

Phương thức: google.accounts.id.renderButton

Phương thức google.accounts.id.renderButton hiển thị nút Đăng nhập bằng Google trên các trang web của bạn.

Hãy xem ví dụ về mã sau đây của phương thức này:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Loại dữ liệu: GsiButtonConfiguration

Bảng sau đây liệt kê các trường và nội dung mô tả của kiểu dữ liệu GsiButtonConfiguration:

Thuộc tính
`type`	Loại nút: biểu tượng hoặc nút tiêu chuẩn.
`theme`	Giao diện nút. Ví dụ: filled_blue hoặc filled_black.
`size`	Kích thước nút. Ví dụ: nhỏ hoặc lớn.
`text`	Văn bản trên nút. Ví dụ: "Đăng nhập bằng Google" hoặc "Đăng ký bằng Google".
`shape`	Hình dạng nút. Ví dụ: hình chữ nhật hoặc hình tròn.
`logo_alignment`	Vị trí căn chỉnh biểu trưng của Google: bên trái hoặc ở giữa.
`width`	Chiều rộng của nút, tính bằng pixel.
`locale`	Nếu được đặt, ngôn ngữ của nút sẽ được hiển thị.
`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.
`state`	Nếu được đặt, chuỗi này sẽ trả về cùng với mã thông báo nhận dạng.

Các 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ụ.

loại

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ó	`type: "icon"`

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

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

chủ đề

Giao diện 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	`theme: "filled_blue"`

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

Chủ đề
`outline`	Một giao diện nút tiêu chuẩn.
`filled_blue`	Giao diện nút có màu xanh dương.
`filled_black`	Một giao diện nút có màu đen.

size

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	`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 chúng:

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 bản

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 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	`text: "signup_with"`

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

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

hình dạng

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	`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ả của chúng:

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ì thuộc tính này giống như `square`.
`pill`	Nút có hình viên thuốc. Nếu được dùng cho loại nút `icon`, thì giá trị này giống như `circle`.
`circle`	Nút có hình tròn. Nếu được dùng cho loại nút `standard`, thì thuộc tính này giống như `pill`.
`square`	Nút có hình vuông. Nếu được dùng cho loại nút `standard`, thì thuộc tính này giống như `rectangular`.

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	`logo_alignment: "center"`

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

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

chiều rộng

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	`width: "400"`

ngôn ngữ

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ệ thống sẽ mặc định sử dụng Tài khoản Google hoặc chế độ cài đặt trình duyệt của người dùng. Thêm tham số hl và mã ngôn ngữ vào chỉ thị 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ì hệ thống sẽ sử dụng 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 Google. Do đó, mỗi người dùng có thể thấy các phiên bản nút đã 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	`locale: "zh_CN"`

click_listener

Bạn có thể xác định một hàm JavaScript sẽ được 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 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 Sign in with Google button clicked... (Đã nhấp vào nút Đăng nhập bằng Google...) đượ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.

tiểu bang

Không bắt buộc, vì bạn 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ể chỉ định cho mỗi nút một chuỗi riêng biệt. Cùng một chuỗi sẽ trả về cùng với mã thông báo nhận dạng, vì vậy, bạn có thể xác định người dùng đã nhấp vào nút nà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"`

Loại dữ liệu: Thông tin đăng nhập

Khi hàm native_callback của bạn được gọi, một đối tượng Credential sẽ được truyền dưới dạng tham số. Bảng sau đây liệt kê các trường có trong đối tượng:

Trường
`id`	Xác định người dùng.
`password`	Mật khẩu

Phương thức: google.accounts.id.disableAutoSelect

Khi người dùng đăng xuất khỏi trang web của bạn, bạn cần gọi phương thức google.accounts.id.disableAutoSelect để ghi lại trạng thái trong cookie. Điều này ngăn chặn vòng lặp không hoạt động của trải nghiệm người dùng. Hãy xem đoạn mã sau đây của phương thức này:

google.accounts.id.disableAutoSelect()

Ví dụ về mã sau đây triển khai phương thức google.accounts.id.disableAutoSelect bằng hàm onSignout():

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Phương thức: google.accounts.id.storeCredential

Phương thức này là một trình bao bọc cho phương thức store() của API trình quản lý thông tin đăng nhập tích hợp sẵn của trình duyệt. Do đó, bạn chỉ có thể dùng đối tượng này để lưu trữ thông tin đăng nhập bằng mật khẩu. Hãy xem ví dụ về mã sau đây của phương thức này:

google.accounts.id.storeCredential(Credential, callback)

Ví dụ về mã sau đây triển khai phương thức google.accounts.id.storeCredential bằng hàm onSignIn():

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Phương thức: google.accounts.id.cancel

Bạn có thể huỷ quy trình Đăng nhập bằng một lần nhấn nếu xoá lời nhắc khỏi DOM của bên xác thực. Thao tác huỷ sẽ bị bỏ qua nếu bạn đã chọn một thông tin đăng nhập. Hãy xem ví dụ về mã sau đây của phương thức này:

google.accounts.id.cancel()

Ví dụ về mã sau đây triển khai phương thức google.accounts.id.cancel() bằng hàm onNextButtonClicked():

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

Phương thức gọi lại khi tải thư viện: onGoogleLibraryLoad

Bạn có thể đăng ký một lệnh gọi lại onGoogleLibraryLoad. Thông báo này xuất hiện sau khi thư viện JavaScript Đăng nhập bằng Google được tải:

window.onGoogleLibraryLoad = () => {
    ...
};

Lệnh gọi lại này chỉ là một lối tắt cho lệnh gọi lại window.onload. Không có sự khác biệt về hành vi.

Ví dụ về đoạn mã sau đây triển khai một lệnh gọi lại onGoogleLibraryLoad:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Phương thức: google.accounts.id.revoke

Phương thức google.accounts.id.revoke thu hồi quyền truy cập OAuth được dùng để chia sẻ mã nhận dạng người dùng cho người dùng được chỉ định. Hãy xem đoạn mã sau đây của phương thức: javascript google.accounts.id.revoke(login_hint, callback)

Thông số	Loại	Mô tả
`login_hint`	chuỗi	Địa chỉ email hoặc mã nhận dạng duy nhất của Tài khoản Google của người dùng. Mã nhận dạng là thuộc tính `sub` của tải trọng credential.
`callback`	hàm	Trình xử lý RevocationResponse không bắt buộc.

Mã mẫu sau đây cho biết cách sử dụng phương thức revoke bằng một mã nhận dạng.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Loại dữ liệu: RevocationResponse

Khi hàm callback của bạn được gọi, một đối tượng RevocationResponse sẽ được truyền dưới dạng tham số. Bảng sau đây liệt kê các trường có trong đối tượng phản hồi thu hồi:

Trường
`successful`	Trường này là giá trị trả về của lệnh gọi phương thức.
`error`	Trường này có thể chứa một thông báo phản hồi lỗi chi tiết.

thành công

Trường này là một giá trị boolean được đặt thành true nếu lệnh gọi phương thức thu hồi thành công hoặc false nếu không thành công.

error

Trường này là một giá trị chuỗi và chứa thông báo lỗi chi tiết nếu lệnh gọi phương thức thu hồi không thành công, trường này không xác định khi thành công.

Tài liệu tham khảo API JavaScript của Google Đăng nhập bằng Google 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ương thức: google.accounts.id.initialize

Loại dữ liệu: IdConfiguration

client_id

auto_select

callback

login_uri

native_callback

cancel_on_tap_outside

prompt_parent_id

nonce

bối cảnh

state_cookie_domain

ux_mode

allowed_parent_origin

intermediate_iframe_close_callback

itp_support

login_hint

hd

use_fedcm_for_prompt

use_fedcm_for_button

button_auto_select

Phương thức: google.accounts.id.prompt

Loại dữ liệu: PromptMomentNotification

Loại dữ liệu: CredentialResponse

giấy chứng nhận

select_by

tiểu bang

Phương thức: google.accounts.id.renderButton

Loại dữ liệu: GsiButtonConfiguration

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

loại

chủ đề

size

văn bản

hình dạng

logo_alignment

chiều rộng

ngôn ngữ

click_listener

tiểu bang

Loại dữ liệu: Thông tin đăng nhập

Phương thức: google.accounts.id.disableAutoSelect

Phương thức: google.accounts.id.storeCredential

Phương thức: google.accounts.id.cancel

Phương thức gọi lại khi tải thư viện: onGoogleLibraryLoad

Phương thức: google.accounts.id.revoke

Loại dữ liệu: RevocationResponse

thành công

error

Tài liệu tham khảo API JavaScript của Google Đăng nhập bằng Google