網路驗證通訊協定使用 HTTP 功能,但 Chrome 應用程式是在應用程式容器中執行,不會透過 HTTP 載入,也無法執行重新導向或設定 Cookie。
使用 Chrome Identity API 驗證使用者:如果使用者已登入 Google 帳戶,則使用 getAuthToken
;如果使用者已登入非 Google 帳戶,則使用 launchWebAuthFlow
。如果應用程式使用自有伺服器驗證使用者,就必須使用後者。
運作方式
Chrome 應用程式使用者會將 Google 帳戶與個人資料建立關聯。應用程式可以使用 getAuthToken
API 為這些使用者取得 OAuth2 權杖。
如果想要透過非 Google 識別資訊提供者執行驗證,應用程式必須呼叫 launchWebAuthFlow
。這個方法會使用瀏覽器彈出式視窗顯示供應商網頁,並擷取導向至特定網址模式的重新導向。重新導向網址會傳遞至應用程式,而應用程式會從網址中擷取權杖。
Google 帳戶驗證
請完成以下五個步驟:
- 在資訊清單中新增權限,然後上傳應用程式。
- 將已安裝
manifest.json
中的金鑰複製到來源資訊清單,這樣應用程式 ID 在開發期間就會保持不變。 - 取得 Chrome 應用程式的 OAuth2 用戶端 ID。
- 更新資訊清單,納入用戶端 ID 和範圍。
- 取得驗證權杖。
新增權限並上傳應用程式
您必須確認資訊清單包含身分權限。然後,再將應用程式上傳到應用程式和擴充功能管理頁面 (請參閱「發布」)。
"permissions": [
"identity"
]
將金鑰複製到資訊清單
在 Google OAuth 主控台註冊應用程式時,您會提供應用程式 ID,系統會在權杖要求期間檢查該 ID。因此,在開發期間使用一致的應用程式 ID 非常重要。
為確保應用程式 ID 保持不變,您必須將已安裝 manifest.json
中的金鑰複製到來源資訊清單。這不是最優雅的做法,但以下是執行方式:
- 前往使用者資料目錄。在 Mac OS 上的範例:
~/Library/Application\ Support/Google/Chrome/Default/Extensions
- 列出已安裝的應用程式和擴充功能,並將應用程式和擴充功能管理頁面上的應用程式 ID 與此處的 ID 比對。
- 前往已安裝的應用程式目錄 (也就是應用程式 ID 中的版本)。開啟已安裝的
manifest.json
(pico 是開啟檔案的快速方法)。 - 複製已安裝
manifest.json
中的「key」,然後貼到應用程式的原始資訊清單檔案中。
取得 OAuth2 用戶端 ID
您必須在 Google API 控制台中註冊應用程式,才能取得用戶端 ID:
- 使用上傳應用程式至 Chrome 網路商店時所用的 Google 帳戶登入 Google API 控制台。
- 展開左上角的下拉式選單,然後選取「Create...」選單項目,即可建立新專案。
- 建立並命名後,請前往「服務」導覽選單項目,並開啟應用程式所需的任何 Google 服務。
- 前往「API 存取權」導覽選單項目,然後按一下「建立 OAuth 2.0 用戶端 ID...」藍色按鈕。
- 輸入必要的品牌資訊,然後選取「已安裝應用程式」類型。
- 選取「Chrome 應用程式」,然後輸入應用程式 ID (與應用程式和擴充功能管理頁面中顯示的 ID 相同)。
使用 OAuth2 用戶端 ID 和範圍更新資訊清單
您需要更新資訊清單,加入用戶端 ID 和範圍。以下是 gdrive 範例的「oauth2」範例:
"oauth2": {
"client_id": "665859454684.apps.googleusercontent.com",
"scopes": [
"https://www.googleapis.com/auth/drive"
]
}
取得存取權杖
您現在可以呼叫 identity.getAuthToken 取得授權權杖。
chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
// Use the token.
});
使用者互動
呼叫 getAuthToken
時,您可以傳遞標記 (上例中的 'interactive': true
),指出要以互動模式還是靜默模式呼叫 API。如果您在互動模式中叫用 API,系統會在必要時向使用者顯示登入和/或核准 UI,如以下螢幕截圖所示:
如果您在靜默模式中叫用 API,API 只會在可在不顯示任何 UI 的情況下產生一個權杖時,才會傳回權杖。這在應用程式在啟動時執行流程的情況下很實用,例如在沒有使用者手勢的情況下。
我們建議的最佳做法是,在沒有使用者手勢的情況下使用靜默模式,在有使用者手勢的情況下使用互動模式 (例如,使用者按下應用程式中的「登入」按鈕)。請注意,我們不會強制規定任何手勢。
快取
Chrome 會在記憶體中快取存取權杖,因此您在需要使用權杖時,隨時可以呼叫 getAuthToken
。快取會自動處理權杖到期問題。
您可以在 chrome://identity-internals
上查看目前的符記快取狀態。
在某些情況下 (例如使用者變更密碼),未過期的存取權權杖就會停止運作。使用權杖的 API 呼叫會開始傳回 HTTP 狀態碼 401。如果您發現這種情況,可以呼叫 identity.removeCachedAuthToken,從 Chrome 快取中移除無效的權杖。
removeCachedAuthToken
使用範例:
// callback = function (error, httpStatus, responseText);
function authenticatedXhr(method, url, callback) {
var retry = true;
function getTokenAndXhr() {
chrome.identity.getAuthToken({/* details */},
function (access_token) {
if (chrome.runtime.lastError) {
callback(chrome.runtime.lastError);
return;
}
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader('Authorization',
'Bearer ' + access_token);
xhr.onload = function () {
if (this.status === 401 && retry) {
// This status may indicate that the cached
// access token was invalid. Retry once with
// a fresh token.
retry = false;
chrome.identity.removeCachedAuthToken(
{ 'token': access_token },
getTokenAndXhr);
return;
}
callback(null, this.status, this.responseText);
}
});
}
}
非 Google 帳戶驗證
您需要完成以下三個步驟:
- 向供應商註冊。
- 為應用程式要存取的供應器資源新增權限。
- 取得驗證權杖。
向供應商註冊
您必須向供應商註冊 OAuth2 用戶端 ID,並將用戶端 ID 設為網站。
如要輸入註冊期間的重新導向 URI,請使用下列格式的網址:
https://<extension-id>.chromiumapp.org/<anything-here>
舉例來說,如果應用程式 ID 為 abcdefghijklmnopqrstuvwxyzabcdef
,且您希望 provider_cb
是路徑,以便透過重新導向 URI 與其他供應商區隔,則應使用:https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb
新增提供者的權限
如要向供應商 API 端點發出跨來源 XHR,您必須在權限中加入適當的許可清單:
"permissions": [
...
"https://www.website-of-provider-with-user-photos.com/photos/*"
]
取得權杖
如何取得權杖:
chrome.identity.launchWebAuthFlow(
{'url': '<url-to-do-auth>', 'interactive': true},
function(redirect_url) { /* Extract token from redirect_url */ });
<url-to-do-auth>
是要向供應商進行網站驗證的任何網址。舉例來說,假設您透過供應商執行 OAuth2 流程,並以用戶端 ID 123456789012345 註冊應用程式,而您想要存取供應商網站上的使用者相片:
https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_id=123456789012345& redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb&response_type=token&scope=user_photos
供應商會執行驗證,並視需要向使用者顯示登入和/或核准 UI。然後重新導向至 https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>
Chrome 會擷取該值,並使用完整的重新導向網址叫用應用程式的回呼。應用程式應從網址中擷取權杖。
互動模式與靜音模式
呼叫 launchWebAuthFlow
時,您可以傳遞旗標 (上述範例中的 'interactive': true
),指明是否要在互動模式中呼叫 API (又稱靜音模式)。如果您在互動模式中叫用 API,系統會視需要向使用者顯示 UI,以便取得符記 (登入 UI 和/或核准 UI;或任何提供者專屬的 UI)。
如果您以靜默模式叫用 API,只有在提供者能夠在不顯示任何 UI 的情況下提供權杖時,API 才會傳回權杖。這在應用程式在啟動時執行流程的情況下很實用,例如在沒有使用者手勢的情況下。
我們建議的最佳做法是,如果沒有使用者手勢,請使用靜音模式,如果有使用者手勢 (例如,使用者在應用程式中點選「登入」按鈕),則請使用互動模式。請注意,我們不會強制執行手勢要求。