Authentification avec React Native et backend API

J’essaie de comprendre oauth avec une application React Native et un backend API distinct NodeJS / Express. Je comprends que https://github.com/adamjmcgrath/react-native-simple-auth offre une authentification pour une application React Native et que http://passportjs.org/ offre une authentification pour un backend NodeJS. Je ne sais pas comment connecter ces deux-là pour l’authentification pour la connexion et l’access à l’API.

J’aimerais 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 qu’ils sont authentifiés et avoir access à un itinéraire spécifique?

Voici un exemple de stream pour vous connecter et voir les parameters de l’utilisateur connecté:

  1. L’utilisateur se connecte à l’application React Native via email / mot de passe ou Facebook / Twitter / Google.
  2. L’utilisateur est authentifié
  3. App demande à GET / api / settings
  4. L’API vérifie que l’utilisateur est authentifié et renvoie les parameters de cet utilisateur ou que l’API vérifie que l’utilisateur n’est pas authentifié et renvoie un 403.

Il y a beaucoup à cette question, à tel point que tout ne correspondrait pas à 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

De par le son, vous êtes intéressé par l’utilisation de OAuth 2 pour fournir une autorisation de connexion sociale, et vous souhaitez faire une authentification par une tierce partie avec une adresse électronique et un mot de passe. Pour les connexions sociales, vous utiliserez le stream OAuth 2 Implicit pour récupérer un jeton d’access, qui est un modèle largement reconnu. Comme vous souhaitez également authentifier les utilisateurs avec un e-mail et un mot de passe, vous pouvez 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 envoyé un combo email / mot de passe ou obtenu une autorisation via les fournisseurs d’identité sociale, vous recevrez en réponse un jeton d’access et (éventuellement) un jeton d’identification . Les jetons, probablement un JWT (JSON Web Token, voir jwt.io ), apparaîtront sous la forme d’une chaîne codée en base64 que vous pourrez décoder pour examiner les résultats du JWT, y compris des éléments tels que adresse email, nom, etc.

Pour plus d’informations sur les différents types de stream, consultez cet excellent aperçu sur Digital Ocean .

Utilisation de jetons pour l’authentification API

Maintenant que vous avez un jeton d’access, vous pouvez le transmettre avec toutes les demandes à votre API pour démontrer que vous vous êtes authentifié correctement. Vous le ferez en transmettant le jeton d’access dans vos en-têtes HTTP, en particulier l’en-tête Authorization , en préfaçant votre jeton d’access codé en base64 (ce que vous avez reçu en réponse à votre demande d’autorisation) à Bearer . L’en-tête ressemble donc à ceci:

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJh...

Du côté de votre API, vous recevrez ce jeton, vous le décoderez, puis vous vérifierez l’ID et les revendications. Passé en tant que partie du jeton dans la sub propriété sera l’ object ou l’ID de l’utilisateur qui fait la demande. C’est ainsi que vous identifiez l’access et que vous commencez à faire les choses du côté de l’API avec les droits, perms, etc. respectifs. Il est également important de valider le jeton d’access une fois que vous l’avez reçu. usurpé ou fabriqué à la main.

Comment ça se passe dans RN pour les stream implicites

Voici à quoi ressemble le processus général dans React Native pour les stream implicites OAuth 2, que vous utiliserez pour les fournisseurs d’identités sociales:

  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 pour ces fournisseurs, en fonction de ce que chacun veut (car il diffère légèrement).
  3. En utilisant l’API de Linking dans RN, vous ouvrez cette URL dans un navigateur sur le périphérique qui envoie l’utilisateur au fournisseur de services sociaux pour qu’il effectue la danse de connexion / autorisation.
  4. Une fois terminé, le fournisseur de services sociaux redirige l’utilisateur vers une URL que vous fournissez. Sur un appareil mobile, vous utiliserez votre propre schéma d’URL personnalisé pour déplacer l’utilisateur de l’affichage 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 social pourrait ressembler à my-awesome-app://auth_complete/ . Reportez – vous à la documentation de l’API de liaison pour savoir comment configurer ces schémas d’URL et les liens profonds.
  5. Dans le gestionnaire de ce nouveau schéma d’URL / lien profond, vous obtiendrez les jetons dans l’URL. Que ce soit manuellement ou à l’aide d’une bibliothèque, parsingz les jetons de l’URL et stockez-les dans votre application. C’est à ce stade que vous pouvez les inspecter en tant que JWT et les transmettre dans les en-têtes HTTP pour l’access à l’API.

Comment cela se passe-t-il dans RN pour les stream de ressources de mot de passe du propriétaire de la ressource?

Vous avez la possibilité de combiner votre courrier électronique et votre mot de passe pour vos propres comptes, soit en respectant le stream Implicite, soit en passant au stream Grant du propriétaire de la ressource si votre API et votre application sont approuvées. et l’API. Je préfère le stream ROPG sur les applications mobiles dans la mesure du possible car l’UX est beaucoup plus agréable – vous n’avez pas à ouvrir une vue Web séparée, il vous suffit de saisir leur email et mot de passe dans des éléments d’interface directement dans l’application. Cela étant dit, voici à quoi ça ressemble:

  1. L’utilisateur appuie sur le bouton de connexion par e-mail / mot de passe et RN répond par une interface utilisateur qui inclut TextInputs pour le courrier électronique et le mot de passe.
  2. Générez une requête POST sur votre serveur d’autorisation (qui peut être votre API ou peut être un serveur distinct) comprenant l’URL et les détails du corps correctement transmis, qui transmettent le courrier électronique et le mot de passe. Tirez cette demande.
  3. Le serveur d’authentification répondra avec les jetons associés dans le corps de la réponse. À ce stade, vous pouvez faire la même chose que précédemment à l’étape 5, où vous stockez les jetons pour une utilisation ultérieure dans les demandes d’API et les inspectez pour obtenir des informations utilisateur pertinentes.

Comme vous pouvez le constater, le ROPG est plus simple, mais ne devrait ê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 Authorization et, comme mentionné précédemment, et si vous le trouvez, vous supposez que l’utilisateur a été authentifié. La validation et la vérification des permissions de jeton et d’utilisateur sont toujours de bonnes pratiques de sécurité. Si aucun jeton n’est envoyé avec la demande ou si le jeton envoyé a expiré, vous rejetez la demande.

J’espère que cela pourra aider! Il y a certainement une tonne, mais cela donne un aperçu général.