Facile Google Auth pour Node.js

5 étapes simples pour intégrer Google - code inclus.

Mes yeux se sont gonflés de larmes, quand j'ai réalisé que les 10 dernières heures de codage n'avaient servi à rien… Passport.js m'avait donné, à moi et aux gens de ce monde, un faux espoir.

Je ne sais pas si vous avez déjà consulté le code dans la bibliothèque Passport.js, mais il n’en est pas très copieux et il n’est pas très bon non plus. En gros, il s’agit d’un peu de code qui garantit que vos informations d’authentification sont placées au bon endroit. Mais l'inconvénient majeur est que cela tue votre flexibilité. Avec passeport, vous devez rediriger vos demandes de rappel vers un serveur. Si vous ne savez pas ce que cela signifie; En gros, c'est nul si vous créez un type d'application autre qu'une application rendue par serveur (telle qu'une application à page unique ou un SPA).

Mais ne vous inquiétez pas! Voici un didacticiel rapide qui vous montrera comment ajouter correctement Google Auth.

Avant de commencer ️

Ce tutoriel suppose que vous avez:

  1. Une bonne compréhension de JavaScript et de Node.js
  2. Une application avec un serveur

Génial, allons-y!

Étape 1: Installez les dépendances

Juste un - il est sur NPM si vous ne l’avez pas déjà supposé.

  • googleapis

C'était facile!

Étape 2: configurez Google

Ensuite, vous devrez configurer la bibliothèque avec vos informations d'identification pour que Google sache qui fait les demandes.

Pour obtenir des informations d'identification, si vous ne les avez pas déjà, accédez à votre console Google et créez un nouveau projet. Une fois que vous avez un nouveau projet, demandez des clés API. Voici un bon lien pour plus d'aide à ce sujet.

Fichier: src / google-util.js

Le fichier ci-dessus; importe la bibliothèque, crée un objet config avec nos détails et ajoute une fonction permettant de se connecter à Google quand on le souhaite.

Étape 3: Obtenir l'URL de connexion Google

Pourquoi avons-nous besoin de cela? ... Pour que nous puissions connecter quelqu'un à Google, nous devons l'envoyer à la page de connexion de Google. À partir de là, ils se connecteront à leur compte, puis ils seront redirigés vers notre application avec leurs détails de connexion.

Fichier: src / google-util.js

Le code ci-dessus fait quelques choses; il détermine les informations et les autorisations que l'utilisateur souhaite obtenir lors de la connexion et crée une fonction que nous allons utiliser pour générer l'URL. Enfin, nous créons une fonction qui génère une URL que vous devrez envoyer au client.

Étape 4: À votre tour - Rediriger vos utilisateurs vers l'URL de Google

Cette étape nécessite que vous envoyiez vos utilisateurs à l'URL que nous venons de créer. Dans mon application, je génère l'URL dans l'API et l'envoie à mon serveur où je lui donne l'adresse href d'un bouton, par exemple.

 Connexion avec Google 

Cela conduira l'utilisateur à la page de connexion.

Dépannage: si vous arrivez sur une page qui vous indique que vous n’avez pas accès (ou quelque chose de similaire), cela peut vouloir dire que vous n’avez pas configuré correctement les informations d’identité de votre projet Google. Assurez-vous de les configurer correctement dans votre console Google.

Étape 5: Enregistrez les détails de connexion

J'espère que vous auriez pu vous connecter à votre compte Google et que Google vous aurait redirigé vers votre application (ou à l'adresse de redirection à laquelle vous lui avez indiqué d'aller). Il ne nous reste plus qu'à nous assurer que le compte auquel ils se sont connectés correspond à un utilisateur de notre base de données (ou en crée un).

Pour ce faire, Google nous a donné un paramètre sur l'adresse de redirection appelé «code». Vous verrez ceci comme:

https://votresiteweb.com/callback?code=a-bunch-of-random-characters

Vous devez extraire ce paramètre «code» et le restituer à la bibliothèque Google API pour vérifier qui est l'utilisateur connecté. Voici un bon package NPM qui peut vous aider à extraire le paramètre, mais peu importe la façon dont vous procédez.

Une fois que vous avez le paramètre "code" et que vous l'avez envoyé à votre serveur, nous pouvons obtenir l'adresse e-mail et l'identifiant de l'utilisateur à utiliser dans notre application.

Fichier: src / google-util.js

Il ne vous reste plus qu’à consulter votre adresse e-mail ou votre identifiant par rapport à votre base de données et à vous connecter ou à vous inscrire - c’est votre choix!

Version complète

Voici une version complète du code sans tous les commentaires. Utilisez ceci pour un bon aperçu. Si vous êtes bloqué, vérifiez les exemples ci-dessus avec des explications.

Yahoooo !!

Votre application prend désormais en charge Google. Pour avoir accès à plus d’API de Google, ajoutez-les simplement à votre tableau "d'étendues". Lorsque l'utilisateur se connectera, il sera invité à vous donner accès à ces données, par exemple. Données Google Agenda.

Si vous avez apprécié cet article, appliquez-le quelques fois (vous pouvez en laisser jusqu'à 50) ou vous pouvez commenter si vous avez des questions. Je ferai de mon mieux pour vous répondre!

Suis moi sur Twitter.

Merci!

Article créé par les fondateurs de Authenticator - Authentification simple et rapide pour votre application.

Plus de messages de Jack Scott.

  • Comment j'ai lancé une start-up en 4 jours
  • Construire un serveur complet GraphQL avec Node.js
  • Au revoir Redux