Di chuyển sang Dịch vụ nhận dạng của Google

Luồng ngầm ẩn

Lấy mã truy cập để sử dụng trong trình duyệt khi người dùng đang có mặt.

Ví dụ về luồng ngầm ẩn cho thấy các ứng dụng web trước và sau khi di chuyển sang Dịch vụ nhận dạng.

Luồng mã uỷ quyền

Mã uỷ quyền cho mỗi người dùng do Google phát hành được phân phối cho nền tảng phụ trợ của bạn, sau đó mã đó được trao đổi để lấy mã truy cập và mã làm mới.

Ví dụ về quy trình mã uỷ quyền hiển thị các ứng dụng web trước và sau khi di chuyển sang Dịch vụ nhận dạng.

Luồng ngầm ẩn

Tách quyền xác thực và ủy quyền người dùng bằng cách xóa xử lý hồ sơ người dùng khỏi các luồng ủy quyền.

Hãy xoá những tài liệu tham khảo về ứng dụng JavaScript đăng nhập bằng Google này:

Phương pháp

• GoogleUser.getBasicProfile()
• GoogleUser.getId()

Luồng mã uỷ quyền

Dịch vụ nhận dạng phân tách thông tin xác thực trong trình duyệt thành mã thông báo mã nhận dạng và mã thông báo truy cập. Thay đổi này không áp dụng cho thông tin xác thực thu được thông qua các lệnh gọi trực tiếp đến điểm cuối Google OAuth 2.0 từ nền tảng phụ trợ hoặc thông qua thư viện chạy trên máy chủ bảo mật trên nền tảng của bạn, chẳng hạn như Ứng dụng API Google Node.js.

Luồng ngầm ẩn

Thêm đối tượng TokenClientConfig và lệnh gọi initTokenClient() để định cấu hình ứng dụng web, làm theo ví dụ trong phần khởi chạy ứng dụng mã thông báo.

Thay thế Các tệp đối chiếu JavaScript dành cho tính năng Đăng nhập bằng Google bằng Dịch vụ nhận dạng của Google:

Đối tượng:

• gapi.auth2.AuthorizeConfig có TokenClientConfig

Phương thức:

• gapi.auth2.init() có google.accounts.oauth2.initTokenClient()

Các tham số:

• gapi.auth2.AuthorizeConfig.login_hint bằng TokenClientConfig.hint.
• gapi.auth2.GoogleUser.getHostedDomain() bằng TokenClientConfig.hosted_domain.

Luồng mã uỷ quyền

Thêm đối tượng CodeClientConfig và lệnh gọi initCodeClient() để định cấu hình ứng dụng web, làm theo ví dụ trong khởi chạy ứng dụng mã.

Khi chuyển từ ngầm ẩn sang luồng mã uỷ quyền:

Xoá Các tệp tham chiếu JavaScript của chương trình Đăng nhập bằng Google

Đối tượng:

• gapi.auth2.AuthorizeConfig

Phương thức:

• gapi.auth2.init()

Các tham số:

• gapi.auth2.AuthorizeConfig.login_hint
• gapi.auth2.GoogleUser.getHostedDomain()

Luồng ngầm ẩn

Bạn có thể lấy và sử dụng mã thông báo truy cập trong trình duyệt khi người dùng đang đăng nhập và có một phiên hoạt động với Google. Đối với chế độ ngầm ẩn, một cử chỉ của người dùng bắt buộc phải yêu cầu mã truy cập, ngay cả khi có yêu cầu trước đó.

Thay thế Các tệp tham chiếu JavaScript đăng nhập bằng Google: bằng Dịch vụ nhận dạng của Google:

Phương thức:

• gapi.auth2.authorize() có TokenClient.requestAccessToken()
• GoogleUser.reloadAuthResponse() có TokenClient.requestAccessToken()

Thêm một đường liên kết hoặc nút để gọi requestAccessToken() nhằm bắt đầu luồng trải nghiệm người dùng bật lên để yêu cầu mã truy cập hoặc để lấy mã thông báo mới khi mã thông báo hiện có hết hạn.

Cập nhật cơ sở mã của bạn để:

• Kích hoạt quy trình mã thông báo OAuth 2.0 bằng requestAccessToken().
• Hỗ trợ uỷ quyền gia tăng bằng cách sử dụng requestAccessToken và OverridableTokenClientConfig để tách một yêu cầu cho nhiều phạm vi thành nhiều yêu cầu nhỏ hơn.
• Yêu cầu mã thông báo mới khi mã hiện tại hết hạn hoặc bị thu hồi.

Khi làm việc với nhiều phạm vi, bạn có thể phải thay đổi cấu trúc đối với cơ sở mã của mình để chỉ yêu cầu quyền truy cập vào các phạm vi khi cần chứ không phải tất cả các phạm vi cùng một lúc, được gọi là ủy quyền gia tăng. Mỗi yêu cầu phải chứa nhiều phạm vi nhất có thể và tốt nhất là một phạm vi duy nhất. Xem cách xử lý sự đồng ý của người dùng để biết thêm thông tin về cách cập nhật ứng dụng để tăng cường uỷ quyền.

Khi một mã truy cập hết hạn, mô-đun gapi.auth2 sẽ tự động lấy một mã truy cập hợp lệ mới cho ứng dụng web của bạn. Để tăng cường bảo mật cho người dùng, quy trình làm mới mã thông báo tự động này không được thư viện Dịch vụ nhận dạng của Google hỗ trợ. Bạn phải cập nhật ứng dụng web của mình để phát hiện một mã truy cập đã hết hạn và yêu cầu một mã truy cập mới. Hãy xem phần Xử lý mã thông báo bên dưới để biết thêm thông tin.

Luồng mã uỷ quyền

Thêm một đường liên kết hoặc nút để gọi requestCode() nhằm yêu cầu Google cấp mã uỷ quyền. Để biết ví dụ, hãy xem phần Luồng mã OAuth 2.0 cho Trình kích hoạt.

Hãy xem phần Xử lý mã thông báo bên dưới để biết thêm thông tin về cách phản hồi mã truy cập đã hết hạn hoặc bị thu hồi.

Luồng ngầm ẩn

Thay thế Các tệp đối chiếu JavaScript dành cho tính năng Đăng nhập bằng Google bằng Dịch vụ nhận dạng của Google:

Đối tượng:

• gapi.auth2.AuthorizeResponse có TokenClient.TokenResponse
• gapi.auth2.AuthResponse có TokenClient.TokenResponse

Phương thức:

• GoogleUser.hasGrantedScopes() có google.accounts.oauth2.hasGrantedAllScopes()
• GoogleUser.getGrantedScopes() có google.accounts.oauth2.hasGrantedAllScopes()

Xoá Các tệp tham chiếu JavaScript của chương trình Đăng nhập bằng Google:

Phương thức:

• GoogleUser.getAuthResponse()

Cập nhật ứng dụng web của bạn bằng hasGrantedAllScopes() và hasGrantedAnyScope() bằng cách làm theo ví dụ quyền chi tiết này.

Luồng mã uỷ quyền

Cập nhật hoặc Thêm một điểm cuối mã uỷ quyền vào nền tảng phụ trợ của bạn bằng cách làm theo hướng dẫn trong phần xử lý mã xác thực.

Cập nhật nền tảng của bạn để làm theo các bước được mô tả trong hướng dẫn Sử dụng mô hình mã để xác thực yêu cầu và lấy mã truy cập cũng như mã làm mới.

Cập nhật nền tảng của bạn để bật hoặc tắt có chọn lọc các tính năng và chức năng dựa trên từng phạm vi mà người dùng đã phê duyệt bằng cách làm theo hướng dẫn về uỷ quyền gia tăng và kiểm tra phạm vi truy cập của người dùng.

Thư viện ứng dụng GAPI

Ví dụ về Thư viện ứng dụng API của Google cho JavaScript chạy trong trình duyệt bằng cách sử dụng hộp thoại bật lên để người dùng đồng ý.

Mô-đun gapi.auth2 sẽ được tự động tải và sử dụng bởi gapi.client.init(), do đó sẽ bị ẩn.

<!DOCTYPE html>
  <html>
    <head>
      <script src="https://apis.google.com/js/api.js"></script>
      <script>
        function start() {
          gapi.client.init({
            'apiKey': 'YOUR_API_KEY',
            'clientId': 'YOUR_CLIENT_ID',
            'scope': 'https://www.googleapis.com/auth/cloud-translation',
            'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/translate/v2/rest'],
          }).then(function() {
            // Execute an API request which is returned as a Promise.
            // The method name language.translations.list comes from the API discovery.
            return gapi.client.language.translations.list({
              q: 'hello world',
              source: 'en',
              target: 'de',
            });
          }).then(function(response) {
            console.log(response.result.data.translations[0].translatedText);
          }, function(reason) {
            console.log('Error: ' + reason.result.error.message);
          });
        };

        // Load the JavaScript client library and invoke start afterwards.
        gapi.load('client', start);
      </script>
    </head>
    <body>
      <div id="results"></div>
    </body>
  </html>

Thư viện ứng dụng JS

OAuth 2.0 cho ứng dụng web phía máy khách chạy trong trình duyệt bằng hộp thoại bật lên để người dùng đồng ý.

Mô-đun gapi.auth2 được tải theo cách thủ công.

<!DOCTYPE html>
<html><head></head><body>
<script>
  var GoogleAuth;
  var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
  function handleClientLoad() {
    // Load the API's client and auth2 modules.
    // Call the initClient function after the modules load.
    gapi.load('client:auth2', initClient);
  }

  function initClient() {
    // In practice, your app can retrieve one or more discovery documents.
    var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes.
    gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'clientId': 'YOUR_CLIENT_ID',
        'discoveryDocs': [discoveryUrl],
        'scope': SCOPE
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);

      // Handle initial sign-in state. (Determine if user is already signed in.)
      var user = GoogleAuth.currentUser.get();
      setSigninStatus();

      // Call handleAuthClick function when user clicks on
      //      "Sign In/Authorize" button.
      $('#sign-in-or-out-button').click(function() {
        handleAuthClick();
      });
      $('#revoke-access-button').click(function() {
        revokeAccess();
      });
    });
  }

  function handleAuthClick() {
    if (GoogleAuth.isSignedIn.get()) {
      // User is authorized and has clicked "Sign out" button.
      GoogleAuth.signOut();
    } else {
      // User is not signed in. Start Google auth flow.
      GoogleAuth.signIn();
    }
  }

  function revokeAccess() {
    GoogleAuth.disconnect();
  }

  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    var isAuthorized = user.hasGrantedScopes(SCOPE);
    if (isAuthorized) {
      $('#sign-in-or-out-button').html('Sign out');
      $('#revoke-access-button').css('display', 'inline-block');
      $('#auth-status').html('You are currently signed in and have granted ' +
          'access to this app.');
    } else {
      $('#sign-in-or-out-button').html('Sign In/Authorize');
      $('#revoke-access-button').css('display', 'none');
      $('#auth-status').html('You have not authorized this app or you are ' +
          'signed out.');
    }
  }

  function updateSigninStatus() {
    setSigninStatus();
  }
</script>

<button id="sign-in-or-out-button"
        style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
        style="display: none; margin-left: 25px">Revoke access</button>

<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body></html>

Điểm cuối OAuth 2.0

OAuth 2.0 cho ứng dụng web phía máy khách chạy trong trình duyệt bằng lệnh chuyển hướng đến Google để người dùng đồng ý.

Ví dụ này cho thấy lệnh gọi trực tiếp tới các điểm cuối OAuth 2.0 của Google từ trình duyệt của người dùng và không sử dụng mô-đun gapi.auth2 hoặc thư viện JavaScript.

<!DOCTYPE html>
<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
  var fragmentString = location.hash.substring(1);

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0) {
    localStorage.setItem('oauth2-test-params', JSON.stringify(params) );
    if (params['state'] && params['state'] == 'try_sample_request') {
      trySampleRequest();
    }
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/drive/v3/about?fields=user&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                  'state': 'try_sample_request',
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

Chỉ dùng GPS

Ví dụ này chỉ cho thấy thư viện JavaScript Dịch vụ nhận dạng của Google sử dụng mô hình mã thông báo và hộp thoại bật lên để người dùng đồng ý. Công cụ này được cung cấp để minh hoạ số bước tối thiểu cần thiết để định cấu hình ứng dụng, yêu cầu và lấy mã truy cập, cũng như gọi API của Google.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      var client;
      var access_token;

      function initClient() {
        client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_CLIENT_ID',
          scope: 'https://www.googleapis.com/auth/calendar.readonly \
                  https://www.googleapis.com/auth/contacts.readonly',
          callback: (tokenResponse) => {
            access_token = tokenResponse.access_token;
          },
        });
      }
      function getToken() {
        client.requestAccessToken();
      }
      function revokeToken() {
        google.accounts.oauth2.revoke(access_token, () => {console.log('access token revoked')});
      }
      function loadCalendar() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
        xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
        xhr.send();
      }
    </script>
    <h1>Google Identity Services Authorization Token model</h1>
    <button onclick="getToken();">Get access token</button><br><br>
    <button onclick="loadCalendar();">Load Calendar</button><br><br>
    <button onclick="revokeToken();">Revoke token</button>
  </body>
</html>

GAPI không đồng bộ/chờ

Ví dụ này cho biết cách thêm thư viện Dịch vụ nhận dạng của Google bằng cách sử dụng mô hình mã thông báo, xóa mô-đun gapi.auth2 và gọi một API bằng cách sử dụng Thư viện ứng dụng API Google cho JavaScript.

Lời hứa, không đồng bộ và đang chờ được dùng để thực thi thứ tự tải thư viện cũng như để bắt và thử lại các lỗi uỷ quyền. Lệnh gọi API chỉ được thực hiện sau khi có mã truy cập hợp lệ.

Người dùng dự kiến sẽ nhấn nút "Hiển thị lịch" khi mã truy cập bị thiếu khi trang được tải lần đầu tiên hoặc sau đó khi mã truy cập đã hết hạn.

<!DOCTYPE html>
<html>
<head></head>
<body>
  <h1>GAPI with GIS async/await</h1>
  <button id="showEventsBtn" onclick="showEvents();">Show Calendar</button><br><br>
  <button id="revokeBtn" onclick="revokeToken();">Revoke access token</button>

  <script>

    const gapiLoadPromise = new Promise((resolve, reject) => {
      gapiLoadOkay = resolve;
      gapiLoadFail = reject;
    });
    const gisLoadPromise = new Promise((resolve, reject) => {
      gisLoadOkay = resolve;
      gisLoadFail = reject;
    });

    var tokenClient;

    (async () => {
      document.getElementById("showEventsBtn").style.visibility="hidden";
      document.getElementById("revokeBtn").style.visibility="hidden";

      // First, load and initialize the gapi.client
      await gapiLoadPromise;
      await new Promise((resolve, reject) => {
        // NOTE: the 'auth2' module is no longer loaded.
        gapi.load('client', {callback: resolve, onerror: reject});
      });
      await gapi.client.init({
        // NOTE: OAuth2 'scope' and 'client_id' parameters have moved to initTokenClient().
      })
      .then(function() {  // Load the Calendar API discovery document.
        gapi.client.load('https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest');
      });

      // Now load the GIS client
      await gisLoadPromise;
      await new Promise((resolve, reject) => {
        try {
          tokenClient = google.accounts.oauth2.initTokenClient({
              client_id: 'YOUR_CLIENT_ID',
              scope: 'https://www.googleapis.com/auth/calendar.readonly',
              prompt: 'consent',
              callback: '',  // defined at request time in await/promise scope.
          });
          resolve();
        } catch (err) {
          reject(err);
        }
      });

      document.getElementById("showEventsBtn").style.visibility="visible";
      document.getElementById("revokeBtn").style.visibility="visible";
    })();

    async function getToken(err) {

      if (err.result.error.code == 401 || (err.result.error.code == 403) &&
          (err.result.error.status == "PERMISSION_DENIED")) {

        // The access token is missing, invalid, or expired, prompt for user consent to obtain one.
        await new Promise((resolve, reject) => {
          try {
            // Settle this promise in the response callback for requestAccessToken()
            tokenClient.callback = (resp) => {
              if (resp.error !== undefined) {
                reject(resp);
              }
              // GIS has automatically updated gapi.client with the newly issued access token.
              console.log('gapi.client access token: ' + JSON.stringify(gapi.client.getToken()));
              resolve(resp);
            };
            tokenClient.requestAccessToken();
          } catch (err) {
            console.log(err)
          }
        });
      } else {
        // Errors unrelated to authorization: server errors, exceeding quota, bad requests, and so on.
        throw new Error(err);
      }
    }

    function showEvents() {

      // Try to fetch a list of Calendar events. If a valid access token is needed,
      // prompt to obtain one and then retry the original request.
      gapi.client.calendar.events.list({ 'calendarId': 'primary' })
      .then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
      .catch(err  => getToken(err))  // for authorization errors obtain an access token
      .then(retry => gapi.client.calendar.events.list({ 'calendarId': 'primary' }))
      .then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
      .catch(err  => console.log(err));   // cancelled by user, timeout, etc.
    }

    function revokeToken() {
      let cred = gapi.client.getToken();
      if (cred !== null) {
        google.accounts.oauth2.revoke(cred.access_token, () => {console.log('Revoked: ' + cred.access_token)});
        gapi.client.setToken('');
      }
    }

  </script>

  <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoadOkay()" onerror="gapiLoadFail(event)"></script>
  <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoadOkay()" onerror="gisLoadFail(event)"></script>

</body>
</html>

Lệnh gọi lại GAPI

Ví dụ này cho biết cách thêm thư viện Dịch vụ nhận dạng của Google bằng cách sử dụng mô hình mã thông báo, xóa mô-đun gapi.auth2 và gọi một API bằng cách sử dụng Thư viện ứng dụng API Google cho JavaScript.

Các biến được dùng để thực thi thứ tự tải thư viện. Các lệnh gọi GAPI được thực hiện từ bên trong lệnh gọi lại sau khi trả về một mã truy cập hợp lệ.

Người dùng cần phải nhấn nút Hiển thị lịch khi trang được tải lần đầu tiên và nhấn lại khi họ muốn làm mới thông tin Lịch của mình.

<!DOCTYPE html>
<html>
<head>
  <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoad()"></script>
  <script async defer src="https://accounts.google.com/gsi/client" onload="gisInit()"></script>
</head>
<body>
  <h1>GAPI with GIS callbacks</h1>
  <button id="showEventsBtn" onclick="showEvents();">Show Calendar</button><br><br>
  <button id="revokeBtn" onclick="revokeToken();">Revoke access token</button>
  <script>
    let tokenClient;
    let gapiInited;
    let gisInited;

    document.getElementById("showEventsBtn").style.visibility="hidden";
    document.getElementById("revokeBtn").style.visibility="hidden";

    function checkBeforeStart() {
       if (gapiInited && gisInited){
          // Start only when both gapi and gis are initialized.
          document.getElementById("showEventsBtn").style.visibility="visible";
          document.getElementById("revokeBtn").style.visibility="visible";
       }
    }

    function gapiInit() {
      gapi.client.init({
        // NOTE: OAuth2 'scope' and 'client_id' parameters have moved to initTokenClient().
      })
      .then(function() {  // Load the Calendar API discovery document.
        gapi.client.load('https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest');
        gapiInited = true;
        checkBeforeStart();
      });
    }

    function gapiLoad() {
        gapi.load('client', gapiInit)
    }

    function gisInit() {
     tokenClient = google.accounts.oauth2.initTokenClient({
                client_id: 'YOUR_CLIENT_ID',
                scope: 'https://www.googleapis.com/auth/calendar.readonly',
                callback: '',  // defined at request time
            });
      gisInited = true;
      checkBeforeStart();
    }

    function showEvents() {

      tokenClient.callback = (resp) => {
        if (resp.error !== undefined) {
          throw(resp);
        }
        // GIS has automatically updated gapi.client with the newly issued access token.
        console.log('gapi.client access token: ' + JSON.stringify(gapi.client.getToken()));

        gapi.client.calendar.events.list({ 'calendarId': 'primary' })
        .then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
        .catch(err => console.log(err));

        document.getElementById("showEventsBtn").innerText = "Refresh Calendar";
      }

      // Conditionally ask users to select the Google Account they'd like to use,
      // and explicitly obtain their consent to fetch their Calendar.
      // NOTE: To request an access token a user gesture is necessary.
      if (gapi.client.getToken() === null) {
        // Prompt the user to select a Google Account and asked for consent to share their data
        // when establishing a new session.
        tokenClient.requestAccessToken({prompt: 'consent'});
      } else {
        // Skip display of account chooser and consent dialog for an existing session.
        tokenClient.requestAccessToken({prompt: ''});
      }
    }

    function revokeToken() {
      let cred = gapi.client.getToken();
      if (cred !== null) {
        google.accounts.oauth2.revoke(cred.access_token, () => {console.log('Revoked: ' + cred.access_token)});
        gapi.client.setToken('');
        document.getElementById("showEventsBtn").innerText = "Show Calendar";
      }
    }
  </script>
</body>
</html>

Ứng dụng web phía máy chủ

Đăng nhập bằng Google cho ứng dụng phía máy chủ chạy trên nền tảng phụ trợ bằng cách sử dụng chuyển hướng đến Google để lấy sự đồng ý của người dùng.

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
    <script>
      function start() {
        gapi.load('auth2', function() {
          auth2 = gapi.auth2.init({
            client_id: 'YOUR_CLIENT_ID',
            api_key: 'YOUR_API_KEY',
            discovery_docs: ['https://www.googleapis.com/discovery/v1/apis/translate/v2/rest'],
            // Scopes to request in addition to 'profile' and 'email'
            scope: 'https://www.googleapis.com/auth/cloud-translation',
          });
        });
      }
      function signInCallback(authResult) {
        if (authResult['code']) {
          console.log("sending AJAX request");
          // Send authorization code obtained from Google to backend platform
          $.ajax({
            type: 'POST',
            url: 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URL',
            // Always include an X-Requested-With header to protect against CSRF attacks.
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            },
            contentType: 'application/octet-stream; charset=utf-8',
            success: function(result) {
              console.log(result);
            },
            processData: false,
            data: authResult['code']
          });
        } else {
          console.log('error: failed to obtain authorization code')
        }
      }
    </script>
  </head>
  <body>
    <button id="signinButton">Sign In With Google</button>
    <script>
      $('#signinButton').click(function() {
        // Obtain an authorization code from Google
        auth2.grantOfflineAccess().then(signInCallback);
      });
    </script>
  </body>
</html>

HTTP/REST sử dụng lệnh chuyển hướng

Sử dụng OAuth 2.0 cho ứng dụng máy chủ web để gửi mã uỷ quyền từ trình duyệt của người dùng đến nền tảng phụ trợ. Đã xử lý sự đồng ý của người dùng bằng cách chuyển hướng trình duyệt của người dùng đến Google.

/\*
 \* Create form to request access token from Google's OAuth 2.0 server.
 \*/
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';
  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);
  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client\_id': 'YOUR_CLIENT_ID',
                'redirect\_uri': 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URL',
                'response\_type': 'token',
                'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                'include\_granted\_scopes': 'true',
                'state': 'pass-through value'};
  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

Trải nghiệm người dùng cửa sổ bật lên GIS

Ví dụ này chỉ cho thấy thư viện JavaScript Dịch vụ danh tính của Google sử dụng mô hình mã uỷ quyền hộp thoại bật lên để người dùng đồng ý và trình xử lý gọi lại nhận mã uỷ quyền từ Google. Bài viết này được cung cấp để minh họa số bước tối thiểu cần thiết để định cấu hình ứng dụng, lấy sự đồng ý và gửi mã uỷ quyền đến nền tảng phụ trợ của bạn.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      var client;
      function initClient() {
        client = google.accounts.oauth2.initCodeClient({
          client_id: 'YOUR_CLIENT_ID',
          scope: 'https://www.googleapis.com/auth/calendar.readonly',
          ux_mode: 'popup',
          callback: (response) => {
            var code_receiver_uri = 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URI',
            // Send auth code to your backend platform
            const xhr = new XMLHttpRequest();
            xhr.open('POST', code_receiver_uri, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.onload = function() {
              console.log('Signed in as: ' + xhr.responseText);
            };
            xhr.send('code=' + response.code);
            // After receipt, the code is exchanged for an access token and
            // refresh token, and the platform then updates this web app
            // running in user's browser with the requested calendar info.
          },
        });
      }
      function getAuthCode() {
        // Request authorization code and obtain user consent
          client.requestCode();
      }
    </script>
    <button onclick="getAuthCode();">Load Your Calendar</button>
  </body>
</html>

Trải nghiệm người dùng chuyển hướng trên Hệ thống thông tin địa lý (GGA)

Mô hình mã uỷ quyền hỗ trợ chế độ cửa sổ bật lên và chuyển hướng trải nghiệm người dùng để gửi mã uỷ quyền cho mỗi người dùng đến điểm cuối do nền tảng của bạn lưu trữ. Chế độ trải nghiệm chuyển hướng xuất hiện tại đây:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      var client;
      function initClient() {
        client = google.accounts.oauth2.initCodeClient({
          client_id: 'YOUR_CLIENT_ID',
          scope: 'https://www.googleapis.com/auth/calendar.readonly \
                  https://www.googleapis.com/auth/photoslibrary.readonly',
          ux_mode: 'redirect',
          redirect_uri: 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URI'
        });
      }
      // Request an access token
      function getAuthCode() {
        // Request authorization code and obtain user consent
          client.requestCode();
      }
    </script>
    <button onclick="getAuthCode();">Load Your Calendar</button>
  </body>
</html>