Connectez-vous avec un compte Google : utilisez la bibliothèque JavaScript OAuth

 




Bonjour à tous, Aujourd'hui, dans ce tutoriel, je vais vous montrer comment créer une connexion avec un compte Google à l'aide de la bibliothèque JavaScript OAuth dans votre application Web. Vous pouvez trouver un nombre N de tutoriels sur l'authentification Google mais ce tutoriel est différent d'eux.

Ce tutoriel explique à quel point il est facile d'intégrer la connexion à l'authentification Google. Dans ce tutoriel, vous n'avez pas besoin d'utiliser/télécharger une troisième bibliothèque partiellement PHP fournie par Google, contrairement à d'autres tutoriels.

Au lieu de cela, il vous suffit d'enregistrer votre application sur Google API Console, de générer l'identifiant client et les clés secrètes et d'inclure un CDN. Ne vous inquiétez pas, je couvrirai chaque étape et fournirai le code source.

Pourquoi utiliser la bibliothèque Login with Google OAuth ?

Connectez-vous avec Google, la bibliothèque JavaScript OAuth est un moyen rapide et puissant d'intégrer le système de connexion dans l'application Web. Si vous le faites en utilisant JavaScript, cela améliorera l'expérience utilisateur, sans rafraîchissement de la page. La connexion Google avec l'API JavaScript permet à l'utilisateur de se connecter à votre site Web avec son compte Google.

Le meilleur avantage de l'utilisation de la bibliothèque de l'API Google JavaScript est que le processus de connexion peut être mis en œuvre sur une seule page sans actualisation de la page. Consultez notre démo .

Processus étape par étape pour se connecter avec un compte Google

1- Créer un projet

Pour créer un projet, cliquez sur ce lien https://developers.google.com/identity/sign-in/web/sign-in vous obtiendrez quelque chose comme ça.

se connecter-avec-un-compte-google-en-utilisant-javascript-oauth-create-project-step-1

Cliquez sur le bouton Configurer un projet et une fenêtre contextuelle apparaît sur la même page avec une liste déroulante de sélection. Si vous avez créé un projet qui sera répertorié, si vous ne l'avez pas créé, cliquez sur l' option de création de projet . Entrez un nom de projet et cliquez sur suivant . Vous obtiendrez une autre fenêtre au fur et à mesure.

se connecter-avec-un-compte-google-en-utilisant-javascript-oauth-create-project-step-2

Dans ce premier menu déroulant, sélectionnez « Navigateur Web » et dans l'origine Javascript autorisée, entrez votre URL ou votre domaine.

Note:

  • Si vous travaillez sur l' hôte local , l'URL ci-dessus, comme indiqué dans l'image, est correcte et ne fonctionnera que pour l' hôte local .
  • En fin de compte, vous allez télécharger sur un serveur en direct. Dans mon cas, j'ai une démo sur un serveur en direct et le répertoire est comme https://demo.codingbirdsonline.com/login-with-google-account-using-javascript-OAuth-library/ . Signifie qu'il se trouve dans un sous-domaine.
  • Ensuite, vous devez taper cette URL https://demo.codingbirdsonline.com . Si vous souhaitez héberger votre code sur un sous-domaine. OU https://codingbirdsonline.com, si vous le souhaitez en root.
  • Assurez-vous de supprimer la barre oblique "/" du dernier.

Cliquez sur Créer, il vous sera demandé d'entrer le nom du produit ou l'application. Il s'agit du nom affiché lors de l'authentification.

Vous obtiendrez maintenant l'ID client et l'ID secret.

connexion-avec-un-compte-google-en-utilisant-javascript-oauth-create-project-step-3-get-credentials

2- Activer l'API pour le projet

Ouvrez Google Developer Consol , en haut à gauche, vous obtiendrez une liste déroulante. Sélectionnez le projet que vous avez créé à l'étape 1.

connexion-avec-compte-google-en-utilisant-javascript-oauth-create-project-step-4-enable-api

Cliquez sur le bouton +ENABLE APIS AND SERVICES et vous serez redirigé vers une page d'API. Trouvez l'API Google+ et activez-la.

connexion-avec-compte-google-en-utilisant-javascript-oauth-create-project-step-5-enable-api-button

C'est ça !!! Maintenant, nous sommes juste loin de notre rêve. Nous avons besoin de code pour configurer. Dans cet exemple, j'ai un bouton Google Login. Lorsque l'utilisateur clique dessus, authentifié par son compte Google. Nous sauvegardons ces informations fournies, pour référence. Et s'il refait la même chose, nous mettons simplement à jour notre base de données.

connexion-avec-compte-google-en-utilisant-javascript-oauth-fichier-et-dossier
  • config.php est le fichier de connexion à la base de données.
  • Google-auth-script.js est le fichier JavaScript pour authentifier et enregistrer les données par AJAX.
  • index.php est le fichier principal contenant le bouton Google Login.
  • loader-icon.gif est l'icône du chargeur.
  • script.php est le fichier de script PHP qui enregistre les données dans la base de données.

Créons ces fichiers.

  1. <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
  2. <script src = "https://apis.google.com/js/platform.js?onload=renderButton" async defer > </script>
  3. <meta name = "google-signin-client_id" content = "your_client_id" >

Ici, assurez-vous d'inclure également Bootstrap et jQuery . Puisque nous ferons une demande AJAX pour enregistrer les informations. Incluez ce code ci-dessus dans la balise head du fichier index.php .

En savoir plus sur la façon de faire une requête AJAX .

Et incluez ce code dans le pied de page de votre fichier index.php, c'est-à-dire avant de fermer la balise body.

  1. <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </script>
  2. <script src = "google-auth-script.js" > </script>

index.php : collez ce code dans le corps.

    1. <div class="row">
    2. <div class="col-lg-8 posts-list">
    3. <div class="card card-signin my-5">
    4. <div class="card-body">
    5. <center><img src="https://demo.codingbirdsonline.com/website/img/coding-birds-online/coding-birds-online-favicon.png" width="70"></center>
    6. <h5 class="card-title text-center">Login with Google using JavaScript OAuth Library</h5>
    7. <center><div id="g-signin2"></div></center>
    8. <center><img src="loader-icon.gif" id="loaderIcon" style="display: none"></center>
    9. <center>
    10. <div class="card" style="width: 22rem;display: none" id="loginDetails">
    11. <img class="" src="" width="100" id="profileLabel" style="margin-top: 20px;">
    12. <div class="card-body">
    13. <div class="card-text" style="text-align: justify">
    14. <table>
    15. <tr><td>Name</td><td>:</td><td id="nameLabel"></td></tr>
    16. <tr><td>Email</td><td>:</td><td id="emailLabel"></td></tr>
    17. <tr><td>Google ID</td><td>:</td><td id="googleIdLabel"></td></tr>
    18. </table>
    19. </div>
    20. <a href="javaScript:void(0)" onclick="signOut();" class="btn btn-danger">Logout</a>
    21. </div>
    22. </div>
    23. </center>
    24. </div>
    25. </div>
    26. </div>
    27. </div>

    google-auth-script.js.

    1. function renderButton() {
    2. gapi.signin2.render('g-signin2', {
    3. 'scope': 'profile email',
    4. 'width': 250,
    5. 'height': 40,
    6. 'longtitle': true,
    7. 'theme': 'dark',
    8. 'onsuccess': onSignIn,
    9. 'onfailure': onFailure
    10. });
    11. }
    12. function onSignIn(googleUser) {
    13. var profile = googleUser.getBasicProfile();
    14. console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
    15. console.log('Name: ' + profile.getName());
    16. console.log('Image URL: ' + profile.getImageUrl());
    17. console.log('Email: ' + profile.getEmail());
    18. var googleTockenId = profile.getId();
    19. var name = profile.getName();
    20. var email = profile.getEmail();
    21. var profile = profile.getImageUrl();
    22. $("#loaderIcon").show('fast');
    23. $("#g-signin2").hide('fast');
    24. saveUserData(googleTockenId,name,email,profile); // save data to our database for reference
    25. }
    26. // Sign-in failure callback
    27. function onFailure(error) {
    28. alert(error);
    29. }
    30. // Sign out the user
    31. function signOut() {
    32. if(confirm("Are you sure to signout?")){
    33. var auth2 = gapi.auth2.getAuthInstance();
    34. auth2.signOut().then(function () {
    35. $("#loginDetails").hide();
    36. $("#loaderIcon").hide('fast');
    37. $("#g-signin2").show('fast');
    38. });
    39. auth2.disconnect();
    40. }
    41. }
    42. function saveUserData(googleTockenId,name,email,profile) {
    43. $.post("script.php",{authProvider:"Google",googleTockenId:googleTockenId,name:name,email:email,profile:profile},
    44. function (response) {
    45. var data = response.split('^');
    46. if (data[1] == "loggedIn"){
    47. $("#loaderIcon").hide('fast');
    48. $("#g-signin2").hide('fast');
    49. $("#profileLabel").attr('src',profile);
    50. $("#nameLabel").html(name);
    51. $("#emailLabel").html(email);
    52. $("#googleIdLabel").html(googleTockenId);
    53. $("#loginDetails").show();
    54. }
    55. });
    56. }

Par défaut, après le chargement de la page, cette fonction renderButton() est appelée automatiquement.

script.php

    1. <?php
    2. include "config.php";
    3. if ($_POST['authProvider'] == "Google"){
    4. $authProvider = $_POST['authProvider'];
    5. $googleTockenId = $_POST['googleTockenId'];
    6. $name = $_POST['name'];
    7. $email = $_POST['email'];
    8. $profile = $_POST['profile'];
    9. $now = date('Y-m-d H:i:s');
    10. // Check whether the user data already exist in the database
    11. $queryCheck = "SELECT * FROM bird_google_auth WHERE authProvider = '$authProvider' AND googleIdTocken = '$googleTockenId'";
    12. $resultCheck = $connection->query($queryCheck);
    13. if ($resultCheck->num_rows>0){
    14. $queryPerform = "UPDATE bird_google_auth SET authProvider = '$authProvider',googleIdTocken = '$googleTockenId',name='$name',
    15. email='$email',profile='$profile',modified='$now' WHERE authProvider = '$authProvider' AND googleIdTocken = '$googleTockenId'";
    16. }else{
    17. $queryPerform = "INSERT INTO bird_google_auth SET authProvider = '$authProvider', googleIdTocken = '$googleTockenId',name='$name',
    18. email='$email',profile='$profile',created='$now',modified='$now' ";
    19. }
    20. $finalResultset = $connection->query($queryPerform) or die("Error in query".$connection->error);
    21. if($finalResultset){
    22. echo "test^loggedIn";
    23. }
    24. }

    config.php

    1. <?php
    2. $connection = new mysqli("localhost","root","","codingbirds");
    3. if (! $connection){
    4. die("Error in connection".$connection->connect_error);
    5. }

3- Exécutez le code !

Lorsque vous exécutez le code et si tout va bien. Vous obtiendrez quelque chose comme ça. Ne vous inquiétez pas, je fournirai le code source 100% fonctionnel. Vous n'avez qu'à modifier l'ID client.

Code source et démo

Vous pouvez télécharger le code source complet 100% fonctionnel  à partir d'ici.  .

Conclusion

J'espère que vous avez appris expliqué ci-dessus, si vous avez des suggestions, sont appréciés. 

Enregistrer un commentaire

Post a Comment (0)

Plus récente Plus ancienne