Soziale Registrierung in SPA (Angular 2) mit ASP.NET Core REST API

9

Ich habe eine einfache Angular 2-Anwendung implementiert, die ASP.NET Core WebApi als Backend verwendet. Für die Authentifizierung habe ich die Route '/ login' hinzugefügt, die JWT-Zugriff generiert und Token aktualisiert, die wiederum von SPA in localStorage gespeichert und in HTTP-Anfragen verwendet werden.

Nun möchte ich die Social-Registration-Funktion integrieren, damit sich Benutzer zB mit dem Facebook-Button anmelden können. Aus Sicht des Benutzers möchte ich es in drei Schritten durchführen:

  1. Klicken Sie auf "Registrieren über Facebook", um zur Facebook-Website weitergeleitet zu werden (um sich anzumelden und meine App-Anfrage zu bestätigen).
  2. Klicken Sie auf Bestätigt und umgeleitet zu meinem SPA, wo / Registrierungsseite, wo sein Name bereits aus Facebook-Profil
    3. ausgefüllt wurde
  3. Füllt die restlichen Felder (wie sein Lieblingsspielzeug) und klickt auf "Registrierung abschließen"

Nach dieser Registrierung wird der Benutzer, wenn er sich erneut über Facebook anmeldet, nach Facebook weitergeleitet (wenn er sich bereits eingeloggt hat), wird er automatisch zur Serverroute weitergeleitet, die prüft, ob ein solcher Benutzer bereits registriert ist und ob er ihn dann weiterleitet SPA Homepage

Wie integriere ich einen solchen Workflow in meine App? Hinweis: Ich möchte die Authentifizierung und Registrierung in meiner Angular2-App durchführen, nicht auf einem anderen Authentifizierungsserver.

    
Rem 01.10.2016, 19:53
quelle

2 Antworten

5
  

Ich möchte die Authentifizierung und Registrierung in meiner Angular2 App durchführen.

Was Sie suchen, ist Implicit Grant , mit Facebook als Autorisierungsserver und als der Ressourcenserver. Das Implizite Grant unterstützt die Autorisierung für Einzelseitenanwendungen (z. B. Ihre Angular2-App), und die Facebook Graph-API unterstützt Anfragen nach Benutzerinformationen.

  

Wie integriere ich einen solchen Workflow in meine App?

Da Facebook OpenID Connect nicht unterstützt , müssen Sie die OAuth2-Pseudoauthentifizierung verwenden (die zu vermeidende Traps enthält). Dies beinhaltet einen vierstufigen Prozess:

  1. leitet den Benutzer zur Anmeldung auf Facebook um,
  2. validiere die Weiterleitung zurück von der Facebook-Anmeldeseite und speichere das Zugriffstoken,
  3. Rufen Sie die Graph-API von Facebook auf, um Benutzerinformationen für das zugehörige Zugriffstoken anzufordern, und
  4. Verwenden Sie diese Benutzerinformationen, um die Felder in Ihrer App auszufüllen.

Der Aufruf der API in Schritt drei könnte etwa so aussehen:

%Vor%

/me ist ein spezieller Graph-API-Endpunkt, der " in die user_id der Person übersetzt, deren Der Zugriffstoken wird derzeit für die API-Aufrufe verwendet. "Der Endpunkt gibt dann die zugehörigen Benutzerinformationen zurück.

Ihre App kann diese Facebook-Nutzerinfo verwenden, um ihre clientseitigen Felder zu füllen und / oder seine serverseitige Datenbank. Das id ist einzigartig für Ihre App und entspricht NICHT dem Facebook user_id ; Das id ist eine sinnvolle Möglichkeit, Nutzer Ihrer App eindeutig zu identifizieren.

Vier Optionen, um diesen Flow in Ihre App zu integrieren.

Nebenbei: Was meinen Sie mit OAuth2-Pseudoauthentifizierung?

OAuth2 ist ein Pseudo-Authentifizierungsschema, weil OAuth2 kein Authentifizierungsprotokoll ist. Das heißt, nachdem sich der Benutzer anmeldet erhält Ihre Client-Anwendung ein Zugriffstoken, mit dem sie eine geschützte API anfordert. Um die Fallstricke zu vermeiden, ist es gut, sich dessen bewusst zu sein:

  1. Zugriffs-Token sind kein Beweis für die Authentifizierung.
  2. Der Zugriff auf eine geschützte API ist kein Beweis für die Authentifizierung.
  3. Angreifer können Zugangstoken injizieren.
  4. Zugriffs-Token haben KEINE Zielgruppenbeschränkung.
  5. Angreifer können ungültige Benutzerinformationen injizieren.
  6. Jeder Identity-Provider kann sein eigenes Identitätsprotokoll haben.
Shaun Luttin 10.10.2016, 15:28
quelle
-3

Ich würde einfach vorschlagen diese Tut auf auth0 + A2.

    
Jon 08.10.2016 23:07
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Aktualisieren des Azure AD-Zugriffstokens für die SQL-Verbindung im Kontext des langlebigen Entitätsrahmens