web-dev-qa-db-fra.com

Authentification avec React Native et backend API

J'essaie de faire le tour de ma tête oauth avec une React application native et un backend API NodeJS/Express séparé. Je comprends https: //github.com/adamjmcgrath/react-native-simple-auth propose une authentification pour une application React Native et http://passportjs.org/ offre une authentification pour un backend NodeJS. Je ne sais pas comment connecter ces deux pour l'authentification pour la connexion et l'accès à l'API.

Je souhaite que les utilisateurs se connectent à l'application React Native par e-mail et mot de passe ou via Facebook/Twitter/Google. Une fois connecté à l'application, que dois-je envoyer à l'API pour m'assurer ils sont authentifiés et ont accès à un itinéraire spécifique?

Voici un exemple de flux pour vous connecter et voir les paramètres de l'utilisateur connecté:

  1. L'utilisateur se connecte à React Application native via e-mail/mot de passe ou Facebook/Twitter/Google.
  2. L'utilisateur est authentifié
  3. L'application fait une demande à GET/api/settings
  4. L'API vérifie que l'utilisateur est authentifié et renvoie les paramètres de l'utilisateur ou l'API vérifie que l'utilisateur n'est pas authentifié et renvoie un 403.
node.jsoauthreact-nativepassport.js
59
wwwuser

Il y a beaucoup à cette question, à tel point que tout ne rentrerait pas dans une seule réponse SO, mais voici quelques conseils et un aperçu général qui devraient largement correspondre à ce que vous voulez accomplir.

Autorisation OAuth2

D'après les sons de celui-ci, vous êtes intéressé à utiliser OAuth 2 pour fournir une connexion sociale autorisation, et vous aimeriez faire de l'authenticité authentification comme alternative avec un email et un mot de passe. Pour les connexions sociales, vous finirez par utiliser le flux implicite OAuth 2 pour récupérer un jeton d'accès, qui est un modèle largement reconnu. Parce que vous cherchez également à authentifier = utilisateurs avec un e-mail et un mot de passe, vous voudrez peut-être vous familiariser avec OpenID Connect, qui est une extension de OAuth 2 et qui prend explicitement en charge l'authentification en plus de l'autorisation.

Dans les deux cas, une fois que votre utilisateur a soumis un combo e-mail/mot de passe ou accordé une autorisation via les fournisseurs d'identité sociale, vous recevrez en réponse un jeton d'accès et (éventuellement) un Jeton d'identification. Les jetons, probablement un JWT (JSON Web Token, voir jwt.io ) apparaîtront comme une chaîne codée en base64 que vous pouvez décoder pour inspecter les résultats du JWT, qui comprendra des éléments comme l'ID de l'utilisateur et d'autres détails comme l'adresse e-mail, le nom, etc.

Pour plus d'informations sur les différents types de flux, voir cet excellent aperçu sur Digital Ocean .

Utilisation de jetons pour l'authentification API

Maintenant que vous disposez d'un jeton d'accès, vous pouvez le transmettre avec toutes les demandes à votre API pour démontrer que vous vous êtes correctement authentifié. Pour ce faire, transmettez le jeton d'accès dans vos en-têtes HTTP, en particulier l'en-tête Authorization, en faisant précéder votre jeton d'accès codé en base64 (ce que vous avez initialement reçu en réponse à votre demande d'autorisation) avec Bearer. Donc, l'en-tête ressemble à ceci:

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJh...

Du côté de votre API, vous recevrez ce jeton, le décoderez, puis vérifier l'ID et les revendications qu'il contient. Passé dans le cadre du jeton dans la propriété sub sera le subject, ou l'ID de l'utilisateur effectuant la demande. C'est ainsi que vous identifiez l'accès et commencez à faire des choses de votre côté API avec les droits d'utilisateur respectifs, les autorisations, etc. Il est également important que vous validez le jeton d'accès une fois que vous l'avez reçu de votre côté API, pour vous assurer qu'il n'a pas été usurpé ou fabriqué à la main.

A quoi cela ressemble dans RN pour les flux implicites

Voici à quoi ressemble le processus général dans React Native pour OAuth 2 flux implicites, ce que vous utiliserez pour les fournisseurs d'identité sociale:

  1. L'utilisateur appuie sur l'un de vos boutons de connexion sociale sur React Native UI
  2. Votre code qui répond aux boutons créera une URL de demande à ces fournisseurs, selon ce que chacun veut (car il diffère légèrement).
  3. En utilisant l'API Linking dans RN, vous ouvrirez cette URL dans un navigateur sur l'appareil qui envoie l'utilisateur au fournisseur social pour qu'il fasse la danse de connexion/autorisation.
  4. Une fois terminé, le fournisseur social redirigera l'utilisateur vers une URL que vous avez fournie. Sur un appareil mobile, vous utiliserez votre propre schéma d'URL personnalisé pour déplacer l'utilisateur de la vue Web vers votre application. Ce schéma est quelque chose que vous enregistrez dans le cadre de votre application, tel que my-awesome-app://, et l'URL de redirection que vous transmettez au fournisseur de services sociaux pourrait ressembler à my-awesome-app://auth_complete/. Voir la documentation de l'API de liaison pour savoir comment configurer ces schémas d'URL et liens profonds.
  5. Dans le gestionnaire de ce nouveau schéma d'URL/lien profond, vous obtiendrez les jetons transmis dans le cadre de l'URL. À la main ou à l'aide d'une bibliothèque, analysez les jetons de l'URL et stockez-les dans votre application. C'est à ce stade que vous pouvez commencer à les inspecter en tant que JWT et les transmettre dans les en-têtes HTTP pour l'accès à l'API.

A quoi cela ressemble dans RN pour les flux d'octroi de mot de passe du propriétaire de la ressource

Vous avez la possibilité, pour votre combinaison e-mail/mot de passe pour vos propres comptes, de vous en tenir au flux implicite ou de basculer vers le flux d'octroi de mot de passe du propriétaire de la ressource si votre API et votre application sont approuvées l'une par l'autre. , ce qui signifie que vous créez à la fois l'application et l'API. Je préfère le flux ROPG sur les applications mobiles lorsque cela est possible parce que l'UX est beaucoup plus agréable - vous n'avez pas à ouvrir une vue Web distincte, il vous suffit de les taper leur e-mail et leur mot de passe dans les éléments d'interface utilisateur directement dans l'application. Cela étant dit, voici à quoi cela ressemble:

  1. L'utilisateur appuie sur le bouton de connexion combinée e-mail/mot de passe, et RN répond avec une interface utilisateur qui inclut des entrées de texte pour l'e-mail et le mot de passe
  2. Créez une POST à votre serveur d'autorisation (qui peut être votre API ou un serveur distinct) qui inclut l'URL correctement conçue et les détails du corps qui passent le long de l'e-mail et du mot de passe. demande.
  3. Le serveur d'authentification répondra avec les jetons associés dans le corps de réponse. À ce stade, vous pouvez faire la même chose que précédemment à l'étape 5 ci-dessus, où vous stockez les jetons pour une utilisation ultérieure dans les demandes d'API et les inspectez pour trouver les informations utilisateur pertinentes.

Comme vous pouvez le voir, le ROPG est plus simple, mais ne doit être utilisé que dans des scénarios hautement fiables.

À l'API

Du côté de l'API, vous inspectez le jeton dans l'en-tête Autorisation, et comme mentionné précédemment, et s'il est trouvé, vous supposez que l'utilisateur a été authentifié. Il est toujours recommandé de valider et de vérifier le jeton et les autorisations utilisateur. S'il n'y a pas de jeton envoyé avec la demande, ou si le jeton envoyé a expiré, vous rejetez la demande.

J'espère que ça t'as aidé! Il y en a certainement une tonne, mais cela donne un aperçu général.

83
Joshua