Trang tham khảo này mô tả API JavaScript Đăng nhập. Bạn có thể sử dụng API này để hiển thị lời nhắc bằng một lần chạm hoặc nút Đăng nhập bằng Google trên trang web của mình.
Phương thức: google.accounts.id.initiated
Phương thức google.accounts.id.initialize
sẽ khởi chạy ứ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ã 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 thực thể ứ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 bạn sử dụng nhiều mô-đun (như Một lần chạm, 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ỉ các cấu hình trong lệnh gọi gần đây nhất mới được ghi nhớ và sử dụng.
Bạn thực sự đặt lại cấu hình mỗi khi 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ấ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ả của loại dữ liệu IdConfiguration
:
Trường | |
---|---|
client_id |
Mã ứng dụng khách của ứng dụng |
auto_select |
Bật tính năng tự động chọn. |
callback |
Hàm JavaScript xử lý mã thông báo nhận dạng. Google One Tap và chế độ trải nghiệm người dùng popup của 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. Chế độ trải nghiệm người dùng redirect của nút Đăng nhập bằng Google 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 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 Đăng nhập/Đăng ký bằng một lần chạm |
state_cookie_domain |
Nếu bạn cần gọi tính nă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 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 |
Các nguồn gốc được phép nhúng iframe trung gian. Tính năng Một lần nhấn sẽ chạy ở chế độ iframe trung gian nếu có trường này. |
intermediate_iframe_close_callback |
Ghi đè hành vi iframe trung gian mặc định khi người dùng đóng tính năng Một lần chạm theo cách thủ công. |
itp_support |
Bật trải nghiệm người dùng Một lần nhấn nâng cấp trên trình duyệt ITP. |
login_hint |
Bỏ qua lựa chọn tài khoản bằng cách đưa ra gợi ý cho người dùng. |
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à dàn xếp quy trình đăng nhập giữa trang web của bạn và Google. |
enable_redirect_uri_validation |
Bật quy trình chuyển hướng nút tuân thủ Quy tắc xác thực URI chuyển hướng. |
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ã thông báo nhận dạng có được tự động trả về mà không cần người dùng tương tác hay không khi trước đó 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 | auto_select: true |
số gọi lại
Trường này là hàm JavaScript xử lý mã thông báo nhận dạng đượ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 chế độ trải nghiệm người dùng popup
của tính năng Một lần nhấn của Google hoặc nút Đăng nhập bằng Google. 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 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ị 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 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 này, thông tin xác thực sẽ được đăng lên trang này theo mặc định.
Phản hồi thông tin xác thực mã thông báo nhận dạng được đăng lên điểm cuối đăng nhập của bạn khi người dùng nhấp vào nút Đăng nhập bằng Google và chế độ trải nghiệm người dùng 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ị 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 của bạn phải xử lý các yêu cầu POST chứa khoá credential
có giá trị mã thông báo nhận dạng trong nội dung.
Sau đây là ví dụ về yêu cầu đến đ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
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 được trả về từ trình quản lý thông tin xác thực gốc của trình duyệt. 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 việc có huỷ yêu cầu Một lần nhấn hay không nếu người dùng nhấp vào bên ngoài lời nhắc. Giá trị mặc định là true
. 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 không đặt chính sách này, lời nhắc Một lần chạm sẽ hiển thị ở góc trên cùng bên phải của cửa sổ. Hãy xem bảng sau để biết thêm thông tin:
Loại | Bắt buộc | Ví dụ: |
---|---|---|
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 mà mã thông báo nhận dạng sử dụng để ngăn chặn các cuộc tấn công phát lại. Hãy xem bảng sau để biết thêm thông tin:
Loại | Bắt buộc | Ví dụ: |
---|---|---|
chuỗi | Không bắt buộc | 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 quy tắc ràng buộc 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 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ê tất cả các ngữ cảnh có sẵn và nội dung mô tả tương ứng:
Ngữ cảnh | |
---|---|
signin |
"Đăng nhập bằng Google" |
signup |
"Đăng ký bằng Google" |
use |
"Sử dụng với Google" |
state_cookie_domain
Nếu bạn cần hiển thị tính năng Một lần chạm trong miền gốc và các miền con của miền đó, hãy 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. 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 để 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 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 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 một cửa sổ bật lên. |
redirect |
Thực hiện quy trình trải nghiệm người dùng đăng nhập bằng cách chuyển hướng toàn trang. |
allowed_parent_origin
Các nguồn gốc được phép nhúng iframe trung gian. Tính năng Một lần nhấn sẽ chạy trong 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ả 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 |
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"
khớp với example.com
và các miền con của miền đó ở mọi cấp (ví dụ: news.example.com
, login.news.example.com
). Những điều cần lưu ý khi sử dụng ký tự đại diện:
- Chuỗi mẫu không được chỉ bao gồm ký tự đại diện và miền cấp cao nhất. Ví dụ:
https://.com
vàhttps://
.co.uk
không hợp lệ; Như đã lưu ý ở trên,"https://.example.com"
khớp vớiexample.com
và các miền con của miền đó. Bạn cũng có thể sử dụng một mảng để biểu thị 2 miền khác nhau. Ví dụ:["https://example1.com", "https://
.example2.com"]
khớp với các miềnexample1.com
,example2.com
và miền con củaexample2.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ệ.
Nếu giá trị của trường allowed_parent_origin
không hợp lệ, thì quá trình khởi chạy tính năng Một lần nhấn của chế độ iframe trung gian sẽ không thành công và dừng lại.
intermediate_iframe_close_callback
Ghi đè hành vi iframe trung gian mặc định khi người dùng đóng tính năng Một lần nhấn theo cách thủ công bằng cách nhấn vào nút "X" trong giao diện người dùng Một lần nhấn. 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ế độ khung iframe trung gian. Và điều này chỉ ảnh hưởng đến iframe trung gian, thay vì
iframe One Tap. Giao diện người dùng One Tap sẽ bị xoá trước khi lệnh gọi lại được gọi.
Loại | Bắt buộc | Ví dụ: |
---|---|---|
hàm | Không bắt buộc | intermediate_iframe_close_callback: logBeforeClose |
itp_support
Trường này xác định xem có nên bật
trải nghiệm người dùng một lần chạm đã nâng cấp trên các trình duyệt có hỗ trợ tính năng Ngăn chặn theo dõi thông minh (ITP) hay không. Giá trị mặc định là false
. Hãy xem bảng sau để biết thêm thông tin:
Loại | Bắt buộc | Ví dụ: |
---|---|---|
boolean | Không bắt buộc | 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 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 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 Mở rộng Kết nối.
Loại | Bắt buộc | Ví dụ: |
---|---|---|
Chuỗi, địa chỉ email hoặc giá trị trong trường sub của mã thông báo giá trị nhận dạng. |
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 sử dụng thông tin này để cung cấp gợi ý tên miền cho Google. Khi thành công, các tài khoản người dùng hiển thị trong quá trình chọn tài khoản sẽ bị giới hạn ở miền đã cung cấp.
Giá trị ký tự đại diện: *
chỉ cung cấp tài khoản Workspace cho người dùng và loại trừ tài khoản người tiêu dùng (user@gmail.com) trong quá trình chọn tài khoản.
Để biết thêm thông tin, hãy xem trường hd trong tài liệu về 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à dàn xếp quy trình đăng nhập giữa trang web của bạn và Google. Giá trị mặc định là false. Hãy xem trang Di chuyển sang FedCM để biết thêm thông tin.
Loại | Bắt buộc | Ví dụ: |
---|---|---|
boolean | Không bắt buộc | use_fedcm_for_prompt: true |
enable_redirect_uri_validation
Bật quy trình chuyển hướng nút tuân thủ Quy tắc xác thực URI chuyển hướng.
Loại | Bắt buộc | Ví dụ: |
---|---|---|
boolean | Không bắt buộc | enable_redirect_uri_validation: true |
Phương thức: google.accounts.id.prompt
Phương thức google.accounts.id.prompt
hiển thị lời nhắc Một lần chạm hoặc trình quản lý thông tin xác thực 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ã sau đây của phương thức:
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 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 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 được kích hoạt vào những thời điểm sau:
- Thời điểm hiển thị: Điều này xảy ra sau khi phương thức
prompt()
được gọi. Thông báo 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: Điều này xảy ra khi lời nhắc Một lần chạm bị đóng bằng tính năng tự động huỷ, huỷ thủ công hoặc khi Google không đưa ra đượ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 với trình cung cấp danh tính tiếp theo (nếu có).
Thời điểm đã bỏ qua: Trường hợp 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 đóng.
Ví dụ về mã sau đây triển khai khoảnh khắc đã 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ó phải là 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à cho một khoảnh khắc hiển thị và giao diện người dùng có đượ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 là cho một khoảnh khắc 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ó:
|
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ó:
|
isDismissedMoment() |
Đây có phải là thông báo cho khoảnh khắc đã bỏ qua không? |
getDismissedReason() |
Lý do chi tiết về việc loại bỏ. Sau đây là các giá trị có thể có:
|
getMomentType() |
Trả về một chuỗi cho loại khoảnh khắc. Sau đây là các giá trị có thể có:
|
Loại dữ liệu: CredentialResponse
Khi hàm callback
được gọi, đố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 giá trị nhận dạng được trả về. |
select_by |
Trường này đặt cách chọn thông tin xác thực. |
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ã thông báo nhận dạng dưới dạng chuỗi Mã thông báo web 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 sử dụng lại. Không sử dụng địa chỉ email làm giá trị nhận dạng vì một Tài khoản Google có thể có nhiều địa chỉ email tại các thời điểm khác nhau.
Bằng cách sử dụng các trường email
, email_verified
và hd
, bạn có thể xác định xem Google có lưu trữ và có phải là máy chủ có thẩm quyền cho một địa chỉ email hay không. Trong trường hợp Google là bên có thẩm quyền, người dùng được xác nhận là chủ sở hữu hợp pháp của tài khoản.
Các trường hợp Google là nguồn thông tin chính xác:
email
có hậu tố@gmail.com
, đây là Tài khoản Gmail.email_verified
là 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à không có hd
, Google sẽ không có thẩm quyền và bạn nên sử dụng mật khẩu hoặc các phương thức thử thách khác để xác minh người dùng. email_verfied
cũng có thể đúng vì Google ban đầu đã xác minh người dùng khi tạo Tài khoản Google, tuy nhiên, quyền sở hữu tài khoản email bên thứ ba có thể đã thay đổi kể từ đó.
Trường exp
cho 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 nhận dạng thu được từ tính năng Đăng nhập bằng Google. Bạn cần xác minh mã thông báo trước khi hết hạn. 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
. Hệ thống sẽ dùng
loại nút dùng cùng với trạng thái phiên và trạng thái đồng ý để đặt
giá trị,
Người dùng đã nhấn nút Một lần chạm hoặc Đăng nhập bằng Google hoặc sử dụng quy trình Tự động đăng nhập không cần chạm.
Tìm thấy một phiên hiện có hoặc người dùng đã chọn và đăng nhập vào một Tài khoản Google để thiết lập một phiên mới.
Trước khi chia sẻ thông tin xác thực mã thông báo ID với ứng dụng của bạn, người dùng
- đã nhấn nút Xác nhận để đồng ý chia sẻ thông tin đăng nhập, hoặc
- đã từng đồ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 cho người dùng có phiên hoạt động hiện tại và trước đó đã đồng ý chia sẻ thông tin xác thực. Chỉ áp dụng cho các trình duyệt không hỗ trợ FedCM. |
user |
Một người dùng có phiên hoạt động hiện tại và đã đồng ý trước đó nhấn vào nút "Tiếp tục dưới dạng" trong tính năng Một lần nhấn để chia sẻ thông tin xác thực. Chỉ áp dụng cho các trình duyệt không được hỗ trợ FedCM. |
fedcm |
Một người dùng đã nhấn nút "Tiếp tục bằng tài khoản" Một lần chạm để chia sẻ thông tin đăng nhập bằng FedCM. Chỉ áp dụng cho các trình duyệt được hỗ trợ FedCM. |
fedcm_auto |
Tự động đăng nhập cho người dùng có phiên hiện tại và đã đồng ý chia sẻ thông tin xác thực bằng tính năng FedCM One Tap. Chỉ áp dụng cho các trình duyệt được hỗ trợ FedCM. |
user_1tap |
Một người dùng có phiên đang hoạt động đã nhấn vào nút "Tiếp tục dưới dạng" trong tính năng Một lần nhấn để đồng ý và chia sẻ thông tin xác thực. Chỉ áp dụng cho Chrome phiên bản 75 trở lên. |
user_2tap |
Một người dùng không có phiên hiện tại đã nhấn vào nút "Tiếp tục dưới dạng" trong tính năng Một lần nhấn để chọn một tài khoản, sau đó nhấn vào nút Xác nhận trong cửa sổ bật lên để đồng ý và chia sẻ thông tin xác thực. Áp dụng cho các trình duyệt không dựa trên Chromium. |
itp |
Một người dùng có phiên hiện tại và đã đồng ý trước đó đã nhấn vào tính nă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 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 xác thực. |
itp_add_session |
Một người dùng không có phiên hiện tại và đã đồng ý trước đó đã nhấn vào tính năng Một lần chạm trên trình duyệt ITP để chọn một Tài khoản Google và chia sẻ thông tin xác thực. |
itp_confirm_add_session |
Trước tiên, người dùng không có phiên hiện tại đã nhấn vào tính năng Một lần chạm 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 xác thực. |
btn |
Một người dùng có phiên hiện tại đã đồng ý trước đó nhấn vào nút Đăng nhập bằng Google rồi chọn một Tài khoản Google trong phần "Chọn tài khoản" để chia sẻ thông tin xác thực. |
btn_confirm |
Một người dùng có phiên hiện tại đã nhấn vào nút Đăng nhập bằng Google rồi nhấn vào nút Xác nhận để đồng ý và chia sẻ thông tin xác thực. |
btn_add_session |
Một người dùng không có phiên hiện tại và trước đó đã đồng ý nhấn nút Đăng nhập bằng Google để chọn một Tài khoản Google và chia sẻ thông tin xác thực. |
btn_confirm_add_session |
Trước tiên, người dùng không có phiên hiện tại đã nhấn vào nút Đăng nhập bằng Google để 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 xác thực. |
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ì có thể hiển thị nhiều nút Đăng nhập bằng Google trên cùng một trang, nên bạn có thể gán cho mỗi nút một chuỗi duy nhất. Do đó, bạn có thể 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 trong các trang web của bạn.
Hãy xem ví dụ về mã sau đây của phương thức:
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 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 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ách căn chỉnh biểu trưng Google: 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. |
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ả về các loại nút đó:
Loại | |
---|---|
standard |
|
icon |
chủ đề
Chủ đề của nút. Giá trị mặc định là outline
. Hãy xem bảng sau để biết thêm thông tin:
Loại | Bắt buộc | Ví dụ: |
---|---|---|
chuỗi | Không bắt buộc | theme: "filled_blue" |
Bảng sau đây liệt kê các giao diện có sẵn và nội dung mô tả của các giao diện đó:
Chủ đề | |
---|---|
outline |
|
filled_blue |
|
filled_black |
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ả tương ứng:
Kích thước | |
---|---|
large |
|
medium |
|
small |
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 giữa 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 cho tính năng hỗ trợ tiếp cận trê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 hiện có và nội dung mô tả của các văn bản đó:
Văn bản | |
---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
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ả về các hình dạng đó:
Hình dạng | |
---|---|
rectangular |
|
pill |
|
circle |
|
square |
logo_alignment
Cách căn chỉnh biểu trưng Google. Giá trị mặc định là left
. Thuộc tính này chỉ áp dụng cho loại nút standard
. Hãy xem bảng sau để biết thêm thông tin:
Loại | Bắt buộc | Ví dụ: |
---|---|---|
chuỗi | Không bắt buộc | logo_alignment: "center" |
Bảng sau đây liệt kê các cách căn chỉnh có sẵn và nội dung mô tả về các cách đó:
logo_alignment | |
---|---|
left |
|
center |
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 văn bản của nút bằng cách sử dụng ngôn ngữ đã chỉ định, nếu không thì sẽ đặt mặc định thành chế độ cài đặt Tài khoản Google hoặc trình duyệt của người dùng. Thêm tham số hl
và mã ngôn ngữ vào lệnh src khi tải thư viện, ví dụ: gsi/client?hl=<iso-639-code>
.
Nếu bạn không đặt chính sách này, 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 hoạt động trên Google. Do đó, người dùng có thể thấy các phiên bản nút được bản địa hoá khác nhau và có thể có kích thước khác nhau.
Hãy xem bảng sau để biết thêm thông tin:
Loại | Bắt buộc | Ví dụ: |
---|---|---|
chuỗi | Không bắt buộc | locale: "zh_CN" |
click_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ụ này, thông báo Nút Đăng nhập bằng Google đã được nhấp... đượ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ì nhiều nút Đăng nhập bằng Google có thể hiển thị trên cùng một trang, bạn có thể gán cho mỗi nút một chuỗi duy nhất. Chuỗi này sẽ trả về cùng với mã thông báo giá trị nhận dạng, nhờ đó, bạn có thể xác định nút mà người dùng đã nhấp để đă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 xác thực
Khi hàm native_callback
được gọi, đố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 giúp ngăn vòng lặp UX bị treo. Hãy xem đoạn mã sau đây của phương thức:
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à trình bao bọc 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 đối tượng này để lưu trữ thông tin xác thực mật khẩu. Hãy xem mã ví dụ sau đây về 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 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 một thông tin xác thực đã được chọn. Hãy xem ví dụ về mã sau đây của phương thức:
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>
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
. Thư viện này được thông báo 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ề 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
sẽ thu hồi trạng thái cấp quyền sử dụng OAuth dùng để chia sẻ mã thông báo giá trị nhận dạng cho người dùng đã 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 thông tin xác thực. |
callback |
hàm | Trình xử lý RevocationResponse không bắt buộc. |
Mã mẫu sau đây cho thấy cách sử dụng phương thức revoke
với 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. |
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 giá trị 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 được xác định khi thành công.