用戶端網頁應用程式適用的 OAuth 2.0

OAuth 2.0 端點

產生網址，透過位於 的 Google OAuth 2.0 端點要求存取權 https://accounts.google.com/o/oauth2/v2/auth。這個端點可透過 HTTPS 存取； 系統會拒絕透過原定的 HTTP 連線，

Google 授權伺服器支援下列適用於網站的查詢字串參數： 伺服器應用程式：

重新導向至 Google 授權伺服器的範例

以下範例網址顯示了換行符號及方便閱讀的空格。

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

建立要求網址之後，請將使用者重新導向至該網址。

JavaScript 程式碼範例

下列 JavaScript 程式碼片段說明如何在 不使用 JavaScript 的 Google API 用戶端程式庫。自這個 OAuth 存取以來 2.0 端點不支援跨源資源共享 (CORS)，程式碼片段會建立 表單，開啟要求傳送至該端點。

/*
 * 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_REDIRECT_URI',
                '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();
}

OAuth 2.0 端點

OAuth 2.0 伺服器會將回應傳送至您在redirect_uri 存取權杖

如果使用者核准要求，回應就會提供存取權杖。如果使用者 未核准要求，回應會包含錯誤訊息。存取權杖 錯誤訊息會在重新導向 URI 的雜湊片段上傳回，如下所示：

• 存取權杖回應：

  https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

  除了 access_token 參數外，片段字串也會 包含 token_type 參數，該參數一律會設為 Bearer 和 expires_in 參數，用來指定 憑證的生命週期 (以秒為單位)。如果已指定 state 參數 ，其值也會納入回應中。

• 錯誤回應：

  https://oauth2.example.com/callback#error=access_denied

OAuth 2.0 伺服器回應範例

如要測試這個流程，請點選下列範例網址 可透過唯讀權限查看 Google 雲端硬碟檔案的中繼資料：

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

完成 OAuth 2.0 流程後，系統會將您重新導向至 http://localhost/oauth2callback。網址就會產生 404 NOT FOUND 錯誤，除非本機機器於以下位置提供檔案： 該網址下一步將進一步說明 使用者重新導向回應用程式時的 URI。

OAuth 2.0 端點

應用程式取得存取權杖後，您可以使用該權杖向 Google 代表指定的 使用者帳戶。方法是加入 加入 access_token 查詢，藉此將存取權杖用於傳送至 API 的要求中 參數或 Authorization HTTP 標頭 Bearer 值。可能的話 HTTP 標頭較為理想，因為這類字串通常會顯示在伺服器記錄中。大多數 使用用戶端程式庫來設定對 Google API 的呼叫 (例如，在 呼叫 Drive Files API)。

您可以試用所有 Google API 並查看相關範圍： OAuth 2.0 Playground。

HTTP GET 範例

對 drive.files 端點 (Drive Files API)Authorization: BearerHTTP 標題可能如下所示。請注意，您必須指定自己的存取權杖：

GET /drive/v2/files HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

下方的呼叫是使用 access_token 為通過驗證的使用者呼叫相同的 API。 查詢字串參數：

GET https://www.googleapis.com/drive/v2/files?access_token=access_token

curl 範例

您可以使用 curl 指令列應用程式測試這些指令。以下是 使用 HTTP 標頭選項的範例 (建議)：

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files

或者，您也可以使用查詢字串參數選項：

curl https://www.googleapis.com/drive/v2/files?access_token=access_token

JavaScript 程式碼範例

以下程式碼片段示範如何使用 CORS (跨源資源共享) 將 Google API 要求。這個範例未使用 JavaScript 的 Google API 用戶端程式庫， 不過，即使您並未使用用戶端程式庫 該程式庫說明文件中的 CORS 支援指南也許能協助您解決問題 以便進一步瞭解這些要求

在這個程式碼片段中，access_token 變數代表您擁有的符記 。完整 範例，示範如何在瀏覽器的本機儲存空間儲存並擷取該權杖 提出 API 請求

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) {
  console.log(xhr.response);
};
xhr.send(null);

OAuth 2.0 端點

這個程式碼範例將示範如何在不使用 Google API JavaScript 的用戶端程式庫。這段程式碼是 HTML 網頁，這些網頁會顯示 嘗試提出 API 要求如果您點選按鈕，程式碼就會檢查網頁是否儲存 瀏覽器本機儲存空間中的 API 存取權杖。如果相符，就會執行 API 要求。否則 就會啟動 OAuth 2.0 流程

如果是 OAuth 2.0 流程，頁面會顯示下列步驟：

1. 系統會將使用者導向至 Google 的 OAuth 2.0 伺服器， https://www.googleapis.com/auth/drive.metadata.readonly 範圍。
2. 授予 (或拒絕) 存取一或多個要求範圍的存取權後，系統會將使用者重新導向至 原始網頁，剖析片段 ID 字串中的存取權杖。

3. 這個網頁會使用存取權杖發出範例 API 要求。

   API 要求會呼叫 Drive API 的 about.get 方法以擷取 授權使用者的 Google 雲端硬碟帳戶相關資訊。

4. 如果要求成功執行，API 回應會記錄在瀏覽器的偵錯中 控制台。

若要撤銷應用程式的存取權，請使用 「權限」頁面 Google 帳戶。系統會將該應用程式列為 Google API 文件的 OAuth 2.0 示範版本。

如要在本機執行此程式碼，您需要設定 YOUR_CLIENT_ID 和 YOUR_REDIRECT_URI相應變數 授權憑證。YOUR_REDIRECT_URI 變數 必須設為放送網頁的網址。值必須完全符合其中一個 OAuth 2.0 用戶端的授權重新導向 URI (您在 API Console Credentials page。如果 這個值與授權的 URI 不符，您會收到 redirect_uri_mismatch 錯誤。您的專案必須同時採用 為這項要求啟用適當的 API。

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';

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

      trySampleRequest();
    } else {
      console.log('State mismatch. Possible CSRF attack');
    }
  }

  // Function to generate a random state value
  function generateCryptoRandomState() {
    const randomValues = new Uint32Array(2);
    window.crypto.getRandomValues(randomValues);

    // Encode as UTF-8
    const utf8Encoder = new TextEncoder();
    const utf8Array = utf8Encoder.encode(
      String.fromCharCode.apply(null, randomValues)
    );

    // Base64 encode the UTF-8 data
    return btoa(String.fromCharCode.apply(null, utf8Array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  }

  // 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() {
    // create random state value and store in local storage
    var state = generateCryptoRandomState();
    localStorage.setItem('state', state);

    // 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': state,
                  '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>

OAuth 2.0 端點

如要將範圍新增至現有存取權杖，請加入 include_granted_scopes 參數加到Google 的 OAuth 2.0 伺服器要求中。

下列程式碼片段說明如何執行這項作業。程式碼片段假設您已儲存 瀏覽器本機儲存空間中您的存取權杖有效的範圍。( complete example 程式碼會儲存存取符記的範圍清單 在瀏覽器的本機上設定 oauth2-test-params.scope 屬性，才有效 storage.)

程式碼片段會比較存取權杖有效的範圍和您要使用的範圍 特定查詢的結果如果存取權杖未涵蓋該範圍，OAuth 2.0 流程就會啟動。 此處的 oauth2SignIn 函式與 步驟 2 (將於之後的 )。

var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));

var current_scope_granted = false;
if (params.hasOwnProperty('scope')) {
  var scopes = params['scope'].split(' ');
  for (var s = 0; s < scopes.length; s++) {
    if (SCOPE == scopes[s]) {
      current_scope_granted = true;
    }
  }
}

if (!current_scope_granted) {
  oauth2SignIn(); // This function is defined elsewhere in this document.
} else {
  // Since you already have access, you can proceed with the API request.
}

OAuth 2.0 端點

如要透過程式撤銷權杖，應用程式會向 https://oauth2.googleapis.com/revoke，並將權杖做為參數加入：

curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
        https://oauth2.googleapis.com/revoke?token={token}

可以是存取權杖或更新權杖。如果權杖是存取權杖，且 對應的更新權杖也會撤銷更新權杖。

如果撤銷成功處理完畢，回應的 HTTP 狀態碼 200。如果是錯誤狀況，系統會一併傳回 HTTP 狀態碼 400 傳回。

下列 JavaScript 程式碼片段說明如何在不使用 Google API JavaScript 的用戶端程式庫。因為 Google 的 OAuth 2.0 端點撤銷 權杖不支援跨源資源共享 (CORS)，程式碼會建立表單並提交 傳送表單到端點，而不要使用 XMLHttpRequest() 方法張貼 請求。

function revokeAccess(accessToken) {
  // Google's OAuth 2.0 endpoint for revoking access tokens.
  var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';

  // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', revokeTokenEndpoint);

  // Add access token to the form so it is set as value of 'token' parameter.
  // This corresponds to the sample curl request, where the URL is:
  //      https://oauth2.googleapis.com/revoke?token={token}
  var tokenField = document.createElement('input');
  tokenField.setAttribute('type', 'hidden');
  tokenField.setAttribute('name', 'token');
  tokenField.setAttribute('value', accessToken);
  form.appendChild(tokenField);

  // Add form to page and submit it to actually revoke the token.
  document.body.appendChild(form);
  form.submit();
}