此页面由 Cloud Translation API 翻译。

为 JavaScript Web 应用使用 OAuth 2.0

本文档介绍了如何实现 OAuth 2.0 授权来访问 YouTube Analytics API 或 YouTube Reporting API。OAuth 2.0 允许用户与应用程序共享特定数据，同时保留应用程序的用户名、密码和其他私密信息。例如，应用可以使用 OAuth 2.0 来获取权限来检索频道的 YouTube 数据分析数据。

此 OAuth 2.0 流程称为隐式授权流程。设计用于访问 API 的应用。这些不能存储机密信息。

在此流程中，您的应用会打开一个 Google 网址，该网址使用查询参数来识别您的应用以及应用所需的 API 访问权限类型您可以在当前浏览器中打开该网址窗口或弹出式窗口用户可以向 Google 进行身份验证并授予其请求的权限。然后，Google 会将用户重定向回您的应用。该重定向包含访问令牌，您的应用会进行验证，然后使用它来发出 API 请求。

Google API 客户端库和 Google Identity 服务

如果您使用适用于 JavaScript 的 Google API 客户端库向 Google 进行授权调用时，您应使用 Google Identity 服务 JavaScript 库来处理 OAuth 2.0 流程。请查看 Google 身份服务词元模型，也就是基于 OAuth 2.0 隐式授权流程。

前提条件

为您的项目启用 API

任何调用 Google API 的应用都需要在 API Console。

如需为您的项目启用该 API，请按以下步骤操作：

Open the API Library 在 Google API Console。
If prompted, select a project, or create a new one.
在“库”页面上找到并启用 YouTube Analytics API 和 YouTube Reporting API。许多检索 YouTube 数据分析数据的应用程序也与 YouTube 数据 API 连接。查找您的应用将使用的任何其他 API，并启用这些 API。

创建授权凭据

任何使用 OAuth 2.0 访问 Google API 的应用都必须具有授权凭据来向 Google 的 OAuth 2.0 服务器标识应用以下步骤说明了如何为项目创建凭据然后，您的应用就可以使用这些凭据访问 API 为该项目启用的功能

Go to the Credentials page.
依次点击创建凭据 > OAuth 客户端 ID。
选择 Web 应用应用类型。
填写表单。使用 JavaScript 发出已获授权的 Google API 请求的应用必须指定已获授权的 JavaScript 源。该源用于识别以便您的应用向 OAuth 2.0 服务器发送请求这些源必须遵守 Google 的验证规则。

确定访问权限范围

范围让您的应用可以仅请求访问所需的资源，同时让用户能够控制他们向您的应用授予的访问权限大小。因此，请求的范围数量与可能性征得用户同意。

在开始实现 OAuth 2.0 授权之前，我们建议您确定范围您的应用需要获取访问权限的请求。

YouTube Analytics API 使用以下范围：

范围
https://www.googleapis.com/auth/youtube	管理您的 YouTube 账号
https://www.googleapis.com/auth/youtube.readonly	查看您的 YouTube 账号
https://www.googleapis.com/auth/youtubepartner	查看和管理您在 YouTube 上的资源和关联内容
https://www.googleapis.com/auth/yt-analytics-monetary.readonly	查看您的 YouTube 内容的财务类和非财务类 YouTube Analytics 报表
https://www.googleapis.com/auth/yt-analytics.readonly	查看 YouTube 分析工具为您的 YouTube 内容出具的报告

YouTube Reporting API 使用以下范围：

范围
https://www.googleapis.com/auth/yt-analytics-monetary.readonly	查看您的 YouTube 内容的财务类和非财务类 YouTube Analytics 报表
https://www.googleapis.com/auth/yt-analytics.readonly	查看 YouTube 分析工具为您的 YouTube 内容出具的报告

OAuth 2.0 API 范围文档包含完整的可用于访问 Google API 的范围列表。

获取 OAuth 2.0 访问令牌

以下步骤展示了您的应用如何与 Google 的 OAuth 2.0 服务器交互，以获取用户同意代表其执行 API 请求。您的应用必须具有然后才能执行需要用户授权的 Google API 请求。

第 1 步：重定向到 Google 的 OAuth 2.0 服务器

要请求访问用户数据的权限，请将用户重定向到 Google 的 OAuth 2.0 服务器。

OAuth 2.0 端点

生成一个网址以从 Google 的 OAuth 2.0 端点请求访问权限，网址为 https://accounts.google.com/o/oauth2/v2/auth。可通过 HTTPS 访问此端点；普通 HTTP 连接会被拒绝。

Google 授权服务器支持以下网页的查询字符串参数：服务器应用：

参数

client_id

必需

应用的客户端 ID。您可以在 API Console Credentials page。

redirect_uri

必需

确定 API 服务器在用户完成授权流程。该值必须与以下对象的某个授权重定向 URI 完全匹配： OAuth 2.0 客户端（在客户端的 API Console Credentials page。如果此值与获得授权的重定向 URI，client_id 您将获得 redirect_uri_mismatch 个错误。

请注意，http 或 https 架构、大小写和尾随斜杠（“/”）必须全部匹配。

response_type

必需

JavaScript 应用需要将该参数的值设置为 token。这个值指示 Google 授权服务器将访问令牌作为 name=value 对的 URI 的片段标识符 (#) 用户在完成授权流程后将被重定向。

scope

必需

答空格分隔范围列表，用于标识您的应用可以在。这些值会告知 Google 向用户。

范围让您的应用可以仅请求访问所需的资源同时让用户能够控制他们向您的网页授予应用。因此，所请求的范围数量与以及征得用户同意的可能性

YouTube Analytics API 使用以下范围：

范围
https://www.googleapis.com/auth/youtube	管理您的 YouTube 账号
https://www.googleapis.com/auth/youtube.readonly	查看您的 YouTube 账号
https://www.googleapis.com/auth/youtubepartner	查看和管理您在 YouTube 上的资源和关联内容
https://www.googleapis.com/auth/yt-analytics-monetary.readonly	查看您的 YouTube 内容的财务类和非财务类 YouTube Analytics 报表
https://www.googleapis.com/auth/yt-analytics.readonly	查看 YouTube 分析工具为您的 YouTube 内容出具的报告

YouTube Reporting API 使用以下范围：

范围
https://www.googleapis.com/auth/yt-analytics-monetary.readonly	查看您的 YouTube 内容的财务类和非财务类 YouTube Analytics 报表
https://www.googleapis.com/auth/yt-analytics.readonly	查看 YouTube 分析工具为您的 YouTube 内容出具的报告

OAuth 2.0 API 范围文档提供了可用于访问 Google API 的完整范围列表。

我们建议您的应用在上下文中请求对授权范围的访问权限。视情况请求访问用户数据，方法为：增量授权，可以帮助用户更轻松地了解您的应用为何需要其请求的访问权限。

state

建议

指定应用用来维持授权请求和授权服务器的响应。服务器返回您作为 name=value 对在网址片段标识符 (#) 的 redirect_uri（在用户同意或拒绝您的应用的声明之后）权限申请。

此参数有多种用途，例如将用户定向到您应用中的正确资源、发送 Nonce 以及缓解跨网站请求。由于您的 redirect_uri 可以被猜到，因此使用 state 值可以更好地确保传入的连接是身份验证请求。如果您生成了随机字符串或对 Cookie 的哈希值或另一个用于捕获客户端状态的值，您可以验证对此外，还要确保请求和响应来自同一个浏览器，以防范此类攻击，例如跨网站请求伪造行为。请参阅 OpenID Connect 关于如何创建和确认 state 令牌的示例的文档。

</ph> 重要提示：如 OAuth2 规范。实现此目的的方法之一是使用 state 形参来维护授权请求和授权服务器响应之间的状态。

include_granted_scopes

可选

允许应用使用增量授权来请求访问范围。如果您将此参数的值设置为 true，并且将授权请求，那么新的访问令牌还将涵盖用于用户之前已向应用授予访问权限请参阅增量授权部分。

enable_granular_consent

可选

默认为 true。如果设为 false，其他个细化的 Google 账号权限将对 2019 年之前创建的 OAuth 客户端 ID 停用。较晚没有影响 OAuth 客户端 ID，因为系统始终会为这些客户端启用更精细的权限。

当 Google 为某个应用启用细化的权限时，此参数不会都不会再产生任何影响

login_hint

可选

如果您的应用知道哪个用户正在尝试进行身份验证，则可以使用此参数，以便向 Google 身份验证服务器提供提示。服务器会使用该提示简化登录流程：在登录表单中预先填写电子邮件地址字段选择相应的多登录会话。

将该参数值设为电子邮件地址或 sub 标识符，即等同于用户的 Google ID。

prompt

可选

一系列要向用户显示的提示（用空格分隔，区分大小写）。如果您指定此参数，系统仅会在首次您的项目时提示用户请求访问权限。请参阅提示再次征求用户意见。

可能的值包括：

`none`	不得显示任何身份验证页面或权限请求页面。不得使用其他值
`consent`	提示用户同意。
`select_account`	提示用户选择账号。

到 Google 授权服务器的示例重定向

以下示例网址请求离线访问 (access_type=offline) 映射到允许检索用户的 YouTube 分析工具报告它使用增量授权来确保新的访问令牌涵盖用户应用访问权限该网址还会设置必需的 redirect_uri、response_type 和 client_id 参数以及 state 参数。网址包含换行符和空格，以方便阅读。

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

创建请求网址后，将用户重定向到该网址。

JavaScript 示例代码

以下 JavaScript 代码段展示了如何在而无需使用适用于 JavaScript 的 Google API 客户端库。由于此 OAuth 2.0 端点不支持跨源资源共享 (CORS)，该代码段会创建一个表单。

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/yt-analytics.readonly',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

第 2 步：Google 提示用户同意

在此步骤中，用户可决定是否授予您的应用所请求的访问权限。目前阶段，Google 会显示一个意见征求窗口，其中会显示您的应用名称和 Google API 它请求权限的那些服务，可以使用用户的授权凭据要授予的访问权限范围的摘要。通过然后，用户可以同意授予对您的应用请求的一个或多个范围的访问权限，或者拒绝请求

在此阶段，您的应用无需进行任何操作，因为它会等待来自 Google 的 OAuth 2.0 服务器，指示是否已授予任何访问权限。该回答在。

错误

向 Google 的 OAuth 2.0 授权端点发送的请求可能会显示面向用户的错误消息而不是预期的身份验证和授权流程。常见错误代码和建议分辨率。

`admin_policy_enforced`

由于以下政策，该 Google 账号无法对所请求的一个或多个范围进行授权 Google Workspace 管理员。参阅 Google Workspace 管理员帮助文章 <ph type="x-smartling-placeholder"></ph> 您可以控制哪些第三方和内部应用访问 Google Workspace 数据，详细了解管理员如何限制对所有范围或敏感限制范围，直到明确授予对 OAuth 客户端 ID 的访问权限。

`disallowed_useragent`

授权端点显示在 Google 禁止的嵌入式用户代理中。 OAuth 2.0 政策。

Android

Android 开发者在以下位置打开授权请求时可能会遇到此错误消息： android.webkit.WebView。开发者应该改用 Android 库，如适用于 Android 的 Google 登录或 OpenID Foundation 的适用于 Android 的 AppAuth。

当 Android 应用在用户从 Google 的 OAuth 2.0 授权端点转到 Google 的 OAuth 2.0 授权端点，。开发者应该允许在操作系统，其中包括 Android 应用链接处理程序或默认浏览器应用。通过 Android 自定义标签页也是一个受支持的选项。

iOS

iOS 和 macOS 开发者在以下位置打开授权请求时可能会遇到此错误： WKWebView。开发者应该改用 iOS 库，如 iOS 版 Google 登录或 OpenID Foundation 的适用于 iOS 的 AppAuth。

当 iOS 或 macOS 应用在以下位置打开常规网页链接时，Web 开发者可能会遇到此错误嵌入的用户代理，而用户从 Google 的 OAuth 2.0 授权端点。开发者应该允许在操作系统，其中包括通用链接处理程序或默认浏览器应用。通过 SFSafariViewController 也是一个受支持的选项。

`org_internal`

请求中的 OAuth 客户端 ID 属于某个项目具体 <ph type="x-smartling-placeholder"></ph> Google Cloud Organization（Google Cloud 组织）。有关此配置选项的详细信息，请参阅用户类型部分。

`invalid_client`

发出该请求的来源未获得此客户端的授权。请参阅 origin_mismatch。

`invalid_grant`

使用增量授权时，令牌可能已过期或已失效。再次对用户进行身份验证，并请求用户同意以获取新令牌。如果您选择继续请确定您的应用已正确配置，在请求中使用正确的令牌和参数。否则，该用户账号可能具有已被删除或停用。

`origin_mismatch`

发起授权请求的 JavaScript 的架构、域名和/或端口不得与为 OAuth 客户端 ID 注册的授权 JavaScript 源 URI 相匹配。审核已授权 Google API Console中的 JavaScript 来源 Credentials page。

`redirect_uri_mismatch`

授权请求中传递的 redirect_uri 与已获授权的 OAuth 客户端 ID 的重定向 URI。请在以下位置查看已获授权的重定向 URI： Google API Console Credentials page。

发起授权请求的 JavaScript 的架构、域名和/或端口不得与为 OAuth 客户端 ID 注册的授权 JavaScript 源 URI 相匹配。评价授权的 JavaScript 来源 Google API Console Credentials page。

redirect_uri 参数可以是指具有以下特征的 OAuth 带外 (OOB) 流程：已弃用，不再受支持。请参阅迁移指南，更新您的集成。

`invalid_request`

您提出的请求出了点问题。造成这种情况的原因有很多：

该请求的格式不正确
请求缺少必需的参数
请求使用的授权方法不受 Google 支持。验证您的 OAuth 集成使用推荐的集成方法

第 3 步：处理 OAuth 2.0 服务器响应

OAuth 2.0 端点

重要提示：在处理 OAuth 2.0 响应之前，您应该先确认 state 从 Google 收到的 state 与授权请求。这种验证有助于确保用户而非恶意从而可降低 CSRF 攻击。

OAuth 2.0 服务器将响应发送至 redirect_uri 访问令牌请求。

如果用户批准了请求，则响应中会包含一个访问令牌。如果用户未批准请求，则响应包含错误消息。访问令牌或会在重定向 URI 的哈希代码段中返回错误消息，如下所示：

访问令牌响应：
```
https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600
```
除了 access_token 参数之外，fragment 字符串还具有包含 token_type 参数，该参数始终设置为 Bearer 和 expires_in 参数，该参数用于指定（以秒为单位）。如果指定了 state 参数，那么其值也会包含在响应中。

错误响应：

https://oauth2.example.com/callback#error=access_denied

。

OAuth 2.0 服务器响应示例

您可以点击以下示例网址测试此流程拥有查看 Google 云端硬盘中文件元数据的只读权限：

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

完成 OAuth 2.0 流程后，系统会将您重定向至 http://localhost/oauth2callback。该网址会生成 404 NOT FOUND 错误，除非您的本地机器恰好在以下位置传送文件：该地址下一步会详细介绍用户被重定向回您的应用时的 URI。

调用 Google API

OAuth 2.0 端点

在您的应用获得访问令牌后，您就可以使用该令牌调用 Google 代表指定的用户账号（如果已授予 API 所需的访问权限范围）。为此，请添加通过添加 access_token 查询来获取对 API 的请求中的访问令牌参数或 Authorization HTTP 标头 Bearer 值。如有可能，最好使用 HTTP 标头，因为查询字符串通常显示在服务器日志中。大多数可以使用客户端库来设置对 Google API 的调用（例如，调用 YouTube Analytics API）。

请注意，YouTube Analytics API 不支持该服务账号。YouTube Reporting API 仅支持拥有并管理多个 YouTube 频道的 YouTube 内容所有者，唱片公司和电影制片厂

您可以访问以下网址，试用所有 Google API 并查看其作用域： OAuth 2.0 Playground。

HTTP GET 示例

对 <ph type="x-smartling-placeholder"></ph> reports.query 端点（YouTube Analytics API）使用 Authorization: Bearer HTTP 可能如下所示。请注意，您需要指定自己的访问令牌：

GET /youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

以下是使用 access_token 为经过身份验证的用户对同一 API 的调用查询字符串参数：

GET https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

`curl` 示例

您可以使用 curl 命令行应用测试这些命令。这里有使用 HTTP 标头选项的示例（首选）：

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

或者，也可以使用查询字符串参数选项：

curl https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

JavaScript 示例代码

以下代码段演示了如何使用 CORS（跨源资源共享）将向 Google API 发出请求。本示例未使用 JavaScript 版 Google API 客户端库。不过，即使您没有使用客户端库，该库文档中的 CORS 支持指南可能会对您有所帮助以便更好地了解这些请求

在此代码段中，access_token 变量表示您拥有的获取并代表授权用户发出 API 请求。完整的示例演示了如何将该令牌存储在浏览器的本地存储空间中并检索该令牌。

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

完整示例

OAuth 2.0 端点

此代码示例演示了如何在不使用适用于 JavaScript 的 Google API 客户端库。该代码适用于显示按钮的 HTML 网页，尝试 API 请求。如果您点击该按钮，代码会检查网页是否已存储了浏览器的本地存储空间中的 API 访问令牌。如果是，则执行 API 请求。否则系统就会启动 OAuth 2.0 流程

对于 OAuth 2.0 流程，该页面遵循以下步骤：

它会将用户定向到 Google 的 OAuth 2.0 服务器，该服务器会请求访问 https://www.googleapis.com/auth/yt-analytics.readonly 范围。
授予（或拒绝）对一个或多个请求范围的访问权限后，用户会被重定向到原始网页，该网页从片段标识符字符串中解析访问令牌。
该页面使用访问令牌来发出示例 API 请求。

此 API 请求会调用 YouTube Analytics API 的 reports.query 方法检索已授权用户的 YouTube 频道的观看次数。
如果请求成功执行，则 API 响应会记录在浏览器的调试部分控制台。

您可以通过权限页面 Google 账号。该应用会被列为适用于 Google API 文档的 OAuth 2.0 演示。

如需在本地运行此代码，您需要为 YOUR_CLIENT_ID 和 YOUR_REDIRECT_URI 变量，与您的授权凭据。YOUR_REDIRECT_URI 变量应设置为与该网页相同的网址。该值必须与以下项之一完全匹配： OAuth 2.0 客户端的授权重定向 URI（您在 API Console Credentials page。如果此值与已获授权的 URI 不匹配，则您会收到 redirect_uri_mismatch 错误。您的项目还必须为此请求启用了相应的 API。

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var fragmentString = location.hash.substring(1);
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0 && params['state']) {
    if (params['state'] == localStorage.getItem('state')) {
      localStorage.setItem('oauth2-test-params', JSON.stringify(params) );

      trySampleRequest();
    } else {
      console.log('State mismatch. Possible CSRF attack');
    }
  }

  // Function to generate a random state value
  function generateCryptoRandomState() {
    const randomValues = new Uint32Array(2);
    window.crypto.getRandomValues(randomValues);

    // Encode as UTF-8
    const utf8Encoder = new TextEncoder();
    const utf8Array = utf8Encoder.encode(
      String.fromCharCode.apply(null, randomValues)
    );

    // Base64 encode the UTF-8 data
    return btoa(String.fromCharCode.apply(null, utf8Array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // create random state value and store in local storage
    var state = generateCryptoRandomState();
    localStorage.setItem('state', state);

    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/yt-analytics.readonly',
                  'state': state,
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

JavaScript 源验证规则

为帮助您确保应用安全无虞您的 JavaScript 源必须遵守这些规则。如需域名、主机和架构的定义（如下所述）。

验证规则
架构	JavaScript 源必须使用 HTTPS 架构，而不是普通的 HTTP。Localhost URI （包括 localhost IP 地址 URI）不受此规则限制。
主机	主机不能是原始 IP 地址。本地主机 IP 地址不受此规则限制。
网域	主机 TLD （顶级域名）必须在公共后缀列表中。主机域名不能为 `“googleusercontent.com”`。 JavaScript 来源不得包含使用网址缩短工具的网域（例如 `goo.gl`）除非应用拥有该网域
用户信息	JavaScript 来源不能包含 userinfo 子组件。
路径	JavaScript 来源不能包含路径组件。
查询	JavaScript 来源不能包含查询组件。
fragment	JavaScript 来源不能包含 fragment 组件。
角色	JavaScript 来源不得包含某些字符，包括： <ph type="x-smartling-placeholder"> </ph> 通配符 (`'*'`) 不可打印的 ASCII 字符百分比编码无效（不遵循网址编码的任何百分比编码）后跟两个十六进制数字的形式） Null 字符（经过编码的 NULL 字符，例如`%00`, `%C0%80`)

增量授权

在 OAuth 2.0 协议中，您的应用会请求授权，以访问资源，由范围标识。请求授权被视为一种最佳用户体验做法适时获取所需资源为此，Google 的授权服务器支持增量授权。借助此功能，您可以根据需要请求范围，如果用户为新范围授予权限，则返回一个授权代码，而该代码可能是交换包含用户已授予项目的所有范围的令牌。

例如，假设某个应用检索 YouTube 数据分析报告，这些报告是需要访问额外范围的其他报告所需的操作在这种情况下，在用户登录时，应用可能只会请求访问 https://www.googleapis.com/auth/yt-analytics.readonly 范围。但是，如果用户尝试检索货币报告，则应用也可能请求访问 https://www.googleapis.com/auth/yt-analytics-monetary.readonly 范围。

以下规则适用于通过增量授权获取的访问令牌：

该令牌可用于访问与已纳入新的合并授权。
当您将刷新令牌用于组合授权以获取访问令牌时，访问令牌表示合并的授权，可用于响应中包含 scope 值。
合并授权包括用户向 API 项目授予的所有范围，甚至包括如果授权来自不同的客户端，则会发生此错误。例如，如果用户向将一个范围授予应用的桌面客户端，然后将另一个范围授予同一应用应用，则合并的授权将同时包含这两个授权范围。
如果您撤消了某个表示组合授权的令牌，就可以访问所有这些同时撤消代表关联用户的授权范围。

。

以下代码示例展示了如何向现有访问令牌添加范围。这种方法允许而无需管理多个访问令牌。

OAuth 2.0 端点

在此示例中，调用方应用会请求访问以检索用户的 YouTube 数据分析数据，以及用户执行的任何其他访问权限已授予该应用的权限。

如需向现有访问令牌添加范围，请包含 include_granted_scopes 参数（位于发送到 Google OAuth 2.0 服务器的请求中）。

以下代码段演示了如何执行此操作。该代码段假定您已存储浏览器的本地存储空间中您的访问令牌有效的范围。（完整示例代码存储了一个范围列表，其中在浏览器的本地属性中设置 oauth2-test-params.scope 属性即可 storage.)

代码段将访问令牌有效的范围与您要使用的范围进行比较特定查询。如果访问令牌未涵盖该范围，系统就会启动 OAuth 2.0 流程。在这里，oauth2SignIn 函数与第 2 步（稍后的完整示例）。

var SCOPE = 'https://www.googleapis.com/auth/yt-analytics.readonly';
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));

var current_scope_granted = false;
if (params.hasOwnProperty('scope')) {
  var scopes = params['scope'].split(' ');
  for (var s = 0; s < scopes.length; s++) {
    if (SCOPE == scopes[s]) {
      current_scope_granted = true;
    }
  }
}

if (!current_scope_granted) {
  oauth2SignIn(); // This function is defined elsewhere in this document.
} else {
  // Since you already have access, you can proceed with the API request.
}

撤消令牌

在某些情况下，用户可能希望撤消授予应用的访问权限。用户可以撤消访问权限通过访问账号设置。请参阅删除第三方网站和应用的“网站或应用访问权限”部分有权访问您账号的应用支持文档。

应用也可以通过编程方式撤消授予其的访问权限。如果用户退订、移除或者应用所需的 API 资源发生了显著变化。也就是说，移除流程的必要步骤可能包括 API 请求，授予该应用的权限。

OAuth 2.0 端点

要以编程方式撤销令牌，您的应用会向 https://oauth2.googleapis.com/revoke，并以参数的形式添加令牌：

curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
        https://oauth2.googleapis.com/revoke?token={token}

令牌可以是访问令牌，也可以是刷新令牌。如果令牌是访问令牌，且具有相应的刷新令牌，相应刷新令牌也会被撤消。

如果成功处理了吊销请求，那么响应的 HTTP 状态代码就是 200。对于错误情况，系统会随同返回 HTTP 状态代码 400 以及错误代码。

以下 JavaScript 代码段展示了如何在不使用适用于 JavaScript 的 Google API 客户端库。由于用于撤消的 Google OAuth 2.0 端点令牌不支持跨源资源共享 (CORS)，那么代码会创建一个表单并提交将表单发送到端点，而不是使用 XMLHttpRequest() 方法发布请求。

function revokeAccess(accessToken) {
  // Google's OAuth 2.0 endpoint for revoking access tokens.
  var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';

  // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', revokeTokenEndpoint);

  // Add access token to the form so it is set as value of 'token' parameter.
  // This corresponds to the sample curl request, where the URL is:
  //      https://oauth2.googleapis.com/revoke?token={token}
  var tokenField = document.createElement('input');
  tokenField.setAttribute('type', 'hidden');
  tokenField.setAttribute('name', 'token');
  tokenField.setAttribute('value', accessToken);
  form.appendChild(tokenField);

  // Add form to page and submit it to actually revoke the token.
  document.body.appendChild(form);
  form.submit();
}

实施跨账号保护

您应采取的额外措施来保护用户的个账号实现了跨账号功能利用 Google 的跨账号保护服务进行保护。通过这项服务订阅安全事件通知，这些通知可向您的应用提供关于用户账号的重大变化然后，您可以根据这些信息您决定如何响应事件。

下面列举了一些示例来说明 Google 的跨账号保护服务发送到您应用的事件类型：

https://schemas.openid.net/secevent/risc/event-type/sessions-revoked
https://schemas.openid.net/secevent/oauth/event-type/token-revoked
https://schemas.openid.net/secevent/risc/event-type/account-disabled

请参阅 <ph type="x-smartling-placeholder"></ph> 使用“跨账号保护”页面保护用户账号。

为 JavaScript Web 应用使用 OAuth 2.0

Google API 客户端库和 Google Identity 服务

前提条件

为您的项目启用 API

创建授权凭据

确定访问权限范围

获取 OAuth 2.0 访问令牌

第 1 步：重定向到 Google 的 OAuth 2.0 服务器

OAuth 2.0 端点

到 Google 授权服务器的示例重定向

JavaScript 示例代码

第 2 步：Google 提示用户同意

错误

admin_policy_enforced

disallowed_useragent

Android

iOS

org_internal

invalid_client

invalid_grant

origin_mismatch

redirect_uri_mismatch

invalid_request

第 3 步：处理 OAuth 2.0 服务器响应

OAuth 2.0 端点

OAuth 2.0 服务器响应示例

调用 Google API

OAuth 2.0 端点

HTTP GET 示例

curl 示例

JavaScript 示例代码

完整示例

OAuth 2.0 端点

JavaScript 源验证规则

增量授权

OAuth 2.0 端点

撤消令牌

OAuth 2.0 端点

实施跨账号保护

`admin_policy_enforced`

`disallowed_useragent`

`org_internal`

`invalid_client`

`invalid_grant`

`origin_mismatch`

`redirect_uri_mismatch`

`invalid_request`

`curl` 示例