Đăng nhập bằng API HTML của 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.

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 nhấn hoặc nút Đăng nhập bằng Google trên 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 vào bất kỳ phần tử nào hiển thị hoặc không hiển thị, chẳng hạn như <div><span>. Yêu cầu duy nhất là mã nhận dạng phần tử được đặt thành g_id_onload. Đừng đặt mã nhận dạng này trên nhiều phần tử.

Thuộc tính dữ liệu

Bảng sau đây liệt kê các thuộc tính dữ liệu kèm theo nội dung mô tả:

Thuộc tính
data-client_id ID ứng dụng khách của ứng dụng của bạn
data-auto_prompt Hiển thị Google One tap.
data-auto_select Bật chế độ tự động chọn trên Google One Tap.
data-login_uri URL của điểm cuối đăng nhập
data-callback Tên hàm xử lý mã thông báo JavaScript
data-native_login_uri URL của điểm cuối trình xử lý thông tin xác thực mật khẩu của bạn
data-native_callback Tên hàm 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 hay không nếu người dùng nhấp vào bên ngoài lời nhắc.
data-prompt_parent_id Mã DOM của phần tử vùng chứa lời nhắc Một lần nhấn
data-skip_prompt_cookie Bỏ qua một lần nhấn nếu cookie được chỉ định có giá trị không trống.
data-nonce Một chuỗi ngẫu nhiên cho mã thông báo mã nhận dạng
data-context Tiêu đề và từ trong lời nhắc Một lần nhấn
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 nhắc nhở
data-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 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 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 thuộc tính này hiển thị.
data-intermediate_iframe_close_callback Ghi đè hành vi iframe trung gian mặc định khi người dùng đóng One Tap theo cách thủ công.
data-itp_support 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.

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

data-client_id

Thuộc tính này là mã khách hàng của ứng dụng mà bạn 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 data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_lời nhắc

Thuộc tính này xác định liệu có hiển thị một lần nhấn hay không. Giá trị mặc định là true. Lượt nhấn Google One sẽ 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"

dữ liệu tự động chọn

Thuộc tính này xác định liệu hệ thống có tự động trả về mã thông báo mã nhận dạng mà không cần người dùng tương tác hay không nếu chỉ có một phiên Google được phê duyệt cho ứ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. 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 không có hàm 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 nhấn hoặc tự động ký.

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 đặt data-ux_mode="popup"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 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

lệnh 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ụ:
chuỗi Bắt buộc nếu bạn không đặt data-login_uri. data-callback="handleToken"

Có thể sử dụng một trong các thuộc tính data-login_uridata-callback. Phần phụ thuộc vào các cấu hình thành phần và chế độ trải nghiệm người dùng sau đây:

  • Thuộc tính data-login_uri là bắt buộc đối với nút Đăng nhập bằng Google Chế độ trải nghiệm người dùng redirect. Chế độ này sẽ bỏ qua thuộc tính data-callback.

  • Bạn phải đặt một trong hai thuộc tính này cho Google One Tap và nút Đăng nhập bằng Google popup chế độ trải nghiệm người dùng. Nếu đặt cả hai, thuộc tính data-callback sẽ có mức độ ưu tiên cao hơn.

API HTML không hỗ trợ các hàm JavaScript trong không gian tên. Thay vào đó, hãy sử dụng hàm JavaScript toàn cục không có vùng chứa 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 trình xử lý thông tin xác thực mật khẩu của bạn. 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. Bạn không được phép đặt cả thuộc tính data-native_callbackdata-native_login_uri. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
chuỗi Không bắt buộc data-login_uri="https://www.example.com/password_login"

data-native_callback

Thuộc tính này là tên của hàm JavaScript xử lý thông tin xác thực mật khẩu do trình quản lý thông tin xác thực gốc của trình duyệt trả về. 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. Bạn không được phép đặt cả data-native_callbackdata-native_login_uri. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
chuỗi Không bắt buộc data-native_callback="handlePasswordCredential"

API HTML 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 không có vùng chứa 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 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_External

Thuộc tính này thiết lập 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. Để tắt tính năng này, hãy đặt giá trị thành false. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
boolean Không bắt buộc data-cancel_on_tap_outside="false"

data-Prompt_parent_id (dữ liệu lời nhắc của 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, lời nhắc Một lần nhấn 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 data-prompt_parent_id="parent_id"

Thuộc tính này bỏ qua Một lần nhấn 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ụ:
chuỗi Không bắt buộc data-skip_prompt_cookie="SID"

không có dữ liệu

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 chặn các cuộc tấn công phát lại. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
chuỗi Không bắt buộc data-nonce="biaqbm70g23"

Độ dài của số chỉ dùng một lần bị giới hạn ở kích thước JWT tối đa đượ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ẻ.

ngữ cảnh dữ liệu

Thuộc tính 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 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 data-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"

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 nhắc. Để biết thêm thông tin, hãy tham khảo loại dữ liệu PromptMomentNotification. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
chuỗi Không bắt buộc data-moment_callback="logMomentNotification"

API HTML 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 không có vùng chứa tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.

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 sang thuộc tính này để sử dụng cookie trạng thái được chia sẻ duy nhất. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
chuỗi Không bắt buộc data-state_cookie_domain="example.com"

chế độ 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 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 data-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.

data-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 thuộc tính 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 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ả.

Loại giá trị
string Một URI miền. "https://vidu.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ệ, 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.

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://*.comhttps://*.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ể dùng danh sách phân tách bằng dấu phẩy để đạ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ệ.

data-intermediate_iframe_close_callback

Ghi đè hành vi iframe trung gian mặc định khi người dùng đóng One Tap theo cách thủ công bằng cách nhấn vào nút "X" trong giao diện người dùng One Tap. Hành vi mặc định là xoá iframe trung gian khỏi DOM ngay lập tức.

Trường data-intermediate_iframe_close_callback chỉ có hiệu lực ở chế độ iframe trung gian. Và 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 nhấn bị xoá trước khi lệnh gọi lại được gọi.

Loại Bắt buộc Ví dụ:
hàm Không bắt buộc data-intermediate_iframe_close_callback="logBeforeClose"

API HTML 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 không có vùng chứa tên. Ví dụ: sử dụng mylibCallback thay vì mylib.callback.

data-itp_support

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 data-itp_support="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ể kết xuất nhiều nút Đăng nhập bằng Google trên cùng một trang. Mỗi nút có thể có chế độ cài đặt hình ảnh riêng. Chế độ cài đặt được xác định bằng các thuộc tính dữ liệu sau đây.

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

Bảng sau đây liệt kê các thuộc tính dữ liệu hình ảnh và nội dung mô tả:

Thuộc tính
data-type Loại nút: biểu tượng hoặc nút tiêu chuẩn.
data-theme Giao diện của nút. Ví dụ như fill_blue hoặc fill_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ăn chỉnh biểu trưng của Google: bên trái hoặc ở giữa.
data-width Chiều rộng nút, tính bằng pixel.
data-locale Văn bản của nút sẽ hiển thị bằng ngôn ngữ được đặt trong thuộc tính này.
data-click_listener Nếu 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ụ.

kiểu 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ụ:
chuỗi data-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ủ đề 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ụ:
chuỗi Không bắt buộc data-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:
Nút tiêu chuẩn có nền trắng Nút biểu tượng với nền trắng Nút được cá nhân hoá với nền trắng
filled_blue Giao diện nút có màu xanh dương:
Nút tiêu chuẩn có nền màu xanh dương Nút biểu tượng có nền màu xanh dương Nút được cá nhân hoá với nền màu xanh dương
filled_black Giao diện nút có màu đen:
Nút tiêu chuẩn có nền đen Nút biểu tượng có nền đen Nút được cá nhân hoá với nền đen

kích thước dữ liệu

Kích thước nút. Giá trị mặc định là large. Hãy xem bảng sau để biết thêm thông tin:

Loại Bắt buộc Ví dụ:
chuỗi Không bắt buộc data-size="small"

Bảng sau đây liệt kê các kích thước nút có sẵn và nội dung mô tả.

Kích thước
large Nút lớn:
Nút tiêu chuẩn lớn Nút biểu tượng lớn Nút lớn và được cá nhân hoá
medium Nút có kích thước trung bình:
Nút tiêu chuẩn trung bình Nút biểu tượng trung bình
small Một nút nhỏ:
Một nút nhỏ Nút biểu tượng nhỏ

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ụ:
chuỗi Không bắt buộc data-text="signup_with"

Bảng sau đây liệt kê các văn bản nút 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):
Nút tiêu chuẩn có nhãn &quot;Đăng nhập bằng Google&quot; Nút biểu tượng không có văn bản hiển thị
signup_with Văn bản của nút là “Đăng ký bằng Google”:
Nút tiêu chuẩn có nhãn &quot;Đăng ký bằng Google&quot; Nút biểu tượng không có văn bản hiển thị
continue_with Văn bản của nút là “Tiếp tục bằng Google”:
Nút tiêu chuẩn có nhãn &quot;Tiếp tục bằng Google&quot; Nút biểu tượng không có văn bản hiển thị
signin Văn bản của nút là “Đăng nhập”:
Nút tiêu chuẩn có nhãn &quot;Đăng nhập&quot; Nút biểu tượng không có văn bản hiển thị

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ụ:
chuỗi Không bắt buộc data-shape="rectangular"

Bảng sau đây liệt kê các hình dạng nút 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 icon thì cũng giống như square.
Nút tiêu chuẩn hình chữ nhật Nút biểu tượng hình chữ nhật Nút được cá nhân hóa hình chữ nhật
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.
Nút tiêu chuẩn hình viên thuốc Nút biểu tượng hình viên thuốc Nút cá nhân hoá hình viên thuốc
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.
Nút tiêu chuẩn hình tròn Nút biểu tượng hình tròn Một nút tròn được cá nhân hóa
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.
Nút tiêu chuẩn hình vuông Nút biểu tượng hình vuông Nút cá nhân hóa hình vuông

data-logo_alignment

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 data-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:
Nút tiêu chuẩn có biểu trưng G ở bên trái
center Căn giữa biểu trưng của Google:
Nút tiêu chuẩn có biểu trưng G ở giữa

chiều rộng dữ liệu

Chiều rộng nút tối thiểu, 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ụ:
chuỗi Không bắt buộc data-width=400

data-locale

Không bắt buộc. Hiển thị văn bản của nút bằng cách sử dụng ngôn ngữ được chỉ định, nếu không, hãy đặt mặc định thành 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 thông số hl và mã ngôn ngữ vào lệnh src khi tải thư viện, ví dụ: gsi/client?hl=<iso-639-code>.

Nếu bạn không đặt chính sách này, thì ngôn ngữ mặc định của trình duyệt hoặc chế độ ưu tiên của người dùng trong phiên hoạt động trê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 hoá 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 data-locale="zh_CN"
#### Click_listener {:#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ụ trên, thông báo _Sign in with Google đã nhấp vào..._ sẽ được đăng nhập 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. ## Tích hợp phía máy chủ {:#phía máy chủ tích hợp} Đ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. ### Điểm cuối của trình xử lý mã thông báo mã nhận dạng {:#id-token-handler-endpoint} Điểm cuối của trình xử lý mã thông báo nhận dạng sẽ xử lý mã thông báo đó. Dựa trên trạng thái của tài khoản tương ứng, bạn có thể đăng nhập người dùng và đưa họ đến trang đăng ký hoặc đưa 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 Mô tả
Bánh quy g_csrf_token Một chuỗi ngẫu nhiên thay đổi theo từng yêu cầu đến điểm cuối của trình xử lý.
Tham số yêu cầu g_csrf_token Một chuỗi giống với giá trị cookie trước đó, g_csrf_token.
Tham số yêu cầu credential Mã thông báo mà Google phát hành.
Tham số yêu cầu select_by Cách thông tin xác thực được chọn.

Khi được giải mã, mã thông báo mã sẽ có dạng như trong 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"
}

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.

Đ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 Mô tả
Bánh quy g_csrf_token Một chuỗi ngẫu nhiên thay đổi theo từng yêu cầu đến điểm cuối của trình xử lý.
Tham số yêu cầu g_csrf_token Một chuỗi giống với giá trị cookie trước đó, g_csrf_token.
Tham số yêu cầu email Mã thông báo này do Google cấp.
Tham số yêu cầu password Cách thông tin xác thực được chọn.