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

Question

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

如何实现“使用 google 登录”？

Answer 1

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

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

（注意：在浏览器中访问该 URI 是没有意义的，但它确实适用于 OpenID。）

这主要在 Accounts API 页面，该页面还解决了 OAuth 以及混合和专有登录系统。根据您的网站，您可能还想使用 Friend Connect，它是一个 OpenSocial 容器，内部使用 OpenID 进行身份验证。

我当然偏向 Google 朋友群，因为我是该项目的 DPE，但直接使用 OpenID 提供商可能会更好，除非您也做涉及社交图谱的事情。

2012 年编辑： 您想要使用 OAuth 2.0 用于登录。 GFC 即将关闭 。

Answer 2

您可能对 RPX 感兴趣，这是一种一体化解决方案，可让人们选择他们想要的身份提供商用于登录您的网站。不仅支持 Google 和 OpenID，还支持许多其他内容。

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

Answer 3

将 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< /a>

Auth 协议

OAuth 2.0 概述

OpenID Connect

用于服务器端 Web 应用的

OAuth 2.0 用于 JavaScript Web 应用的

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

Answer 4

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

Answer 5

我认为您想要的是 Google 朋友群

编辑：不，您不需要不再是因为它已被弃用。

Answer 6

但我想允许使用 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>

Answer 7

Google SignIn 集成的简单步骤：

1. 首先转到此链接(< a href="https://console.developers.google.com/" rel="nofollow noreferrer">https://console.developers.google.com/)
2. 从下拉菜单中选择一个项目左上角。如果您尚未创建项目。请创建一个项目

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

4. 转到凭据并单击“创建凭据”下拉列表和“创建凭据”。单击 Oauth 客户端 ID。在表格中填写详细信息
   

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

6. 有关 API 集成，请查看 此。对于 react 和 Angular 应用程序，因此可以使用许多 NPM 包来轻松配置。

Answer 8

您可以查看 openId (http://openid.net/)，这是 SO 使用的，并受谷歌。