web-dev-qa-db-fra.com

Authentification dans l'application Ionic / Cordova

Tout d'abord, je ne suis pas un pro.

Dans ma quête pour devenir un meilleur développeur, j'essaie de comprendre ce qui est nécessaire et comment réaliser la création d'une inscription/connexion pour une application Ionic-Framework.

La plupart des applications à page unique (SPA) gèrent l'authentification sur un serveur de noeud qui sert également le code HTML pour le client. Dans mon cas, le téléphone lui-même servira le HTML, donc je suppose que je vais peut-être rencontrer des problèmes de COR.

Je comprends que le Ionic-Framework utilise des états et basé sur angular-client-side-auth repo Je devrais m'authentifier chaque fois que je change d'état dans mon application.

J'ai une configuration initiale de l'application, mais maintenant je ne sais pas où aller à partir d'ici.

Les outils dont je dispose:

  • Serveur Node.JS - Merci DigitalOcean (Dois-je l'utiliser comme proxy pour ma base de données?)
  • Serveur CouchDB (pile complète ici, nous venons)

Mes questions:

  1. Quelle est l'approche standard pour l'authentification lors de l'utilisation d'applications hybrides?
  2. Dois-je utiliser Node.JS comme proxy de la base de données?
  3. Dois-je ignorer node.js et m'authentifier directement auprès du serveur CouchDB? (J'en ai entendu parler)
  4. Suis-je en train de faire ça de la mauvaise façon?
  5. Quels sont mes obstacles potentiels?
  6. Comment CORS fonctionne-t-il avec les applications hybrides?
  7. Tout ce qui me manque?

Merci de m'avoir aidé à devenir un meilleur développeur.

angularjsauthenticationcouchdbangular-uiionic-framework
65
TyMayn

OK, il y a beaucoup à répondre. Mais la réponse courte est de garder les choses simples et de s'authentifier comme vous le feriez avec une application Web classique.

Dans une application Web classique:

  • Dans une application Web classique, vous envoyez une demande à un serveur et vérifiez les informations d'identification avec une base de données pour authentifier l'utilisateur

Dans une application mobile:

  • Dans une application mobile, vous ferez de même via les requêtes ajax (en utilisant $ http dans le cas d'angular).
  • Une fois l'authentification terminée, le serveur envoie une réponse à l'application (par exemple, json/xml) indiquant à la partie frontale le résultat de l'authentification.

Quelle est l'approche standard?

  • Je ne suis pas sûr de la norme, mais cela semble être l'approche la plus simple. Les normes changent toujours parce qu'il y a toujours une meilleure façon de le faire. Donc, tant qu'il fait le travail, allez-y, améliorez-le plus tard.

Dois-je utiliser Node.JS comme proxy de la base de données?

  • Je n'ai pas utilisé beaucoup de nodeJs donc je ne sais pas ce que vous voulez vraiment dire. Mais si cela aide à savoir - j'utilise php sur le serveur qui reçoit la demande ajax, gère l'authentification avec la base de données mysql et renvoie la réponse à l'application mobile.

Suis-je en train de faire tout ça dans le mauvais sens?

  • Je n'ai pas vu votre configuration initiale. En ce qui concerne l'authentification chaque fois que vous changez d'état dans l'application, vous pouvez utiliser localStorage pour stocker les informations utilisateur après une connexion réussie. À la déconnexion, désactivez le localStorage. Il vous suffit donc de vérifier si la valeur existe dans le localStorage pour confirmer si l'utilisateur est connecté.

Quels sont mes barrages routiers potentiels?

  • Je vous suggère de commencer à créer votre application et vous le saurez assez tôt. Dans l'ensemble, ionic + cordova simplifie les choses et supprime la plupart des obstacles pour le développement d'applications.

Comment CORS fonctionne-t-il avec les applications hybrides?

  • Cordova autorise les demandes interdomaines par défaut, vous n'aurez donc aucun problème avec les demandes interdomaines et vous pourrez ainsi accéder directement à votre serveur pour l'authentification.

Tout ce qui me manque?

  • IonicFramework est juste un framework HTML5 frontal. À lui seul, il ne peut pas faire de vous une application mobile, il vous donnera simplement une belle interface utilisateur avec laquelle travailler. IonicFramework vous fournit quelques Nice fonctionnalités javascript qu'il implémente en utilisant angulaire. Ainsi, pour tirer le meilleur parti de ionic vous devez être compétent avec angularJs. Apprendre angular vaut bien l'effort alors allez-y.

  • L'application réelle est compilée par Cordova. Cordova prend vos fichiers html/css/javascript habituels et les regroupe dans le Android apk ou iphone ipa afin qu'ils puissent être installés sur le système d'exploitation respectif en tant qu'applications natives.

  • Cordova est ce qui vous permettra d'accéder aux fonctionnalités natives du téléphone comme l'appareil photo, la galerie, les contacts, etc.

Mis à jour le 3 juin 2015

Authentification basée sur les jetons: je crois que c'est une alternative. C'est un moyen plus propre et plus sûr de gérer l'authentification qui est désormais facilement disponible.

Pour plus d'informations, consultez les liens suivants:

Quels sont les avantages de l'utilisation d'une approche basée sur des jetons?

Cross-domain/CORS: les cookies + CORS ne fonctionnent pas bien sur différents domaines. Une approche basée sur des jetons vous permet de faire des appels AJAX vers n'importe quel serveur, sur n'importe quel domaine car vous utilisez un en-tête HTTP pour transmettre les informations utilisateur. Sans état (alias évolutivité côté serveur): il n'y a pas besoin de conserver un magasin de session, le jeton est une entité autonome qui transmet toutes les informations utilisateur. Le reste de l'état vit dans des cookies ou du stockage local côté client.

CDN: vous pouvez servir tous les actifs de votre application à partir d'un CDN (par exemple javascript, HTML, images, etc.), et votre côté serveur est juste l'API. Découplage: vous n'êtes pas lié à un schéma d'authentification particulier. Le jeton peut être généré n'importe où, donc votre API peut être appelée de n'importe où avec une seule façon d'authentifier ces appels.

Mobile ready: lorsque vous commencez à travailler sur une plateforme native (iOS, Android, Windows 8, etc.), les cookies ne sont pas idéaux lors de la consommation d'une API sécurisée ( vous devez gérer les conteneurs de cookies). L'adoption d'une approche basée sur des jetons simplifie beaucoup cela. CSRF: puisque vous ne comptez pas sur les cookies, vous n'avez pas besoin de vous protéger contre les demandes intersites (par exemple, il ne serait pas possible d'accéder à votre site, de générer une demande POST et de réutiliser le cookie d'authentification existant car il n'y en aura pas).

Performances: nous ne présentons aucun benchmark de performance dur ici, mais un aller-retour réseau (par exemple trouver une session sur une base de données) prendra probablement plus de temps que de calculer un HMACSHA256 pour valider un jeton et analyser son contenu.

La page de connexion n'est pas un cas particulier: Si vous utilisez Protractor pour écrire vos tests fonctionnels, vous n'avez pas besoin de gérer de cas particulier pour la connexion. Basé sur des normes: votre API pourrait accepter un jeton Web JSON standard (JWT). Il s'agit d'un standard et il existe plusieurs bibliothèques backend (.NET, Ruby, Java, Python, PHP) et des entreprises qui soutiennent leur infrastructure (par exemple Firebase, Google, Microsoft). À titre d'exemple, Firebase permet à leurs clients d'utiliser n'importe quel mécanisme d'authentification, tant que vous générez un JWT avec certaines propriétés prédéfinies et signé avec le secret partagé pour appeler leur API.

77
Varun Nath

nathvarun a donné une réponse très complète, mais je voudrais partager les étapes que je fais pour l'authentification dans mon application.

  1. Envoyer email + password via ajax au serveur
  2. Générez un token sur le serveur et renvoyez-le à l'application
  3. Stocker email + token dans localStorage
  4. Pour chaque demande que je fais au serveur, j'envoie email + token via POST
  5. Sur le serveur, je vérifie l'authenticité de cet utilisateur avec ce jeton, si true la méthode est exécutée, si false je renvoie à l'application une erreur (401)
  6. Si l'application réussit, c'est ok, si elle reçoit une erreur, je redirige vers l'écran de connexion.

Une bonne chose est que lorsque l'application est ouverte, vous pouvez obtenir le email + token de localStorage, envoyer au serveur, si ce jeton est correct pour cet utilisateur, redirigez à l'écran principal, sinon redirigez vers la connexion. Ensuite, chaque fois que l'utilisateur vide le cache de l'application, il est redirigé vers l'écran de connexion.

44
Lucas Garcia

En fait, j'avais besoin de quelque chose comme ça pour quelques applications sur lesquelles je travaille. J'ai passé pas mal de temps à enquêter sur cela et j'ai pu y parvenir.

Je suis assez satisfait du résultat, en plus de l'authentification par e-mail/mot de passe, j'ai ajouté une authentification sociale qui fonctionne de la même manière.

  1. ouvrir l'URL côté client avec l'URL du fournisseur (facebook/Twitter/instagram) pour la connexion
  2. l'utilisateur se connecte et est redirigé vers l'URL de rappel du serveur (mon serveur est écrit en nodejs)
  3. une fois que j'ai le jeton d'accès du fournisseur. J'enregistre ce jeton, puis je crée un jeton que le client pourra réutiliser à chaque fois que l'utilisateur souhaite accéder à une ressource protégée.

Téléchargez le apk et testez-le.

Si c'est ce que vous recherchez, vous pouvez vérifier le code côté client à l'adresse: https://github.com/malikov/Authenticate.me-client-cordova-ionic

Et le code côté serveur à: https://github.com/malikov/Authenticate.me-Node-Server

1
malikov