1
votes

Implémentation de l'octroi de code d'autorisation OAuth 2.0 dans Angular

Nous devons intégrer l'octroi du code d'autorisation OAuth 2.0 dans mon projet client. Actuellement, l'application utilise une page de connexion native. Nous devons supprimer la page et rediriger les utilisateurs non connectés vers la page de connexion AS, https://as.com/as/authorization.oauth2?client_id=UoM&response_type=code . Après une connexion réussie à l'extrémité AS, nous sommes redirigés vers le redirect_uri configuré. À ce stade, comment mon application cliente saura-t-elle que l'utilisateur s'est connecté à AS? Comment puis-je maintenir la session à la fin du client? En outre, je dois échanger le code d'authentification avec un jeton d'accès et l'utiliser pour les appels d'API serveur ultérieurs. Alors, comment puis-je y parvenir et envoyer le jeton comme en-tête?

L'application est écrite en Angular 4. Je n'ai jamais travaillé sur des projets clients auparavant, d'où la confusion.

J'ai juste besoin de brefs points / extraits de code sur la façon de procéder.


1 commentaires

Faites-moi savoir si cela vous aide: stackoverflow.com/a/54011649/1235935


3 Réponses :


1
votes

Je ne suis pas un expert dans ce domaine, mais je vais essayer de vous aider du mieux que je peux.

Pas tout à fait sûr, mais je pense que pour une application Angular (ou tout autre SPA), vous devriez utiliser le flux de subvention implicite .

Comment puis-je maintenir la session côté client

Le Web est sans état, il n'y a donc pas vraiment de session. Lorsque vous travaillez avec des jetons (comme ceux des JWT), vous devez les renouveler avant leur expiration.

Je dois échanger le code d'authentification avec un jeton d'accès et l'utiliser pour appels d'API serveur ultérieurs. Alors, comment puis-je y parvenir et envoyer le jeton comme en-tête?

Vous devez appeler les ressources API protégées avec un jeton d'accès. Vous pouvez utiliser un intercepteur pour placer un en-tête d'authentification (comme un JWT) lorsque vous effectuez des appels http vers votre API.

Voici un excellent exemple de la façon dont vous pouvez mettre en œuvre ceci ici: https://auth0.com/docs/quickstart/spa/angular2/01-login#configure-auth0


1 commentaires

Le flux d'octroi implicite a été annulé, utilisez plutôt le code d'autorisation avec PKCE. oauth.net/2/grant-types et aaronparecki.com/oauth-2-simplified/#authorization



2
votes

Vous pouvez utiliser cette bibliothèque pour implémenter la connexion OAuth2 / OpenID Connect sur votre site .

Le flux de subvention implicite ne doit pas être utilisé par SPA, plus ici .

Le standard OAuth2 est un framework d'autorisation qui est sans état. Cela signifie que chaque fois que vous souhaitez accéder à une ressource à partir d'un serveur de ressources, vous devez fournir un jeton d'accès valide - il doit être fourni sous la forme d'un en-tête «Authorization». Le jeton d'accès est un type de jeton de courte durée. La principale raison d'avoir une telle chose est que même si le jeton est volé lors d'une connexion, l'attaquant ne pourra pas l'utiliser à l'avenir. Il existe également un jeton d'actualisation. Ce type de jeton vous permet de récupérer les jetons d'accès sans afficher à nouveau la page de connexion jusqu'à son expiration.


0 commentaires

0
votes

Vous pouvez utiliser le paramètre state pour conserver les informations entre ces redirections. L'état peut être passé sous forme de chaîne de requête dans https://as.com/as/ authorisation.oauth2? client_id = UoM & response_type = code . Après avoir reçu le code dans l'URL de redirection, que je suppose être un composant angulaire dans votre cas, vous pouvez accéder à ce code avec enabledRoute.queryParams dans ngOnInit et vous pouvez l'utiliser pour obtenir un jeton d'accès et le stocker contre votre identifiant d'utilisateur dans une session / stockage local. Pour envoyer un jeton dans l'en-tête, vous pouvez avoir un intercepteur angulaire pour l'injecter dans l'en-tête d'autorisation pour chaque demande d'API.


0 commentaires