web-dev-qa-db-fra.com

Comment puis-je implémenter la «connexion avec google» sur mon site?

Sur mon site, je voudrais autoriser les utilisateurs à se connecter avec un compte Google. Je prévois d'utiliser openid mais j'aimerais autoriser la connexion avec google car il présente plus d'avantages. J'ai remarqué dans le passé quelques sites qui ont la possibilité de se connecter avec un compte google (gmail) et IIRC bien qu'ils ne prennent PAS en charge openID (mais je peux me tromper).

Comment mettre en œuvre la "connexion avec google"?

logingmailcross-domainopenidgoogle-oauth
57
user34537

Si vous prévoyez d'utiliser OpenID, utilisez-le. Google est déjà un fournisseur OpenID 2.0.

Le fournisseur OpenID de Google est situé à: https://www.google.com/accounts/o8/ud

(REMARQUE: il est inutile de visiter cet URI dans votre navigateur, mais cela fonctionne pour OpenID.)

Ceci est principalement résolu sur la page API des comptes , qui traite également OAuth et les systèmes de connexion propriétaires et hybrides. Selon votre site, vous pouvez également utiliser - Friend Connect , qui est un conteneur OpenSocial qui utilise en interne OpenID pour l'authentification.

Je suis bien sûr partisan de Friend Connect, car je suis le DPE de ce projet, mais vous êtes probablement mieux servi directement en utilisant le fournisseur OpenID à moins que vous ne fassiez également des trucs qui impliquent un graphique social.

Modifier pour 2012: Vous souhaitez utiliser OAuth 2.0 pour la connexion . GFC est arrêt .

31
Bob Aman

Vous pouvez être intéressé par RPX qui est une solution tout-en-un qui permet aux utilisateurs de choisir le fournisseur d'identité qu'ils souhaitent utiliser pour se connecter à votre site . Non seulement Google et OpenID sont pris en charge, mais de nombreux autres également.

RPX s'occupe de tous les détails de l'interfaçage avec chaque fournisseur d'identité et vous donne une API commune avec laquelle travailler.

16
Greg Hewgill

Intégration de Google Sign-In dans votre application Web

Créez un projet Google Developers Console et un ID client.

Chargez la bibliothèque de la plateforme Google

Vous devez inclure la bibliothèque de la plateforme Google sur vos pages Web qui intègrent la connexion Google.

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

Spécifiez l'ID client de votre application

Spécifiez l'ID client que vous avez créé pour votre application dans la Google Developers Console avec le méta-élément google-signin-client_id.

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

Remarque: Vous pouvez également spécifier l'ID client de votre application avec le paramètre client_id de la méthode gapi.auth2.init ().

Ajouter un bouton de connexion Google

La façon la plus simple d'ajouter un bouton de connexion Google à votre site consiste à utiliser un bouton de connexion rendu automatiquement. Avec seulement quelques lignes de code, vous pouvez ajouter un bouton qui se configure automatiquement pour avoir le texte, le logo et les couleurs appropriés pour l'état de connexion de l'utilisateur et les étendues que vous demandez.

Pour créer un bouton de connexion Google qui utilise les paramètres par défaut, ajoutez un élément div avec la classe g-signin2 à votre page de connexion:

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

Autres informations. pourrait être trouvé ici

Une autre solution possible est

Utilisation de OAuth 2.0 pour accéder aux API Google

Protocoles d'authentification

Présentation d'OAuth 2.0

OpenID Connect

OAuth 2.0 pour les applications Web côté serveur

OAuth 2.0 pour les applications Web JavaScript

OAuth 2.0 pour applications mobiles et de bureau

4
KhogaEslam

Je crois que ce que vous recherchez est le API des comptes Google .

1
Pablo

Je pense que ce que vous voulez est Google Friend Connect

edit: Non, vous ne le faites plus car il est obsolète.

1
DanSingerman

mais j'aimerais autoriser la connexion avec Google

Dans ce cas, ajoutez le code suivant

[~ # ~] 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

Vous pouvez regarder openId ( http://openid.net/ ) qui est ce que SO utilise et est pris en charge par Google.

0
jd.