Le nombre d'applications Web avec une architecture d'application à une seule page augmente. Ces applications nécessitent souvent un certain degré d'interaction restreinte par l'utilisateur, telles que le stockage des détails du profil utilisateur. La mise en ?uvre de cette fonctionnalité dans les applications basées sur HTML traditionnelles est relativement simple, mais elle est encore plus délicate dans les applications d'une seule page qui nécessitent une authentification pour chaque demande d'API.

Cet article démontrera une technique qui utilise la bibliothèque Passport.js pour implémenter des connexions sociales pour plusieurs fournisseurs et ainsi implémenter une authentification basée sur des jetons des appels API ultérieurs.

Tous les codes source de cet article sont disponibles en téléchargement à partir de notre référentiel GitHub.

Points clés

• Utilisez la bibliothèque Passport.js pour implémenter la connexion sociale pour Google et Facebook, et améliorez l'authentification des utilisateurs pour les applications à une seule page.
• Sélectionnez des jetons Web JSON (JWT) pour l'authentification API basée sur les jetons sécurisés, en évitant les restrictions basées sur la session et les cookies.
• Utiliser des fonctionnalités de connexion sociale: interface utilisateur simplifiée, pas besoin de stocker des informations d'identification des utilisateurs et de réinitialisation de mot de passe inter-sites.
• Configurer le passeport avec des modules spécifiques tels que Passport-Google-OAuth, Passport-FaceBook et Passport-JWT pour gérer l'authentification et la génération de jetons.
• Utilisez le module Passport-JWT pour implémenter l'authentification basée sur les jetons, protégeant les points de terminaison de l'API en vérifiant le JWT dans l'en-tête d'autorisation.
• Simplifiez l'expérience utilisateur avec le mode de redirection et les scripts clients.

Pourquoi utiliser la connexion sociale dans votre spa?

De nombreux problèmes doivent être pris en compte lors de la mise en ?uvre du mécanisme de connexion dans votre application Web.

• Comment votre UI devrait-elle gérer l'authentification elle-même?
• Comment devez-vous stocker des informations utilisateur?
• Comment devriez-vous mieux protéger les informations d'identification des utilisateurs?

Ces questions et plus doivent être prises en compte avant de commencer à écrire un portail de connexion. Mais, il y a une meilleure fa?on.

De nombreux sites Web, principalement des réseaux sociaux, vous permettent d'utiliser leur plate-forme pour vérifier vos propres applications. Ceci est mis en ?uvre via de nombreuses API différentes - OAuth 1.0, OAuth 2.0, OpenID, OpenID Connect, etc.

Il existe de nombreux avantages à mettre en ?uvre votre processus de connexion en utilisant ces technologies de connexion sociales.

• Vous n'êtes plus responsable de la présentation de l'interface utilisateur que les utilisateurs utilisent pour s'authentifier.
• Vous n'êtes plus responsable du stockage et de la protection des détails des utilisateurs sensibles.
• Les utilisateurs peuvent accéder à plusieurs sites à l'aide d'une seule connexion.
• Si les utilisateurs estiment que leur mot de passe a été divulgué, ils peuvent réinitialiser leur mot de passe une fois et bénéficier de nombreux sites.
• Habituellement, les services qui fournissent des capacités d'authentification fourniront des détails supplémentaires. Par exemple, cela peut être utilisé pour enregistrer automatiquement les utilisateurs qui n'ont jamais utilisé votre site Web ou pour vous permettre de publier des mises à jour de leurs profils en leur nom.

Pourquoi utiliser une authentification basée sur des jetons pour votre API?

Chaque fois qu'un client a besoin d'accéder à votre API, vous avez besoin d'un moyen de déterminer qui il est et de permettre l'accès ou non. Il existe de nombreuses fa?ons d'y parvenir, mais les principales options sont:

• Authentification basée sur la session
• Authentification basée sur les cookies
• Authentification basée sur les jetons

L'authentification basée sur la session nécessite que votre service API associe la session au client. Ceci est généralement très facile à configurer, mais si vous déployez votre API sur plusieurs serveurs, vous pouvez avoir des problèmes. Vous êtes également limité par les mécanismes utilisés par le serveur pour la gestion et l'expiration de session, qui peuvent ne pas être sous votre contr?le.

L'approche basée sur les cookies est que vous stockez simplement certains identifiants dans le cookie, qui sera utilisé pour identifier automatiquement la demande d'API. Cela signifie que vous avez besoin d'une sorte de mécanisme pour définir d'abord les cookies, et vous pouvez le fuir dans les demandes suivantes, car les cookies sont automatiquement inclus dans toutes les demandes (appropriées) au même h?te.

L'approche basée sur les jetons est une variante de l'authentification basée sur les cookies, mais elle vous donne plus de contr?le. Essentiellement, vous générez le jeton de la même manière qu'un système d'authentification basé sur des cookies, mais vous vous incluez dans la demande - généralement dans l'en-tête "Autorisation" ou directement dans l'URL. Cela signifie que vous avez un contr?le total sur le jeton de stockage, quelles demandes l'incluront, et plus encore.

Remarque: Même si l'en-tête HTTP est appelé "autorisation", nous l'utilisons réellement pour l'authentification. En effet, nous l'utilisons pour déterminer qui est le client, pas ce que le client est autorisé à faire.

La stratégie utilisée pour générer des jetons est également importante. Ces jetons peuvent être des jetons de référence, ce qui signifie qu'ils ne sont rien de plus que des identifiants utilisés par le serveur pour trouver les véritables détails. Ou un jeton complet, ce qui signifie que le jeton contient déjà toutes les informations nécessaires.

Les jetons de référence ont un avantage de sécurité significatif car les informations d'identification des utilisateurs ne sont jamais divulguées au client. Cependant, comme vous devez analyser le jeton dans les informations d'identification réelles dans chaque demande faite, il y a une pénalité de performance.

Le jeton complet est le contraire. Ils exposent les informations d'identification des utilisateurs à tous ceux qui comprennent le jeton, mais comme le jeton est terminé, il n'y a pas de perte de performances lors de la recherche.

Habituellement, les jetons complets seront implémentés à l'aide de la norme JSON Web Tokens, car cette norme permet une meilleure sécurité des jetons. Plus précisément, JWT autorise les jetons de chiffrement, ce qui signifie que vous pouvez garantir que le jeton n'a pas été falsifié. Il est également stipulé qu'ils peuvent être cryptés, ce qui signifie que le jeton ne peut même pas être décodé sans clé de chiffrement.

Si vous souhaitez consulter à l'aide de JWT dans Node, consultez notre tutoriel: à l'aide de jetons Web JSON avec Node.js.

Un autre inconvénient de l'utilisation d'un jeton complet est la taille. Par exemple, un jeton de référence peut être implémenté à l'aide d'un UUID, qui mesure 36 caractères. Au lieu de cela, JWT peut facilement être aussi longue que des centaines de personnages.

Dans cet article, nous utiliserons les jetons JWT pour démontrer comment ils fonctionnent. Cependant, lorsque vous implémentez cette fonction vous-même, vous devez décider si vous souhaitez utiliser un jeton de référence ou un jeton complet et quel mécanisme sera utilisé pour cela.

Qu'est-ce que le passeport?

Le passeport est un ensemble de modules dans Node.js pour l'authentification dans votre application Web. Il peut brancher très facilement de nombreux serveurs Web basés sur des n?uds et utiliser une structure modulaire pour implémenter le mécanisme de connexion dont vous avez besoin sans ballonnements excessifs.

Passport est une puissante suite de modules qui couvre un grand nombre de besoins d'authentification. En utilisant ces modules, nous pouvons créer une configuration enfichable qui permet différentes exigences d'authentification pour différents points de terminaison. Le système d'authentification utilisé peut être aussi simple que de simplement vérifier les valeurs spéciales dans l'URL, ou aussi complexes que de compter sur un fournisseur tiers pour faire tout le travail.

Dans cet article, nous utiliserons les modules Passport-Google-OAuth, Passport-FaceBook et Passport-JWT pour permettre à la connexion sociale et à l'authentification basée sur les jetons JWT pour les points de terminaison API.

Le module Passport-JWT sera utilisé pour exiger que certains points de terminaison - les points de terminaison API dont nous avons réellement besoin d'authentification pour accéder - un JWT valide doit exister dans la demande. Les modules Passport-Google-OAuth et Passport-Facebook seront utilisés pour fournir des points de terminaison qui s'authentifient respectivement contre Google et Facebook, puis générer des JWT qui peuvent être utilisés pour accéder à d'autres points de terminaison de l'application.

Activer la connexion sociale pour votre application de page unique

d'ici, nous parcourons la fa?on d'obtenir une application simple de page unique et d'implémenter la connexion sociale pour cela. Cette application est écrite dans Express, une API simple fournit un point de terminaison sécurisé et un point de terminaison dangereux. Si vous souhaitez continuer, vous pouvez consulter le code source de cette application à partir de https://github.com/sitepoint-editors/social-logins-spa. Cette application peut être construite en exécutant l'installation de NPM dans le code source téléchargé - téléchargeant toutes les dépendances - puis en exécutant en exécutant le n?ud src / index.js.

Pour utiliser avec succès l'application, vous devez enregistrer les informations d'identification de connexion sociale avec Google et Facebook et fournir les informations d'identification à l'application. Les instructions complètes peuvent être trouvées dans le fichier ReadMe de l'application de démonstration. Ces informations d'identification sont accessibles en tant que variables d'environnement. Par conséquent, l'application peut être exécutée comme suit:

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

Le résultat final de ce processus est d'ajouter une prise en charge d'authentification des token (à l'aide de jetons Web JSON) à notre point de terminaison sécurisé, puis d'ajouter un support de connexion sociale (en utilisant Google et Facebook) pour obtenir le reste de l'utilisation de l'approvisionnement de jetons. Cela signifie que vous devez vous authentifier une fois à l'aide d'un fournisseur social, puis utiliser le JWT généré pour passer tous les futurs appels d'API dans l'application.

JWT est un choix particulièrement bon pour nos scénarios car ils sont complètement autonomes tout en étant en sécurité. JWT se compose de la charge utile JSON et de la signature cryptée. La charge utile contient les détails de l'utilisateur authentifié, du système d'authentification et de la période de validité du jeton. La signature garantit alors qu'un tiers malveillant ne peut pas le forger - seulement la personne qui a la clé de signature peut générer le jeton.

Lors de la lecture de cet article, vous verrez souvent des références au module config.js contenu dans le cadre de votre application. Ce module est utilisé pour configurer l'application et est configuré à l'extérieur à l'aide du module de conviction de n?ud. La configuration utilisée dans cet article est la suivante:

• http.port - Le port où l'application s'exécute. La valeur par défaut est 3000 et est remplacée par la variable d'environnement "port".
• authentication.google.clientid - ID client Google pour l'authentification Google. Ceci est fourni à l'application via la variable d'environnement "Google_Clientid".
• Authentication.google.ClientSecret - Key Client Google pour l'authentification Google. Ceci est fourni à l'application via la variable d'environnement "Google_ClientSecret".
• authentication.facebook.clientid - ID du client Facebook pour l'authentification Facebook. Ceci est fourni à l'application via la variable d'environnement "Facebook_Clientid".
• Authentication.facebook.ClientSecret - Clé client Facebook pour l'authentification Facebook. Ceci est fourni à l'application via la variable d'environnement "Facebook_ClientSecret".
• Authentication.token.Secret - La clé du JWT qui signe notre jeton d'authentification. La valeur par défaut est "MySupersecretKey".
• Authentication.token.issuer - L'émetteur stocké dans JWT. Cela indique quel service émet le jeton, dans le cas où un service d'authentification sert de nombreuses applications.
• Authentication.token.Audience - Public stocké dans JWT. Cela représente le service cible du jeton, dans le cas où un service d'authentification sert de nombreuses applications.

Passeport intégré

Une petite quantité de paramètres est requise avant d'utiliser le passeport dans votre application. Ce n'est rien de plus que de s'assurer que le module est installé et d'initialiser le middleware dans votre application Express.

Les modules requis à ce stade sont les modules de passeport, puis pour configurer le middleware, nous avons juste besoin de l'ajouter à notre application Express.

// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());

Si vous suivez les instructions sur le site Web du passeport, vous serez autorisé à configurer le support de session - en appelant à l'aide de Passport.Session (). Nous n'utilisons aucun support de session dans notre application, donc ce n'est pas nécessaire. En effet, nous mettons en ?uvre une API sans état, nous allons donc fournir une authentification pour chaque demande au lieu de le persister dans la session.

Implémentez l'authentification du jeton JWT pour les points de terminaison sécurisés

La configuration de l'authentification du jeton JWT avec Passport est relativement simple. Nous utiliserons le module Passport-JWT, qui fera tout le travail lourd pour nous. Ce module recherche l'en-tête "Autorisation" avec une valeur commen?ant par "JWT" ??et traite le reste de l'en-tête comme un jeton JWT pour l'authentification. Il décode ensuite le JWT et fournit les valeurs stockées là-bas à votre propre code pour les opérations, par exemple, effectuant des recherches d'utilisateurs. Si le JWT n'est pas valide, comme une signature non valide, le jeton a expiré ... la demande ne sera pas authentifiée sans implication supplémentaire de votre propre code.

Ensuite, la méthode pour configurer l'authentification du jeton JWT est la suivante:

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

ci-dessus, nous avons utilisé certains modules internes:

• config.js - contient des propriétés de configuration pour l'ensemble de notre application. On peut supposer que ces propriétés ont été configurées et que les valeurs peuvent être utilisées à tout moment.
• utilisateurs.js - Il s'agit du stockage utilisateur de l'application. Cela permet aux utilisateurs d'être chargés et créés - ici, nous chargeons simplement les utilisateurs par leur ID interne.

Ici, nous configurons le décodeur JWT avec des clés, des éditeurs et des publics connus, et nous informons la politique qu'elle devrait obtenir le JWT de l'en-tête d'autorisation. Si l'éditeur ou le public ne correspond pas à ce qui est stocké dans le JWT, l'authentification échouera. Cela nous donne une autre couche de protection anti-contrefa?on, bien qu'il s'agisse d'une protection très simple.

est entièrement traité par le module Passport-JWT. Parce que JWT est une norme, tout module qui suit cette norme fonctionne parfaitement.

Après avoir réussi à décoder le jeton, il sera transmis à notre rappel en tant que charge utile. Ici, nous essayons simplement de trouver des utilisateurs identifiés par le "sujet" dans le jeton. En fait, vous pouvez effectuer des vérifications supplémentaires, comme vous assurer que le jeton n'est pas révoqué.

Si l'utilisateur est trouvé, nous le fournissons au passeport et le passeport le fournit alors au reste du traitement de la demande en tant que req.User. Si l'utilisateur n'est pas trouvé, nous ne fournissons aucun utilisateur au passeport et le passeport considérera, alors l'échec de l'authentification.

Cela peut désormais se connecter au gestionnaire de demandes afin que la demande nécessite l'authentification pour réussir:

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

La ligne 3 ci-dessus est la magie pour faire en sorte que le passeport gère la demande. Cela fait que le passeport exécute la stratégie "JWT" ??que nous venons de configurer sur la demande que nous avons adoptée et de lui permettre de continuer ou d'échouer immédiatement.

Nous pouvons voir comment cela fonctionne en exécutant l'application - en exécutant le n?ud src / index.js - et en essayant d'accéder à cette ressource:

// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());

Nous n'avons fourni aucun en-têtes d'autorisation, cela ne nous permet pas de continuer. Cependant, si vous fournissez un en-tête d'autorisation valide, vous obtiendrez une réponse réussie:

// src/authentication/jwt.js
const passport = require('passport');
const passportJwt = require('passport-jwt');
const config = require('../config');
const users = require('../users');

const jwtOptions = {
  // 從 "Authorization" 標(biāo)頭獲取 JWT。
  // 默認(rèn)情況下，這會查找 "JWT " 前綴
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于簽署 JWT 的密鑰
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存儲的發(fā)行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存儲的受眾
  audience: config.get('authentication.token.audience')
};

passport.use(new passportJwt.Strategy(jwtOptions, (payload, done) => {
  const user = users.getUserById(parseInt(payload.sub));
  if (user) {
      return done(null, user, payload);
  }
  return done();
}));

Pour effectuer ce test, j'ai généré manuellement un JWT en visitant https://www.jsonwebtoken.io et en remplissant le formulaire là-bas. "Payage" est ce que j'utilise:

// src/index.js
app.get('/api/secure',
  // 此請求必須使用 JWT 進(jìn)行身份驗證，否則我們將失敗
  passport.authenticate(['jwt'], { session: false }),
  (req, res) => {
    res.send('Secure response from ' + JSON.stringify(req.user));
  }
);

"Signature Key" est "MySupersecretKey", tiré de la configuration.

Support Génération de jeton

Maintenant, nous ne pouvons accéder aux ressources qu'avec des jetons valides, nous avons besoin d'un moyen de générer réellement le jeton. Cela se fait à l'aide du module JSONWebtoken, qui construit un JWT avec les détails corrects et signé avec la même clé que ci-dessus.

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

Notez que nous utilisons exactement le même public, émetteur et paramètres de configuration de clé lors de la génération de JWT. Nous spécifions également que la période de validité de JWT est d'une heure. Cela peut être à n'importe quelle période que vous pensez être raisonnable pour votre application, et peut même être extrait de la configuration afin qu'il puisse être facilement modifié.

Dans ce cas, aucun ID JWT n'est spécifié, mais cela peut être utilisé pour générer un ID complètement unique pour le jeton - par exemple en utilisant un UUID. Cela vous donne alors un moyen de révoquer le jeton et de stocker une collection d'identifiants révoqués dans le montant de données et de vérifier si l'ID JWT n'est pas dans la liste lors du traitement du JWT dans la politique de passeport.

Fournisseur de connexion sociale

Maintenant que nous avons la possibilité de générer des jetons, nous avons besoin d'un moyen pour que l'utilisateur se connecte réellement. C'est là que les fournisseurs de connexions sociales entrent en jeu. Nous ajouterons une fonctionnalité qui permet aux utilisateurs de rediriger vers les fournisseurs de connexions sociales et de générer un jeton JWT lors du succès et de le fournir au moteur JavaScript du navigateur pour les demandes futures. Nous avons déjà presque tous ces composants, nous avons juste besoin de les assembler.

Le fournisseur de connexion sociale du passeport est divisé en deux parties. Tout d'abord, vous devez réellement configurer le passeport pour votre fournisseur de connexion sociale à l'aide du plugin approprié. Deuxièmement, l'itinéraire express vers lequel l'utilisateur est dirigé est nécessaire pour initier l'authentification, et l'itinéraire vers lequel l'utilisateur est redirigé après le succès de l'authentification.

Nous ouvrirons ces URL dans une nouvelle fenêtre de sous-rupture, que nous pouvons fermer lorsque nous avons terminé et être en mesure d'appeler la méthode JavaScript à l'intérieur de la fenêtre où elle est ouverte. Cela signifie que le processus est relativement transparent pour l'utilisateur - tout au plus, il verra une nouvelle fenêtre ouverte, leur demandant de fournir des informations d'identification, mais mieux ils ne voient que le fait qu'ils sont maintenant connectés.

L'aspect de ce navigateur doit être composé de deux parties. Vue de la fenêtre contextuelle et JavaScript qui gère cette vue dans la fenêtre principale. Cela peut être facilement intégré à n'importe quel cadre, mais dans cet exemple, nous utiliserons Vanilla JavaScript pour une simplicité.

La page principale javascript ne nécessite que quelque chose comme ceci:

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

Cela enregistre un objet de fonction global (nommé AuthenticateCallback) sur la fenêtre, qui stockera le jeton d'accès, puis ouvre notre itinéraire pour démarrer l'authentification, nous accédons / API / Authentication / {Provider} / Démarrer.

Cette fonction peut ensuite être déclenchée de toutes les manières dont vous souhaitez initier l'authentification. Il s'agit généralement d'un lien de connexion dans la zone de titre, mais les détails dépendent entièrement de votre application.

La deuxième partie est la vue à présenter après une authentification réussie. Dans ce cas, nous utilisons la moustache pour la simplicité, mais cela utilisera toute technique de visualisation qui vous convient le mieux.

# Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js

Ici, nous n'avons qu'un simple code JavaScript qui appelle la méthode AuthenticateCallback ci-dessus sur le programme ouvert (c'est-à-dire la fenêtre d'application principale), puis nous nous cl?turons.

à ce stade, le jeton JWT sera disponible dans la fenêtre d'application principale à tout but que vous souhaitez.

Implémentez l'authentification Google

L'utilisation du module Passport-Google-OAuth s'authentifiera contre Google. Cela nécessite trois informations:

• ID client
• clé du client
• rediriger l'URL

L'ID client et la clé sont obtenus en enregistrant votre application dans la console de développeur Google. Une URL de redirection est l'URL que l'utilisateur sera renvoyée à votre application après s'être connectée à ses informations d'identification Google. Cela dépendra de la fa?on et de la fa?on dont l'application est déployée, mais maintenant nous le cocoterons.

Notre configuration de passeport Google Authentication ressemblera alors à ceci:

# Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js

Lorsque les utilisateurs nous redirigent après une authentification réussie, nous obtiendrons leur identifiant et certaines informations de profil dans le système Google. Nous essayons d'abord de voir si cet utilisateur a été connecté auparavant. Si c'est le cas, nous obtenons leurs enregistrements d'utilisateurs et nous avons terminé. Sinon, nous enregistrerons un nouveau compte pour eux et nous utiliserons ce nouveau compte. Cela nous fournit un mécanisme transparent où l'enregistrement de l'utilisateur est effectué lors de la première connexion. Nous pouvons le faire de différentes manières si nous en avons besoin, mais ce n'est pas nécessaire maintenant.

La prochaine consiste à configurer le gestionnaire de routage pour gérer cette connexion. Celles-ci ressembleront à ceci:

// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());

Veuillez noter les routes de / API / Authentication / Google / Démarrer et / API / Authentication / GOGLE / Redirection. Comme mentionné ci-dessus, la variante / démarrage est l'URL que nous ouvrons, et la variante / redirection est l'URL que Google redirige l'utilisateur sur le succès. Cela rendra ensuite la vue authentifiée que nous montrons ci-dessus, fournissant le JWT généré pour son utilisation.

Implémentez l'authentification Facebook

Maintenant que nous avons le premier fournisseur de connexion sociale, développez-nous et en ajoutons un second. Cette fois, ce sera Facebook, en utilisant le module Passport-Facebook.

Ce module fonctionne presque de la même manière que les modules Google, nécessitant la même configuration et les mêmes paramètres. La seule vraie différence est qu'il s'agit d'un module différent et de la structure d'URL qui y accède est différente.

Pour configurer l'authentification Facebook, vous avez également besoin de l'ID client, de la clé du client et de l'URL de redirection. L'ID client et la clé du client (appelé ID d'application et clé d'application sur Facebook) peuvent être obtenus en créant des applications Facebook dans la console de développeur Facebook. Vous devez vous assurer que le produit de connexion Facebook est ajouté à votre application pour le faire fonctionner.

Notre configuration du passeport d'authentification Facebook sera:

// src/authentication/jwt.js
const passport = require('passport');
const passportJwt = require('passport-jwt');
const config = require('../config');
const users = require('../users');

const jwtOptions = {
  // 從 "Authorization" 標(biāo)頭獲取 JWT。
  // 默認(rèn)情況下，這會查找 "JWT " 前綴
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于簽署 JWT 的密鑰
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存儲的發(fā)行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存儲的受眾
  audience: config.get('authentication.token.audience')
};

passport.use(new passportJwt.Strategy(jwtOptions, (payload, done) => {
  const user = users.getUserById(parseInt(payload.sub));
  if (user) {
      return done(null, user, payload);
  }
  return done();
}));

C'est presque la même chose que la configuration de Google, sauf que "Facebook" est utilisé à la place de "Google". Le routage d'URL est également similaire:

// src/index.js
app.get('/api/secure',
  // 此請求必須使用 JWT 進(jìn)行身份驗證，否則我們將失敗
  passport.authenticate(['jwt'], { session: false }),
  (req, res) => {
    res.send('Secure response from ' + JSON.stringify(req.user));
  }
);

Ici, nous n'avons pas besoin de spécifier la plage que nous voulons utiliser, car l'ensemble par défaut est assez bon. Sinon, la configuration entre Google et Facebook est presque la même.

Résumé

Utilisez des fournisseurs de connexions sociales pour ajouter rapidement et facilement la connexion et l'enregistrement de l'utilisateur à votre application. En fait, cela utilise la redirection du navigateur pour envoyer des utilisateurs aux fournisseurs de connexions sociales, puis les renvoie à votre application, ce qui permet de les intégrer dans des applications à page unique, même si elle est intégrée dans des applications plus traditionnelles relativement faciles.

Cet article montre un moyen d'intégrer ces fournisseurs de connexions sociales dans une application d'une seule page qui promet d'être à la fois facile à utiliser et facile à évoluer pour les futurs fournisseurs que vous voudrez peut-être utiliser. Passport a beaucoup de modules qui peuvent fonctionner avec différents fournisseurs, et il s'agit simplement de trouver le bon module et de le configurer comme nous l'avons fait ci-dessus avec Google et Facebook.

Cet article a été évalué par des pairs par James Kolce. Merci à tous les évaluateurs de pairs SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur

FAQ sur l'intégration de la connexion sociale (FAQ)

Quels sont les avantages de l'intégration de la connexion sociale dans mon application Web?

L'intégration de la connexion sociale dans votre application Web peut apporter plusieurs avantages. Tout d'abord, cela simplifie le processus d'enregistrement pour les utilisateurs car ils peuvent s'inscrire avec un compte social existant sans se souvenir d'un autre nom d'utilisateur et mot de passe. Deuxièmement, il peut améliorer les taux de conversion, car un processus d'enregistrement simplifié peut encourager davantage d'utilisateurs à s'inscrire. Enfin, cela vous donne accès aux données des utilisateurs dans leurs profils de médias sociaux qui peuvent être utilisés pour personnaliser leur expérience sur votre site Web.

Comment assurer la sécurité des données des utilisateurs lors de l'utilisation de la connexion sociale?

Il est crucial d'assurer la sécurité des données utilisateur lors de l'intégration des connexions sociales. Vous pouvez le faire en authentifiant à l'aide de protocoles sécurisés tels que OAuth 2.0, qui garantit que le mot de passe utilisateur n'est pas partagé avec votre application. De plus, vous ne devez demander que la quantité minimale de données utilisateur requise par l'application et vous assurer que ces données sont stockées en toute sécurité.

Puis-je intégrer plusieurs connexions sociales dans mon application Web?

Oui, vous pouvez intégrer plusieurs connexions sociales dans votre application Web. Cela peut fournir aux utilisateurs plus de choix et augmenter la probabilité de leur enregistrement. Cependant, il est important de s'assurer que l'expérience utilisateur reste transparente, quelle que soit la connexion sociale que l'utilisateur choisit d'utiliser.

Comment gérer les utilisateurs avec plusieurs comptes de médias sociaux?

Le traitement des utilisateurs avec plusieurs comptes de médias sociaux peut être difficile. Une solution consiste à permettre aux utilisateurs de relier plusieurs comptes de médias sociaux à un seul compte sur votre application. De cette fa?on, ils ont la possibilité de se connecter avec n'importe quel compte lié.

Que se passe-t-il si un utilisateur désactive son compte de médias sociaux?

Si les utilisateurs désactivent leur compte de médias sociaux, ils ne pourront plus utiliser le compte pour se connecter à votre application. Pour gérer cela, vous pouvez donner aux utilisateurs la possibilité d'ajouter une adresse e-mail ou un numéro de téléphone à leur compte, et s'ils désactivent leur compte de médias sociaux, vous pouvez vous connecter avec ces informations.

Comment personnaliser l'apparence des boutons de connexion sociale?

CSS peut être utilisé pour personnaliser l'apparence du bouton de connexion sociale. Cependant, assurez-vous de suivre les directives de la marque fournies par les plateformes de médias sociaux. Par exemple, le logo "F" de Facebook doit toujours être utilisé dans sa forme d'origine et ne doit en aucun cas être modifié.

Puis-je utiliser la connexion sociale pour les applications mobiles?

Oui, la connexion sociale peut être utilisée pour les applications Web et mobiles. Le processus d'intégration de la connexion sociale dans une application mobile est similaire à celui d'une application Web, mais vous devrez peut-être utiliser un SDK spécifique fourni par la plate-forme de médias sociaux.

Comment tester la fonction de connexion sociale?

Vous pouvez tester la fonction de connexion sociale en créant des comptes de test sur les plateformes de médias sociaux et en utilisant ces comptes pour vous connecter à votre application. Cela peut vous aider à identifier les problèmes ou les erreurs avant le début de l'application.

Que dois-je faire si l'utilisateur oublie de s'inscrire avec quel compte de médias sociaux utiliser?

Si les utilisateurs oublient avec quel compte de médias sociaux avec qui vous inscrivez, vous pouvez fournir une option de récupération qui leur permet de saisir leur adresse e-mail ou leur numéro de téléphone pour recevoir une liste de comptes de médias sociaux liés à leur compte.

Puis-je intégrer la connexion sociale sans codage?

Bien que certains outils et plugins puissent être utilisés pour intégrer la connexion sociale sans codage, il peut être avantageux de conna?tre certaines connaissances de codage. Cela peut vous donner plus de flexibilité et de contr?le sur le processus d'intégration, et peut également vous aider à résoudre tous les problèmes qui peuvent survenir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!