Thêm nút Đăng nhập bằng Google vào trang web của bạn để cho phép người dùng đăng ký hoặc đăng nhập vào ứng dụng web của bạn. Hãy sử dụng HTML hoặc JavaScript để hiển thị nút và các thuộc tính tùy chỉnh hình dạng, kích thước, văn bản và chủ đề của nút.
Sau khi người dùng chọn một Tài khoản Google và đồng ý, Google sẽ chia sẻ hồ sơ người dùng đó bằng cách sử dụng Mã thông báo web JSON (JWT). Để biết tổng quan về các bước có liên quan đến quá trình đăng nhập và trải nghiệm người dùng, hãy xem bài viết Cách hoạt động. Tìm hiểu về nút được cá nhân hóa xem xét các điều kiện và trạng thái khác nhau ảnh hưởng đến cách hiển thị nút cho người dùng.
Điều kiện tiên quyết
Hãy hoàn tất các bước sau trước khi thêm nút vào trang đăng nhập:
- Hãy làm theo các bước được mô tả trong mục Thiết lập để định cấu hình Màn hình xin phép bằng OAuth và để lấy Mã ứng dụng khách.
- Tải thư viện ứng dụng.
Kết xuất bằng nút
Để hiển thị nút Đăng nhập bằng Google, bạn có thể chọn HTML hoặc JavaScript để hiển thị nút trên trang đăng nhập:
HTML
Hiển thị nút đăng nhập bằng HTML, trả JWT về điểm cuối đăng nhập của nền tảng.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
</body>
</html>
Phần tử có lớp g_id_signin sẽ kết xuất dưới dạng nút Đăng nhập bằng Google.
Nút này được tuỳ chỉnh bởi các thông số được cung cấp trong thuộc tính dữ liệu.
Để hiển thị nút Đăng nhập bằng Google và Google One Tap trên cùng một trang, hãy xóa data-auto_prompt="false". Bạn nên làm việc này để giảm bớt khó khăn và
cải thiện tỷ lệ đăng nhập.
Để xem danh sách đầy đủ các thuộc tính dữ liệu, hãy xem trang Tài liệu tham khảo g_id_signin
JavaScript
Hiển thị nút đăng nhập bằng JavaScript, trả lại JWT về trình xử lý gọi lại JavaScript của trình duyệt.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
Phần tử được chỉ định làm tham số đầu tiên đối với renderButton sẽ hiển thị dưới dạng nút Đăng nhập bằng Google. Trong ví dụ này, buttonDiv được dùng để hiển thị nút trên trang. Nút này được tuỳ chỉnh bằng cách sử dụng các thuộc tính được chỉ định trong tham số thứ hai cho renderButton.
Để giảm thiểu trở ngại của người dùng, google.accounts.id.prompt() được gọi để hiển thị
Một lần nhấn thay thế cho việc sử dụng nút để đăng ký hoặc đăng nhập.
Thư viện GIS phân tích cú pháp tài liệu HTML cho các phần tử có thuộc tính mã nhận dạng được đặt thành g_id_onload hoặc các thuộc tính lớp có chứa g_id_signin. Nếu tìm thấy phần tử phù hợp, nút cũng sẽ hiển thị bằng HTML, bất kể bạn cũng đã hiển thị nút trong JavaScript hay chưa. Để tránh hiển thị nút hai lần, có thể các thông số xung đột sẽ không bao gồm các phần tử HTML khớp với các tên này trong các trang HTML của bạn.
Ngôn ngữ của nút
Ngôn ngữ của nút được tự động xác định theo ngôn ngữ mặc định của trình duyệt hoặc tuỳ chọn của người dùng phiên Google. Bạn cũng có thể chọn ngôn ngữ theo cách thủ công bằng cách thêm thông số hl và mã ngôn ngữ vào lệnh src khi tải thư viện và bằng cách thêm thông số data-locale hoặc ngôn ngữ tuỳ chọn data-locale trong HTML hoặc locale trong JavaScript.
HTML
Đoạn mã sau đây cho biết cách hiển thị ngôn ngữ của nút bằng tiếng Pháp bằng cách thêm tham số hl vào URL thư viện ứng dụng và bằng cách đặt thuộc tính data-locale thành tiếng Pháp:
<script src="https://accounts.google.com/gsi/client?hl=fr" async defer></script> ... <div class="g_id_signin" data-locale="fr"> </div>
JavaScript
Đoạn mã sau đây cho thấy một ví dụ về cách hiển thị ngôn ngữ của nút bằng tiếng Pháp
bằng cách thêm thông số hl vào URL thư viện ứng dụng và gọi phương thức google.accounts.id.renderButton với locale được đặt thành tiếng Pháp:
<script src="https://accounts.google.com/gsi/client?hl=fr" async defer></script>
...
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
Xử lý thông tin xác thực
Sau khi người dùng đồng ý, Google sẽ trả về một thông tin đăng nhập Mã thông báo web JSON (JWT) được gọi là mã thông báo mã nhận dạng cho trình duyệt của người dùng hoặc trực tiếp đến một điểm cuối đăng nhập do nền tảng của bạn lưu trữ.
Nơi bạn chọn nhận JWT tuỳ thuộc vào việc bạn kết xuất nút bằng HTML hay JavaScript và liệu có sử dụng chế độ trải nghiệm người dùng hoặc cửa sổ bật lên hay không.
Chế độ cửa sổ bật lên
Sử dụng chế độ trải nghiệm người dùng popup sẽ 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. Đây thường là trải nghiệm ít xâm nhập hơn cho người dùng và là chế độ trải nghiệm người dùng mặc định.
Khi hiển thị nút bằng:
HTML mà bạn có thể đặt:
data-callbackđể trả về JWT cho trình xử lý gọi lại của bạn, hoặcdata-login_uriđể Google gửi trực tiếp JWT đến điểm cuối của thông tin đăng nhập bằng yêu cầu POST.
Nếu bạn đặt cả hai giá trị,
data-callbacksẽ được ưu tiên hơndata-login_uri. Ví dụ: Điều này có thể hữu ích khi trình xử lý gọi lại được sử dụng trong quá trình gỡ lỗi.JavaScript mà bạn phải đặt
callback, chế độ bật lên không hỗ trợ lệnh chuyển hướng khi thuê nút trong JavaScript. Nếu được đặt,login_urisẽ bị bỏ qua.Xem nội dung xử lý phản hồi thông tin xác thực được trả về để biết thêm thông tin về cách giải mã JWT trong trình xử lý gọi lại JS.
Chế độ chuyển hướng
Việc sử dụng chế độ trải nghiệm người dùng redirect sẽ thực hiện quy trình trải nghiệm người dùng đăng nhập bằng cách sử dụng lệnh chuyển hướng toàn bộ trang của trình duyệt đối với người dùng. Google sẽ trực tiếp trả về JWT cho điểm cuối đăng nhập bằng một yêu cầu POST.
Đây thường là trải nghiệm xâm nhập nghiêm ngặt hơn cho người dùng, nhưng được coi là phương thức đăng nhập an toàn nhất.
Khi hiển thị nút bằng:
- HTML không bắt buộc phải đặt
data-login_urithành URI của điểm cuối đăng nhập. - JavaScript tuỳ ý đặt
login_urithành URI của điểm cuối đăng nhập.
Nếu bạn không cung cấp giá trị, Google sẽ trả lại JWT về URI của trang hiện tại.
URI điểm cuối đăng nhập của bạn
Hãy sử dụng HTTPS và URI tuyệt đối khi đặt data-login_uri hoặc login_uri.
Ví dụ: https://example.com/path.
Chỉ cho phép HTTP khi sử dụng máy chủ cục bộ trong quá trình phát triển: http://localhost/path.
Hãy tham khảo bài viết Sử dụng nguồn gốc JavaScript và URI chuyển hướng an toàn để xem nội dung mô tả đầy đủ về các yêu cầu và quy tắc xác thực của Google.