JavaScript 快速入门

本快速入门指南介绍了如何设置一个简单的页面，该页面会向 YouTube Data API 发出请求。本快速入门实际上介绍了如何发出两个 API 请求：

  1. 您将使用 API 密钥（用于标识您的应用）来检索有关 GoogleDevelopers YouTube 频道的信息。
  2. 您将使用 OAuth 2.0 客户端 ID 提交 已获授权的请求，以检索有关您自己的 YouTube 频道的信息。

前提条件

如需运行本快速入门，您需要：

  • Node.js 和 npm（用于运行本地 Web 服务器）
  • 访问互联网和网络浏览器。
  • Google 账号。

第 1 步：设置项目和凭据

在 Cloud 控制台中创建或选择一个项目。在 Cloud 控制台中为您的项目完成以下任务：

  1. 在库面板中， 搜索 YouTube Data API v3。点击该 API 的列表，并确保该 API 已针对您的项目启用。

  2. 在凭据 面板中 ，创建两个凭据：

    1. 创建 API 密钥 ：您将使用 API 密钥发出不需要用户授权的 API 请求。例如，您不需要用户授权即可检索有关公开 YouTube 频道的信息。

    2. 创建 OAuth 2.0 客户端 ID 将应用类型设置为 Web 应用。对于需要用户授权的请求，您需要使用 OAuth 2.0 凭据。例如，您需要用户授权才能检索有关当前已通过身份验证的用户的 YouTube 频道的信息。

      在已获授权的 JavaScript 来源 字段中，输入网址 http://localhost:8000。您可以将已获授权的重定向 URI 字段留空。

第 2 步：设置并运行示例

使用侧边栏中的 APIs Explorer 微件获取用于检索有关 GoogleDevelopers YouTube 频道的信息的示例代码。此请求使用 API 密钥来标识您的应用，并且不需要用户授权或运行该示例的用户的任何特殊权限。

  1. 打开 API 的 channels.list 方法的文档。

  2. 在该页面上，“常见使用场景”部分包含一个表格，其中介绍了该方法的几种常见使用方式。表格中的第一个列表用于按频道 ID 列出结果。

    点击第一个列表的代码符号，以打开并填充全屏 APIs Explorer。

    图片，用于标识列出渠道使用情形的表格中代码符号链接的位置。相应图片的替代文本将该图片标识为代码符号，并指定与该链接关联的使用情形。

  3. 全屏 APIs Explorer 的左侧显示以下内容：

    1. 在请求参数 标题下方，列出了该方法支持的参数。应设置 part 和 id 参数值。id 参数值 UC_x5XG1OV2P6uZZ5FSM9Ttw 是 GoogleDevelopers YouTube 频道的 ID。

    2. 在参数下方，有一个名为凭据 的部分。该部分中的下拉菜单应显示值 API 密钥 。APIs Explorer 默认使用演示凭据，以便您更轻松地开始使用。但您将使用自己的 API 密钥在本地运行该示例。

      图片：显示了全屏 APIs Explorer 中的“凭据”以及下拉菜单，其中“API 密钥”选项处于选中状态。

  4. 全屏 APIs Explorer 的右侧显示了包含不同语言的代码示例的标签页。选择 JavaScript 标签页。

  5. 复制该代码示例，并将其保存到名为 example.html 的文件中。

  6. 在您下载的示例中，找到 YOUR_API_KEY 字符串，并将其替换为您在本快速入门的第 1 步中创建的 API 密钥。

  7. 在工作目录中使用以下命令启动 Web 服务器：

    npx http-server -p 8000

  8. 在浏览器中打开 example.html 文件。同时打开浏览器的开发者工具，例如 Chrome 浏览器中的“开发者工具”。

    1. 点击页面上的 load 按钮，以加载 Google APIs Client Library for JavaScript。点击该按钮后，开发者控制台应显示一条说明，指出 GAPI 客户端已加载。

    2. 点击 execute 按钮以发送 API 请求。然后，开发者控制台应显示 API 响应。

第 3 步：运行已获授权的请求

在此步骤中，您将修改代码示例，使其检索有关 您的 YouTube 频道的信息，而不是检索有关 GoogleDevelopers YouTube 频道的信息。此请求确实需要用户授权。

  1. 返回到 API 的 channels.list 方法的文档。

  2. 在“常见使用场景”部分中，点击表格中第三个列表的代码符号。该使用场景是为“我的频道”调用 list 方法。

  3. 同样，在全屏 APIs Explorer 的左侧，您将看到一个参数列表，后跟凭据 部分。不过，与您检索有关 GoogleDevelopers 频道的信息的示例相比，有两处变化：

    1. 在参数部分中，应将 mine 参数值设置为 true，而不是设置 id 参数值。这会指示 API 服务器检索有关当前已通过身份验证的用户的频道的信息。

    2. 在凭据 部分中，下拉菜单应选择 Google OAuth 2.0 选项。

      此外，如果您点击显示范围 链接，则应选中 https://www.googleapis.com/auth/youtube.readonly 范围。

      图片：显示全屏 API Explorer 中的权限范围，以及选中的“使用 Google OAuth 2.0 凭据”选项。

  4. 与上一个示例一样，选择 JavaScript 标签页，复制该代码示例，并将其保存到 example.html。

    在代码中，找到 YOUR_CLIENT_ID 字符串，并将其替换为您在本快速入门的第 1 步中创建的客户端 ID。

  5. 在工作目录中使用以下命令启动 Web 服务器：

    npx http-server -p 8000

  6. 在浏览器中转到 http://localhost:8000/example.html 文件。 打开浏览器的开发者工具，例如 Chrome 浏览器中的“开发者工具”。

  7. 点击页面上的 authorize and load 按钮，以加载 Google APIs Client Library for JavaScript 并启动授权流程。 系统应会提示您授予应用从您的 YouTube 账号读取数据的权限。

    如果您授予该权限，开发者控制台应显示消息，指出登录成功且 API 客户端已加载。

  8. 点击 execute 按钮以发送 API 请求。然后，开发者控制台应显示 API 响应。

深入阅读