Titre

Faire un bouton d'authentification Google sur votre page web

Disposer d'un bouton d'authentification Google sur votre page web avec le processus côté client

La page Web de google ci-dessous explique comment créer un bouton pour s'authentifier, cependant elle n'est pas évidente d'accès :
https://developers.google.com/+/web/signin/?hl=fr

On va ici aborder le processus côté client :

Comme expliqué sur la page d'explication de Google, il vous faudra vous créer un identifiant client OAuth 2.0

Pour cela créez vous un compte Google.
Ensuite allez sur https://developers.google.com/console et authentifiez-vous.

Lancez la création d'un projet :

Nommez votre projet, acceptez si voulu le contrat et lancez sa création

La création prend un peu de temps

Activez l'API Google+ en allant dans API et authentification>API
puis cliquez sur Google+ API

Activez l'API

C'est fait

Cliquez sur API et authentification>Identifiants
puis cliquez sur Créer un identifiant client

Laissez coché "Application Web" par défaut puis cliquez sur Configurer l'écran d'autorisation

Vous allez arriver sur Ecran d'autorisation.
Sélectionnez un email, donnez un nom de produit et cliquez sur Enregistrer

Entrez l'url de votre site dans l'emplacement indiqué puis cliquez sur Créer un identifiant client

Voila vous avez un identifiant client Google

La page Google donne alors le puzzle de la page à construire :

Nous allons coller ce puzzle dans cette structure PHP simple :

Lien vers le fichier : cliquez ici

Une fois tout assemblé si je ne me trompe cela donne ceci :

Lien vers le fichier : cliquez ici

N'oubliez pas de reporter votre identifiant :

Si vous lancez le code vous obtenez un magnifique bouton :

Cliquez dessus et il demandera votre autorisation pour ensuite afficher une page complètement vierge : super !

Après avoir ramé un maximum, j'ai réussi à sortir des informations capitales comme l'id de la personne (ce qui m'intéressait à la base) et faire un bouton pour se déconnecter.

Voici le code (n'oubliez pas de remplacer data-clientid="CLIENT_ID") :

Lien vers le fichier : cliquez ici

Pages Web

Site WebDescription
Developers.google.com step_4_handling_the_sign-inGoogle+ Sign-In : explication
Digitalandwise.comCréer un bouton d'authentification Google

Article(s) en relation