OAuth 2.0 est une norme qui permet aux applications tierces d'accéder en toute sécurité aux données des applications Web. Vous pouvez l'utiliser pour récupérer des données, y compris des informations de profil, des horaires, etc. qui est hébergé sur d'autres applications Web comme Facebook, Google et GitHub. Un service peut le faire au nom d'un utilisateur sans exposer ses informations d'identification à l'application tierce.

Découvrez comment implémenter OAuth dans une application Express en utilisant GitHub en tant que fournisseur OAuth en quelques étapes.

Le flux OAuth

Dans un flux OAuth typique, votre site offre aux utilisateurs la possibilité de se connecter avec leur compte tiers auprès d'un fournisseur tel que GitHub ou Facebook. Un utilisateur peut démarrer ce processus en cliquant sur un bouton de connexion OAuth pertinent.

Cela les redirige de votre application vers le site Web du fournisseur OAuth et leur présente un formulaire de consentement. Le formulaire de consentement contient toutes les informations auxquelles vous souhaitez accéder de l'utilisateur, qui peuvent être leurs e-mails, photos, horaires, etc.

Si l'utilisateur autorise votre application, le tiers le redirigera vers votre application avec un code. Votre application peut alors échanger le code reçu contre un jeton d'accès qu'elle peut ensuite utiliser pour accéder aux données utilisateur disponibles.

L'implémentation de ce flux dans une application Express implique quelques étapes.

Étape 1: Configuration de l'environnement de développement

Tout d'abord, créez un répertoire de projet vide et CD dans le répertoire créé.

Par exemple:

mkdir github-app
CD application github

Ensuite, initialisez npm dans votre projet en exécutant :

npm init -y

Cette commande crée un package.json fichier qui contient des détails sur votre projet comme le nom, la version, etc.

Ce tutoriel présentera l'utilisation du système de module ES6. Configurez ceci en ouvrant votre package.json fichier et en précisant "type": "module" dans l'objet JSON.

Étape 2: Installation des dépendances

Vous devrez installer quelques dépendances pour que votre serveur fonctionne correctement :

  • ExpressJS: ExpressJS est un framework NodeJS qui fournit un ensemble robuste de fonctionnalités pour les applications Web et mobiles. L'utilisation d'Express simplifiera le processus de création de votre serveur.
  • Axios: Axios est un client HTTP basé sur des promesses. Vous aurez besoin de ce package pour effectuer une requête POST pour un jeton d'accès à GitHub.
  • dotenv: dotenv est un package qui charge les variables d'environnement d'un fichier .env dans l'objet process.env. Vous en aurez besoin pour masquer des informations importantes sur votre application.

Installez-les en exécutant :

npm installer exprimer axios dotenv

Étape 3: Créer une application Express

Vous devez créer un serveur Express de base pour gérer et faire des demandes au fournisseur OAuth.

Tout d'abord, créez un index.js fichier dans le répertoire racine de votre projet contenant les éléments suivants :

// index.js
importer Express de "Express";
importer axios de "axios" ;
importer * comme dotenv de "dotenv" ;
dotenv.config();
constante app = express();
constante port = processus.env. PORT || 3000
app.listen (port, () => {
console.Journal(`L'application est en cours d'exécution sur le port ${port}`);
});

Ce code importe la bibliothèque express, instancie une instance express et commence à écouter le trafic sur le port 3000.

Étape 4: Création de gestionnaires de routage

Vous devrez créer deux gestionnaires de route pour gérer le flux OAuth. Le premier redirige l'utilisateur vers GitHub et demande une autorisation. Le second gère la redirection vers votre application et effectue la demande du jeton d'accès lorsqu'un utilisateur autorise votre application.

Le premier gestionnaire de route doit rediriger l'utilisateur vers https://github.com/login/oauth/authorize? paramètres.

Vous devrez transmettre un ensemble de paramètres requis à l'URL OAuth de GitHub, notamment :

  • ID client: il s'agit de l'ID que votre application OAuth reçoit lorsqu'elle est enregistrée sur GitHub.
  • Portée: il s'agit d'une chaîne qui spécifie le degré d'accès d'une application OAuth aux informations d'un utilisateur. Vous trouverez une liste des champs d'application disponibles dans Documentation OAuth de GitHub. Ici, vous utiliserez un "lire: utilisateur” portée, qui accorde l'accès pour lire les données de profil d'un utilisateur.

Ajoutez le code suivant à votre index.js dossier:

// index.js
app.get("/auth", (req, res) => {
// Stocke les paramètres dans un objet
constante paramètres = {
 portée: "lire: utilisateur",
identité du client: traiter.env.IDENTITÉ DU CLIENT,
 };
// Convertit les paramètres en une chaîne encodée en URL
constante urlEncodedParams = Nouveau URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Ce code implémente le premier gestionnaire de route. Il stocke les paramètres requis dans un objet, les convertissant dans un format codé en URL à l'aide de l'API URLSearchParams. Il ajoute ensuite ces paramètres à l'URL OAuth de GitHub et redirige l'utilisateur vers la page de consentement de GitHub.

Ajoutez le code suivant à votre index.js fichier pour le deuxième gestionnaire de route :

// index.js
app.get("/github-callback", (req, res) => {
constante { code } = req.requête ;
constante corps = {
identité du client: traiter.env.IDENTITÉ DU CLIENT,
client_secret: traiter.env.CLIENT_SECRET,
 code,
 };


laisser jeton d'accès;
 options const = { en-têtes: { accepter: "application/json" } };
axios
 .Publier("https://github.com/login/oauth/access_token", carrosserie, options)
 .then((réponse) => réponse.data.access_token)
 .then((jeton) => {
 accessToken = jeton ;
 res.redirect(`/?token=${jeton}`);
 })
 .attraper((err) => res.status(500).json({ err: err.message }));
});

Le deuxième gestionnaire d'itinéraire extraira le code retourné de GitHub dans le req.query objet. Il fait ensuite un POST demande à l'aide Axios à " https://github.com/login/oauth/access_token" avec le code, identité du client, et client_secret.

La client_secret est une chaîne privée que vous générerez lorsque vous créerez une application GitHub OAuth. Quand le jeton d'accès est récupéré avec succès, il est enregistré dans une variable pour une utilisation ultérieure. L'utilisateur est enfin redirigé vers votre application avec le jeton d'accès.

Étape 5: Création d'une application GitHub

Ensuite, vous devrez créer une application OAuth sur GitHub.

Tout d'abord, connectez-vous à votre compte GitHub, puis accédez à Réglages, faites défiler jusqu'à Paramètres du développeur, et sélectionnez Applications OAuth. Cliquez enfin sur "Enregistrer une nouvelle application.”

GitHub vous fournira un nouveau formulaire de demande OAuth comme celui-ci :

Remplissez les champs obligatoires avec les détails souhaités. La "Page d'accueil URL" devrait être " http://localhost: 3000”. Ton "URL de rappel d'autorisation" devrait être " http://localhost: 3000/github-rappel ». Vous pouvez également éventuellement activer le flux de l'appareil, ce qui vous permet d'autoriser les utilisateurs pour une application sans tête, telle que un outil CLI ou gestionnaire d'informations d'identification Git.

Le flux de l'appareil est en version bêta publique et sujet à modification.

Enfin, appuyez sur le Inscrivez-vous bouton.

GitHub vous dirigera vers une page avec votre identité du client et une option pour générer votre client_secret. Copiez votre identité du client, générez votre client_secret, et copiez-le également.

Créer un fichier .env et stocker le identité du client et client_secret à l'intérieur. Nommez ces variables CLIENT_ID et CLIENT_SECRET respectivement.

Votre flux OAuth est maintenant terminé, et vous pouvez maintenant faire des demandes avec le jeton d'accès pour lire les données de l'utilisateur (le portée vous avez spécifié précédemment).

L'importance d'OAuth 2.0

L'utilisation d'OAuth 2.0 dans votre application simplifie grandement la tâche de mise en œuvre d'un flux d'authentification. Il sécurise les données des utilisateurs de vos clients à l'aide de la norme Secure Sockets Layer (SSL), garantissant leur confidentialité.