web-dev-qa-db-ja.com

サイトに「Googleでサインイン」を実装するにはどうすればよいですか？

私のサイトでは、ユーザーがGoogleアカウントでサインインできるようにします。 openidを使用する予定ですが、より多くの利点があるため、googleでのサインインを許可したいと思います。過去に、Google（Gmail）アカウントとIIRCでサインインできるサイトがあることに気づきましたが、openIDをサポートしていませんでした（間違っている可能性があります）。

「Googleでサインイン」を実装するにはどうすればよいですか？

logingmailcross-domainopenidgoogle-oauth
57
user34537

OpenIDを使用する予定がある場合は、それを使用します。 GoogleはすでにOpenID 2.0プロバイダーです。

GoogleのOpenIDプロバイダーは次の場所にあります。 https://www.google.com/accounts/o8/ud

（注：ブラウザーでそのURIにアクセスする意味はありませんが、OpenIDでは機能します。）

これは主に Accounts API ページで対処されています。このページでは、OAuthおよびハイブリッドおよび独自のログインシステムも対処しています。サイトによっては、使用することもできます- Friend Connect 。これは、認証にOpenIDを内部的に使用するOpenSocialコンテナーです。

私はもちろんそのプロジェクトのDPEであるため、Friend Connectに偏っていますが、ソーシャルグラフに関係することをしているのでなければ、おそらくOpenIDプロバイダーを直接使用する方が良いでしょう。

2012年の編集：ログイン用OAuth 2. を使用します。 GFCは シャットダウン です。

31
Bob Aman

[〜＃〜] rpx [〜＃〜] これは、ユーザーがサイトへのログインに使用するアイデンティティプロバイダーを選択できるオールインワンソリューションです。 。 GoogleとOpenIDがサポートされているだけでなく、他の多くもサポートされています。

RPXは、各IDプロバイダーとのインターフェイスの詳細をすべて処理し、使用する共通のAPIを提供します。

16
Greg Hewgill

GoogleサインインをWebアプリに統合する

Google Developers ConsoleプロジェクトとクライアントIDを作成します。

Googleプラットフォームライブラリを読み込む

Googleサインインを統合するWebページに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 Connect

サーバーサイドWebアプリ用のOAuth 2.0

JavaScript Webアプリ用のOAuth 2.0

モバイルおよびデスクトップアプリ向けOAuth 2.0

4
KhogaEslam

あなたが探しているのは Google Accounts API だと思います。

1
Pablo

あなたが望むのは Google Friend Connect だと思います

編集：廃止されたため、これ以上使用しません。

1
DanSingerman

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>
1
A J

OpenId（ http://openid.net/ ）を調べることができます。これはSOが使用し、Googleでサポートされています。

0
jd.