JavaScript 快速入门

本快速入门指南介绍了如何设置一个简单的网页,该网页可向 YouTube Data API 发出请求。本快速入门实际上介绍了如何发出两项 API 请求:

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

前提条件

如需运行本快速入门,您需要满足以下条件:

  • Python 2.4 或更高版本(用于提供 Web 服务器)
  • 可连接到互联网并使用网络浏览器。
  • Google 账号

第 1 步:设置项目和凭据

API 控制台中创建或选择项目。在 API 控制台中为您的项目完成以下任务:

  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 widget 获取用于检索 GoogleDevelopers YouTube 频道相关信息的示例代码。此请求使用 API 密钥来标识您的应用,不需要用户授权,也不需要运行该示例的用户提供任何特殊权限。

  1. 打开 API 的 channels.list 方法的文档。
  2. 在该页面上,“常见用例”部分包含一个表格,其中说明了该方法的几种常见用法。表格中的第一个列表是按频道 ID 列出的结果。

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

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

  3. 全屏 API Explorer 的左侧显示以下内容:

    1. 请求参数标题下方,列出了相应方法支持的参数。应设置 partid 参数值。id 参数值 UC_x5XG1OV2P6uZZ5FSM9Ttw 是 GoogleDevelopers YouTube 频道的 ID。

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

      图片:显示全屏 API 浏览器中的“凭据”以及下拉菜单(其中“API 密钥”选项处于选中状态)。

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

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

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

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

    Python 2.x

    python -m SimpleHTTPServer 8000
    

    Python 3.x

    python -m http.server 8000
    
  8. 在浏览器中打开 example.html 文件。同时打开浏览器的开发者工具,例如 Chrome 浏览器中的“开发者工具”。

    1. 点击页面上的加载按钮,加载适用于 JavaScript 的 Google API 客户端库。点击该按钮后,开发者控制台应会显示一条消息,表明 GAPI 客户端已加载。

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

第 3 步:运行授权请求

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

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

  2. 在“常见使用情形”部分,点击表格中第三个列表的代码符号。该使用情形是针对“我的频道”调用 list 方法。

  3. 同样,在全屏 API 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 服务器:

    Python 2.x

    python -m SimpleHTTPServer 8000
    

    Python 3.x

    python -m http.server 8000
    
  6. 在浏览器中前往 http://localhost:8000/example.html 文件。 打开浏览器的开发者工具,例如 Chrome 浏览器中的“开发者工具”。

  7. 点击页面上的授权并加载按钮,以加载适用于 JavaScript 的 Google API 客户端库并启动授权流程。系统应会提示您授予应用读取 YouTube 账号中数据的权限。

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

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

深入阅读