此页面由 Cloud Translation API 翻译。

JavaScript 快速入门

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

Google Workspace 快速入门使用 API 客户端库来处理一些身份验证和授权流程的详细信息。我们建议您需要为自己的应用使用客户端库本快速入门使用适用于测试的简化身份验证方法环境对于生产环境，我们建议您了解身份验证和授权早于选择访问凭据适合您应用的广告格式

创建向 Google 日历 API 发出请求的 JavaScript Web 应用。

目标

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

前提条件

Node.js 和npm 已安装。
Google Cloud 项目。

拥有启用了 Google 日历的 Google 账号。

设置环境

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

启用 API

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

在 Google Cloud 控制台中，启用 Google 日历 API。

启用 API

配置 OAuth 权限请求页面

如果您使用新的 Google Cloud 项目来完成本快速入门，请配置 OAuth 权限请求页面，并将您自己添加为测试用户。如果您已经已完成此步骤，请跳到下一部分。

在 Google Cloud 控制台中，点击“菜单”图标 > API 和服务 > OAuth 同意屏幕。
转到 OAuth 同意屏幕
对于用户类型，选择内部，然后点击创建。
填写应用注册表单，然后点击保存并继续。
现在，您可以跳过添加范围，然后点击保存并继续。以后，如果您要创建一款应用供用户使用 Google Workspace 组织，您必须将用户类型更改为外部，然后执行以下操作：添加您的应用所需的授权范围。
查看应用注册摘要。如需进行更改，请点击修改。如果应用点击 Back to Dashboard（返回信息中心）。

为 Web 应用授权凭据

如需对最终用户进行身份验证并访问应用中的用户数据，您需要执行以下操作：创建一个或多个 OAuth 2.0 客户端 ID。客户端 ID 用于标识连接到 Google OAuth 服务器。如果您的应用在多个平台上运行您必须为每个平台创建一个单独的客户端 ID。

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

请记下这些凭据，因为您在本快速入门的后面部分需要用到它们。

创建 API 密钥

在 Google Cloud 控制台中，点击“菜单”图标 > API 和服务 > 凭据。
进入“凭据”页面
点击创建凭据 > API 密钥。
此时将显示您的新 API 密钥。
- 点击“复制”图标复制 API 密钥，以便在应用代码中使用。API 密钥也可以是可在“API 密钥”中找到部分。
- 点击限制密钥以更新高级设置并限制密钥使用您的 API 密钥。如需了解详情，请参阅应用 API 密钥限制。

设置示例

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

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

calendar/quickstart/index.html

在 GitHub 上查看

<!DOCTYPE html>
<html>
  <head>
    <title>Google Calendar API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Google Calendar 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/calendar/v3/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/calendar.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 listUpcomingEvents();
        };

        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 summary and start datetime/date of the next ten events in
       * the authorized user's calendar. If no events are found an
       * appropriate message is printed.
       */
      async function listUpcomingEvents() {
        let response;
        try {
          const request = {
            'calendarId': 'primary',
            'timeMin': (new Date()).toISOString(),
            'showDeleted': false,
            'singleEvents': true,
            'maxResults': 10,
            'orderBy': 'startTime',
          };
          response = await gapi.client.calendar.events.list(request);
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }

        const events = response.result.items;
        if (!events || events.length == 0) {
          document.getElementById('content').innerText = 'No events found.';
          return;
        }
        // Flatten to string to display
        const output = events.reduce(
            (str, event) => `${str}${event.summary} (${event.start.dateTime || event.start.date})\n`,
            'Events:\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>

替换以下内容：

YOUR_CLIENT_ID：您创建的客户端 ID 当你 Web 应用的授权凭据。
YOUR_API_KEY：您作为 API 密钥创建的一个前提条件。

运行示例

在您的工作目录中，安装 http-server 软件包：
```
npm install http-server
```
在您的工作目录中，启动网络服务器：
```
npx http-server -p 8000
```

在浏览器中，前往 http://localhost:8000。
您会看到授予访问权限的提示：
1. 如果您尚未登录 Google 账号，请在系统提示时登录。如果如果您登录了多个账号，请选择一个用于授权的账号。
2. 点击接受。

您的 JavaScript 应用运行并调用 Google 日历 API。