Intégration de Google Sign-In avec React : un guide convivial pour les développeurs

Problème

Imaginez un monde dans lequel les utilisateurs doivent se souvenir d'un mot de passe pour chaque site Web qu'ils visitent.

Oh attends, c'est ce monde !

Résolvons ce problème pour votre application en intégrant Google Sign-In, afin que les utilisateurs puissent se connecter avec leurs identifiants Big G sans transpirer.

Solution

L'intégration de Google Sign-In dans votre application React est plus simple que de déboguer une faute de frappe dans useEffect.

Sérieusement, il suffit de deux étapes pour accueillir le Big G dans votre projet. Allons-y !

---

Étape 1 : Enregistrez votre application auprès de Google

Avant que la magie n'opère, vous devez informer Google de votre application. Voici comment :

1. Accédez à Google Cloud Console : https://console.cloud.google.com/.

2. Naviguez vers API & Services : Une fois à l'intérieur, cliquez sur API & Services depuis le tableau de bord.
   

3. Barre latérale des informations d'identification : sur le côté gauche, cliquez sur Identifiants.

1. Créer des informations d'identification : dans la barre de navigation supérieure, appuyez sur Créer des informations d'identification et choisissez ID client OAuth.

1. Configurer le client OAuth :
   • Sélectionnez Application Web comme type d'application.
   • Sous Origines JavaScript autorisées, ajoutez :
     • L'URL de votre serveur local (par exemple, http://localhost:3000).
     • Le domaine sur lequel vous prévoyez de déployer l'application (par exemple, https://votredomaine.com/signup).

1. Cliquez sur Créer : Google va maintenant générer votre ID client et votre secret.

2. Copier l'ID client et le secret : enregistrez-les dans un endroit sécurisé (mais pas en texte brut, car nous sommes meilleurs que cela).

Félicitations ! La configuration majeure est terminée. Il est maintenant temps de mettre la main à la pâte avec du code.

---

Étape 2 : Codage de l'intégration

Nous utiliserons le package [@react-oauth/google](https://www.npmjs.com/package/@react-oauth/google). Pourquoi réinventer la roue quand quelqu’un l’a déjà fait ?

1. Installer le package :

   npm install @react-oauth/google

1. Écrivez le code : Voici un exemple simple pour commencer :

   // App.jsx
   import { useState } from "react";
   import { GoogleOAuthProvider, GoogleLogin } from "@react-oauth/google";

   function Homepage() {
     const [authData, setAuthData] = useState(null);

     const gContainer = {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
       marginTop: '50px'
     };

     return (
       <googleoauthprovider clientid='{"YOUR_GOOGLE_CLIENT_ID_HERE"}'>
         <div>



<ol>
<li>
<strong>Run Your App</strong>:
Fire up your app with npm start or yarn start, and you’re good to go!</li>
</ol>

<p>Now users can log in, and you’ll have access to their Google access token to authenticate them on your backend (or to marvel at in your console logs).</p>

<h2>
  
  
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173565247884217.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Integrating Google Sign-In with React: A Dev-Friendly Guide">
</h2>

<h2>
  
  
  What Just Happened?
</h2>

<p>You’ve successfully added Google Sign-In to your React app by following these steps. When users log in, you’ll receive their access token. </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173565247990959.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Integrating Google Sign-In with React: A Dev-Friendly Guide"></p>

<p>You can call an API endpoint using this token to fetch user-related information. For example:<br>
</p>

<pre class="brush:php;toolbar:false">const userInfoEndpoint = `https://oauth2.googleapis.com/tokeninfo?id_token=${accessToken}`;

Cette requête renverra les données de profil de l’utilisateur.

Il est recommandé de gérer cela sur le backend pour éviter toute utilisation abusive de votre API pour de fausses connexions.

Pour un test rapide, j'utiliserai LiveAPI pour envoyer une requête à ce point de terminaison et confirmer si je peux récupérer les informations utilisateur à partir du jeton que nous avons obtenu plus tôt.

Et c'est tout ! Vous disposez désormais de toutes les données dont vous avez besoin auprès d'OAuth, comme votre photo de profil, votre nom et votre adresse e-mail.

---

TL;DR

1. Enregistrez votre application auprès de Google Cloud Console pour obtenir un identifiant client.
2. Utilisez @react-oauth/google pour intégrer Google Sign-In dans votre application React.
3. Appelez le point de terminaison de l'API Google pour récupérer les informations utilisateur en toute sécurité à partir de votre backend.

Laissez-moi prendre encore une minute de votre temps.

Je travaille sur un outil de génération de documents très pratique appelé LiveAPI.

LiveAPI prend votre référentiel en entrée et génère une documentation API magnifique et sécurisée pour toutes les API dont vous disposez.

Points bonus : il vous permet d'exécuter des API directement à partir de la documentation et de générer des extraits de requête dans n'importe quelle langue.

Bon codage, et que le Big G soit toujours en votre faveur et que LiveAPI vous fasse gagner du temps !