Trang tham khảo này mô tả API thuộc tính dữ liệu HTML của tính năng Đăng nhập bằng Google. Bạn có thể sử dụng API để hiển thị lời nhắc Một lần chạm hoặc nút Đăng nhập bằng Google trên các trang web của mình.
Phần tử có mã "g_id_onload"
Bạn có thể đặt các thuộc tính dữ liệu Đăng nhập bằng Google trong bất kỳ phần tử hiển thị hoặc ẩn nào, chẳng hạn như <div> và <span>. Yêu cầu duy nhất là mã phần tử được đặt thành g_id_onload. Không đặt mã này trên nhiều phần tử.
Thuộc tính dữ liệu
Bảng sau đây liệt kê các thuộc tính dữ liệu kèm theo nội dung mô tả:
| Thuộc tính | |
|---|---|
data-client_id |
Mã ứng dụng khách của ứng dụng |
data-auto_prompt |
Hiện thao tác nhấn của Google One. |
data-auto_select |
Bật tính năng tự động chọn trên Google One Tap. |
data-login_uri |
URL của điểm cuối đăng nhập của bạn |
data-callback |
Tên hàm của trình xử lý mã thông báo mã JavaScript |
data-native_login_uri |
URL của điểm cuối của trình xử lý thông tin xác thực mật khẩu |
data-native_callback |
Tên hàm của trình xử lý thông tin xác thực mật khẩu JavaScript |
data-native_id_param |
Tên thông số cho giá trị credential.id |
data-native_password_param |
Tên thông số cho giá trị credential.password |
data-cancel_on_tap_outside |
Kiểm soát việc có huỷ lời nhắc nếu người dùng nhấp vào bên ngoài lời nhắc hay không. |
data-prompt_parent_id |
Mã DOM của phần tử vùng chứa lời nhắc Một lần chạm |
data-skip_prompt_cookie |
Bỏ qua tính năng Một lần chạm nếu cookie được chỉ định có giá trị không trống. |
data-nonce |
Chuỗi ngẫu nhiên cho mã thông báo giá trị nhận dạng |
data-context |
Tiêu đề và từ ngữ trong câu lệnh Một lần chạm |
data-moment_callback |
Tên hàm của trình nghe thông báo trạng thái giao diện người dùng của lời nhắc |
data-state_cookie_domain |
Nếu bạn cần gọi một lần chạm trong miền gốc và các miền con của miền đó, hãy chuyển miền gốc đến thuộc tính này để sử dụng một cookie dùng chung. |
data-ux_mode |
Quy trình trải nghiệm người dùng của nút Đăng nhập bằng Google |
data-allowed_parent_origin |
Các nguồn gốc được phép nhúng iframe trung gian. Tính năng Một lần chạm sẽ chạy ở chế độ iframe trung gian nếu có thuộc tính này. |
data-intermediate_iframe_close_callback |
Ghi đè hành vi của iframe trung gian mặc định khi người dùng đóng tính năng Một lần chạm theo cách thủ công. |
data-itp_support |
Bật trải nghiệm người dùng một lần chạm đã nâng cấp trên trình duyệt ITP. |
data-login_hint |
Bỏ qua bước lựa chọn tài khoản bằng cách cung cấp gợi ý cho người dùng. |
data-hd |
Giới hạn việc lựa chọn tài khoản theo miền. |
data-use_fedcm_for_prompt |
Cho phép trình duyệt kiểm soát lời nhắc đăng nhập của người dùng và dàn xếp quy trình đăng nhập giữa trang web của bạn và Google. |
Các loại thuộc tính
Các phần sau đây cung cấp thông tin chi tiết về từng loại thuộc tính và một ví dụ.
Mã nhận dạng dữ liệu khách hàng (data-client_id)
Thuộc tính này là mã ứng dụng khách của ứng dụng, bạn có thể tìm thấy và tạo mã này trong bảng điều khiển Google Cloud. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Có | data-client_id="CLIENT_ID.apps.googleusercontent.com" |
lời nhắc tự động dữ liệu
Thuộc tính này xác định xem có hiển thị tính năng Một lần chạm hay không. Giá trị mặc định là true. Thao tác chạm Google One không hiển thị khi giá trị này là false. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| boolean | Không bắt buộc | data-auto_prompt="true" |
tự động_chọn_dữ_liệu
Thuộc tính này xác định liệu có tự động trả về mã thông báo mã nhận dạng hay không mà không cần sự tương tác của người dùng, trong trường hợp chỉ có một phiên của Google đã phê duyệt ứng dụng của bạn. Giá trị mặc định là false. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| boolean | Không bắt buộc | data-auto_select="true" |
data-login_uri
Thuộc tính này là URI của điểm cuối đăng nhập của bạn.
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 Bảng điều khiển API và phải tuân thủ Quy tắc xác thực URI chuyển hướng của chúng tôi.
Bạn có thể bỏ qua thuộc tính này nếu trang hiện tại là trang đăng nhập của bạn. Trong trường hợp đó, thông tin đăng nhập sẽ được đăng lên trang này theo mặc định.
Phản hồi thông tin xác thực mã thông báo mã nhận dạng được đăng lên điểm cuối đăng nhập của bạn khi không có chức năng gọi lại nào được xác định và người dùng nhấp vào các nút Đăng nhập bằng Google hoặc Một lần chạm hoặc quá trình đăng nhập tự động diễn ra.
Hãy xem bảng sau để biết thêm thông tin:
| Loại | Không bắt buộc | Ví dụ: |
|---|---|---|
| URL | Giá trị mặc định là URI của trang hiện tại hoặc giá trị mà bạn chỉ định. Bỏ qua khi bạn đặt data-ux_mode="popup" và
data-callback. |
data-login_uri="https://www.example.com/login" |
Điểm cuối đăng nhập của bạn phải xử lý các yêu cầu POST chứa khoá credential có giá trị mã thông báo mã nhận dạng trong phần nội dung.
Sau đây là yêu cầu mẫu tới điểm cuối đăng nhập của bạn:
POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
credential=ID_TOKEN
gọi lại dữ liệu
Thuộc tính này là tên của hàm JavaScript xử lý mã thông báo mã nhận dạng được trả về. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Đây là trường bắt buộc nếu bạn chưa đặt data-login_uri. |
data-callback="handleToken" |
Bạn có thể dùng một trong các thuộc tính data-login_uri và data-callback. Tính năng này phụ thuộc vào các cấu hình chế độ trải nghiệm người dùng và thành phần sau đây:
Bắt buộc phải có thuộc tính
data-login_uricho chế độ trải nghiệm người dùngredirectnút Đăng nhập bằng Google. Chế độ này bỏ qua thuộc tínhdata-callback.Một trong hai thuộc tính này phải được đặt cho chế độ trải nghiệm người dùng
popupcủa nút Đăng nhập bằng Google One và nút Đăng nhập bằng Google. Nếu bạn đặt cả hai, thì thuộc tínhdata-callbacksẽ có mức độ ưu tiên cao hơn.
HTML API không hỗ trợ các hàm JavaScript trong không gian tên.
Thay vào đó, hãy sử dụng hàm JavaScript toàn cục mà không có không gian tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.
data-native_login_uri
Thuộc tính này là URL của điểm cuối của trình xử lý thông tin xác thực mật khẩu. Nếu bạn đặt thuộc tính data-native_login_uri hoặc thuộc tính data-native_callback, thư viện JavaScript sẽ quay lại trình quản lý thông tin xác thực gốc khi không có phiên hoạt động của Google. Bạn không được phép đặt cả hai thuộc tính data-native_callback và data-native_login_uri. Hãy xem bảng sau đây để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Không bắt buộc | data-login_uri="https://www.example.com/password_login" |
data-native_callback
Thuộc tính này là tên của hàm JavaScript xử lý thông tin xác thực mật khẩu được trả về từ trình quản lý thông tin xác thực gốc của trình duyệt. Nếu bạn đặt thuộc tính data-native_login_uri hoặc thuộc tính data-native_callback, thư viện JavaScript sẽ quay lại trình quản lý thông tin xác thực gốc khi không có phiên Google nào. Bạn không được phép đặt cả data-native_callback và data-native_login_uri. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Không bắt buộc | data-native_callback="handlePasswordCredential" |
HTML API không hỗ trợ các hàm JavaScript trong không gian tên.
Thay vào đó, hãy sử dụng hàm JavaScript toàn cục mà không có không gian tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.
data-native_id_param
Khi gửi thông tin xác thực mật khẩu đến điểm cuối của trình xử lý thông tin xác thực mật khẩu, bạn có thể chỉ định tên tham số cho trường credential.id. Tên mặc định là email. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| URL | Không bắt buộc | data-native_id_param="user_id" |
data-native_password_param
Khi gửi thông tin xác thực mật khẩu đến điểm cuối của trình xử lý thông tin xác thực mật khẩu, bạn có thể chỉ định tên tham số cho giá trị credential.password. Tên mặc định là password. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| URL | Không bắt buộc | data-native_password_param="pwd" |
data-cancel_on_tap_outside
Thuộc tính này quy định xem có huỷ yêu cầu Một lần chạm hay không nếu người dùng nhấp vào bên ngoài lời nhắc. Giá trị mặc định là true. Để tắt chế độ này, hãy đặt giá trị thành false. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| boolean | Không bắt buộc | data-cancel_on_tap_outside="false" |
data-prompt_parent_id
Thuộc tính này đặt ID 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 chạm sẽ hiển thị ở góc trên cùng bên phải cửa sổ. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Không bắt buộc | data-prompt_parent_id="parent_id" |
data-skip_prompt_cookie
Thuộc tính này bỏ qua tính năng Một lần chạm nếu cookie được chỉ định có giá trị không trống. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Không bắt buộc | data-skip_prompt_cookie="SID" |
dữ liệu chỉ dùng một lần
Thuộc tính này là một chuỗi ngẫu nhiên mà mã thông báo mã nhận dạng sử dụng để ngă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ụ: |
|---|---|---|
| string | Không bắt buộc | data-nonce="biaqbm70g23" |
Độ dài của số chỉ dùng một lần bị giới hạn ở kích thước JWT tối đa đượ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 máy chủ và trình duyệt riêng lẻ.
ngữ cảnh dữ liệu
Thuộc tính này thay đổi văn bản của tiêu đề và các thông báo hiển thị trong lời nhắc Một lần chạm. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Không bắt buộc | data-context="use" |
Bảng sau đây liệt kê tất cả các bối cảnh hiện có và nội dung mô tả tương ứng:
| Bối cảnh | |
|---|---|
signin |
"Đăng nhập bằng Google" |
signup |
"Đăng ký bằng Google" |
use |
"Sử dụng với Google" |
data-moment_callback
Thuộc tính này là tên hàm của trình nghe thông báo trạng thái giao diện người dùng lời nhắc. Để biết thêm thông tin, hãy tham khảo loại dữ liệu PromptMomentNotification.
Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Không bắt buộc | data-moment_callback="logMomentNotification" |
HTML API không hỗ trợ các hàm JavaScript trong không gian tên.
Thay vào đó, hãy sử dụng hàm JavaScript toàn cục mà không có không gian tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.
data-state_cookie_domain
Nếu bạn cần hiển thị một lần chạm trong miền gốc và các miền con của miền đó, hãy chuyển miền gốc đến thuộc tính này để sử dụng một cookie trạng thái chia sẻ. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Không bắt buộc | data-state_cookie_domain="example.com" |
data-ux_mode
Thuộc tính này thiết lập quy trình trải nghiệm người dùng mà nút Đăng nhập bằng Google sử dụng. Giá trị mặc định là popup. Thuộc tính này không ảnh hưởng đến trải nghiệm người dùng bằng một lần chạm. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Không bắt buộc | data-ux_mode="redirect" |
Bảng sau đây liệt kê các chế độ trải nghiệm người dùng hiện có và nội dung mô tả về các chế độ đó.
| Chế độ UX | |
|---|---|
popup |
Thực hiện quy trình đăng nhập trải nghiệm người dùng 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 cách chuyển hướng toàn bộ trang. |
data-allowed_parent_origin
Các nguồn gốc được phép nhúng iframe trung gian. Một lần chạm sẽ chạy ở chế độ iframe trung gian nếu thuộc tính này xuất hiện. Hãy xem bảng sau đây để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| mảng chuỗi hoặc chuỗi | Không bắt buộc | data-allowed_parent_origin="https://example.com" |
Bảng sau đây liệt kê các loại giá trị được hỗ trợ và nội dung mô tả tương ứng.
| Loại giá trị | ||
|---|---|---|
string |
Một URI miền. | "https://example.com" |
string array |
Danh sách các URI miền được phân tách bằng dấu phẩy. | "https://news.example.com,https://local.example.com" |
Nếu giá trị của thuộc tính data-allowed_parent_origin không hợp lệ, việc khởi chạy chế độ iframe trung gian bằng một lần chạm sẽ không thành công và dừng lại.
Tiền tố ký tự đại diện cũng được hỗ trợ. Ví dụ: "https://*.example.com" khớp với example.com và các miền con của thuộc tính này ở mọi cấp (ví dụ: news.example.com, login.news.example.com). Những điểm 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://*.comvàhttps://*.co.uklà không hợp lệ. Như đã lưu ý ở trên,"https://*.example.com"khớp vớiexample.comvà các miền con của nó. Bạn cũng có thể sử dụng một 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ềnexample1.com,example2.comvà các miền con củaexample2.com - Miền ký tự đại diện phải bắt đầu bằng một giao thức https:// bảo mật, vì vậy,
"*.example.com"bị coi là không hợp lệ.
data-intermediate_iframe_close_callback
Ghi đè hành vi của iframe trung gian mặc định khi người dùng đóng tính năng Một lần chạm theo cách thủ công bằng cách nhấn vào nút "X" trong giao diện người dùng Một lần chạm. Hành vi mặc định là xoá iframe trung gian khỏi DOM ngay lập tức.
Trường data-intermediate_iframe_close_callback chỉ có hiệu lực ở chế độ iframe trung gian. Giá trị này chỉ ảnh hưởng đến iframe trung gian, thay vì iframe Một lần chạm. Giao diện người dùng Một lần chạm sẽ bị xoá trước khi gọi lệnh gọi lại.
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| hàm | Không bắt buộc | data-intermediate_iframe_close_callback="logBeforeClose" |
HTML API không hỗ trợ các hàm JavaScript trong không gian tên.
Thay vào đó, hãy sử dụng hàm JavaScript toàn cục mà không có không gian tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.
Hỗ trợ dữ liệu
Trường này xác định liệu 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 hỗ trợ tính năng Ngăn chặn theo dõi thông minh (ITP). Giá trị mặc định là false. Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| boolean | Không bắt buộc | data-itp_support="true" |
data-login_hint
Nếu biết trước người dùng nào nên đăng nhập, ứng dụng của bạn có thể đưa ra gợi ý đăng nhập cho Google. Khi thành công, lựa chọn tài khoản sẽ bị bỏ qua. Các giá trị được chấp nhận là: địa chỉ email hoặc trường phụ của mã nhận dạng.
Để biết thêm thông tin, hãy xem tài liệu về OpenSL Connect dành cho
login_hint.
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
Chuỗi. Có thể là địa chỉ email hoặc giá trị của trường sub
trong mã thông báo giá trị nhận dạng. |
Không bắt buộc | data-login_hint="elisa.beckett@gmail.com" |
dữ liệu-hd
Khi người dùng có nhiều tài khoản và chỉ nên đăng nhập bằng tài khoản Workspace, hãy sử dụng tính năng này để gợi ý tên miền cho Google. Khi thành công, những tài khoản người dùng hiển thị trong quá trình lựa chọn tài khoản sẽ được giới hạn trong 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 lựa chọn tài khoản.
Để biết thêm thông tin, hãy xem tài liệu về OpenSL Connect dành cho
hd.
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| Chuỗi. Tên miền đủ điều kiện hoặc *. | Không bắt buộc | data-hd="*" |
data-use_fedcm_for_prompt
Cho phép trình duyệt kiểm soát lời nhắc đăng nhập của người dùng và dàn xếp quy trình đăng nhập giữa trang web của bạn và Google. Giá trị mặc định là false. Hãy xem trang Di chuyển sang FedCM để biết thêm thông tin.
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| boolean | Không bắt buộc | data-use_fedcm_for_prompt="true" |
Phần tử có lớp "g_id_signin"
Nếu bạn thêm g_id_signin vào thuộc tính class của một phần tử, phần tử đó sẽ hiển thị dưới dạng nút Đăng nhập bằng Google.
Bạn có thể hiển thị nhiều nút Đăng nhập bằng Google trên cùng một trang. Mỗi nút có thể có các chế độ cài đặt hình ảnh riêng. Chế độ cài đặt được xác định bởi các thuộc tính dữ liệu sau đây.
Thuộc tính dữ liệu trực quan
Bảng sau đây liệt kê các thuộc tính dữ liệu hình ảnh và nội dung mô tả về các thuộc tính đó:
| Thuộc tính | |
|---|---|
data-type |
Loại nút: biểu tượng hoặc nút tiêu chuẩn. |
data-theme |
Giao diện của nút. Ví dụ: fill_blue hoặc filled_black. |
data-size |
Kích thước nút. Ví dụ: nhỏ hoặc lớn. |
data-text |
Văn bản của nút. Ví dụ: "Đăng nhập bằng Google" hoặc "Đăng ký bằng Google". |
data-shape |
Hình dạng nút. Ví dụ: hình chữ nhật hoặc hình tròn. |
data-logo_alignment |
Cách căn chỉnh biểu trưng của Google: trái hoặc chính giữa. |
data-width |
Chiều rộng của nút, tính bằng pixel. |
data-locale |
Văn bản nút hiển thị bằng ngôn ngữ được đặt trong thuộc tính này. |
data-click_listener |
Nếu bạn đặt chính sách này, hàm này sẽ được gọi khi người dùng nhấp vào nút Đăng nhập bằng Google. |
data-state |
Nếu được đặt, chuỗi này sẽ trả về cùng mã thông báo giá trị nhận dạng. |
Các loại thuộc tính
Các phần sau đây cung cấp thông tin chi tiết về từng loại thuộc tính và một ví dụ.
loại dữ liệu
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ụ: |
|---|---|---|
| string | Có | data-type="icon" |
Bảng sau đây liệt kê tất cả các loại nút hiện có và nội dung mô tả về các nút đó:
| Loại | |
|---|---|
standard |
|
icon |
|
chủ đề dữ liệu
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ụ: |
|---|---|---|
| string | Không bắt buộc | data-theme="filled_blue" |
Bảng sau đây liệt kê các giao diện hiện có và nội dung mô tả:
| Giao diện | |
|---|---|
outline |
|
filled_blue |
|
filled_black |
|
data-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ụ: |
|---|---|---|
| string | Không bắt buộc | data-size="small" |
Bảng sau đây liệt kê các kích thước nút hiện có và nội dung mô tả về các nút đó.
| Kích thước | |
|---|---|
large |
|
medium |
|
small |
|
văn bản dữ liệu
Văn bản của nút. Giá trị mặc định là signin_with. Không có sự khác biệt về hình ảnh đối với văn bản của các nút biểu tượng có các thuộc tính data-text khác nhau. 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ụ: |
|---|---|---|
| string | Không bắt buộc | data-text="signup_with" |
Bảng sau đây liệt kê các văn bản nút hiện có và nội dung mô tả:
| Văn bản | |
|---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
|
hình dạng dữ liệu
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ụ: |
|---|---|---|
| string | Không bắt buộc | data-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ả về chúng:
| Hình dạng | |
|---|---|
rectangular |
icon, thì nút này giống với square.
|
pill |
icon, thì thao tác này cũng giống như circle.
|
circle |
standard, thì nút này giống với pill.
|
square |
standard, thì nút này giống với rectangular.
|
căn chỉnh biểu trưng dữ liệu
Độ 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ụ: |
|---|---|---|
| string | Không bắt buộc | data-logo_alignment="center" |
Bảng sau đây liệt kê các cách căn chỉnh hiện có và nội dung mô tả về chúng:
| logo_alignment | |
|---|---|
left |
|
center |
|
chiều rộng dữ liệu
Chiều rộng tối thiểu của nút, tính bằng pixel. Chiều rộng tối đa hiện có là 400 pixel.
Hãy xem bảng sau để biết thêm thông tin:
| Loại | Bắt buộc | Ví dụ: |
|---|---|---|
| string | Không bắt buộc | data-width=400 |
ngôn ngữ dữ liệu
Không bắt buộc. Hiển thị văn bản của nút bằng ngôn ngữ được chỉ định, nếu không thì đặt mặc định theo chế độ cài đặt của trình duyệt hoặc Tài khoản Google 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, 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 đó, mỗi người dùng có thể thấy các phiên bản khác nhau của các nút đã bản địa hoá 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ụ: |
|---|---|---|
| string | Không bắt buộc | data-locale="zh_CN" |
data-click_listener (trình nghe_xem_dữ_liệu)
Bạn có thể xác định hàm JavaScript sẽ được gọi khi nhấp vào nút Đăng nhập bằng Google bằng thuộc tính data-click_listener.
<script>
function onClickHandler(){
console.log("Sign in with Google button clicked...")
}
</script>
.....
<div class="g_id_signin"
data-size="large"
data-theme="outline"
data-click_listener="onClickHandler">
</div>
Trong ví dụ này, thông báo Sign in with Google nút (Đã nhấp vào nút Đăng nhập bằng Google...) sẽ được ghi lại vào bảng điều khiển khi người dùng nhấp vào nút Đăng nhập bằng Google.
data-state
Không bắt buộc, vì nhiều nút Đăng nhập bằng Google có thể hiển thị trên cùng một trang, nên bạn có thể chỉ định cho mỗi nút bằng một chuỗi duy nhất. Chuỗi tương tự sẽ trả về cùng với mã thông báo mã 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ụ: |
|---|---|---|
| string | Không bắt buộc | data-state="button 1" |
Tích hợp phía máy chủ
Các điểm cuối phía máy chủ của bạn phải xử lý các yêu cầu HTTP POST sau đây.
Điểm cuối của trình xử lý mã thông báo mã nhận dạng
Điểm cuối của trình xử lý mã thông báo mã nhận dạng sẽ xử lý mã thông báo giá trị nhận dạng. Tuỳ vào trạng thái của tài khoản tương ứng, bạn có thể đăng nhập cho người dùng và chuyển họ đến trang đăng ký hoặc chuyển họ đến trang liên kết tài khoản để biết thêm thông tin.
Yêu cầu HTTP POST chứa các thông tin sau:
| Định dạng | Tên | Nội dung mô tả |
|---|---|---|
| Bánh quy | g_csrf_token |
Một chuỗi ngẫu nhiên thay đổi sau mỗi yêu cầu đến điểm cuối của trình xử lý. |
| Thông số yêu cầu | g_csrf_token |
Một chuỗi giống với giá trị cookie trước đó, g_csrf_token. |
| Thông số yêu cầu | credential |
Mã thông báo nhận dạng mà Google cấp. |
| Thông số yêu cầu | select_by |
Cách hệ thống chọn thông tin xác thực. |
| Thông số yêu cầu | state |
Tham số này chỉ được xác định khi người dùng nhấp vào nút Đăng nhập bằng Google để đăng nhập và thuộc tính state của nút đó được chỉ định. |
thông tin xác thực
Khi được giải mã, mã thông báo mã nhận dạng sẽ 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": "Eliza",
"family_name": "Beckett",
"iat": 1596474000, // Unix timestamp of the assertion's creation time
"exp": 1596477600, // Unix timestamp of the assertion's expiration time
"jti": "abc161803398874def"
}
Trường sub là giá trị nhận dạng duy nhất trên toàn cầu của 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ì đây là trường duy nhất trong số tất cả Tài khoản Google và không bao giờ được sử dụng lại. Không 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.
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 uỷ quyền, người dùng được xác nhận là chủ sở hữu tài khoản hợp pháp.
Những trường hợp mà Google có thẩm quyền:
emailcó hậu tố@gmail.com, đây là một tài khoản Gmail.email_verifiedcó giá trị là true và giá trịhdđã được đặt. Đây là một tài khoản Google Workspace.
Người dùng có thể đăng ký Tài khoản Google mà không cần sử dụng Gmail hoặc Google Workspace.
Khi email không chứa hậu tố @gmail.com và không có hd, thì Google không có thẩm quyền. Do đó, bạn nên sử dụng mật khẩu hoặc các phương thức xác thực khác để xác minh người dùng. email_verified cũng có thể đúng vì 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 sau đó.
Trường exp cho thấy thời gian hết hạn để bạn xác minh mã thông báo ở phía máy chủ. Thời gian cần thiết cho mã thông báo mã nhận dạng nhận được từ tính năng Đăng nhập bằng Google là 1 giờ. Bạn cần xác minh mã thông báo trước thời gian hết hạn. Không sử dụng exp để quản lý phiên. Mã thông báo giá trị nhận dạng đã hết hạn không có nghĩa là người dùng đã đăng xuất. Ứng dụng của bạn chịu trách nhiệm quản lý phiên của người dùng.
select_by
Bảng sau đây liệt kê các giá trị có thể dùng cho trường select_by. Loại nút dùng cùng với trạng thái phiên và trạng thái đồng ý sẽ đượ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 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 một phiên mới.
Trước khi chia sẻ thông tin đăng nhập của mã thông báo giá trị nhận dạng 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
- trước đây đã đồng ý và dùng tính năng Chọn tài khoản để chọn Tài khoản Google.
Giá trị của trường này được đặt thành một trong các loại sau,
| Giá trị | Nội dung mô tả |
|---|---|
auto |
Hoạt động tự động đăng nhập của người dùng trong phiên hoạt động hiện có mà 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 trong phiên hoạt động trước đây từng đồng ý đã nhấn nút "Tiếp tục bằng" một lần chạm để chia sẻ thông tin đăng nhập. 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" bằng 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ợ của FedCM. |
fedcm_auto |
Tự động đăng nhập của một người dùng hiện có trong một phiên hoạt động mà trước đó đã đồng ý chia sẻ thông tin đăng nhập bằng tính năng Một lần chạm của FedCM. Chỉ áp dụng cho các trình duyệt được hỗ trợ của FedCM. |
user_1tap |
Một người dùng đang có một phiên đã nhấn vào nút "Tiếp tục bằng" một lần chạm để đồ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 chưa có phiên hoạt động đã nhấn nút "Tiếp tục bằng" bằng một lần chạm để chọn một tài khoản, sau đó nhấn 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. |
btn |
Một người dùng trong một phiên hoạt động hiện đã đồng ý đã nhấn nút Đăng nhập bằng Google và chọn một Tài khoản Google trong mục "Chọn tài khoản" để chia sẻ thông tin đăng nhập. |
btn_confirm |
Một người dùng đang có một phiên hoạt động đã 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 đăng nhập. |
btn_add_session |
Một người dùng (không có phiên hoạt động) từng đồ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 đăng nhập. |
btn_confirm_add_session |
Trước tiên, một người dùng chưa có phiên hoạt động nào đã 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. |
state
Tham số này chỉ được xác định khi người dùng nhấp vào nút Đăng nhập bằng Google để đăng nhập và thuộc tính data-state của nút đã nhấp được chỉ định. Giá trị của trường này giống với giá trị bạn đã chỉ định trong thuộc tính data-state của nút.
Vì nhiều nút Đăng nhập bằng Google có thể hiển thị trên cùng một trang, nên bạn có thể chỉ định cho từng nút bằng một chuỗi duy nhất. Do đó, bạn có thể sử dụng tham số state này để xác định nút mà người dùng đã nhấp để đăng nhập.
Điểm cuối của trình xử lý thông tin xác thực mật khẩu
Điểm cuối của trình xử lý thông tin xác thực mật khẩu xử lý thông tin xác thực mật khẩu mà trình quản lý thông tin xác thực gốc truy xuất.
Yêu cầu HTTP POST chứa các thông tin sau:
| Định dạng | Tên | Nội dung mô tả |
|---|---|---|
| Bánh quy | g_csrf_token |
Một chuỗi ngẫu nhiên thay đổi sau mỗi yêu cầu đến điểm cuối của trình xử lý. |
| Thông số yêu cầu | g_csrf_token |
Một chuỗi giống với giá trị cookie trước đó, g_csrf_token. |
| Thông số yêu cầu | email |
Mã thông báo nhận dạng này mà Google cấp. |
| Thông số yêu cầu | password |
Cách hệ thống chọn thông tin xác thực. |