L'authentification à Réagir Natif et de l'API backend

Je suis d'essayer d'envelopper ma tête autour de oauth avec une Réagir application Native et une autre NodeJS/Express API backend. Je comprends https://github.com/adamjmcgrath/react-native-simple-auth offre d'authentification pour Réagir application Native et http://passportjs.org/ offre d'authentification pour un NodeJS backend. Je ne suis pas sûr comment connecter ces deux pour l'authentification pour la connexion et l'accès à l'API.

J'aimerais utilisateurs de se connecter à Réagir application Native, soit par e-mail et le mot de passe ou via Facebook/Twitter/Google. Une fois connecté à l'application, que dois-je envoyer à l'API pour s'assurer qu'ils sont authentiques et ont accès à un itinéraire précis?

Voici un exemple de flux de connexion et de voir la session de l'utilisateur paramètres:

  1. Utilisateur se connecte à Réagir application Native via e-mail/mot de passe ou Facebook/Twitter/Google.
  2. Utilisateur est authentifié
  3. Application en fait la demande pour OBTENIR /api/paramètres
  4. API vérifie que l'utilisateur est authentifié et renvoie que les paramètres de l'utilisateur ou de l'API vérifie que l'utilisateur n'est pas authentifié et renvoie une 403.
  • Cet exemple peut vous aider. Il démontre l'utilisation de Express/Passport.js avec Réagissent Natif de conduite auth opérations. >réagir-native-connexion est un exemple Réagir Natif de projet montrant comment utiliser une WebView et réagir-native-les cookies pour vous connecter à votre compte principal. >Lien: github.com/ryanmcdermott/react-native-login
InformationsquelleAutor wwwuser | 2016-04-29
  1. 83

    Il y a beaucoup de choses à cette question, de sorte que beaucoup de sorte qu'elle ne rentrent pas tous dans une seule SORTE de réponse, mais voici quelques conseils et un aperçu général qui devrait largement tenir dans ce que vous voulez accomplir.

    OAuth2 Autorisation

    De les sons de celui-ci, vous êtes intéressé à utiliser OAuth 2 pour fournir le social login autorisation, et voudraient faire la première partie authentification comme une alternative avec un email et un mot de passe. Pour les connexions sociales, vous finirez par utiliser OAuth 2 Implicite de flux pour récupérer un jeton d'accès, qui est reconnue comme un modèle. Parce que vous êtes également à la recherche de authentifier utilisateurs avec une adresse courriel et un mot de passe, vous pouvez vous familiariser avec OpenID Connect, qui est une extension du protocole OAuth 2 et qui sont explicitement prend en charge l'authentification en plus de l'autorisation.

    Dans les deux cas, une fois que votre utilisateur a soumis un e-mail/mot de passe de combo ou de l'autorisation accordée par le biais de l'identité sociale des fournisseurs, vous recevrez en réponse un jeton d'accès et (éventuellement) un ID de jeton. Les jetons, probablement un JWT (JSON Web Jeton, voir jwt.io) va venir à travers comme une chaîne encodée en base64 que vous pouvez décoder pour inspecter les résultats de l'JWT, qui va inclure des choses comme l'ID de l'utilisateur et d'autres détails comme l'adresse email, nom, etc.

    Pour plus d'informations sur les différents types de flux, voir cette excellente vue d'ensemble sur l'Océan Numérique.

    À l'aide de Jetons pour l'API d'Authentification

    Maintenant que vous avez un jeton d'accès, vous pouvez le transmettre à toutes les demandes de votre API pour démontrer que vous avez correctement authentifié. Vous ferez cela en passant le long du jeton d'accès dans vos en-têtes HTTP, plus précisément le Authorization en-tête, dans la préface de votre base64 jeton d'accès (ce que vous avez reçu à l'origine en réponse à votre demande d'autorisation) avec Bearer. Si l'en-tête ressemble à quelque chose comme ceci:

    Authorization: Bearer eyJ0eXAiOiJKV1QiLCJh...

    Sur votre API côté, vous recevrez ce jeton, le décoder, puis vérifier l'ID et les revendications en elle. Adoptée dans le cadre du token dans le sub propriété sera le sujet, ou l'ID de l'utilisateur qui fait la demande. C'est la façon dont vous identifier et commencer à faire des choses sur votre API côté avec les droits de l'utilisateur, permanentes, etc. Il est également important que vous valider le jeton d'accès une fois que vous recevez sur votre API côté, pour s'assurer qu'il n'était pas usurpée ou fabriqués à la main.

    À quoi il ressemble dans RN Implicite flux

    Voici ce que le processus général ressemble à Réagir Natif pour OAuth 2 Implicite des flux, qui est ce que vous allez utiliser pour de l'identité sociale des fournisseurs:

    1. Utilisateur appuie sur l'un de vos identifiant social de boutons de Réagir Native INTERFACE utilisateur
    2. Votre code qui répond à l'boutons de construire une URL de requête pour les fournisseurs, en fonction de ce que chacun veut (parce que c'est un peu différente).
    3. À l'aide de la Linking API dans RN, vous permettra d'ouvrir l'URL dans un navigateur sur l'appareil qui envoie de l'utilisateur hors de la social fournisseur pour eux de faire le login/autorisation de danse.
    4. Une fois terminé, le social fournisseur de rediriger l'utilisateur vers une URL que vous fournisseur de. Sur un appareil mobile, vous pourrez utiliser votre propre schéma d'URL pour déplacer l'utilisateur à partir du web pour votre application. Ce schéma est quelque chose que vous vous inscrivez dans le cadre de votre application, comme my-awesome-app://, et l'URL de redirection que vous passez à la social fournisseur pourrait ressembler à my-awesome-app://auth_complete/. Voir la Liaison API docs 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 passée en tant que partie de l'URL. Soit à la main ou à l'aide d'une bibliothèque, d'analyser les jetons à partir de l'URL et de les stocker dans votre application. C'est à ce moment que vous pouvez commencer à examiner comme JWTs, et de les transmettre dans les en-têtes HTTP pour accéder à l'API.

    À quoi il ressemble dans RN pour la Ressource Mot de passe du Propriétaire de la Subvention flux

    Vous avez l'option de votre e-mail/mot de passe combo pour votre propre compte, soit en collant avec de l'Implicite de flux, ou la commutation de la Ressource Mot de passe du Propriétaire de la Subvention de flux de si votre API et de l'application de la confiance les uns les autres, ce qui signifie que vous faites à la fois l'application et de l'API. Je préfère le ROPG débit sur mobile apps si possible parce que le UX est beaucoup plus agréable--vous n'avez pas à ouvrir un affichage web, il vous suffit de leur type dans leurs e-mail et mot de passe dans les éléments d'INTERFACE utilisateur directement dans l'application. Donc, cela étant dit, voici à quoi il ressemble:

    1. Utilisateur appuie sur l'e-mail/mot de passe combo bouton de connexion, et de la RN répond avec une INTERFACE utilisateur qui comprend TextInputs l'e-mail et mot de passe
    2. Construire une requête POST à votre serveur d'autorisation (qui peut être votre API, ou peut-être un serveur distinct) qui inclut le bien conçues URL et le corps des détails qui passe le long de l'e-mail et mot de passe. Le feu de cette demande.
    3. L'authentification serveur va répondre avec les jetons dans le corps de la réponse. À ce stade, vous pouvez faire la même chose que précédemment effectuée à l'étape 5 ci-dessus, où vous stockez les jetons pour une utilisation ultérieure dans les requêtes à l'API et les inspecter pour des informations de l'utilisateur.

    Comme vous pouvez le voir, le ROPG est plus simple, mais ne doit être utilisé dans une grande confiance scénarios.

    À l'API

    Sur l'API côté, vous inspectez le jeton dans l'en-tête d'Autorisation, et comme mentionné précédemment, et si vous avez trouvé supposons que l'utilisateur a été authentifié. Il est toujours une bonne pratique de sécurité valide et de vérifier le jeton et les autorisations de l'utilisateur. Si il n'y a pas de jeton envoyé avec la demande, ou si le jeton envoyé a expiré, vous rejeter la demande.

    Espère que ça aide! Il ya certainement une tonne, mais qui fournit un aperçu général.

    InformationsquelleAutor Joshua