如要在使用者離線時代表使用者使用 Google 服務,您必須使用混合型伺服器端流程,讓使用者透過 JavaScript API 用戶端在用戶端授權您的應用程式,並傳送特殊的一次性授權碼至您的伺服器。您的伺服器會交換這組一次性程式碼,從 Google 取得自身的存取權和更新權杖,讓伺服器能執行自己的 API 呼叫,使用者離線時也能進行。相較於單純的伺服器端流程,以及相較於將存取權杖傳送至伺服器,這個一次性程式碼流程都具有安全性優勢。
如下圖所示,取得伺服器端應用程式的存取權杖登入流程。
一次性驗證碼具有多項安全優勢。透過代碼,Google 會直接將權杖提供給伺服器,不需要任何中介商。雖然我們不建議洩漏程式碼,但如果沒有用戶端密鑰,這些程式碼就很難使用。妥善保管用戶端密鑰!
實作一次性程式碼流程
Google 登入按鈕會提供「存取權杖」和「授權碼」。該代碼是一次性的代碼,您的伺服器可與 Google 伺服器交換以取得存取權杖。
下列程式碼範例示範如何執行一次性程式碼流程。
使用一次性代碼的流程驗證 Google 登入流程的步驟如下:
步驟 1:建立用戶端 ID 與用戶端密鑰
如要建立用戶端 ID 和用戶端密鑰,請建立 Google API 控制台專案、設定 OAuth 用戶端 ID,並註冊 JavaScript 來源:
前往 Google API 控制台。
在專案下拉式選單中選取現有專案,或選取 [Create a new project] (建立新專案) 以建立新專案。
在「APIs & Services」(API 和服務) 下方的側欄中,選取「Credentials」(憑證),然後按一下「ConfigureConsent screen」(設定同意畫面)。
選擇電子郵件地址並指定產品名稱,然後按下「儲存」。
在「Credentials」(憑證) 分頁中,選取「Create credentials」(建立憑證) 下拉式清單,然後選擇「OAuth client ID」(OAuth 用戶端 ID)。
在「Application type」(應用程式類型) 下方,選取 [Web application] (網頁應用程式)。
註冊應用程式可存取 Google API 的來源,如下所示。來源是通訊協定、主機名稱與通訊埠的不重複組合
在「已授權的 JavaScript 來源」欄位中輸入應用程式的來源。您可以輸入多個來源,讓應用程式在不同的通訊協定、網域或子網域中執行。請勿使用萬用字元。在以下範例中,第二個網址可以是實際網址。
http://localhost:8080 https://myproductionurl.example.com
「授權的重新導向 URI」欄位不需要輸入值。重新導向 URI 不會與 JavaScript API 搭配使用。
按下「Create」(建立) 按鈕,
在畫面上出現的「OAuth 用戶端」對話方塊中,複製用戶端 ID。用戶端 ID 可讓應用程式存取已啟用的 Google API。
步驟 2:在網頁上加入 Google 平台程式庫
請加入下列指令碼來展示匿名函式,該函式會將指令碼插入這個 index.html
網頁的 DOM。
<!-- The top of file index.html -->
<html itemscope itemtype="http://schema.org/Article">
<head>
<!-- BEGIN Pre-requisites -->
<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>
<!-- END Pre-requisites -->
步驟 3:初始化 GoogleAuth 物件
載入 auth2 程式庫,並呼叫 gapi.auth2.init()
以初始化 GoogleAuth
物件。在呼叫 init()
時指定用戶端 ID 和要求範圍。
<!-- Continuing the <head> section -->
<script>
function start() {
gapi.load('auth2', function() {
auth2 = gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
// Scopes to request in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
});
}
</script>
</head>
<body>
<!-- ... -->
</body>
</html>
步驟 4:在頁面中新增登入按鈕
在網頁中加入登入按鈕,然後附加點擊處理常式來呼叫 grantOfflineAccess()
,來啟動一次性程式碼流程。
<!-- Add where you want your sign-in button to render -->
<!-- Use an image that follows the branding guidelines in a real app -->
<button id="signinButton">Sign in with Google</button>
<script>
$('#signinButton').click(function() {
// signInCallback defined in step 6.
auth2.grantOfflineAccess().then(signInCallback);
});
</script>
步驟 5:讓使用者登入
使用者按一下登入按鈕,並授權應用程式存取您要求的權限。接著,您在 grantOfflineAccess().then()
方法中指定的回呼函式會將具有授權碼的 JSON 物件傳遞給該物件。例如:
{"code":"4/yU4cQZTMnnMtetyFcIWNItG32eKxxxgXXX-Z4yyJJJo.4qHskT-UtugceFc0ZRONyF4z7U4UmAI"}
步驟 6:將授權碼傳送至伺服器
code
是你的一次性代碼,伺服器可交換其自己的存取權杖和更新權杖。只有在系統向使用者顯示要求離線存取的授權對話方塊後,您才能取得更新權杖。如果您已在步驟 4 的 OfflineAccessOptions
中指定 select-account
prompt
,則必須儲存所擷取的更新權杖供日後使用,因為後續的廣告交易平台會為更新權杖傳回 null
。此流程可比標準 OAuth 2.0 流程更安全。
系統一律會透過有效的授權碼交換傳回存取權杖。
下列指令碼定義登入按鈕的回呼函式。登入成功後,函式會儲存存取權杖以供用戶端使用,並將一次性代碼傳送至相同網域的伺服器。
<!-- Last part of BODY element in file index.html -->
<script>
function signInCallback(authResult) {
if (authResult['code']) {
// Hide the sign-in button now that the user is authorized, for example:
$('#signinButton').attr('style', 'display: none');
// Send the code to the server
$.ajax({
type: 'POST',
url: 'http://example.com/storeauthcode',
// Always include an `X-Requested-With` header in every AJAX request,
// to protect against CSRF attacks.
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
contentType: 'application/octet-stream; charset=utf-8',
success: function(result) {
// Handle or verify the server response.
},
processData: false,
data: authResult['code']
});
} else {
// There was an error.
}
}
</script>
步驟 7:以授權碼交換存取權杖
在伺服器上交換驗證碼以取得存取權和更新權杖。請使用存取權杖代表使用者呼叫 Google API,並視需要儲存更新權杖,以便在存取權杖過期時取得新的存取權杖。
如果你要求存取設定檔,也會取得含有使用者基本個人資訊的 ID 權杖。
例如:
Java
// (Receive authCode via HTTPS POST) if (request.getHeader("X-Requested-With") == null) { // Without the `X-Requested-With` header, this request could be forged. Aborts. } // Set path to the Web application client_secret_*.json file you downloaded from the // Google API Console: https://console.cloud.google.com/apis/credentials // You can also find your Web application client ID and client secret from the // console and specify them directly when you create the GoogleAuthorizationCodeTokenRequest // object. String CLIENT_SECRET_FILE = "/path/to/client_secret.json"; // Exchange auth code for access token GoogleClientSecrets clientSecrets = GoogleClientSecrets.load( JacksonFactory.getDefaultInstance(), new FileReader(CLIENT_SECRET_FILE)); GoogleTokenResponse tokenResponse = new GoogleAuthorizationCodeTokenRequest( new NetHttpTransport(), JacksonFactory.getDefaultInstance(), "https://oauth2.googleapis.com/token", clientSecrets.getDetails().getClientId(), clientSecrets.getDetails().getClientSecret(), authCode, REDIRECT_URI) // Specify the same redirect URI that you use with your web // app. If you don't have a web version of your app, you can // specify an empty string. .execute(); String accessToken = tokenResponse.getAccessToken(); // Use access token to call API GoogleCredential credential = new GoogleCredential().setAccessToken(accessToken); Drive drive = new Drive.Builder(new NetHttpTransport(), JacksonFactory.getDefaultInstance(), credential) .setApplicationName("Auth Code Exchange Demo") .build(); File file = drive.files().get("appfolder").execute(); // Get profile info from ID token GoogleIdToken idToken = tokenResponse.parseIdToken(); GoogleIdToken.Payload payload = idToken.getPayload(); String userId = payload.getSubject(); // Use this value as a key to identify a user. String email = payload.getEmail(); boolean emailVerified = Boolean.valueOf(payload.getEmailVerified()); String name = (String) payload.get("name"); String pictureUrl = (String) payload.get("picture"); String locale = (String) payload.get("locale"); String familyName = (String) payload.get("family_name"); String givenName = (String) payload.get("given_name");
Python
from apiclient import discovery import httplib2 from oauth2client import client # (Receive auth_code by HTTPS POST) # If this request does not have `X-Requested-With` header, this could be a CSRF if not request.headers.get('X-Requested-With'): abort(403) # Set path to the Web application client_secret_*.json file you downloaded from the # Google API Console: https://console.cloud.google.com/apis/credentials CLIENT_SECRET_FILE = '/path/to/client_secret.json' # Exchange auth code for access token, refresh token, and ID token credentials = client.credentials_from_clientsecrets_and_code( CLIENT_SECRET_FILE, ['https://www.googleapis.com/auth/drive.appdata', 'profile', 'email'], auth_code) # Call Google API http_auth = credentials.authorize(httplib2.Http()) drive_service = discovery.build('drive', 'v3', http=http_auth) appfolder = drive_service.files().get(fileId='appfolder').execute() # Get profile info from ID token userid = credentials.id_token['sub'] email = credentials.id_token['email']