Google+ 登录

Google+ 登录

转自google+开发者文档，国内需要翻墙，保存下来以备不时之需。

1. 试一试
2. 选择登录流程
3. 使用客户端流程
   1. 第 1 步：创建客户端 ID 和客户端密钥
   2. 第 2 步：在网页上添加 Google+ 脚本
   3. 第 3 步：在网页上添加按钮
   4. 第 4 步：处理登录
   5. 登录工作原理
4. 撤消访问令牌和取消关联应用
5. 登录按钮属性
6. 脚本代码参数
7. JavaScript API
8. 自定义登录按钮

添加 Google+ 登录后，您的网站就能享受到 Google 的强力支持。用户登录后，您就能获得一个 OAuth 令牌（用于代表用户提出 API 请求），您可以通过它更好地了解用户、让用户与朋友联系，并为用户提供内容更丰富、更具吸引力的体验。

您还可以在自己的 Android 或 iOS 应用中添加 Google+ 登录按钮。

用户首次点击登录按钮时，会看到一个授权对话框。此对话框中会列出应用会以怎样的方式使用用户数据。用户随即可以同意提供授权或取消。提供授权后，用户之后就不会再收到请求授权的提示。另外，如果您有 Android 应用，还可以在网络登录流程中提示用户安装应用。

用户随时可以选择撤消应用访问权限。

重要注意事项 ：您使用 Google+ 登录按钮需要遵守 Google+ 平台按钮政策和 Google+ 平台服务条款。

试一试

点击下面的按钮会触发 OAuth 2.0 登录流程并输出授权结果对象。您可以尝试授予访问权限、拒绝授予访问权限并关闭授权对话框，看看各种操作分别会产生怎样的结果。

选择登录流程

处理登录流程时，您有多个选项可以选择：

• 使用 JavaScript 和 HTML 的客户端流程。此方法最易于实施，但是也很有局限性：只有用户在您的网站上处于活跃状态时，您才能调用 Google API。
• 如果您的服务器需要在用户不处于活跃状态（例如用户不在线）时以用户身份访问 Google API，可以使用服务器端流程。此方法需要由客户端向您的服务器传递一个一次性授权代码，以便获取访问权限和刷新服务器令牌。

使用客户端流程

当您的用户使用 Google+ 帐户登录时，您的应用就会获得一个访问令牌。当用户在您的网站上处于活跃状态时，您就可以使用该令牌代表用户调用 Google+ API。

要在您的网页上添加 Google+ 登录按钮，您需要执行以下操作：

1. 创建客户端 ID 和客户端密钥。
2. 在网页上添加 Google+ 脚本。
3. 在网页上添加按钮。
4. 使用 JavaScript 回调处理登录。

第 1 步：创建客户端 ID 和客户端密钥

要创建客户端 ID 和客户端密钥，需要依次创建 Google API 控制台项目、启用 Google+ API、创建 OAuth 2.0 客户端 ID 和记录 JavaScript 原始网址：

1. 在 Google API 控制台  中，从左侧下拉菜单中选择创建，然后输入项目名称（例如“Sample”）。
2. 在服务窗格中，启用 Google+ API 和您的应用需要的所有其他 API。
3. 在 API 访问窗格中，点击创建 OAuth 2.0 客户端 ID。
   1. 在产品名称字段中，为应用输入名称（例如“Sample”），然后点击下一步。您可以自行决定是否提供产品徽标。
   2. 在客户端 ID 设置部分执行以下操作：
      • 应用类型选择网络应用。
      • 点击更多选项链接。
      • 在授权的重定向 URI 字段中，删除示例 URI。
      • 在授权的 JavaScript 原始网址字段中，添加下面列表中的首个网址，供开发时使用。后面两个网址是生产网址示例。

        http://localhost:8080
        http://mysite.example.com
        https://mysite.example.com

      • 点击创建客户端 ID 按钮。
4. 在 API 访问窗格中，找到网络应用的客户端 ID 部分，并记录或复制客户端 ID 和客户端密钥，以供将来运行样本使用。

第 2 步：在网页上添加 Google+ 脚本

将以下脚本插入紧临 </body> 标记之前：

    <!-- 将此异步 JavaScript 代码插入到紧邻 </body> 标记之前 -->
    <scripttype="text/javascript">
      (function(){
       var po = document.createElement('script'); po.type ='text/javascript'; po.async =true;
       po.src ='https://apis.google.com/js/client:plusone.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
    </script>

以上示例遵循异步加载 JavaScript 文件的最佳实践，以取得更好的效果。

接下来，您要在自己的应用中添加登录按钮。

第 3 步：在网页上添加按钮

在您的网页上选择按钮呈现位置，并插入以下 HTML 标记。您必须将 CLIENT_ID 的值替换为您刚才创建的客户端 ID:

<spanid="signinButton">
  <span
    class="g-signin"
    data-callback="signinCallback"
    data-clientid="CLIENT_ID"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schemas.google.com/AddActivity"
    data-scope="https://www.googleapis.com/auth/plus.login">
  </span>
</span>

data-scope 属性用于指示您的应用需要何种类型的用户数据访问权限。data-requestvisibleactions 属性定义您的应用请求代表用户写入的生活片段的类型。请参见按钮属性，了解有关自定义按钮的详情。

用户点击按钮时，系统会提示他们授权应用访问此数据。授权结果由回调函数 signinCallback 处理。您接下来要实施回调函数。

第 4 步：处理登录

回调函数是您写入的 JavaScript 函数，当用户授权或拒绝授权您的应用访问所请求的信息时会调用回调函数。此函数会传递一个表示授权结果的对象。

如果用户之前曾同意您的应用通过此按钮（或代表相同应用的其他按钮）访问，则他们会自动登录。网页加载后，系统会立即自动调用回调函数，并且回调函数会传递一个包含访问令牌的新授权对象。

授权对象中包含一个 error 字段，其中填写向应用授权时可能出现的问题的相关信息例如，如果用户拒绝访问请求的范围，系统就会触发回调并传递在error 字段中包含 access_denied 值的对象。

回调示例：

function signinCallback(authResult){
  if(authResult['access_token']){
    // 已成功授权
    // 用户已授权，隐藏登录按钮，例如：
    document.getElementById('signinButton').setAttribute('style','display: none');
  }elseif(authResult['error']){
    // 存在错误。
    // 可能的错误代码：
    //   “access_denied” - 用户拒绝访问您的应用
    //   “immediate_failed”- 无法自动登录用户帐户
    // console.log('存在错误：' + authResult['error']);
  }
}

以上示例检查用户是允许还是拒绝访问，以及检查是否存在错误。访问令牌会自动传递给 gapi.auth.setToken 方法，方便您后续调用 REST API。

如果您想单独跟踪用户的登录状态（独立于 Google 登录状态），可以在这个时候设置一个 Cookie。另请参见用户在应用外登录。

登录工作原理

用户每次访问应用时都会发生客户端令牌交换流程，但是用户只需向应用授权一次即可。后续访问将会自动通过 OAuth 协议向应用授予权限。

加载此按钮时，系统会自动检查用户是否向应用授予了权限。此种检查被称作“即时模式”。如果检查通过，Google 服务器会传回访问令牌并向回调传递一个新授权结果对象。无法此按钮无法进行即时模式授权，用户必须点击登录按钮触发访问流程。

对于记录应用动态的应用，用户还可以在应用设置页面中取消关联应用和管理应用动态。请注意，在此页面取消关联应用等同于撤消所有访问。要重新关联，用户必须重新访问应用并再次向应用授权。

访问令牌每隔 3600 秒就会过期。您应当谨慎处理访问令牌，因为它们代表您的应用有权通过 Google API 访问用户信息。

了解有关 Google 实施 OAuth 2.0 的详情。

撤消访问令牌和取消关联应用

根据我们的开发人员政策，您的应用必须提供一种方式来删除您的应用与用户帐户之间的关联。在您的应用中添加此功能后，您就可以回应相应的事件并根据相应政策（例如删除规则）触发适当的逻辑。

以下 JavaScript 示例演示了 jQuery 如何以编程方式设计请求格式和撤消用户的访问令牌。

<scripttype="text/javascript">
function disconnectUser(access_token){
  var revokeUrl ='https://accounts.google.com/o/oauth2/revoke?token='+
      access_token;

  // 执行异步 GET 请求。
  $.ajax({
    type:'GET',
    url: revokeUrl,
    async:false,
    contentType:"application/json",
    dataType:'jsonp',
    success:function(nullResponse){
      // 客户取消了关联，据此执行相应操作
      // 回应始终为未定义。
    },
    error:function(e){
      // 处理错误
      // console.log(e);
      // 如果失败，您可以引导用户手动取消关联
      // https://plus.google.com/apps
    }
  });
}
// 可以通过点击一个按钮触发取消关联操作
$('#revokeButton').click(disconnectUser);
</script>

登录按钮属性

以下是您（指定 class="g-signin" 属性）将 HTML 标记定义为登录按钮容器时，在 HTML 标记中指定的属性。如果您使用 JavaScript API 呈现登录按钮，请在调用 gapi.signin.render() 时删除参数名称中的 data- 前缀。

键	值	默认值	是否必需	说明
class	string	g-signin	必需	使用 HTML 呈现按钮时的必需属性。使用 gapi.signin.render() 时忽略
data-clientid	string	—	必需	从 Google API 控制台获取的 OAuth 2.0 客户端 ID。
data-cookiepolicy	uri single_host_origin none	—	必需	引导登录按钮将用户和会话信息存储在用户客户端上的会话 Cookie 和 HTML5 会话存储中，以期尽量减少 HTTP 通信流量和区分一个用户可能登录的多个 Google 帐户。我们将这两种存储称为“客户端”存储。 当一个网页包含已加载的登录按钮时，系统就会快速从客户端存储而不是从 Google 客户端访问用户的登录状态，从而缩短加载按钮的延迟。另外，如果用户曾登录过多个 Google 帐户（比如工作帐户和个人帐户），此 Cookie 可以让用户选择在您的网站中使用哪个帐户。用户结束浏览会话时，Cookie 和会话存储会被删除。 data-cookiepolicy 属性的值确定可访问 Cookie 的 URI 的范围。根据网站的域名选择此值，以设置 Cookie 的范围。这样，该范围内的所有登录按钮将均可访问 Cookie。您应当为网站采用一个具有相当宽泛程度的政策，以减少您的网站向用户客户端写入的 Cookie 的数量。理想情况是，对于每个准许您将其写入 Cookie 的独特域名后缀，仅使用一个 Cookie（例如 example.com 和 example.co.uk 各自使用一个 Cookie）。 可用的值 - data-cookiepolicy 允许使用三个值：uri、single_host_origin 和none。在您能够传递给该属性的值里面，uri 的内容最丰富，可以最宽泛地与您网站的结构匹配。 如需有关选择值的帮助，请参见确定 Cookie 政策的值。 uri uri 包括为您的网站设置的 scheme、site-domain，还可能包括网站port。您提供的值用于确定 Cookie 的范围。uri 越宽泛，Cookie 的范围也就越宽泛。您可以查看前五个使用案例，以此为例来了解此问题。指定 uri 可以采用以下三种 URI 格式之一： http://site_domain - 在 uri 中使用 http 方案可以提供最宽泛的范围 - 它设置的 Cookie 的范围不仅包括 http 域和 https 域，还包括网站的所有子域。使用更具体的 URI（例如http://mail.example.com）将会设置一个范围更小的 Cookie，将范围进一步限制为仅涵盖该域和其子域。 https://site_domain - 在 uri 中使用 https 方案与使用 http 类似，但是 https 方案的范围相对要小 - https 方案适用于仅支持 SSL 的网站。这就可以确保为 Cookie 设置“安全”属性，如果网络连接未加密就不会发送 Cookie。 scheme://site_domain:port - 使用包括端口号的值。此值将 Cookie 的范围严格限制到一个 URI。 注意：网站采用不同域名后缀（例如 http://example.com 和 http://example.co.uk）也必须采用不同的 site_domain 值，因此必须为它们指定不同的 data-cookiepolicy 标记。 single_host_origin 当您的网站只有一个主机名而没有子域（例如主机名为 http://example.com，不采用 http://www.example.com）。此字符串是等同于上述 uri 值的当前网页方案和主机名称（以及端口号 [如果不采用方案默认端口号]）的简写 none none 值不为登录按钮设置 Cookie 或会话存储，而且使用一个较低效率的备用机制确定用户和会话信息。此值还可以阻止登录了多个 Google 帐户（比如工作帐户和个人帐户）的用户选择要在您的网站中使用的帐户。 注意：您可以通过检查前缀识别登录按钮写入的客户端存储条目：GCSC前缀用于会话 Cookie 和 HTML5 会话存储；G_AUTHUSER_ 前缀仅用于会话 Cookie。
data-accesstype	online offline	online	—	如果您使用服务器端登录流程并且想要获取刷新令牌以提出离线请求，可以指定此属性并将其值设置为 offline。
data-apppackagename	string	—	—	如果您有 Android 应用，可以在网络登录流程中推荐自动下载 Android 应用。将此参数设置为您在 Google API 控制台项目中列出的应用包名称。例如：com.google.android.apps.plus。 只有在 Google Play 商店中免费并且内容达到一定相关度的应用才能使用 Android 应用自动安装功能。
data-approvalprompt	auto force	auto	—	允许控制是否反复提示用户以征求用户同意。如果将其设置为 auto，则只有用户没有向您的应用授予权限时，系统才会向其显示 OAuth 同意对话框。如果将其设置为 force，则用户每次点击登录按钮时，系统都会向其显示 OAuth 同意对话框。
data-callback	function(authResult)	—	—	全局命名空间中的一个函数，在成功登录事件发生后调用。此函数一定会隐藏登录按钮。 此函数只传递一个参数：具有以下结构的一个 JSON 对象： { "id_token": the user ID, "access_token": the access token, "expires_in": the validity of the tokens, in seconds, "error": The OAuth2 error type if problems occurred, "error_description": an error message if problems occurred }
data-height	short standard tall	standard	—	设置按钮的垂直高度。 另请参见 data-width
data-requestvisibleactions	A space-delimited list ofmoment type URIs.	—	—	如果您要应用要写入生活片段，课可以使用此键列出您要写入的生活片段类型的完整 URI 列表。例如：http://schemas.google.com/AddActivity。
data-scope	A space-delimited list of scope URIs	—	—	您要使用的 API 的 OAuth 2.0 范围（用以空格分隔的列表形式表示）。您可以列出自己的应用可能需要的 Google+ 范围和其他 Google OAuth 2.0 范围。您可以在 OAuth 2.0 园地中找到更多范围。 其中自动包含 https://www.googleapis.com/auth/plus.login 范围，该范围提供访问您的用户在 Google+ 上身份的权限。
data-theme	light dark	light	—	徽章的颜色主题。Light 会呈现一个显示红色文字和图标的白色按钮。Dark 会呈现一个显示白色文字和图标的红色按钮。
data-width	iconOnly standard wide	standard	—	控制按钮和显示的按钮文字的宽度。系统会根据用户的语言计算大约的宽度，以容纳相应的文字： iconOnly - 仅显示 Google+ 图标。 standard - 显示 Google+ 图标并在后面跟着显示“登录” wide - 显示 Google+ 图标并在后面跟着显示“使用 Google 帐户登录” 另请参见 data-height

确定 Cookie 政策的值

登录按钮和互动分享按钮必须要使用 data-cookiepolicy 这一按钮属性。您可以根据自己的使用案例，为此属性选择最能满足自己需求的值。以下示例按照范围由宽到窄的顺序排列：

1. 拥有多个子域并且可能同时采用 https 和 http 的网站（例如 http://example.com、http://www.example.com 和 https://secure.example.com）应当使用：
   data-cookiepolicy="http://example.com"。
2. 拥有多个子域并且仅支持 SSL 的网站（https://example.com、https://www.example.com 和 https://static.example.com）应当使用：
   data-cookiepolicy="https://example.com"。
3. 属于较大网站的一部分，同时希望将范围限制到其子域的网站（https://mydept.example.com 而不采用 https://otherdept.example.com）应当使用：
   data-cookiepolicy="https://mydept.example.com"。
4. 只有在非默认端口上运行的一个主机名称的网站 (http://dev.example.com:8080) 应当使用：
   data-cookiepolicy="http://dev.example.com:8080"。
5. 只有一个主机名称（例如 http://example.com 但不同时采用 http://www.example.com）的网站应当使用：
   data-cookiepolicy="single_host_origin"
6. 不允许使用 Cookie 和 HTML5 存储的网站应当使用以下键值，但是此类网站的性能会减低而且登录了多个 Google 帐户的用户将无法选择要在您的网站中使用的帐户：
   data-cookiepolicy="none"

脚本代码参数

以下参数是在 <script /> 元素中定义的。这些参数用于控制整个网页上所有类型的窗口小部件使用的语言和按钮加载机制。

键	值	默认值	说明
lang	language code	en-US	设置网页上的按钮使用的语言。有关可用的 language code 值，请参见支持的语言代码列表。
parsetags	explicit, onload	onload	设置要使用的加载机制。 onload 网页加载后自动呈现网页上的所有按钮。 explicit 只有明确调用  gapi.signin.go 或  gapi.signin.render 时才呈现按钮。 当您将 explicit 加载方式与指向您网页上特定容器的 go 和 render 调用结合使用时，可以避免脚本遍历整个 DOM，从而加快按钮呈现速度。请参见 gapi.signin.go 和 gapi.signin.render 示例。

JavaScript API

JavaScript API 在 gapi.signin 命名空间下定义了两个按钮呈现函数。如果您通过将 parsetags 设置为 "explicit" 停用了自动呈现，则您必须调用这两个函数之一。

方法	说明
gapi.signin.render(  container,  parameters )	将制定的容器呈现为登录按钮。 container 要呈现为登录按钮的容器。指定容器的 ID（字符串）或指定 DOM 元素本身。 parameters 包含 按键属性作为“键:值”对的对象，例如  {"clientid": "xxxx.apps.google.usercontent.com", "requestvisibleactions": 'http://schemas.google.com/AddActivity http://schemas.google.com/CommentActivity'}。 为此方法指定选项时，请删除属性名称中的 data- 前缀。
gapi.signin.go(          opt_container )	呈现指定容器中的登录按钮。您可能因性能原因将 parsetags 设置为 explicit，您只有在这种情况下才应使用此函数。 opt_container 包含要呈现的登录按钮的容器。指定容器的 ID（字符串）或指定 DOM 元素本身。如果省略  opt_container 参数，则会呈现网页上的所有登录按钮。

自定义登录按钮

您可以对登录按钮进行自定义，让其更好地符合您的网站的设计风格。您必须遵守品牌塑造准则并在自定义按钮中使用合适的颜色和图标。您还必须确保您的按钮的视觉效果与其他第三方登录选项一样突出。

以下是自定义按钮的一个示例：

以下是产生上面按钮的 HTML/CSS 编程代码。您可以使用标记或 gapi.signin.render() 将其启用为 Google+ 登录按钮 - 此示例使用的是后者：

  <!-- 将此异步 JavaScript 代码插入到紧邻 </body> 标记之前 -->
  <scripttype="text/javascript">
  (function(){
    var po = document.createElement('script');
    po.type ='text/javascript'; po.async =true;
    po.src ='https://apis.google.com/js/client:plusone.js?onload=render';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  })();

  function render(){
    gapi.signin.render('customBtn',{
      //'callback': 'signinCallback',
      'clientid':'841077041629.apps.googleusercontent.com',
      'cookiepolicy':'single_host_origin',
      'requestvisibleactions':'http://schemas.google.com/AddActivity',
      'scope':'https://www.googleapis.com/auth/plus.login'
    });
  }
  </script>
  <styletype="text/css">
    #customBtn {
      display: inline-block;
      background:#cc3732;
      color: white;
      width:175px;
      border-radius:5px;
    }
    #customBtn:hover {
      background:#e74b37;
      cursor: hand;
    }
    span.label {
      font-weight: bold;
    }
    span.icon {
      background:url('/+/images/branding/btn_red_32.png') transparent 10px50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width:40px;
      height:40px;
    }
    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      padding-left:40px;
      padding-right:40px;
    }
  </style>
  <spanclass="label">Sign in with:</span>
  <divid="customBtn"class="customGPlusSignIn">
    <spanclass="icon"></span>
    <spanclass="buttonText">Google</span>
  </div>