使用 Google+ 账号登录(使用Google账号登录,跳过密码解锁手机)(使用google账号登录是什么意思)

访客 2023年07月13日 14:13 139 0

Google+ 登录

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

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

一旦您在网站上添加了Google登录功能，您的网站将获得强大的Google支持。用户登录后，您将获得一个OAuth令牌，用于代表用户发起API请求。通过这个令牌，您可以更好地了解用户、让他们与朋友保持联系，并为他们提供更丰富、更吸引人的内容体验。

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

当用户首次点击登录按钮时，他们将会看到一个授权对话框。该对话框详细列出了应用程序将如何使用用户的数据。用户可以选择同意提供授权或取消。一旦提供了授权，用户将不再收到请求授权的提示。此外，如果您有Android应用程序，在网络登录流程中还可以提示用户安装该应用程序。

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

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

试一试

当您点击下方按钮时，将会启动 OAuth 2.0 登录流程，并返回授权结果对象。您可以尝试授予访问权限、拒绝访问权限并关闭授权对话框，以了解不同操作所产生的结果。

选择登录流程

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

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

使用客户端流程

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

为了在您的网页上添加Google登录按钮，您需要按照以下步骤进行操作：

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

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

为了创建客户端ID和客户端密钥，您需要按照以下步骤进行操作：首先，在Google API控制台项目中创建一个项目；然后启用Google+ API；接下来，创建OAuth 2.0客户端ID，并记录JavaScript原始网址。

在 Google API 控制台中，从左侧下拉菜单中选择创建，然后输入项目名称（例如“Sample”）。
在服务窗格中，启用 Google+ API 和您的应用需要的所有其他 API。

在 API 访问窗格中，点击创建 OAuth 2.0 客户端 ID。

在产品名称字段中，为应用输入名称（例如“Sample”），然后点击下一步。您可以自行决定是否提供产品徽标。

在客户端 ID 设置部分执行以下操作：

应用类型选择网络应用。
点击更多选项链接。
在授权的重定向 URI 字段中，删除示例 URI。

在授权的 JavaScript 原始网址字段中，添加下面列表中的首个网址，供开发时使用。后面两个网址是生产网址示例。

以下是改写后的文案：

- 网址1：http://localhost:8080
- 网址2：http://mysite.example.com     <!-- 将此异步 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:
 
  
  
  用户点击按钮时，系统会提示他们授权应用访问此数据。授权结果由回调函数 signinCallback 处理。您接下来要实施回调函数。
  第 4 步：处理登录
 当用户授权或拒绝授权您的应用访问所请求的信息时，回调函数将被调用。这个回调函数是您编写的 JavaScript 函数，它会接收一个表示授权结果的对象作为参数。
 如果用户之前同意过您的应用通过此按钮（或代表相同应用的其他按钮）进行访问，他们将会自动登录。在网页加载完成后，系统会立即调用回调函数，并且该回调函数将传递一个包含访问令牌的新授权对象。
 授权对象中包含一个名为error的字段，该字段用于填写与应用授权时可能出现的问题相关的信息。例如，如果用户拒绝访问请求的范围，系统将会触发回调并传递在error字段中记录的相关信息。
 示例回调：
 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、si

如果您需要关于选择值的帮助，请查阅我们的 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 can be rewritten as solely from the original host.

当您的网站只有一个主机名而没有子域（例如主机名为 http://example.com，不采用 http://www.example.com）。这个字符串是当前网页方案、主机名称以及端口号（如果不采用方案默认端口号）的简写，等同于上述URI值。
none can be rewritten as absent, nonexistent, or not applicable.

不为登录按钮设置 Cookie 或会话存储的值为none，同时使用一个效率较低的备用机制来确定用户和会话信息。此值还可以阻止用户选择在您的网站中使用多个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: 用户ID,
  access_token: 访问令牌,
  expires_in: 令牌的有效期，以秒为单位,
  error: OAuth2错误类型（如果出现问题）,
  error_description: 错误消息（如果出现问题）

}

请参考下方的代码中的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 园地中，您可以找到更多可用范围。

该范围包含了自动访问您在 Google+ 上的用户身份权限的 https://www.googleapis.com/auth/plus.login 范围。

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 这一按钮属性。您可以根据自己的使用案例，为此属性选择最能满足自己需求的值。以下示例按照范围由宽到窄的顺序排列：

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

脚本代码参数

在 `` 元素中定义了以下参数。这些参数用于管理整个网页上所有类型的窗口小部件的语言和按钮加载机制。

键值默认值说明 lang language code en-US 设置网页上的按钮使用的语言。有关可用的 language code 值，请参见支持的语言代码列表。 parsetags explicit, onload onload 设置要使用的加载机制。

onload 网页加载后自动呈现网页上的所有按钮。 explicit 只有明确调用 gapi.signin.go 或 gapi.signin.render 时才呈现按钮。

当您使用明确的加载方式，并将其指向您网页上特定的容器时，

JavaScript API

JavaScript API 在 `gapi.signin` 命名空间下提供了两个按钮呈现函数。您可以通过将 `gapi.signin.render` 函数与相应的参数一起调用来在网页中呈现这些按钮。

方法说明

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>

标签：按钮用户范围

本文地址： https://shangjia.one/post/304.html