Comment interagir avec le back-end après l’authentification réussie avec OAuth sur le front-end?
Je veux construire une petite application. Il y aura des utilisateurs. Je ne veux pas créer mon propre système utilisateur. Je souhaite intégrer mon application à oauth/oauth2.0.
Il n'y a pas de problème d'intégration de mon application front-end et oauth 2.0. Il y a tellement d'articles utiles, comment faire cela, même sur stackoverflow.com. Par exemple ce post est très utile.
Mais. Que dois-je faire après une autorisation réussie sur front-end? Bien sûr, je peux juste avoir un drapeau sur le client, qui dit "ok, mate, l'utilisateur est authentifié", mais comment dois-je interagir avec mon backend maintenant? Je ne peux pas simplement faire des demandes. Back-end - certaines applications, qui fournissent des fonctions API. TOUT LE MONDE peut accéder à cette API.
Donc, j'ai besoin d'un système d'authentification de toute façon entre mon FE et BE. Comment ce système devrait-il fonctionner?
ps j’ai quelques problèmes d’anglais et je ne peux peut-être pas me renseigner correctement sur Google. Pouvez-vous fournir la bonne question, s'il vous plaît :) ou au moins donner des articles sur ma question.
UPD
Je cherche un concept. Je ne veux pas trouver de solution à mon problème actuel. Je ne pense pas que les questions FE et BE que j'utilise (de toute façon, je fournirai des informations à ce sujet ci-dessous)
FE et BE utiliseront JSON pour la communication. FE fera les demandes, BE enverra les réponses JSON. Mon application aura cette structure (probablement):
- Frontend - probablement AngularJS
- Backend - probablement Laravel (Laravel implémentera la logique, il y a aussi une base de données dans la structure)
Peut-être que "fournisseur de services" comme google.com, vk.com, Twitter.com, etc. se souvient de l'état de l'utilisateur? Et après l’autorisation réussie sur FE, je peux simplement poser des questions sur l’état d’utilisateur de BE?
Nous avons 3 problèmes de sécurité principaux lors de la création d'une API.
Authentification : Un fournisseur d’identification tel que Google n’est qu’une solution partielle. Comme vous ne souhaitez pas inviter l'utilisateur à se connecter/à confirmer son identité pour chaque demande d'API, vous devez implémenter l'authentification pour les demandes suivantes. Vous devez stocker, accessible au backend:
- Un identifiant d'utilisateur. (extrait du fournisseur d'identité, par exemple: email)
- Un jeton utilisateur. (Un jeton temporaire que vous générez et que vous pouvez vérifier à partir du code de l'API)
Autorisation : Votre serveur doit implémenter des règles basées sur l'ID utilisateur (c'est votre propre entreprise).
Sécurité du transport : HTTPS et les cookies qui arrivent à expiration sont sécurisés et ne peuvent pas être rejoués par d'autres. (HTTPS crypte le trafic; par conséquent, il élimine les attaques de type «homme du milieu» et les cookies expirés annulent les attaques de relecture ultérieurement »
Donc, votre API/backend a une table de recherche d'emails en chaînes aléatoires. Maintenant, vous n'avez pas à exposer l'ID de l'utilisateur. Le jeton n'a pas de sens et est temporaire.
Voici comment fonctionne le flux, dans ce système:
User-Agent IdentityProvider (Google/Twitter) Front-End Back-End
|-----------------"https://your.app.com"---------->|
|---cookies-->|
your backend knows the user or not.
if backend recognizes cookie,
user is authenticated and can use your API
AUTRE:
if the user is unknown:
|<--"unknown"-|
|<----"your/login.js"----------+
"Do you Authorize this app?"
|<------------------+
|--------"yes"----->|
+----------auth token--------->|
|<---------/your/moreinfo.js---|
|-------access_token ---------->|
1. verify access token
2. save new user info, or update existing user
3. generate expiring, random string as your own API token
+----------->|
|<-------------- set cookie: your API token --------------------|
MAINTENANT, l'utilisateur peut utiliser directement votre API:
|--------------- some API request, with cookie ---------------->|
|<-------------- some reply, depends on your logic, rules ------|
EDIT
Sur la base d'une discussion - ajout que le serveur peut authentifier un utilisateur en vérifiant le jeton d'accès avec le fournisseur d'identité:
Par exemple, Google expose ce noeud final pour vérifier un jeton XYZ123:
https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=XYZ123
J'ai lu toutes les réponses très attentivement et plus de la moitié des personnes qui ont répondu manquaient complètement la question. OP demande la connexion INITIALE entre FE & BE, après que le jeton OAuth a été émis par le fournisseur de services.
Comment votre serveur sait-il que le jeton OAuth est valide? Gardez bien à l'esprit que votre BE peut envoyer une demande au fournisseur de services et confirmer la validité du jeton OAuth, qui a été reçu pour la première fois par votre FE. Cette clé OAuth peut être déchiffrée par le fournisseur de services uniquement parce qu’ils sont seuls à posséder la clé secrète. Une fois qu'ils ont déchiffré la clé, ils répondent généralement avec des informations telles que le nom d'utilisateur, l'adresse électronique, etc.
En résumé:
Votre FE reçoit le jeton OAuth du fournisseur de services après que l'utilisateur en a donné l'autorisation. FE passe le jeton OAuth à BE. BE envoie un jeton OAuth au fournisseur de services pour valider le jeton OAuth. Le fournisseur de services répond à BE avec son nom d’utilisateur/adresse électronique. Vous pouvez ensuite utiliser le nom d'utilisateur/email pour créer un compte.
Ensuite, une fois que votre BE a créé le compte, votre BE doit générer sa propre implémentation d'un jeton OAuth. Ensuite, vous envoyez ce jeton OAuth à votre FE, et à chaque demande, votre FE enverra ce jeton dans l'en-tête à votre BE. Étant donné que seul votre BE possède la clé secrète pour valider ce jeton, votre application sera très sûre. Vous pouvez même actualiser le jeton OAuth de votre BE à chaque demande, en donnant à votre FE une nouvelle clé à chaque fois. Si quelqu'un vole le jeton OAuth à votre FE, ce jeton serait rapidement invalidé, car votre BE aurait déjà créé un nouveau jeton OAuth pour votre FE.
Vous trouverez plus d'informations sur la manière dont votre BE peut valider le jeton OAuth. Comment valider un jeton d'accès OAuth 2.0 pour un serveur de ressources?
Bien, vous n’avez pas besoin de User-System sur votre côté frontal. Le front-end est juste un moyen d’interagir avec votre serveur et de demander un jeton par utilisateur valide et mot de passe.
Votre serveur supposé gérer les utilisateurs et les permissions.
Scénario de connexion utilisateur
Utilisateur demandant un jeton en entrant son nom d'utilisateur et son mot de passe. L'API du serveur accepte la demande car il s'agit d'une méthode anonyme (tout le monde peut appeler cette méthode sans se soucier de savoir s'il est connecté ou non.
Le serveur vérifie la base de données (ou un peu de stockage) et compare les détails de l'utilisateur aux détails dont il dispose. Si les détails correspondent, le serveur renvoie un jeton à l'utilisateur.
À partir de maintenant, l'utilisateur doit définir ce jeton avec toute demande afin que le serveur le reconnaisse. Le jeton contient en réalité les rôles, le timestamp, etc. de l'utilisateur.
Lorsque l'utilisateur demande des données par API, il extrait le jeton utilisateur à partir de l'en-tête et vérifie si l'utilisateur est autorisé à accéder à cette méthode.
C'est comme ça que ça marche en général.
Je me suis basé sur .NET dans ma réponse. Mais la plupart des bibliothèques de BE fonctionnent comme ça.
En tant que projet pour SSO et compte tenu de votre compréhension de votre question, je peux vous suggérer de créer un point final dans votre back-end pour générer des sessions, une fois que le client (frontend) a été autorisé avec succès par le titulaire du compte, et recevez les informations utilisateur du fournisseur, vous postez ces informations sur le noeud final dorsal, celui-ci génère une session et stocke ces informations, puis renvoie l'ID de session (appelé fréquemment jSessionId) avec un cookie. client -frontend- afin que le navigateur puisse l'enregistrer pour vous et chaque requête ultérieure adressée au back-end considéré comme un utilisateur authentifié.
pour vous déconnecter, créez simplement un autre point de terminaison dans le back-end pour accepter un identifiant de session afin que le back-end puisse le supprimer.
J'espère que cela vous sera utile.
Vous devez stocker le jeton dans l'état de votre application, puis le transmettre au backend à chaque demande. Le passage au backend peut se faire dans les en-têtes, les cookies ou en tant que paramètres. Cela dépend de la manière dont le backend est implémenté.
Suivez le code pour voir un bon exemple de toutes les pièces en action (pas mon code) Cet exemple définit l'en-tête Authorization: Bearer TOKEN https://github.com/cornflourblue/ angular-registration-registration-example
utilisons le concept OAuth pour commencer, FE ici Client, BE ici Serveur de ressources.
- Étant donné que votre client est déjà autorisé, le serveur d’autorisation doit lui attribuer Access Token.
- Le client envoie une requête au serveur de ressources avec le jeton Access
- Le serveur de ressources valide le jeton Access ，, le cas échéant, gère la demande.
Vous pouvez demander, en quoi consiste le jeton Access, le jeton d'accès a été émis par le serveur d'autorisation, accordé au client et reconnu par le serveur de ressources.
Access Token est une chaîne indiquant les informations d'autorisation (par exemple, informations sur l'utilisateur, portée de l'autorisation ， le délai d'expiration ...).
Access token peut être chiffré pour des raisons de sécurité, et vous devez vous assurer que le serveur de ressources peut le déchiffrer.
pour plus de détails, veuillez lire la spécification OAuth2.0 https://tools.ietf.org/html/rfc6749 .