Di chuyển từ tính năng Đăng nhập bằng Google

Hướng dẫn này giúp bạn hiểu những thay đổi cần thiết và các bước để di chuyển thành công thư viện JavaScript từ tính năng Đăng nhập bằng Google trước đó thư viện nền tảng sang thư viện Dịch vụ nhận dạng của Google mới hơn cho xác thực.

Nếu khách hàng của bạn đang sử dụng Thư viện ứng dụng API của Google cho JavaScript hoặc Các thư viện trước để uỷ quyền, hãy xem phần Di chuyển sang Google Identity Dịch vụ của chúng tôi để biết thêm thông tin.

Xác thực và uỷ quyền

Xác thực xác định danh tính của một người và thường được gọi là đăng ký hoặc đăng nhập của người dùng. Cấp phép là quá trình cấp hoặc từ chối truy cập vào dữ liệu hoặc tài nguyên. Ví dụ: ứng dụng của bạn yêu cầu sự đồng ý của người dùng để truy cập vào Google Drive của người dùng.

Giống như thư viện nền tảng Đăng nhập bằng Google trước đây, Google Identity mới Thư viện dịch vụ được xây dựng để hỗ trợ cả xác thực và uỷ quyền các quy trình.

Tuy nhiên, thư viện mới sẽ tách riêng hai quy trình để giảm tính phức tạp để nhà phát triển tích hợp Tài khoản Google với ứng dụng của bạn.

Nếu trường hợp sử dụng của bạn chỉ liên quan đến xác thực, hãy tiếp tục đọc trang này.

Nếu trường hợp sử dụng của bạn có yêu cầu uỷ quyền, hãy đọc bài viết Cách hoạt động của việc uỷ quyền cho người dùng và Di chuyển sang Dịch vụ nhận dạng của Google để đảm bảo ứng dụng của bạn bằng cách dùng các API mới và cải tiến.

Những điểm thay đổi

Đối với người dùng, thư viện Dịch vụ nhận dạng của Google mới cung cấp nhiều cải tiến về khả năng sử dụng. Những điểm nổi bật bao gồm:

• Các quy trình tự động đăng nhập và tính năng Một lần chạm mới, dễ sử dụng với ít cá nhân hơn bước,
• một nút đăng nhập mới với tính năng cá nhân hoá cho người dùng,
• xây dựng thương hiệu nhất quán và hành vi đăng nhập đồng nhất trên web sẽ được cải thiện sự thấu hiểu và tin tưởng,
• nhanh chóng tiếp cận nội dung; người dùng có thể trực tiếp đăng ký và đăng nhập từ bất cứ đâu trên trang web của mình mà không phải truy cập vào trang đăng nhập hoặc trang tài khoản trước.

Đối với các nhà phát triển, trọng tâm của chúng tôi là giảm độ phức tạp, cải thiện khả năng bảo mật và giúp bạn tích hợp nhanh nhất có thể. Có thể kể đến một số điểm cải tiến như sau:

• Lựa chọn thêm người dùng đăng nhập vào nội dung tĩnh của trang web bằng cách chỉ HTML,
• tách biệt xác thực đăng nhập khỏi cấp phép và chia sẻ dữ liệu người dùng thì việc tích hợp OAuth 2.0 không còn phức tạp nữa để đăng nhập người dùng vào trang web của bạn,
• cả chế độ cửa sổ bật lên và chế độ chuyển hướng vẫn được hỗ trợ, nhưng OAuth của Google Cơ sở hạ tầng 2.0 hiện chuyển hướng đến điểm cuối đăng nhập của máy chủ phụ trợ,
• hợp nhất các chức năng của cả hai sản phẩm Google Identity trước đây và thư viện JavaScript API của Google vào một thư viện mới,
• đối với phản hồi đăng nhập, bây giờ bạn có thể quyết định xem có nên sử dụng Promise (Lời hứa hẹn) và tính gián tiếp thông qua các hàm kiểu getter đã bị loại bỏ để đơn giản hoá.

Ví dụ về di chuyển thông tin đăng nhập

Nếu bạn đang di chuyển từ nút Đăng nhập bằng Google hiện có và chỉ muốn đăng nhập người dùng vào trang web của bạn, thay đổi đơn giản nhất là để cập nhật lên nút "dành riêng cho bạn" mới. Bạn có thể thực hiện việc này bằng cách hoán đổi Thư viện JavaScript và cập nhật cơ sở mã của bạn để sử dụng đối tượng đăng nhập mới.

Thư viện và cấu hình

Thư viện nền tảng Đăng nhập bằng Google phiên bản cũ: apis.google.com/js/platform.js, và thư viện ứng dụng API của Google dành cho JavaScript: gapi.client, không cần nhiều thời gian hơn cho việc xác thực và uỷ quyền người dùng. Họ đã được thay thế bằng một thư viện JavaScript mới cho Dịch vụ nhận dạng của Google: accounts.google.com/gsi/client.

Ba mô-đun JavaScript trước đó: api, client và platform được sử dụng cho thông tin đăng nhập đều được tải từ apis.google.com. Giúp bạn xác định vị trí trong đó thư viện cũ có thể được đưa vào trang web của bạn, thường là:

• nút đăng nhập mặc định sẽ tải apis.google.com/js/platform.js,
• một đồ hoạ nút tuỳ chỉnh sẽ tải apis.google.com/js/api:client.js, và
• việc sử dụng trực tiếp gapi.client sẽ tải apis.google.com/js/api.js.

Trong hầu hết các trường hợp, bạn có thể tiếp tục sử dụng Mã ứng dụng khách cho ứng dụng web hiện có thông tin xác thực. Trong quá trình di chuyển, bạn nên xem lại Chính sách của OAuth 2.0 và sử dụng Bảng điều khiển API của Google để xác nhận và nếu cần, hãy cập nhật các cài đặt ứng dụng sau:

• các ứng dụng kiểm thử và chính thức của bạn sử dụng các Dự án riêng biệt và có các Dự án riêng Mã ứng dụng khách,
• loại mã ứng dụng khách OAuth 2.0 là "Ứng dụng web" và
• HTTPS được dùng cho các nguồn gốc JavaScript được uỷ quyền và URI chuyển hướng.

Xác định mã và hoạt động kiểm thử bị ảnh hưởng

Cookie gỡ lỗi có thể giúp xác định mã bị ảnh hưởng và kiểm thử sau khi ngừng sử dụng hành vi.

Trong các ứng dụng lớn hoặc phức tạp, có thể khó tìm thấy tất cả các mã chịu ảnh hưởng của việc ngừng sử dụng mô-đun gapi.auth2. Để ghi lại hoạt động sử dụng hiện tại của sắp trở thành các tính năng không dùng nữa đối với bảng điều khiển, hãy đặt giá trị của G_AUTH2_MIGRATION thành informational. Bạn có thể thêm dấu hai chấm theo sau là một khoá-giá trị vào cũng đăng nhập vào bộ nhớ phiên. Sau khi đăng nhập và nhận xem xét thông tin đăng nhập hoặc gửi nhật ký đã thu thập đến một phần phụ trợ để phân tích sau này. Cho ví dụ: informational:showauth2use lưu nguồn gốc và URL vào bộ nhớ phiên khoá có tên showauth2use.

Để xác minh hành vi của ứng dụng khi không tải mô-đun gapi.auth2 nữa, hãy đặt giá trị giá trị của cookie G_AUTH2_MIGRATION vào enforced. Điều này cho phép kiểm tra hành vi sau khi chấm dứt hoạt động trước ngày thực thi.

Có thể có G_AUTH2_MIGRATION giá trị cookie:

• enforced Không tải mô-đun gapi.auth2.
• informational Ghi nhật ký việc sử dụng các tính năng không dùng nữa vào bảng điều khiển JS. Đồng thời ghi nhật ký vào bộ nhớ phiên khi đặt tên khoá không bắt buộc: informational:key-name.

Để giảm thiểu tác động đến người dùng, trước tiên, bạn nên đặt cookie này trên thiết bị trong quá trình phát triển và thử nghiệm, trước khi sử dụng trong môi trường thực tế.

HTML và JavaScript

Trong tình huống đăng nhập chỉ để xác thực này, mã ví dụ và hiển thị của nút Đăng nhập bằng Google hiện có sẽ hiển thị. Chọn Cửa sổ bật lên hoặc Chuyển hướng để xem sự khác biệt trong cách phản hồi xác thực được xử lý bằng cách lệnh gọi lại JavaScript hoặc bằng cách chuyển hướng an toàn đến thông tin đăng nhập máy chủ phụ trợ của bạn điểm cuối.

Cách sớm hơn

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
  </body>
</html>

<html>
  <body>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
    <div class="g-signin2" data-onsuccess="handleCredentialResponse"></div>
    <script>
      function handleCredentialResponse(googleUser) {
        ...
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://yourbackend.example.com/tokensignin');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
          console.log('Signed in as: ' + xhr.responseText);
        };
        xhr.send('idtoken=' + id_token);
      }
    </script>
  </body>
</html>

Cách mới

Để sử dụng thư viện mới trong trường hợp đăng nhập chỉ có thể xác thực, hãy chọn từ chế độ Cửa sổ bật lên hoặc Chuyển hướng và sử dụng mã mẫu để thay thế triển khai hiện tại trên trang đăng nhập của bạn.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-callback="handleCredentialResponse">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-ux_mode="redirect"
         data-login_uri="https://www.example.com/your_login_endpoint">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

Trong ví dụ chỉ xác thực này, accounts.google.com/gsi/client mới thư viện, lớp g_id_signin và đối tượng g_id_onload sẽ thay thế lớp trước đó Thư viện apis.google.com/js/platform.js và đối tượng g-signin2.

Ngoài việc hiển thị nút cá nhân hoá mới, mã ví dụ cũng hiển thị cửa sổ bật lên "Một lần chạm" mới. Bất cứ khi nào bạn hiển thị nút được cá nhân hoá, chúng tôi bạn cũng nên hiển thị cửa sổ bật lên Một lần chạm để giảm thiểu sự phiền hà trong quá trình đăng ký và đăng nhập.

Mặc dù không được khuyến nghị do sự phiền hà khi đăng nhập gia tăng, có thể hiển thị riêng nút được cá nhân hoá mà không cần hiển thị đồng thời Hộp thoại Một lần nhấn. Để thực hiện việc này, hãy đặt thuộc tính data-auto_prompt thành false.

API HTML và JavaScript

Ví dụ trước cho biết cách sử dụng API HTML mới để thêm thông tin đăng nhập vào trang web của bạn. Ngoài ra, bạn có thể sử dụng hàm tương đương API JavaScript hoặc kết hợp và so khớp các API HTML và JavaScript trên của bạn.

Để xem các tuỳ chọn tuỳ chỉnh nút một cách tương tác, chẳng hạn như loại lệnh gọi lại và các thuộc tính như: màu sắc, kích thước, hình dạng, văn bản và giao diện, hãy kiểm tra Mã . Dữ liệu này có thể được dùng để nhanh chóng so sánh các lựa chọn khác nhau và tạo Đoạn mã HTML để sử dụng trên trang web của bạn.

Đăng nhập từ trang bất kỳ bằng tính năng Một lần chạm

Tính năng Một lần chạm là một cách mới nhanh chóng để người dùng đăng ký hoặc đăng nhập vào trang web của bạn. Cho phép bạn cho phép người dùng đăng nhập trực tiếp từ bất kỳ trang nào trên trang web của bạn và mà không cần người dùng phải truy cập vào trang đăng nhập riêng. Nói cách khác, Điều này giúp giảm sự phiền hà khi đăng ký và đăng nhập bằng cách cho phép người dùng linh hoạt đăng ký và đăng nhập từ các trang không phải trang đăng nhập của bạn.

Để cho phép đăng nhập từ bất kỳ trang nào, chúng tôi khuyên bạn nên đưa g_id_onload vào đầu trang, chân trang được chia sẻ hoặc đối tượng khác được bao gồm trên toàn bộ trang web của bạn.

Bạn cũng nên thêm g_id_signin để hiển thị thông tin đăng nhập dành riêng cho bạn , chỉ trên trang đăng nhập hoặc trang quản lý tài khoản người dùng. Đưa ra lựa chọn cho người dùng để đăng ký hoặc đăng nhập bằng cách hiển thị nút này cùng với các nút liên kết khác nút nhà cung cấp danh tính cũng như các trường nhập tên người dùng và mật khẩu.

Phản hồi bằng mã thông báo

Quy trình đăng nhập người dùng không còn yêu cầu bạn phải hiểu hoặc làm việc với OAuth 2.0 nữa mã uỷ quyền, mã truy cập hoặc mã làm mới. Thay vào đó là Mã thông báo web JSON (JWT) Mã thông báo mã nhận dạng được dùng để chia sẻ trạng thái đăng nhập và hồ sơ người dùng. Là một cho đơn giản hơn, bạn không còn phải sử dụng "getter" phong cách phương thức truy cập để làm việc với dữ liệu hồ sơ người dùng.

Thông tin xác thực mã thông báo mã nhận dạng JWT bảo mật do Google ký sẽ được trả về:

• vào trình xử lý gọi lại JavaScript dựa trên trình duyệt của người dùng ở chế độ Cửa sổ bật lên, hoặc
• tới máy chủ phụ trợ của bạn thông qua lệnh chuyển hướng của Google đến điểm cuối đăng nhập khi nút Đăng nhập bằng Google ux_mode được đặt thành redirect.

Trong cả hai trường hợp, hãy cập nhật trình xử lý gọi lại hiện có bằng cách xoá:

• cuộc gọi đến googleUser.getBasicProfile(),
• tham chiếu đến BasicProfile và các lệnh gọi liên quan đến getId(), getName(), getGivenName(), getFamilyName(), getImageUrl(), getEmail() phương thức và
• việc sử dụng đối tượng AuthResponse.

Thay vào đó, hãy sử dụng thông tin tham chiếu trực tiếp đến các trường phụ credential trong JWT mới CredentialResponse để xử lý dữ liệu hồ sơ người dùng.

Ngoài ra, và chỉ dành cho chế độ Chuyển hướng, hãy nhớ ngăn Yêu cầu trên nhiều trang web Giả mạo (CSRF) và Xác minh mã thông báo mã nhận dạng Google trên máy chủ phụ trợ của bạn.

Để hiểu rõ hơn về cách người dùng tương tác với trang web của bạn, Bạn có thể sử dụng trường select_by trong CredentialResponse để xác định người dùng kết quả đồng ý và quy trình đăng nhập cụ thể được sử dụng.

Sự đồng ý của người dùng và thu hồi quyền

Khi người dùng đăng nhập lần đầu vào trang web của bạn, Google sẽ nhắc người dùng đồng ý để chia sẻ hồ sơ tài khoản của họ với ứng dụng của bạn. Chỉ sau khi người dùng đồng ý hồ sơ của người dùng được chia sẻ với ứng dụng của bạn trong tải trọng thông tin xác thực của mã thông báo nhận dạng. Việc thu hồi quyền truy cập vào hồ sơ này tương đương với việc thu hồi mã truy cập trong thư viện đăng nhập trước đó.

Người dùng có thể thu hồi quyền và ngắt kết nối ứng dụng của bạn khỏi Tài khoản Google của họ bằng cách truy cập vào https://myaccount.google.com/permissions. Hoặc họ có thể trực tiếp ngắt kết nối khỏi ứng dụng của bạn bằng cách kích hoạt một API mà bạn triển khai; phương thức disconnect trước đó được được thay thế bằng phương thức revoke mới hơn.

Khi người dùng xoá tài khoản của họ trên nền tảng của bạn, phương pháp hay nhất là sử dụng revoke để ngắt kết nối ứng dụng của bạn khỏi Tài khoản Google của con.

Trước đây, auth2.signOut() có thể được dùng để giúp quản lý hoạt động đăng xuất của người dùng khỏi ứng dụng của bạn. Phải xoá mọi hoạt động sử dụng auth2.signOut() và ứng dụng của bạn sẽ quản lý trực tiếp trạng thái phiên hoạt động và trạng thái đăng nhập của mỗi người dùng.

Trạng thái phiên và Trình nghe

Thư viện mới sẽ không duy trì trạng thái đăng nhập hoặc trạng thái phiên cho trang web của bạn .

Trạng thái đăng nhập của Tài khoản Google, trạng thái phiên và trạng thái đã đăng nhập là các khái niệm riêng biệt.

Trạng thái đăng nhập của người dùng vào Tài khoản Google của họ và ứng dụng của bạn độc lập với nhau khác, trừ phi trong chính thời điểm đăng nhập khi bạn biết rằng người dùng đã xác thực thành công và đăng nhập vào Tài khoản Google của mình.

Khi tính năng Đăng nhập bằng Google, tính năng Một lần nhấn hoặc tính năng Đăng nhập tự động đều có trên trước tiên, người dùng trang web phải đăng nhập vào Tài khoản Google của họ để:

• đồng ý chia sẻ hồ sơ người dùng của họ khi đăng ký lần đầu hoặc đăng nhập vào trang web của bạn
• và sau đó để đăng nhập trong các lượt truy cập lại vào trang web của bạn.

Người dùng có thể vẫn ở trạng thái đăng nhập, đăng xuất hoặc chuyển sang một Tài khoản Google khác trong khi vẫn duy trì phiên đăng nhập đang hoạt động trên trang web của bạn.

Giờ đây, bạn chịu trách nhiệm quản lý trực tiếp trạng thái đăng nhập cho người dùng của ứng dụng web của bạn. Trước đây, tính năng Đăng nhập bằng Google đã giúp Theo dõi trạng thái phiên hoạt động.

Xoá mọi tham chiếu đến auth2.attachClickHandler() và những tham chiếu đã đăng ký trình xử lý gọi lại.

Trước đây, Trình nghe được dùng để chia sẻ những thay đổi về trạng thái đăng nhập cho Tài khoản Google của người dùng. Chúng tôi không còn hỗ trợ trình nghe nữa.

Xoá mọi mục tham chiếu đến listen(), auth2.currentUser và auth2.isSignedIn.

Bánh quy

Tính năng Đăng nhập bằng Google hạn chế việc sử dụng cookie, nội dung mô tả về những cookie này theo dõi. Xem Cách Google sử dụng cookie để biết thêm thông tin về các loại cookie khác mà Google sử dụng.

Cookie G_ENABLED_IDPS do Thư viện nền tảng đăng nhập bằng Google đặt trước đó không còn được sử dụng nữa.

Thư viện Dịch vụ nhận dạng mới của Google có thể tuỳ ý đặt các miền này cookie dựa trên các tuỳ chọn cấu hình của bạn:

• g_state lưu trữ trạng thái đăng xuất của người dùng và được thiết lập khi dùng tính năng Một lần chạm bật lên hoặc Tự động đăng nhập,

• g_csrf_token là một cookie gửi 2 lần dùng để ngăn chặn các cuộc tấn công CSRF và được đặt khi điểm cuối đăng nhập của bạn được gọi. Giá trị cho URI đăng nhập của bạn có thể được đặt rõ ràng hoặc có thể mặc định là URI của trang hiện tại. Thông tin điểm cuối đăng nhập có thể được gọi trong các điều kiện sau khi sử dụng:

  • API HTML với data-ux_mode=redirect hoặc khi data-login_uri là tập hợp, hoặc

  • API JavaScript với ux_mode=redirect và trong đó google.accounts.id.prompt() không được dùng để hiển thị tính năng Một lần chạm hoặc Tự động đăng nhập.

Nếu bạn có một dịch vụ quản lý cookie, hãy nhớ thêm 2 cookie mới này và xoá cookie trước đó khi quá trình di chuyển hoàn tất.

Nếu bạn quản lý nhiều miền hoặc miền con, hãy xem phần Hiển thị một lần chạm trên toàn bộ miền Miền con để được hướng dẫn thêm về cách làm việc với cookie g_state.

Tài liệu tham khảo về việc di chuyển đối tượng để người dùng đăng nhập