Comment mettre en œuvre une connexion Google en un clic avec Ruby on Rails

L'authentification avec Google Sign-In est une pratique courante dans les applications modernes. Dans cet article de blog, nous expliquerons comment intégrer Google Identity Services dans l'une de vos applications frontales qui utilisent Ruby on Rails comme serveur. Les services d'identité Google fournissent

1. Bouton de connexion/inscription personnalisé

   

Connexion en un clic

Plongeons !!

Étape 1 : Créez une application dans la Google Developer Console.

Pour utiliser Google Sign In ou One Tap, nous avons besoin d'un client_id à ajouter à notre client ainsi qu'au serveur .

• Pour créer une application, rendez-vous sur Console de développeur Google

• Sélectionnez Créer des informations d'identification > ID client OAuth . Avant de faire cela, vous devez configurer votre écran de consentement .

• Lors de la création du client_id, assurez-vous d'inclure localhost et le port sur lequel votre client s'exécute dans l'origine Javascript autorisée pour le développement et votre URL de production.

  
  

• Une fois fait, vous aurez votre client_id de la forme 1234567890-abcdefg.apps.googleusercontent.com

  
  

Pour plus de détails sur la configuration de l'application, vous pouvez lire ici .

Étape 2 : Configuration de la bibliothèque dans le client

Afin de charger la bibliothèque cliente, ajoutez <script src="https://accounts.google.com/gsi/client" async defer></script> dans votre index.html si vous utilisez React.js ou _app.jsx si vous utilisez Next.js.

Étape 3 : Affichage du bouton de connexion personnalisé

 useEffect(() => { /* global google */ google.accounts.id.initialize({ client_id: "YOUR_GOOGLE_CLIENT_ID", callback: signInCallback, cancel_on_tap_outside: false, }); google.accounts.id.renderButton(document.getElementById("signInDiv"), { theme: "outline", size: "large", }); }, []);

• global google est ajouté pour montrer que google a été défini globalement dans notre index.html

  
  

• google.accounts.id.initialize la méthode crée une instance de client Se connecter avec Google en fonction de champs donnés. client_id est un champ obligatoire que nous obtenons lors de la création de l'application Google, callback est la fonction JavaScript ( ici signInCallback ) qui gère le jeton d'identification renvoyé par l'invite One Tap ou la fenêtre contextuelle.

  
  

• Par défaut, si un utilisateur clique n'importe où sur l'écran, un refroidissement exponentiel est appliqué à l'invite One Tap. Si vous souhaitez que l'invite soit toujours visible, définissez cette valeur sur false . Vous pouvez jeter un oeil à plus de configurations ici.

  
  

• La méthode google.accounts.id.renderButton un bouton Se connecter avec Google. Vous pouvez jouer avec les configurations ici.

  
  

• document.getElementById("signInDiv") est l'élément HTML. En ajoutant le code ci-dessous à votre page Web HTML,

 return ( <div className="App"> <div id="signInDiv" /> </div> );

vous pourrez voir un bouton personnalisé comme celui-ci

Étape 4 : Affichage de l'invite One Tap

• Afin d'afficher l'invite, ajoutez ceci dans useEffect google.accounts.id.prompt();

Étape 5 : Définir la fonction de rappel

• Comme mentionné à l' étape 3 , signInCallback est notre fonction de rappel qui peut être définie comme

 const signInCallback = (result) => { if (result.credential) { const params = { token: result.credential }; axios .post("http://localhost:3000/user/google", params) .then((res) => { const { authToken, ...userInfo } = res.data.data; // set token in local storage/cookies based on your authentication method // redirect to the authenticated page }) .catch((err) => console.log(err)); } };

où,

• hôte local : 3000/utilisateur/google est une URL de serveur que nous allons créer à l'étape suivante

  
  

• Le résultat est une réponse de Google une fois que nous avons cliqué sur le bouton Se connecter ou One Tap.

  
  

• Le résultat comprend deux champs

  • informations d' identification : ce champ est le jeton d'identification sous la forme d'une chaîne JSON Web Token (JWT) encodée en base64

  • select_by : montrant comment l'identifiant est sélectionné. En savoir plus ici .

    
    

• Nous prenons les informations d'identification du résultat et les transmettons en tant que paramètre à notre serveur.

Étape 6 : Ajout du contrôleur et de la route vers le serveur

Nous allons créer une route dans le serveur pour gérer la requête du client. Avant de faire cela, nous devons créer un contrôleur qui acceptera le JWT du client.

• Créez un fichier, app/controllers/users/user_controller.rb , ajoutez une méthode google .

  
  

• ajoutez la route users/user#google_oauth , dans config/routes.rb .

  
  

• Une fois que la route reçoit le JWT, la première et la plus cruciale étape consiste à vérifier si le JWT est validé. A cet effet, on peut utiliser la gemme google_auth , qui est le joyau officiel de Google pour vérifier les jetons d'identification émis.

  
  

• Cela peut être fait facilement en utilisant

 Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID"

où access_token est le JWT reçu du client et aud est un identifiant client d'application Google.

• Si le jeton est valide, il renverra un hachage comme celui-ci ou lancera une exception

 { "iss": "https://accounts.google.com", "nbf": 12345678, "aud": "YOUR_GOOGLE_CLIENT_ID, "sub": "1112223333444", "email": "[email protected]", "email_verified": true, "azp": "YOUR_GOOGLE_CLIENT_ID", "name": "First Last", "picture": "https://lh3.googleusercontent.com/a/AItbvmnvsIQFJw", "given_name": "First", "family_name": "Last", "iat": 1653797115, "exp": 1653805725, "jti": "8ffa19190gngd46745ff558821f953802" }

• Si le jeton est valide, vous pouvez vérifier dans votre base de données si l'utilisateur existe ou non et créer un utilisateur en conséquence. Une fois cela fait, vous pouvez connecter l'utilisateur ou le rediriger en fonction de votre méthode d'authentification.

  
  

 # users/user_controller.rb def google begin data = Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" // find the user in the data // if the user does not exist, create a user using data // sign the user (based on your authentication method) rescue StandardError => e end end

 # config/routes.rb scope :user do post 'google' => 'users#user_controller.rb' end

PS : Assurez-vous d'avoir installé rack-cors sur votre serveur et ajoutez cette application.rb

 config.middleware.insert_before 0, Rack::Cors do allow do origins '*' resource( '*', headers: :any, expose: ['Authorization'], methods: %i[get patch put delete post options show] ) end end

pour éviter de faire face à des erreurs comme celle-ci

PPS : si votre application utilise la bibliothèque de plate-forme JavaScript Google Sign-In pour le Web, assurez-vous de la migrer vers Google Identity Service, car la première va être obsolète. Lien

J'espère que cet article vous aidera à intégrer One Tap Login dans vos projets. Pour plus d'informations, vous pouvez consulter le site officiel documents .

Également publié ici