伺服器端應用程式的 Google 登入

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

如要在使用者離線時代表使用者使用 Google 服務,您必須使用混合伺服器端流程,讓使用者在用戶端使用 JavaScript API 用戶端授權您的應用程式,並將特殊的一次性授權碼傳送至您的伺服器。您的伺服器會交換這組一次性程式碼,藉此向 Google 取得自家的存取權與更新權杖,讓伺服器能自行呼叫 API,以便在使用者離線時進行呼叫。這個一次性程式碼流程在純粹的伺服器端流程,以及將存取權杖傳送至伺服器,在安全性方面都有所的優點。

為伺服器端應用程式取得存取權杖的登入流程如下圖所示。

一次性代碼具有多項安全性優勢。透過程式碼,Google 會直接將權杖提供給伺服器,無需使用中介商。雖然我們不建議使用外洩程式碼,但要妥善處理用戶端密碼,使用起來非常困難。別忘了用戶端密鑰!

實作一次性程式碼流程

Google 登入按鈕提供存取權杖授權碼。代碼是一次性代碼,伺服器可以與 Google 伺服器交換以存取存取權杖。

下列程式碼範例示範如何執行一次性程式碼流程。

使用一次性代碼流程驗證 Google 登入,您必須:

步驟 1:建立用戶端 ID 和用戶端密鑰

如要建立用戶端 ID 和用戶端密鑰,請建立 Google API 控制台專案、設定 OAuth 用戶端 ID,並註冊 JavaScript 來源:

  1. 前往 Google API 控制台

  2. 在專案下拉式選單中選取現有專案,或選取「Create a new project」(建立新專案) 來建立新專案。

  3. 在「API 和服務」底下的側欄中,選取「憑證」,然後按一下「設定同意畫面」

    選擇電子郵件地址、指定產品名稱,然後按下 [儲存]

  4. 在「憑證」分頁中,選取「建立憑證」下拉式清單,然後選擇「OAuth Client ID」(OAuth 用戶端 ID)

  5. 在「Application type」(應用程式類型) 下方,選取 [Web application] (網頁應用程式)

    註冊您的應用程式能夠存取 Google API 的來源,如下所示。來源是通訊協定、主機名稱和通訊埠的不重複組合。

    1. 請在「已獲授權的 JavaScript 來源」欄位中輸入應用程式的來源。您可以輸入多個來源,讓應用程式在不同的通訊協定、網域或子網域上執行。您無法使用萬用字元。在下方的示例中,第二個網址可能是實際執行網址。

      http://localhost:8080
      https://myproductionurl.example.com
      
    2. 「授權的重新導向 URI」欄位不需要值。重新導向 URI 不會與 JavaScript API 搭配使用。

    3. 按一下 [建立] 按鈕。

  6. 從系統顯示的「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']