L'authentification avec 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 comme serveur. Les services d'identité Google fournissent Google Sign-In Ruby on Rails 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 à ajouter à notre ainsi qu'au . client_id client serveur Pour créer une application, rendez-vous sur Console de développeur Google Sélectionnez . Avant de faire cela, vous devez configurer votre . Créer des informations d'identification > ID client OAuth écran de consentement Lors de la création du client_id, assurez-vous d'inclure 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. localhost Une fois fait, vous aurez votre de la forme client_id 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 dans votre si vous utilisez ou si vous utilisez <script src="https://accounts.google.com/gsi/client" async defer></script> index.html React.js _app.jsx 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", }); }, []); est ajouté pour montrer que google a été défini globalement dans notre global google index.html la méthode crée une instance de client Se connecter avec Google en fonction de champs donnés. est un champ obligatoire que nous obtenons lors de la création de l'application Google, est la fonction JavaScript ( ici ) qui gère le jeton d'identification renvoyé par l'invite One Tap ou la fenêtre contextuelle. google.accounts.id.initialize client_id callback signInCallback 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 . Vous pouvez jeter un oeil à plus de configurations false ici. La méthode un bouton Se connecter avec Google. Vous pouvez jouer avec les configurations google.accounts.id.renderButton ici. est l'élément HTML. En ajoutant le code ci-dessous à votre page Web HTML, document.getElementById("signInDiv") 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' , signInCallback est notre fonction de rappel qui peut être définie comme étape 3 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ù, est une URL de serveur que nous allons créer à l'étape suivante hôte local : 3000/utilisateur/google Le est une réponse de Google une fois que nous avons cliqué sur le bouton Se connecter ou One Tap. résultat Le comprend deux champs résultat informations d' : ce champ est le jeton d'identification sous la forme d'une chaîne JSON Web Token (JWT) encodée en base64 identification : montrant comment l'identifiant est sélectionné. En savoir plus . select_by 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, , ajoutez une méthode . app/controllers/users/user_controller.rb google ajoutez la route , dans . users/user#google_oauth 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 , qui est le joyau officiel de Google pour vérifier les jetons d'identification émis. google_auth Cela peut être fait facilement en utilisant Google::Auth::IDTokens.verify_oidc access_token, aud: "YOUR_GOOGLE_CLIENT_ID" où est le JWT reçu du client et est un identifiant client d'application Google. access_token aud 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": "your-email@gmail.com", "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 : Assurez-vous d'avoir installé sur votre serveur et ajoutez cette PS rack-cors 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 : 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. PPS 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
