Đăng nhập bằng API JavaScript của Google

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

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

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

google.accounts.id.initialize(IdConfiguration)

Mã ví dụ sau đây sẽ triển khai phương thức google.accounts.id.initialize bằng một 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 ngầm.

• 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 (như Một lần nhấn, nút 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ỉ các cấu hình trong lệnh gọi cuối cùng mới được ghi nhớ và sử dụng.

Bạn sẽ thực sự đặt lại các cấu hình bất cứ khi nào bạn 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ẽ sử dụng các cấu hình mới ngay lập tức.

Loại dữ liệu: IdConfiguration

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

Trường
client_id	ID ứng dụng khách của ứng dụng của bạn
auto_select	Bật chế độ chọn tự động.
callback	Hàm JavaScript xử lý mã thông báo. Google One Tap và nút Đăng nhập bằng Google Chế độ trải nghiệm người dùng popup 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 Chế độ trải nghiệm người dùng redirect sử dụng thuộc tính này.
native_callback	Hàm JavaScript xử lý thông tin xác thực cho 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ã DOM của phần tử vùng chứa lời nhắc Một lần nhấn
nonce	Một chuỗi ngẫu nhiên cho mã thông báo mã nhận dạng
context	Tiêu đề và từ trong lời nhắc Một lần nhấn
state_cookie_domain	Nếu bạn cần gọi One Tap trong miền gốc và các miền con của miền đó, hãy chuyển miền gốc sang trường này để sử dụng một cookie dùng chung.
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	Nguồn gốc được phép nhúng iframe trung gian. Một lần nhấn sẽ chạy ở chế độ iframe trung gian nếu trường này hiển thị.
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.
itp_support	Cho phép nâng cấp trải nghiệm người dùng bằng một lần nhấn trên trình duyệt ITP.

client_id

Trường này là mã ứng dụng khách của ứng dụng của bạn, mã này được tìm thấy và tạo trong Google Developers 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"

tự_động_chọn

Trường này xác định liệu mã thông báo mã nhận dạng có được tự động trả về mà không có bất kỳ tương tác nào của người dùng hay không khi chỉ có một phiê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

cuộc gọi lại

Trường này là hàm JavaScript xử lý mã thông báo mã được trả về từ lời nhắc Một lần nhấn hoặc cửa sổ bật lên. Thuộc tính này là bắt buộc nếu bạn sử dụng Google One Tap hoặc nút Đăng nhập bằng Google popup ở chế độ Trải nghiệm người dùng. 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 một lần nhấn và chế độ trải nghiệm người dùng popup	callback: handleResponse

đăng_nhập_uri

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

Phản hồi thông tin xác thực mã thông báo ID được đăng vào đ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à sử dụng chế độ trải nghiệm người dùng chuyển hướ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ỉ sử dụng khi bạn đặt ux_mode: "redirect".	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 với giá trị mã thông báo mã nhận dạng trong phần nội dung.

Sau đây là yêu cầu mẫu cho điểm cuối đăng nhập:

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

credential=ID_TOKEN

gọi lại_gốc

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 gốc 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

hủy_trong_tap_bên ngoài

Trường này đặt xem có hủy 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. Bạn có thể vô hiệu hoá 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

lời_lời_cho_cha_mẹ

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 chính sách này, thì 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 sử dụng bởi mã thông báo ID để 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 được 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ẻ.

bối cảnh

Trường này thay đổi văn bản của tiêu đề và thông báo trong lời nhắc Một lần nhấ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	context: "use"

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

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

trạng thái_cookie_miền

Nếu bạn cần hiển thị One Tap trong miền gốc và các miền con của miền đó, hãy chuyển miền gốc vào trường này để sử dụng cookie trạng thái được chia 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	state_cookie_domain: "example.com"

chế độ ux_mode

Dùng trường 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 của OneTap. 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 có sẵn và nội dung mô tả của các chế độ đó.

Chế độ trải nghiệm người dùng
popup	Thực hiện quy trình 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 đăng nhập bằng lệnh chuyển hướng toàn trang.

kích_hình_làm_gốc

Nguồn gốc được phép nhúng iframe trung gian. Một lần nhấn sẽ chạy ở chế độ iframe trung gian nếu trường này hiển thị. 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ả.

Loại giá trị
string	Một URI miền.	"https://vidu.com"
string array	Một mảng URI miền.	["https://news.example.com", "https://local.example.com"]

Tiền tố ký tự đại diện cũng được hỗ trợ. Ví dụ: "https://*.example.com" sẽ 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ỉ chứa 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" sẽ khớp với example.com và các miền con của miền đó. Bạn cũng có thể sử dụng một mảng để đại diện cho 2 miền khác nhau. Ví dụ: ["https://example1.com", "https://*.example2.com"] sẽ khớp với các miền example1.com, example2.com và các miền con của example2.com
• Miền ký tự đại diện phải bắt đầu bằng một lược đồ https:// an toàn. "*.example.com" sẽ bị 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 Một lần nhấn của chế độ iframe trung gian sẽ không thành công và dừng lại.

trung gian_ iframe_đóng_lệnh gọi lại

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 intermediate_iframe_close_callback chỉ có hiệu lực ở chế độ iframe trung gian. Và nó chỉ tác động đến iframe trung gian, thay vì iframe Một lần nhấn. Giao diện người dùng bằ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	intermediate_iframe_close_callback: logBeforeClose

Hỗ trợ Itp_

Trường này xác định xem bạn có muốn bật trải nghiệm người dùng 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

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

Phương thức google.accounts.id.prompt cho thấy lời nhắc Một lần nhấn hoặc trình quản lý thông tin gốc của trình duyệt sau khi phương thức initialize() được gọi. Hãy xem ví dụ về mã của phương thức sau đâ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 hoạt động và chế độ cài đặt người dùng ở phía Google, giao diện người dùng nhận lời nhắc Một lần nhấn có thể không hiển thị. Để nhận thông báo về trạng thái giao diện người dùng cho nhiều thời điểm, hãy chuyể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 được kích hoạt vào những khoảnh khắc sau:

• Khoảnh khắc hiển thị: Quá trình này xảy ra sau khi phương thức prompt() được gọi. Thông báo chứa 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: Điều này xảy ra khi lời nhắc Một lần nhấn bị đóng bởi tính năng tự động huỷ, huỷ thủ công hoặc khi Google không cấp được thông tin xác thực, 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 các nhà cung cấp danh tính tiếp theo, nếu có.

• Khoảnh khắc bị loại bỏ: Điều này xảy ra khi Google truy xuất thành công thông tin xác thực hoặc người dùng muốn dừng quy trình truy xuất thông tin xác thực. Ví dụ: khi người dùng bắt đầu nhập tên người dùng và mật khẩu của họ vào 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 một khoảnh khắc bị loại bỏ.

Mã ví dụ 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ả về loại dữ liệu PromptMomentNotification:

Phương thức
isDisplayMoment()	Thông báo này có xuất hiện trong lúc màn hình không?
isDisplayed()	Thông báo này có hiển thị và giao diện người dùng có hiển thị không?
isNotDisplayed()	Thông báo này có xuất hiện trong giây lát và giao diện người dùng không hiển thị không?
getNotDisplayedReason()	Lý do chi tiết khiến giao diện người dùng không hiển thị. Dưới đây là các giá trị có thể: browser_not_supported invalid_client missing_client_id opt_out_or_no_session secure_http_required suppressed_by_user unregistered_origin unknown_reason
isSkippedMoment()	Thông báo này có xuất hiện trong giây lát không?
getSkippedReason()	Lý do chi tiết cho thời điểm bị bỏ qua. Dưới đây là các giá trị có thể: auto_cancel user_cancel tap_outside issuing_failed
isDismissedMoment()	Thông báo này có phải về thời điểm bị loại bỏ không?
getDismissedReason()	Lý do chi tiết về việc loại bỏ. Dưới đây là các giá trị có thể: credential_returned cancel_called flow_restarted
getMomentType()	Trả về một chuỗi cho loại khoảnh khắc. Dưới đây là các giá trị có thể: display skipped dismissed

Loại dữ liệu: CredentialResponse

Khi hàm callback đượ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 xác thực:

Trường
credential	Trường này là mã thông báo mã nhận dạng được trả về.
select_by	Trường này đặt cách thông tin xác thực được chọn.

giấy chứng nhận

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

Khi được giải mã, JWT trông giố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 chứa giá trị nhận dạng duy nhất trên toàn cầu cho Tài khoản Google.

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 hiện được biết là chủ sở hữu tài khoản hợp pháp.

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

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

Người dùng có thể đăng ký Tài khoản Google mà không cần sử dụng Gmail hoặc G Suite. Khi email không chứa hậu tố @gmail.com và không có hd, thì Google không có thẩm quyền và mật khẩu hoặc các phương thức xác thực khác được đề xuất để 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 của bên thứ ba có thể đã thay đổi kể từ đó.

chọn_theo

Bảng sau đây liệt kê các giá trị có thể là của trường select_by. Loại nút sử dụng cùng vớ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 nhấn hoặc Đăng nhập bằng Google hoặc sử dụng quy trình Đăng nhập tự động không 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 Tài khoản Google để thiết lập phiên mới.

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

  • đã nhấn vào nút Xác nhận để cho phép họ chia sẻ thông tin xác thực, hoặc
  • trước đây đã đồng ý và sử dụ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 này,

Giá trị	Mô tả
auto	Đăng nhập tự động đối với người dùng hiện có phiên đã đồng ý chia sẻ thông tin xác thực.
user	Một người dùng hiện có một phiên sử dụng đã đồng ý sẽ nhấn vào nút "Tiếp tục với tên" để chia sẻ thông tin xác thực.
user_1tap	Một người dùng hiện có một phiên nhấn vào nút "Tiếp tục với tên" để cấp quyền và chia sẻ thông tin xác thực. Chỉ áp dụng cho Chrome phiên bản 75 trở lên.
user_2tap	Một người dùng chưa có phiên nào sẽ nhấn vào nút "Tiếp tục với tư cách" để chọn một tài khoản rồi nhấn nút Xác nhận trong cửa sổ bật lên để đồng ý và chia sẻ thông tin xác thực. Áp dụng cho các trình duyệt không dựa trên Chromium.
btn	Một người dùng hiện có một phiên sử dụng đã đồng ý đã nhấn 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 xác thực.
btn_confirm	Một người dùng hiện có một phiên đã nhấn nút Đăng nhập bằng Google rồi nhấn nút Xác nhận để đồng ý và chia sẻ thông tin xác thực.
btn_add_session	Một người dùng hiện không có phiên nào trước đây đã đồng ý đã nhấn nút Đăng nhập bằng Google để chọn một Tài khoản Google và chia sẻ thông tin xác thực.
btn_confirm_add_session	Trước tiên, người dùng chưa có phiên đăng nhập sẽ 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 xác thực.

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

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

Hãy xem ví dụ về mã của phương thức sau đâ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 loại 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 của nút. Ví dụ như fill_blue hoặc fill_black.
size	Kích thước nút. Ví dụ: nhỏ hoặc lớn.
text	Văn bản của 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	Căn chỉnh biểu trưng của Google: bên trái hoặc ở giữa.
width	Chiều rộng 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 bạn đặt chính sách này, hệ thống sẽ gọi hàm này khi người dùng nhấp vào nút Đăng nhập bằng Google.

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

Các phần sau chứa thông tin chi tiết về loại thuộc tính và 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 có sẵn và nội dung mô tả:

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

chủ đề

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	theme: "filled_blue"

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

Chủ đề
outline	Giao diện của nút tiêu chuẩn:
filled_blue	Giao diện nút có màu xanh dương:
filled_black	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 có sẵn và nội dung mô tả:

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

văn bản

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 đối với văn bản của các nút biểu tượng có các thuộc tính text khác nhau. Trường hợp ngoại lệ duy nhất là khi hệ thống đọc văn bản để 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ê các văn bản nút có sẵn và mô tả tương ứng:

Văn bản
signin_with	Văn bản của nút này là “Sign in with Google” (Đăng nhập bằng Google):
signup_with	Văn bản của 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”:

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	shape: "rectangular"

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

Hình dạng
rectangular	Nút hình chữ nhật. Nếu bạn sử dụng loại nút này cho icon, thì nút này sẽ giống với square.
pill	Nút hình viên thuốc. Nếu bạn sử dụng loại nút này cho icon, thì nút này sẽ giống với circle.
circle	Nút hình tròn. Nếu bạn sử dụng loại nút này cho standard, thì nút này sẽ giống với pill.
square	Nút hình vuông. Nếu bạn sử dụng loại nút này cho standard, thì nút này sẽ giống với rectangular.

căn chỉnh biểu trưng

Căn chỉnh của biểu trưng của 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ê những cách căn chỉnh có sẵn và nội dung mô tả:

căn chỉnh biểu trưng
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 nút tối thiểu, 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ữ

Ngôn ngữ được đặt trước của văn bản nút. Nếu bạn không đặt chính sách này, ngôn ngữ mặc định của trình duyệt hoặc lựa chọn ưu tiên của người dùng phiên Google sẽ được sử dụng. Do đó, người dùng khác nhau có thể thấy các phiên bản khác nhau của nút đã bản địa hóa và có thể với cá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"

list_listener

Bạn có thể xác định 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 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ụ trên, 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.

Loại dữ liệu: Thông tin xác thực

Khi hàm native_callback đượ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, 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 giúp ngăn chặn việc lặp lại. Xem đoạn mã sau đây của phương thức:

google.accounts.id.disableAutoSelect()

Mã ví dụ sau đây sẽ triển khai phương thức google.accounts.id.disableAutoSelect bằng một 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 đơn giản cho phương thức store() của API trình quản lý thông tin xác thực gốc của trình duyệt. Do đó, bạn chỉ có thể dùng thông tin này để lưu thông tin xác thực mật khẩu. Hãy xem ví dụ về mã của phương thức sau đây:

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

Mã ví dụ sau đây sẽ triển khai phương thức google.accounts.id.storeCredential bằng một 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ỷ luồng Một lần nhấn nếu xoá lời nhắc khỏi DOM của bên phụ thuộc. Thao tác huỷ sẽ bị bỏ qua nếu bạn đã chọn một thông tin xác thực. Hãy xem ví dụ về mã trong phương thức sau:

google.accounts.id.cancel()

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

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

Lệnh gọi lại tải thư viện: onGoogleLibraryLoad

Bạn có thể đăng ký lệnh gọi lại onGoogleLibraryLoad. Bạn sẽ nhận được thông báo sau khi tải thư viện JavaScript Đăng nhập bằng Google:

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. Hành vi sẽ không khác biệt.

Ví dụ về mã sau đây triển khai 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 sử dụng OAuth dùng để chia sẻ mã thông báo mã nhận dạng cho người dùng đã chỉ định. Xem đoạn mã sau của phương thức: google.accounts.id.revoke(hint, callback)

Thông số	Loại	Mô tả
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ã này là thuộc tính sub của gói dữ liệu thông tin xác thực.
callback	hàm	Trình xử lý RevocationResponse tùy chọn.

Mã mẫu sau đây cho biết cách sử dụng phương thức revoke với 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 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 thông báo phản hồi lỗi chi tiết (không bắt buộc).

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 khi không thực hiện được.

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, thì trường này chưa được xác định khi thành công.