JavaScript 快速入门

快速入门介绍了如何设置和运行调用 Google Workspace API 的应用。

Google Workspace 快速入门使用 API 客户端库来处理身份验证和授权流程的一些详细信息。我们建议您为自己的应用使用客户端库。每个快速入门都要求您开启身份验证和授权，然后才能运行示例应用。如果您不熟悉 Google Workspace API 的身份验证和授权，请参阅身份验证和授权概览。

创建一个向 People API 发出请求的 JavaScript Web 应用。

目标

  • 设置环境。
  • 设置示例。
  • 运行示例。

前提条件

设置您的环境

如需完成本快速入门，请设置您的环境。

启用 API

在使用 Google API 之前，您需要先在 Google Cloud 项目中启用它们。您可以在单个 Google Cloud 项目中启用一个或多个 API。

  • 在 Google Cloud 控制台中，启用 People API。

    启用 API

为 Web 应用授权凭据

如需以最终用户的身份进行身份验证并访问应用中的用户数据，您需要创建一个或多个 OAuth 2.0 客户端 ID。客户端 ID 用于向 Google 的 OAuth 服务器标识单个应用。如果您的应用在多个平台上运行，您必须为每个平台创建单独的客户端 ID。
  1. 在 Google Cloud 控制台中，转到“菜单”图标 > API 和服务 > 凭据。

    进入“凭据”页面

  2. 点击创建凭据 > OAuth 客户端 ID。
  3. 依次点击应用类型 > Web 应用。
  4. 在名称字段中，输入凭据名称。此名称仅显示在 Google Cloud 控制台中。
  5. 添加与您的应用相关的已获授权的 URI：
    • 客户端应用 (JavaScript) - 在已获授权的 JavaScript 来源下，点击添加 URI。然后，输入要用于浏览器请求的 URI。标识您的应用可以从哪些网域向 OAuth 2.0 服务器发送 API 请求。
    • 服务器端应用（Java、Python 等） - 在已获授权的重定向 URI 下，点击添加 URI。然后，输入 OAuth 2.0 服务器可以将响应发送到的端点 URI。
  6. 点击创建。系统随即会显示 OAuth 客户端创建的屏幕，其中会显示您的新客户端 ID 和客户端密钥。

    记下客户端 ID。Web 应用不使用客户端密钥。

  7. 点击 OK。新创建的凭据会显示在 OAuth 2.0 客户端 ID 下。
  8. 可选：如果您要创建凭据作为 JavaScript 快速入门的前提条件，则还必须生成 API 密钥。

记下这些凭据，因为您稍后需要在本快速入门中使用这些凭据。

设置示例

  1. 在工作目录中，创建一个名为 index.html 的文件。

  2. 在 index.html 文件中，粘贴以下示例代码：

    people/quickstart/index.html
    <!DOCTYPE html>
<html>
  <head>
    <title>People API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>People API Quickstart</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
    <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      /* exported gapiLoaded */
      /* exported gisLoaded */
      /* exported handleAuthClick */
      /* exported handleSignoutClick */

      // TODO(developer): Set to client ID and API key from the Developer Console
      const CLIENT_ID = '<YOUR_CLIENT_ID>';
      const API_KEY = '<YOUR_API_KEY>';


      // Discovery doc URL for APIs used by the quickstart
      const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/people/v1/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/contacts.readonly';

      let tokenClient;
      let gapiInited = false;
      let gisInited = false;

      document.getElementById('authorize_button').style.visibility = 'hidden';
      document.getElementById('signout_button').style.visibility = 'hidden';

      /**
       * Callback after api.js is loaded.
       */
      function gapiLoaded() {
        gapi.load('client', initializeGapiClient);
      }

      /**
       * Callback after the API client is loaded. Loads the
       * discovery doc to initialize the API.
       */
      async function initializeGapiClient() {
        await gapi.client.init({
          apiKey: API_KEY,
          discoveryDocs: [DISCOVERY_DOC],
        });
        gapiInited = true;
        maybeEnableButtons();
      }

      /**
       * Callback after Google Identity Services are loaded.
       */
      function gisLoaded() {
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: CLIENT_ID,
          scope: SCOPES,
          callback: '', // defined later
        });
        gisInited = true;
        maybeEnableButtons();
      }

      /**
       * Enables user interaction after all libraries are loaded.
       */
      function maybeEnableButtons() {
        if (gapiInited && gisInited) {
          document.getElementById('authorize_button').style.visibility = 'visible';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick() {
        tokenClient.callback = async (resp) => {
          if (resp.error !== undefined) {
            throw (resp);
          }
          document.getElementById('signout_button').style.visibility = 'visible';
          document.getElementById('authorize_button').innerText = 'Refresh';
          await listConnectionNames();
        };

        if (gapi.client.getToken() === null) {
          // Prompt the user to select a Google Account and ask for consent to share their data
          // when establishing a new session.
          tokenClient.requestAccessToken({prompt: 'consent'});
        } else {
          // Skip display of account chooser and consent dialog for an existing session.
          tokenClient.requestAccessToken({prompt: ''});
        }
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick() {
        const token = gapi.client.getToken();
        if (token !== null) {
          google.accounts.oauth2.revoke(token.access_token);
          gapi.client.setToken('');
          document.getElementById('content').innerText = '';
          document.getElementById('authorize_button').innerText = 'Authorize';
          document.getElementById('signout_button').style.visibility = 'hidden';
        }
      }

      /**
       * Print the display name if available for 10 connections.
       */
      async function listConnectionNames() {
        let response;
        try {
          // Fetch first 10 files
          response = await gapi.client.people.people.connections.list({
            'resourceName': 'people/me',
            'pageSize': 10,
            'personFields': 'names,emailAddresses',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const connections = response.result.connections;
        if (!connections || connections.length == 0) {
          document.getElementById('content').innerText = 'No connections found.';
          return;
        }
        // Flatten to string to display
        const output = connections.reduce(
            (str, person) => {
              if (!person.names || person.names.length === 0) {
                return `${str}Missing display name\n`;
              }
              return `${str}${person.names[0].displayName}\n`;
            },
            'Connections:\n');
        document.getElementById('content').innerText = output;
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
  </body>
</html>

    请替换以下内容：

运行示例

  1. 在工作目录中，启动一个网络服务器：

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python3 -m http.server 8000

  2. 在浏览器中，前往 http://localhost:8000。

  3. 首次运行示例时，系统会提示您授予访问权限：

    1. 如果您尚未登录 Google 帐号，系统会提示您登录。如果您登录了多个帐号，请选择一个帐号用于授权。
    2. 点击接受。
    3. 从浏览器中复制代码，并将其粘贴到命令行提示符中，然后按 Enter。

    授权信息存储在文件系统中，因此在您下次运行示例代码时，系统不会提示您授权。

您已成功创建了第一个向 People API 发出请求的 JavaScript 应用。

后续步骤