Authentification avec React Native et API backend

Question

Je essaie de comprendre oauth avec une application React Native et un backend API NodeJS/Express séparé. Je comprends que https://github.com/adamjmcgrath/react-native-simple-auth offre l'authentification pour une application React Native et http://passportjs.org/ offre l'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 voudrais que les utilisateurs se connectent à l'application React Native soit 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 ont accès à une route spécifique?

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

1. L'utilisateur se connecte à l'application React Native via e-mail/mot de passe ou Facebook/Twitter/Google.
2. L'utilisateur est authentifié
3. L'application envoie une requête GET à /api/settings
4. L'API vérifie que l'utilisateur est authentifié et renvoie les paramètres de cet utilisateur ou vérifie que l'utilisateur n'est pas authentifié et renvoie un 403.

Answer 1

Il y a tellement de choses à cette question que cela ne rentrerait pas dans une seule réponse SO, mais voici quelques conseils et un aperçu général qui devraient correspondre à ce que vous souhaitez accomplir.

Autorisation OAuth2

D'après ce que j'ai compris, vous souhaitez utiliser OAuth 2 pour fournir une autorisation de connexion sociale, et vous aimeriez également effectuer une première authentification avec un email et un mot de passe en alternative. Pour les connexions sociales, vous utiliserez probablement le flux implicite OAuth 2 pour récupérer un jeton d'accès, qui est un schéma largement reconnu. Comme vous souhaitez également authentifier les utilisateurs avec un email et un mot de passe, vous voudrez peut-être vous familiariser avec OpenID Connect, qui est une extension d'OAuth 2 et qui prend en charge explicitement l'authentification en plus de l'autorisation.

Dans les deux cas, une fois que votre utilisateur a soit soumis une combinaison email/mot de passe, soit accordé la permission à travers les fournisseurs d'identité sociaux, vous recevrez en réponse un jeton d'accès et (éventuellement) un jeton ID. Les jetons, probablement un JWT (JSON Web Token, voir jwt.io), arriveront comme une chaîne codée en base64 que vous pourrez décoder pour inspecter les résultats du JWT, qui comprendra des éléments tels que l'ID de l'utilisateur et d'autres détails comme l'adresse email, le nom, etc.

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

Utilisation des jetons pour l'authentification API

Maintenant que vous avez un jeton d'accès, vous pouvez le transmettre avec toutes les requêtes à votre API pour montrer que vous vous êtes correctement authentifié. Vous ferez cela en transmettant le jeton d'accès dans vos en-têtes HTTP, spécifiquement dans l'en-tête Authorization, en préfixant votre jeton d'accès codé en base64 (ce que vous avez reçu à l'origine en réponse à votre demande d'autorisation) avec Bearer. Ainsi, l'en-tête ressemblera à ceci :

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJh...

Côté API, vous recevrez ce jeton, le décoderez, puis vérifierez l'ID et les revendications qui s'y trouvent. Passé en tant que partie du jeton dans la propriété sub se trouvera le sujet, ou l'ID de l'utilisateur effectuant la requête. C'est ainsi que vous identifiez l'accès et commencez à effectuer des actions du côté de votre API avec les droits respectifs de l'utilisateur, les autorisations, etc. Il est également important de valider le jeton d'accès une fois que vous l'avez reçu du côté de votre API, pour vous assurer qu'il n'a pas été falsifié ou fabriqué à la main.

Comment cela se présente dans RN pour les flux implicites

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

1. L'utilisateur appuie sur l'un de vos boutons de connexion sociale dans l'interface utilisateur React Native
2. Votre code qui répond aux boutons construira une URL de requête vers ces fournisseurs, en fonction de ce que chacun souhaite (parce que cela diffère légèrement).
3. En utilisant l'API Linking dans RN, vous ouvrirez cette URL dans un navigateur sur l'appareil, qui enverra l'utilisateur vers le fournisseur social pour qu'il effectue la danse de connexion/autorisation.
4. Une fois la danse terminée, le fournisseur social redirigera 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 la vue web vers votre application. Ce schéma est quelque chose que vous enregistrez dans votre application, comme mon-application-geniale://, et l'URL de redirection que vous transmettez au fournisseur social pourrait ressembler à mon-application-geniale://auth_complete/. Consultez la documentation de l'API Linking pour savoir comment configurer ces schémas d'URL et le deep linking.
5. Dans le gestionnaire de ce nouveau schéma d'URL/deep link, vous recevrez les jetons transmis en tant que partie de l'URL. Manuellement ou en utilisant une bibliothèque, analysez les jetons de l'URL et stockez-les dans votre application. C'est à ce moment que vous pouvez commencer à les inspecter comme des JWT et les transmettre dans les en-têtes HTTP pour l'accès à l'API.

Comment cela se présente dans RN pour les flux de consentement du propriétaire de la ressource

Vous avez la possibilité pour votre combinaison email/mot de passe de vos propres comptes de rester avec le flux implicite, ou de passer au flux de consentement du propriétaire de la ressource si votre API et votre application se font mutuellement confiance, 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 c'est possible car l'expérience utilisateur est bien meilleure - vous n'avez pas à ouvrir une vue web distincte, vous leur demandez simplement de saisir leur email et leur mot de passe dans les éléments d'interface utilisateur directement dans l'application. Ainsi, voici à quoi cela ressemble :

1. L'utilisateur appuie sur le bouton de connexion de combinaison email/mot de passe, et RN répond avec une interface utilisateur qui comprend des TextInputs pour l'email et le mot de passe
2. Construisez une requête POST vers votre serveur d'autorisation (qui peut être votre API, ou peut être un serveur distinct) qui inclut l'URL et les détails corporels correctement formulés qui transmettent l'email et le mot de passe. Envoyez cette requête.
3. Le serveur d'autorisation répondra avec les jetons associés dans le corps de la réponse. À ce moment-là, vous pouvez faire la même chose que précédemment dans l'étape 5 ci-dessus, où vous stockez les jetons pour une utilisation ultérieure dans les requêtes API et les inspectez pour obtenir des informations utilisateur pertinentes.

Comme vous pouvez le voir, le ROPG est plus direct, mais ne devrait être utilisé que dans des scénarios très fiables.

Au niveau de l'API

Côté API, vous inspectez le jeton dans l'en-tête Authorization, et comme mentionné précédemment, si vous le trouvez, vous supposez que l'utilisateur a été authentifié. Il est toujours bon de pratique de sécurité de valider et vérifier le jeton et les permissions de l'utilisateur. Si aucun jeton n'est envoyé avec la requête, ou si le jeton envoyé a expiré, vous rejetez la requête.

J'espère que cela vous aide ! Il y a certainement beaucoup à dire, mais cela fournit un aperçu général.