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. Hãy sử dụng HTML hoặc JavaScript để kết xuất nút và các thuộc tính để tuỳ chỉnh hình dạng, kích thước, văn bản và giao diện 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 Mã thông báo web JSON (JWT). Để biết thông tin tổng quan về các bước liên quan trong 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 hoá 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 này vào trang đăng nhập của bạn:
- Hãy làm theo các bước được mô tả trong phần Thiết lập để định cấu hình Màn hình lấy sự đồng ý OAuth và để lấy mã ứng dụng khách.
- Tải thư viện ứng dụng.
Kết xuất 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 này 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></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>
Một phần tử có lớp g_id_signin sẽ hiển thị dưới dạng nút Đăng nhập bằng Google.
Nút này được tuỳ chỉnh bằng các thông số được cung cấp trong các thuộc tính dữ liệu.
Để hiển thị nút Đăng nhập bằng Google và tính năng Chạm của Google One trên cùng một trang, hãy xoá data-auto_prompt="false". Bạn nên làm điều này để giảm sự phiền hà và cải thiện tỷ lệ đăng nhập.
Để biết danh sách đầy đủ các thuộc tính dữ liệu, hãy xem trang Tài liệu tham khảo về g_id_signin
JavaScript
Hiển thị nút đăng nhập bằng JavaScript, trả 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></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 của 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 đã chỉ định trong tham số thứ hai cho renderButton.
Để giảm thiểu sự phiền hà cho người dùng, google.accounts.id.prompt() được gọi để hiển thị tính năng Một lần chạm như một giải pháp thay thế thứ hai 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 chứa g_id_signin. Nếu tìm thấy một phần tử phù hợp, nút này sẽ hiển thị bằng cách sử dụng HTML, bất kể bạn có kết xuất nút đó trong JavaScript hay không. Để tránh hiển thị nút hai lần, có thể có các tham số xung đột, bạn không nên bao gồm các phần tử HTML khớp với các tên này trong trang HTML.
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 lựa chọn ưu tiên của người dùng trong 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 tham 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 tham 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ữ 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></script>
<div class="g_id_signin" data-locale="fr">
</div>
JavaScript
Đoạn mã sau đây cho biết cách hiển thị ngôn ngữ 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 có tham số locale được đặt thành tiếng Pháp:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></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ề 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 cho một điểm cuối đăng nhập do nền tảng của bạn lưu trữ.
Vị trí bạn chọn nhận JWT phụ thuộc vào việc bạn hiển thị nút bằng HTML hay JavaScript, cũng như liệu bạn có sử dụng chế độ trải nghiệm người dùng bật lên hay chuyển hướng hay không.
Chế độ cửa sổ bật lên
Việc sử dụng chế độ trải nghiệm người dùng popup sẽ thực hiện quy trình đăng nhập trải nghiệm người dùng trong một cửa sổ bật lên. Thường thì đây là trải nghiệm ít gây phiền hà 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
Bạn có thể đặt một trong hai tuỳ chọn sau:
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 JWT trực tiếp đến điểm cuối đăng nhập bằng cách sử dụng yêu cầu POST.
Nếu bạn đặt cả hai giá trị, thì data-callback sẽ được ưu tiên hơn data-login_uri. Việc đặt cả hai giá trị có thể hữu ích khi sử dụng trình xử lý lệnh gọi lại để gỡ lỗi.
JavaScript
Bạn phải chỉ định callback, chế độ cửa sổ bật lên không hỗ trợ lệnh chuyển hướng khi gửi nút trong JavaScript. Nếu bạn đặt chính sách này, login_uri sẽ bị bỏ qua.
Xem bài viết 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 luồng trải nghiệm người dùng đăng nhập bằng cách chuyển hướng toàn trang trên trình duyệt của người dùng, và Google trực tiếp trả về JWT cho điểm cuối đăng nhập của bạn bằng cách sử dụng yêu cầu POST.
Nhìn chung, đây là trải nghiệm xâm nhập nhiều 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) đặt
data-login_urithành URI của điểm cuối đăng nhập của bạn. - JavaScript (không bắt buộc) đặt
login_urithành URI của điểm cuối đăng nhập của bạn.
Nếu bạn không cung cấp giá trị, Google sẽ trả về JWT cho URI của trang hiện tại.
URI điểm cuối đăng nhập của bạn
Sử dụng HTTPS và URI tuyệt đối khi thiết lập data-login_uri hoặc login_uri.
Ví dụ: https://example.com/path.
Chỉ cho phép HTTP khi sử dụng localhost 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 để biết nội dung mô tả đầy đủ về các yêu cầu và quy tắc xác thực của Google.