Comment autoriser les utilisateurs à l'aide de Google OAuth dans Node.js

Comment autoriser les utilisateurs à l'aide de Google OAuth dans Node.js

L'autorisation ouverte, également connue sous le nom d'OAuth, est un protocole utilisé pour autoriser un utilisateur sur votre site Web en utilisant un service tiers comme Google, Github, Facebook, etc. Le service tiers partage certaines données (nom, e-mail, photo de profil, etc.) avec votre site Web, puis autorise l'utilisateur en son nom sans gérer les mots de passe et les noms d'utilisateur pour votre site Web, et l'enregistrement des utilisateurs beaucoup de problèmes supplémentaires.

Comment fonctionne Oauth

Lorsqu'un utilisateur clique sur «Connectez-vous avec Google», il amène l'utilisateur à la page de consentement Google OAuth. Lorsque l'utilisateur accepte le consentement et authentifie son identité sur Google, Google contactera votre site Web en tant que service tiers et autorisera l'utilisateur en son nom et partagera des données avec votre site Web. De cette façon, l'utilisateur peut être autorisé sans gérer les informations d'identification de votre site Web séparément.

Implémentation de Google OAuth en utilisant le nœud.js

Presque tous les langages de programmation fournissent différentes bibliothèques pour implémenter Google Oauth pour autoriser les utilisateurs. Nœud.JS fournit des bibliothèques «passeport» et «passeport-google-oauth20» pour implémenter Google OAuth. Dans cet article, nous implémenterons un protocole OAuth pour autoriser les utilisateurs à utiliser le nœud.js.

Créer un projet sur Google

La première étape pour implémenter Google OAuth est de créer un projet sur la console de développeur Google pour votre site Web. Ce projet est utilisé pour utiliser les clés de l'API pour faire des demandes à Google pour l'authentification ouverte. Goto le lien suivant et créez votre projet:

    https: // console.développeurs.Google.com

.

Configuration du projet Google

Après avoir créé le projet, accédez au projet et sélectionnez «Écran de consentement OAuth» dans le menu du côté gauche.

Cliquez sur le bouton «Créer» et fournissez tous les détails de votre projet. Cliquez sur «Enregistrer et continuer» pour passer à autre chose.

Offrez maintenant la portée de votre projet. Les portées sont les types d'autorisations pour accéder aux données de l'utilisateur à partir d'un compte Google. Vous devez configurer les autorisations pour obtenir des données utilisateur spécifiques à partir de votre compte Google. Cliquez sur «Enregistrer et continuer."

Ajoutez maintenant les utilisateurs de test au projet si vous voulez. Les utilisateurs de test sont les seuls utilisateurs autorisés qui peuvent accéder à votre application Web en mode test. Pour l'instant, nous n'entrerons aucun utilisateur de test et cliquez sur «Enregistrer et continuer» pour passer à la page de résumé du projet.

Passez en revue votre projet sur la page Résumé et enregistrez la configuration. Nous allons maintenant générer des informations d'identification pour notre projet. Sélectionnez l'onglet «Informations d'identification» dans le menu du côté gauche et cliquez sur le bouton «Créer des informations d'identification» en haut pour générer OAuth 2.0 ID client.

Dans le menu déroulant, sélectionnez «ID client OAuth» et spécifiez le type d'application comme «application Web» et le nom de votre application.

Sur la même longueur d'onde, nous devons fournir deux URI, les «origines JavaScript autorisées» et les «URI redirigeants autorisés». Le «Origins JavaScript autorisé» est l'origine HTTP de votre application Web, et il ne peut avoir aucun chemin. Le `` URIS redirigé autorisé '' est l'URI exact avec un chemin où l'utilisateur sera redirigé après l'authentification Google.

Après avoir saisi toutes les entrées requises, cliquez sur «Créer» pour créer des informations d'identification OAuth.

Nœud initier.projet JS

Jusqu'à présent, nous avons créé un projet Google pour autoriser les utilisateurs pour notre application à l'aide de Google. Maintenant, nous allons initier le nœud.Projet JS pour mettre en œuvre OAuth. Créez un répertoire nommé «Auth» et lancez le projet express.

Ubuntu @ Ubuntu: ~ $ Mkdir Auth
ubuntu @ ubuntu: ~ $ cd auth
Ubuntu @ Ubuntu: ~ $ npm init -y

Installation des packages NPM requis

Pour implémenter Google OAuth en utilisant le nœud.JS, nous devons installer certains packages NPM. Nous utiliserons «Passport», «Express», «Path» et «Passport-Google-Oauth20». Installez ces packages à l'aide de NPM.

Ubuntu @ Ubuntu: ~ $ NPM Installer Express Passport-Google-OAuth20 Chemin

Node d'écriture.Code JS

Tout d'abord, nous écrire deux pages Web HTML simples, celle avec un bouton, et autoriserons l'utilisateur lorsque vous cliquez sur le bouton. La deuxième page sera autorisée et l'utilisateur sera redirigé vers la page autorisée après l'autorisation. Créer un fichier «public / index.html '.



Notamment


Autoriser ici

Créez maintenant un fichier «public / succès.html 'avec le contenu suivant.



Notamment


Autorisé



Après avoir créé des pages Web, nous allons maintenant écrire du code pour autoriser les utilisateurs à utiliser Google OAuth. Créer un fichier index.js '.

// Importation de packages requis
const Express = require ('express');
const Passport = require ('passeport');
const path = require ('path');
const googlestrategy = require ('Passport-google-oauth20').Stratégie;
const app = express ();
// Définition des paramètres
// L'ID client est le paramètre que nous obtiendrons de la console de développeur Google
Client_id = ”xxxxxxx”;
// Le secret du client sera également tiré de la console de développeur Google
Client_secret = ”xxxxx”;
// L'utilisateur sera redirigé vers le callback_url après l'autorisation
Callback_url = ”http: // localhost: 8000 / autorisé”;
// Le numéro de port doit être le même que celui défini dans la console du développeur
Port = 8000;
// Configuration du middleware de passeport
appliquer.Utiliser (passeport.initialiser());
appliquer.Utiliser (passeport.session());
passeport.serializeUser (fonction (id, fait)
fait (null, id);
);
passeport.DeserializeUser (fonction (id, fait)
fait (null, id);
);
// suivant le middleware fonctionnera chaque fois que le passeport. La méthode authentique est appelée et renvoie différents paramètres définis dans la portée.
passeport.use (new googlestrategy (
clientId: client_id,
CLIENTSecret: Client_Secret,
callackurl: callback_url
,
Fonction asynchrone (AccessToken, RefreshToken, Profil, Email, CB)
retourner CB (null, e-mail.identifiant);

));
// Servir la page d'accueil pour la demande
appliquer.get ('/', (req, res) =>

res.SendFile (chemin.join (__ dirname + '/ public / index.html '));
);
// Page de réussite pour l'application
appliquer.get ('/ succès', (req, res) =>

res.SendFile (chemin.Rejoignez (__ dirname + '/ public / succès.html '));
);
// L'utilisateur sera redirigé vers la page Google Auth chaque fois que l'itinéraire «/ google / auth».
appliquer.get ('/ google / auth',
passeport.authentifier ('google', scope: ['profil', 'e-mail'])
));
// La redirection de défaillance de l'authentification est définie dans la route suivante
appliquer.obtenir ('/ autorisé',
passeport.authentifier ('google', failloreDirect: '/'),
(req, res) =>

res.rediriger ('/ succès');

));
// Exécution du serveur
appliquer.écouter (port, () =>

console.journal («Le serveur s'exécute sur le port» + port)
)

Tester Google Oauth

Maintenant, notre application est prête, et nous pouvons tester si elle autorise les utilisateurs à l'aide de Google OAuth. Accédez au répertoire racine et exécutez l'application.

ubuntu @ ubuntu: ~ $ index de nœud.js

Entrez maintenant l'URL de votre application dans le navigateur.

    http: // localhost: 8000

Il affiche la page d'accueil avec une balise d'ancrage.

Lorsque nous cliquons sur «l'autorisation ici», il redirigera vers la page Google OAuth.

Le nom de votre application «test» s'affiche sur la page d'authentification Google. Lorsque vous autorisez votre compte, il vous amènera à la page autorisée.

Conclusion

La gestion des noms d'utilisateur et des mots de passe pour différentes applications Web n'est pas une tâche satisfaite pour les utilisateurs. De nombreux utilisateurs quittent votre application Web sans enregistrer leur compte simplement parce qu'ils ne veulent pas gérer les informations d'identification. Le processus d'autorisation sur votre application Web ou votre site Web peut être simplifié en utilisant des services tiers comme Google, Facebook, etc. Ces services autorisent les utilisateurs en leur nom et l'utilisateur n'a pas besoin de gérer les informations d'identification séparément. Dans cet article, nous avons implémenté le protocole Google OAuth pour autoriser les utilisateurs à utiliser le nœud.js.