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