本頁面由 Cloud Translation API 翻譯而成。

使用程式碼模型

Google Identity 服務程式庫可讓使用者提出授權要求存取 Google 程式碼這個開始安全的 OAuth 2.0 流程，並產生用於呼叫 Google API。

OAuth 2.0 授權碼流程摘要：

透過瀏覽器使用手勢 (例如點選按鈕)，開啟 Google 帳戶業主向 Google 索取授權碼。
Google 回應時，就會將專屬的授權碼傳送給在使用者瀏覽器中執行的 JavaScript 網頁應用程式，或直接叫用藉此驗證授權代碼端點
您的後端平台代管授權碼端點，並接收再也不是件繁重乏味的工作驗證後，此代碼將交換為按使用者存取，向 Google 權杖端點發出要求來更新權杖。
Google 驗證授權碼，確認要求來自存取及更新權杖，然後將取得權杖。
您的登入端點收到存取權和更新權杖，以安全的方式儲存更新憑證以供日後使用

，瞭解如何調查及移除這項存取權。

初始化程式碼用戶端

google.accounts.oauth2.initCodeClient() 方法會初始化程式碼用戶端。

彈出式視窗或重新導向模式

你可以選擇使用「重新導向」選項分享驗證碼，或是 彈出式視窗模式使用者流程。使用重新導向模式，代表您代管 OAuth2 授權端點，Google 會將使用者代理程式重新導向至這個端點以網址參數的形式分享驗證碼您必須為彈出式視窗模式定義 JavaScript 回呼處理常式，將授權碼傳送至伺服器。彈出式視窗模式也能提供流暢的使用者體驗離開您的網站

如要初始化用戶端：

重新導向使用者體驗流程，將 ux_mode 設為 redirect，以及 redirect_uri 傳送至您的平台授權碼端點。這個鍵必須與其中一個已授權的 OAuth 2.0 重新導向 URI 完全一致用戶端編號。此外，您也必須遵守我們的重新導向 URI 驗證規則。
彈出式視窗使用者體驗流程，將 ux_mode 設為 popup，並將 callback 的值設為您用來傳送授權碼的函數名稱平台。

，瞭解如何調查及移除這項存取權。

防範 CSRF 攻擊

為了預防跨網站要求-偽造 (CSRF) 攻擊，重新導向和彈出式視窗模式的 UX 流程。重新導向模式，系統就會使用 OAuth 2.0 state 參數。請參閱 RFC6749 的 10.12 節跨網站偽造要求，進一步瞭解如何產生及驗證 state 參數。透過彈出式視窗模式您在要求中加入自訂 HTTP 標頭然後在伺服器上確認比對預期的值和來源

選擇使用者體驗模式，即可查看顯示驗證碼和 CSRF 處理程序的程式碼片段：

重新導向模式

初始化 Google 將使用者的瀏覽器重新導向您的用戶端。驗證端點，將驗證碼以網址參數的形式分享。

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

為使用者的瀏覽器初始化一個用戶端，在該用戶端收到驗證碼並傳送至您的伺服器。

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

觸發 OAuth 2.0 程式碼流程

呼叫程式碼用戶端的 requestCode() 方法，觸發使用者流程：

<button onclick="client.requestCode();">Authorize with Google</button>

如要使用這項功能，使用者必須登入 Google 帳戶並同意共用將授權碼傳回重新導向端點或回呼處理常式。

驗證碼處理

Google 會產生每個使用者授權碼請在後端伺服器上驗證

在彈出式視窗模式中，由 callback 指定的處理常式，會在使用者的瀏覽器會將授權碼轉發至您的平台代管的端點。

在重新導向模式中，GET 要求會傳送至 redirect_url，分享網址 code 參數中的授權碼。目的地：收到授權碼：

建立新的授權端點 (如果目前沒有) 模型
更新現有端點以接受 GET 要求和網址參數。先前，如果 PUT 要求含有授權碼值，酬載

授權端點

您的授權碼端點必須使用這些網址查詢處理 GET 要求字串參數：

名稱	值
驗證使用者	要求進行使用者登入驗證
程式碼	Google 產生的 OAuth2 授權碼
HD 高畫質	使用者帳戶的代管網域
提示	使用者同意聲明對話方塊
範圍	一或多個要授權的 OAuth2 範圍 (以空格分隔) 清單
州	CRSF 狀態變數

針對將網址參數傳送至名為 auth-code 的端點的 GET 要求範例，由 example.com 代管：

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

由舊版 JavaScript 程式庫啟動授權碼流程時，或直接呼叫 Google OAuth 2.0 端點時，系統會使用 POST 要求。

包含授權碼做為酬載的 POST 要求範例 HTTP 要求主體：

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

驗證要求

請在伺服器上執行下列操作，避免發生 CSRF 攻擊。

請檢查 state 參數值，以便瞭解重新導向模式。

確認已為彈出式視窗模式設定 X-Requested-With: XmlHttpRequest 標頭。

接著，您應該繼續向 Google 取得更新和存取權杖您必須先成功驗證驗證碼要求。

取得存取權和更新權杖

後端平台收到 Google 的授權碼後驗證要求，請使用驗證碼來取得讓 Google 發出 API 呼叫

請依照指示，從步驟 5：將授權碼交換更新和存取權杖的使用網路伺服器的 OAuth 2.0 應用程式指南。

管理權杖

您的平台會安全地儲存更新權杖。下列情況刪除已儲存的更新權杖：使用者帳戶移除，或使用者同意聲明遭撤銷 google.accounts.oauth2.revoke 或直接來自 https://myaccount.google.com/permissions.

您也可以選擇使用 RISC 透過跨帳戶保護使用者帳戶防護。

一般來說，後端平台會使用存取權杖呼叫 Google API。如果您的網頁應用程式也會直接從使用者的瀏覽器呼叫 Google API 必須實作將存取權杖共用的方法與網頁應用程式，因此不在本指南的涵蓋範圍內當您遵循這個方法並使用適用於 JavaScript 的 Google API 用戶端程式庫使用 gapi.client.SetToken() 在瀏覽器中暫時儲存存取權杖並允許程式庫呼叫 Google API