Qu'est-ce qu'un identifiant client ?
Un identifiant client Google (ou ClientID) est un identifiant unique attribué à une application/un utilisateur. Il est utilisé pour authentifier les clients et les serveurs à l'aide d'OAuth (Auth 2.0).

Pour obtenir un identifiant client Google, ouvrez Google Cloud Console et démarrez un nouveau projet. Pour ce didacticiel, nous nommerons le projet « GoogleReact Sign-In », mais vous pouvez choisir le nom de votre choix.

Après avoir créé le projet, accédez à la section Informations d'identification dans le menu API et services. Ici, vous trouverez un tableau de bord dans lequel le nom de votre projet actuel doit être visible dans le coin supérieur gauche, à proximité du logo Google Cloud.

Maintenant, avant de créer vos informations d'identification, passons à l'écran de consentement OAuth pour configurer l'écran de consentement.

Configurez un écran de consentement à la connexion à Google.

L'écran de consentement, comme son nom l'indique, est une page qui nécessite que l'utilisateur se connecte via une bibliothèque externe ou tierce. Cette fenêtre contextuelle informe l'utilisateur qu'il quitte la page racine de votre application et accorde l'accès à une page tierce. exemple d'écran de consentement à la connexion à Google illustré ci-dessous

En termes simples, lorsque vous utilisez OAuth 2.0 pour l'autorisation, votre application demande à l'utilisateur d'autoriser une ou plusieurs étendues d'accès à l'aide de son compte Google. Les étendues d'accès incluent toutes les informations ou activités auxquelles votre application est autorisée à accéder ou à effectuer sur le compte de l'utilisateur.

Pour configurer la page de consentement Google pour votre application React, accédez à l'onglet « Écran de consentement OAuth » dans le menu de gauche de votre Google Cloud Console.

Une fois dans cet onglet, sélectionnez « externe » (la seule option autorisée, sauf si vous utilisez une entreprise ou une application vérifiée par Google), puis cliquez sur le bouton « Créer » pour générer votre écran de consentement.

Ensuite, sous la même page, indiquez un nom pour votre candidature et une adresse e-mail pour recevoir des mises à jour sur l'état du projet.

Vous pouvez laisser les besoins et options restants vides pour le moment, mais si vous disposez des détails, vous pouvez les ajouter au cours de cette phase.

Pour le moment, vous pouvez ignorer les sections d'inscription restantes. Faites simplement défiler chaque section vers le bas, cliquez sur Enregistrer, puis revenez au tableau de bord une fois terminé.

Après avoir conçu la page de consentement OAuth, nous devons publier l'application avant de l'expérimenter ou de nous assurer que l'authentification fonctionne. Par défaut, son état est « Test » et après la publication, il passe en production.

Une fois que vous avez marqué votre application comme « En production », elle sera accessible à toutes les personnes disposant d'un compte Google.

Générez votre identifiant client Web.

Maintenant, nous revenons à l'option des informations d'identification pour accéder à la page où vous pouvez créer votre identifiant client Web.
Sur l'écran, sélectionnez CRÉER DES CRÉDENTIELS en haut de la page, puis cliquez sur l'ID client OAuth.

Il vous sera demandé de choisir un type de candidature comme indiqué ci-dessous. Optez pour une application Web Si vous suivez ces étapes pour React (nous utilisons l'ID client Google pour le Web).

Ensuite, nous choisirons un nom pour notre identifiant client afin d'identifier ou de spécifier le lien d'ID spécifique vers une seule application, ce nom est utilisé. Pour faire la distinction entre les identifiants Web, iOS et Android, nous pouvons mettre « Web ID », « Android ID », « iOS ID », etc. dans leurs conventions de dénomination :

Ensuite, nous présenterons deux types d'URL : les origines JavaScript autorisées et les URL de redirection autorisées.

L'« URL d'origine JavaScript autorisée » est l'URL à partir de laquelle votre application se connecte. Pour les développeurs React, il s'agit de localhost (localhost:3000) ou de votre URL hébergée si vous avez hébergé votre application.

L'« URL de redirection autorisée » est le lien vers lequel Google renverra l'utilisateur une fois que vous l'aurez connecté avec succès. Par exemple, vous pouvez le renvoyer vers votre lien d'origine ou le rediriger vers un autre lien. Vous devrez ajouter l'URL ici.

Ajoutez les URL suivantes aux origines javaScript autorisées et aux URL de redirection autorisées : http://localhost:3000 et http://localhost, respectivement :

Pour créer un identifiant client Web, vous devrez cliquer sur le bouton « CRÉER ». Vous serez renvoyé à la page d'accueil, où vous pourrez consulter vos informations d'identification fraîchement créées. Pour copier votre nouvel identifiant client Web, appuyez sur l'icône Copier.

Maintenant que nous avons créé avec succès notre identifiant client Web, vous allez accéder à notre application React et ajouter votre identifiant client dans le fichier .env.