63

在我的网站上,我想允许用户使用谷歌帐户登录。我打算使用 openid,但我想允许使用 google 登录,因为它有更多好处。过去我注意到一些能够使用 google (gmail) 帐户和 IIRC 登录的网站,尽管它们不支持 openID(但我可能是错的)。

如何实现“使用谷歌登录”?

4

8 回答 8

31

如果您打算使用 OpenID,请使用它。Google 已经是 OpenID 2.0 提供商。

Google 的 OpenID 提供商位于:https ://www.google.com/accounts/o8/ud

(注意:在浏览器中访问该 URI 没有意义,但它确实适用于 OpenID。)

这主要在Accounts API页面上解决,该页面还涉及 OAuth 以及混合和专有登录系统。根据您的站点,您可能还想使用 Google朋友群,这是一个内部使用 OpenID 进行身份验证的 OpenSocial 容器。

我当然偏向于 Google 朋友群,因为我是该项目的 DPE,但您可能最好直接使用 OpenID 提供程序,除非您也在做涉及社交图的事情。

2012 年编辑:您想使用OAuth 2.0 登录。GFC 正在关闭

于 2009-10-06T20:49:21.957 回答
15

您可能对RPX感兴趣,它是一种一体化解决方案,可让人们选择他们想使用哪个身份提供者登录您的站点。不仅支持 Google 和 OpenID,还支持许多其他的。

RPX 负责与每个身份提供者交互的所有细节,并为您提供一个通用的 API 来使用。

于 2009-10-06T21:04:19.453 回答
4

将 Google Sign-In 集成到您的网络应用中

创建一个 Google Developers Console 项目和客户端 ID。

加载 Google 平台库

您必须在集成了 Google 登录的网页上包含 Google 平台库。

<script src="https://apis.google.com/js/platform.js" async defer></script>

指定应用的客户端 ID

使用 google-signin-client_id 元元素在 Google Developers Console 中指定您为应用创建的客户端 ID。

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

注意:您还可以使用 gapi.auth2.init() 方法的 client_id 参数指定应用的客户端 ID。

添加 Google 登录按钮

向您的网站添加 Google 登录按钮的最简单方法是使用自动呈现的登录按钮。只需几行代码,您就可以添加一个按钮,该按钮会自动将自身配置为具有适合用户登录状态和您请求的范围的文本、徽标和颜色。

要创建一个使用默认设置的 Google 登录按钮,请将一个具有 g-signin2 类的 div 元素添加到您的登录页面:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

其他信息。可以在这里找到


其他可能的解决方案是

使用 OAuth 2.0 访问 Google API

身份验证协议

OAuth 2.0 概述

OpenID 连接

用于服务器端 Web 应用的 OAuth 2.0

适用于 JavaScript Web 应用程序的 OAuth 2.0

适用于移动和桌面应用程序的 OAuth 2.0

于 2017-03-13T07:27:03.207 回答
2

我相信您正在寻找的是Google Accounts API

于 2009-10-06T20:33:13.587 回答
1

我想你想要的是Google 朋友群

编辑:不,您不再使用它,因为它已被弃用。

于 2009-10-06T20:35:41.850 回答
1

但我想允许使用 Google 登录

在这种情况下,添加以下代码

HTML

 <div id="mySignin" onclick="login()"><img src="google_image_here.png" alt="google" style="cursor:pointer;height: 60px;width: 309px;"/></div>

JS

        <script type="text/javascript">
        function login() 
        {
          var myParams = {
            'clientid' : 'YOUR_CLIENT_ID.apps.googleusercontent.com',
            'cookiepolicy' : 'single_host_origin',
            'callback' : 'loginCallback',
            'approvalprompt':'force',
            'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
          };
          gapi.auth.signIn(myParams);
        }

        function loginCallback(result)
        {
            if(result['status']['signed_in'])
            {
                var request = gapi.client.plus.people.get(
                {
                    'userId': 'me'
                });
                request.execute(function (resp)
                {
                    /* console.log(resp);
                    console.log(resp['id']); */
                    var email = '';
                    if(resp['emails'])
                    {
                        for(i = 0; i < resp['emails'].length; i++)
                        {
                            if(resp['emails'][i]['type'] == 'account')
                            {
                                email = resp['emails'][i]['value'];//here is required email id
                            }
                        }
                    }
                   var usersname = resp['displayName'];//required name
                });
            }
        }
        function onLoadCallback()
        {
            gapi.client.setApiKey('YOUR_API_KEY');
            gapi.client.load('plus', 'v1',function(){});
        }

            </script>

        <script type="text/javascript">
              (function() {
               var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
               po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback';
               var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
             })();
        </script>
于 2016-01-29T06:20:21.490 回答
0

您可以查看 SO 使用的 openId ( http://openid.net/ ),并受 Google 支持。

于 2009-10-06T20:37:38.047 回答
0

Google SignIn 集成的简单步骤:

  1. 首先转到链接(https://console.developers.google.com/
  2. 从左上角的下拉列表中选择一个项目。如果您还没有创建项目。请创建一个项目

在此处输入图像描述

  1. 创建项目后,单击OAuth 同意屏幕并填写应用程序名称和应用程序徽标等详细信息。可选详细信息,例如域 URL、重定向 URL

  2. 转到凭据并单击创建凭据下拉菜单并单击 Oauth 客户端 ID。在表格中填写详细信息 在此处输入图像描述

  3. 记下用于登录 API 集成的客户端 ID 和密钥

  4. 对于 API 集成,请查看. 对于ReactAngular应用程序,有许多 NPM 包可供轻松配置。

于 2019-12-30T07:41:55.883 回答