logo标签列表

如何在我的网站上实现“使用Google登录”？

authenticationgmailgoogle-oauthcross-domainopenid
69

我希望在我的网站上允许用户使用Google账号登录，打算使用OpenID实现此功能。但由于Google的优势，我也想允许用户通过Google账号进行登录。我曾经注意到一些网站不支持OpenID，但却可以通过Google (Gmail) 账号登录（可能我记错了）。

如何实现“使用Google账号登录”？

您可以使用EHTML中的E-GOOGLE-OAUTH-BUTTON：https://github.com/Guseyn/EHTML - Guseyn Ismayylov
8个回答
31
如果您计划使用 OpenID，请使用它。谷歌已经是一个 OpenID 2.0 提供商。
谷歌的 OpenID 提供商位于：https://www.google.com/accounts/o8/ud （注意：在浏览器中访问该 URI 没有意义，但它确实适用于 OpenID。）
这主要在Accounts API页面上进行了解释，该页面还介绍了 OAuth 和混合和专有登录系统。根据您的网站，您可能还想使用 Friend Connect，这是一个内部使用 OpenID 进行身份验证的 OpenSocial 容器。
当然，我倾向于 Friend Connect，因为我是该项目的 DPE，但是除非您还涉及社交图表，否则最好直接使用 OpenID 提供商。 2012年编辑：您应该使用 OAuth 2.0 登录。GFC 正在关闭。
1
在此页面上查找“Google API控制台”以设置API密钥等说明： https://developers.google.com/accounts/docs/OAuth2 - Daithí
1
@topher OAuth 2.0和OpenId Connect。 - Bob Aman
15
你可能会对 RPX 感兴趣，它是一个全能解决方案，让人们可以选择使用哪个身份提供者来登录你的网站。不仅支持 Google 和 OpenID，还支持其他许多身份提供者。
RPX 处理与每个身份提供者的接口的所有细节，并为你提供一个通用的API来使用。
我已经使用过这个工具，它非常容易在ASP.Net网站上设置。而且它是免费的！ - Michael La Voie
尽管我已将另一个标记为正确答案，但我想我会采用你的解决方案 :)（他获胜了，因为最初我想看到谷歌特定的API） - user34537
3
作为写另一个答案的那个人，我也同意RPX可能是大多数用途中实际实现OpenID的最佳方法。它拥有出色的用户界面，而且安装和使用都非常容易。 - Bob Aman
如果您每年的用户数量超过2500个，您将需要购买该服务。 - Michael Laffargue
PRX不适用于不能使用JavaScript的客户端。相反，真正的OpenID 2.0可以完美地在没有JavaScript的情况下工作。 - Tino
5

将Google登录集成到您的Web应用程序中

创建Google开发者控制台项目和客户端ID。

加载Google平台库

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

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

指定您的应用程序的客户端ID

请使用google-signin-client_id元素，并填写您在Google开发者控制台为应用程序创建的客户端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>

其他信息可以在这里找到：https://developers.google.com/identity/sign-in/web/sign-in

其他可能的解决方案是

使用OAuth 2.0访问Google API

认证协议

OAuth 2.0概述

OpenID Connect

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

用于JavaScript Web应用程序的OAuth 2.0

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

有没有一种方法可以使用直接的 HTTP 请求来进行 Google 登录的基本操作，而不必将 https://apis.google.com/js/platform.js 添加到我的页面中？ - Simon H
好的，你可能有你的理由这样做，但是把它的内容复制并添加到你的网站上呢？ - KhogaEslam
你也可以查看以下步骤： https://developers.google.com/identity/protocols/OAuth2 - KhogaEslam
2

但我想允许使用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>
你能告诉我如何在请求中传递状态参数吗？ - Sachin HR
2

Google SignIn集成简单步骤：

  1. 首先访问此链接（https://console.developers.google.com/）
  2. 从顶部左侧的下拉列表中选择一个项目。如果您还没有创建项目，请创建一个项目。

enter image description here

  1. 创建项目后，点击OAuth同意屏幕并填写应用程序名称和应用程序标志等选项。选择性添加域名URL、重定向URL等详细信息。

  2. 转到凭据并单击创建凭据下拉菜单，然后单击Oauth客户端ID。在表格中填写详细信息。 enter image description here

  3. 记下客户端ID和秘密密钥以进行signIn API集成。

  4. 有关API集成，请查看此处。对于react和angular应用程序，有许多NPM包可供简单配置。

1
私隐政策页面也是必要的吗？ - Hello World
1
这个注释已经过时了，需要更新 :( - StefaDesign
如何允许所有用户连接到应用程序，因为我必须在Google API控制台中添加电子邮件。 - ingmbk
2
当您点击该链接时，请查找“Google API控制台”以设置密钥等。 - Daithí
1

我认为你想要的是Google Friend Connect

编辑：不，你不需要了，因为它已经被弃用了。

0
你可以了解一下 openId (http://openid.net/)，这是 SO 使用的，也被 Google 支持。
4
让某人去openid.net进行登录，就像告诉想吃东西的人去渔具店看看，根本没有帮助，毫无意义。 - Tino
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接