webentwicklung-frage-antwort-db.com.de

Interaktion mit dem Back-End nach erfolgreicher Authentifizierung mit OAuth im Front-End

Ich möchte eine kleine Anwendung erstellen. Es wird einige Benutzer geben. Ich möchte kein eigenes Benutzersystem erstellen. Ich möchte meine Anwendung mit oauth/oauth2.0 integrieren.

Die Integration meiner Front-End-Anwendung und von Version 2.0 ist problemlos möglich. Es gibt so viele hilfreiche Artikel, wie man das macht, sogar auf stackoverflow.com. Zum Beispiel dieser Beitrag ist sehr hilfreich.

Aber. Was soll ich nach erfolgreicher Autorisierung im Frontend tun? Natürlich kann ich nur ein Flag auf dem Client haben, das sagt "Okay, Kumpel, Benutzer ist authentifiziert", aber wie soll ich jetzt mit meinem Backend interagieren? Ich kann nicht nur einige Anfragen stellen. Back-End - eine Anwendung, die API-Funktionen bereitstellt. Jeder kann auf diese API zugreifen.

Also brauche ich sowieso ein Authentifizierungssystem zwischen meinem FE und BE. Wie soll dieses System funktionieren?

ps Ich habe einige Probleme mit Englisch und kann möglicherweise nicht einfach richtig 'google' danach fragen. Kannst du bitte die richtige Frage stellen :) oder zumindest einige Artikel über meine Frage geben.

UPD

Ich suche ein Konzept. Ich möchte keine Lösung für mein aktuelles Problem finden. Ich glaube nicht, dass es darauf ankommt, welche FE und BE ich benutze (trotzdem werde ich unten Informationen darüber geben)

FE und BE verwenden JSON für die Kommunikation. FE stellt Anfragen, BE sendet JSON-Antworten. Meine Bewerbung wird diese Struktur haben (wahrscheinlich):

  • Frontend - wahrscheinlich AngularJS
  • Backend - wahrscheinlich Laravel (Laravel wird Logik implementieren, außerdem gibt es eine Datenbank in der Struktur)

Vielleicht erinnert sich "Dienstanbieter" wie google.com, vk.com, Twitter.com usw. an den Status des Nutzers? Und nach erfolgreicher Autorisierung auf FE kann ich bei BE nur nach dem Benutzerstatus fragen?

16

Wir haben beim Erstellen einer API 3 Hauptsicherheitsprobleme.

  1. Authentication : Ein Identifizierungsanbieter wie Google ist nur eine Teillösung. Da Sie den Benutzer nicht zur Anmeldung auffordern und seine Identität für jede API-Anfrage bestätigen möchten, müssen Sie die Authentifizierung für nachfolgende Anforderungen selbst implementieren. Sie müssen hinterlegen, hinterlegen:

    1. ID eines Benutzers (vom Identitätsanbieter übernommen, zum Beispiel: E-Mail)
    2. Ein Benutzertoken. (Ein temporäres Token, das Sie generieren und anhand des API-Codes überprüfen können.)
  2. Authorization : Ihr Backend muss Regeln basierend auf der Benutzer-ID implementieren (das ist Ihr eigenes Geschäft).

  3. Transportsicherheit : HTTPS und abgelaufene Cookies sind sicher und können von anderen nicht wiedergegeben werden. (HTTPS verschlüsselt den Datenverkehr, besiegt also Man-in-the-Middle-Angriffe und das Auslaufen von Cookies beseitigt Wiederholungsangriffe zu einem späteren Zeitpunkt.)

So hat Ihr API/Backend eine Nachschlagetabelle von E-Mails zu zufälligen Zeichenfolgen. Nun müssen Sie die Benutzer-ID nicht preisgeben. Das Token ist bedeutungslos und temporär.

So funktioniert der Ablauf in diesem System:

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

SONST:

                                             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 --------------------|

JETZT kann der Benutzer Ihre API direkt verwenden:

 |--------------- some API request, with cookie ---------------->|
 |<-------------- some reply, depends on your logic, rules ------|

EDIT

Basierend auf Diskussion - Hinzufügen, dass das Backend einen Benutzer authentifizieren kann, indem das Zugriffstoken mit dem Identitätsanbieter überprüft wird:

Zum Beispiel stellt Google diesen Endpunkt zur Verfügung , um ein Token XYZ123 zu prüfen:

https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=XYZ123
18

Ich habe alle Antworten sehr sorgfältig durchgelesen, und mehr als die Hälfte der Antworten, die geantwortet haben, verpasst die Frage vollständig. OP fragt nach der INITIAL-Verbindung zwischen FE & BE, ​​nachdem der OAuth-Token vom Service Provider ausgegeben wurde.

Woher weiß Ihr Backend, dass das OAuth-Token gültig ist? Denken Sie daran, dass Ihr BE eine Anfrage an den Dienstanbieter senden und die Gültigkeit des OAuth-Tokens bestätigen kann, das zuerst von Ihrem FE empfangen wurde. Dieser OAuth-Schlüssel kann vom Dienstanbieter nur entschlüsselt werden, da nur er den geheimen Schlüssel besitzt. Sobald sie den Schlüssel entschlüsseln, werden sie in der Regel mit Informationen wie Benutzername, E-Mail und ähnlichem antworten.

In Summe:

Ihr FE erhält vom Diensteanbieter ein OAuth-Token, nachdem der Benutzer die Berechtigung dazu erteilt hat. FE übergibt das OAuth-Token an BE. BE sendet ein OAuth-Token an den Service Provider, um das OAuth-Token zu überprüfen. Der Dienstanbieter antwortet BE mit Informationen zu Benutzername und E-Mail-Adresse. Sie können dann den Benutzernamen/die E-Mail-Adresse verwenden, um ein Konto zu erstellen. 

Nachdem Ihr BE das Konto erstellt hat, sollte Ihr BE eine eigene Implementierung eines OAuth-Token generieren. Dann senden Sie Ihrem FE dieses OAuth-Token, und bei jeder Anforderung würde Ihr FE dieses Token im Header an Ihre BE senden. Da nur Ihr BE den geheimen Schlüssel zum Validieren dieses Tokens besitzt, ist Ihre Anwendung sehr sicher. Sie können sogar den OAuth-Token Ihrer BE bei jeder Anforderung aktualisieren und Ihrem FE jedes Mal einen neuen Schlüssel geben. Falls jemand das OAuth-Token aus Ihrer FE stiehlt, wird dieses Token schnell ungültig gemacht, da Ihr BE bereits ein neues OAuth-Token für Ihre FE erstellt hätte.

Weitere Informationen dazu, wie Ihr BE das OAuth-Token validieren kann. Wie validiere ich ein OAuth 2.0-Zugriffstoken für einen Ressourcenserver?

5
Webber

Nun, Sie benötigen kein User-System auf Ihrer Front-End-Seite. Das Front-End ist nur eine Möglichkeit, mit Ihrem Server zu interagieren und nach Token anhand eines gültigen Benutzers und Kennworts zu fragen.

Ihr Server soll Benutzer und Berechtigungen verwalten.

Benutzeranmeldeszenario

Benutzer, der nach einem Token fragt, indem er seinen Benutzernamen und sein Kennwort eingibt. Die Server-API akzeptiert die Anforderung, da es sich um eine anonyme Methode handelt (jeder kann diese Methode ohne Vorsicht aufrufen, wenn er angemeldet ist oder nicht.

Der Server überprüft die Datenbank (oder etwas Speicher) und vergleicht die Benutzerdetails mit den Details, die er hat. Wenn die Details übereinstimmen, gibt der Server dem Benutzer ein Token zurück.

Ab jetzt sollte der Benutzer dieses Token mit einer beliebigen Anforderung festlegen, damit der Server den Benutzer erkennt. Das Token enthält tatsächlich die Benutzerrollen, den Zeitstempel usw.

Wenn der Benutzer Daten per API anfordert, ruft er das Benutzertoken aus dem Header ab und prüft, ob der Benutzer auf diese Methode zugreifen darf.

So funktioniert es im Allgemeinen.

Ich habe in meiner Antwort auf .NET gestützt. Aber die meisten BE-Bibliotheken funktionieren so.

3
Dvir

Da ich ein Projekt für SSO mache und basierend auf meinem Verständnis für Ihre Frage, kann ich vorschlagen, dass Sie in Ihrem Backend einen Endpunkt erstellen, um Sitzungen zu generieren, nachdem das Client-Frontend erfolgreich vom Kontoinhaber autorisiert wurde. Wenn Sie die Benutzerinformationen vom Provider erhalten haben, buchen Sie diese Informationen an den Backend-Endpunkt, der Backend-Endpunkt generiert eine Sitzung und speichert diese Informationen und sendet die Sitzungs-ID (häufig als "jSessionId" bezeichnet) mit einem Cookie zurück an die client -frontend- so kann der Browser es für Sie speichern und jede Anfrage danach an das Backend als authentifizierten Benutzer betrachten. 

um sich abzumelden, erstellen Sie einfach einen anderen Endpunkt im Backend, um eine Sitzungs-ID zu akzeptieren, damit das Backend diese entfernen kann.

Ich hoffe das ist hilfreich für dich.

2
Abdullah Shahin

Sie müssen das Token im Status Ihrer App speichern und dann mit jeder Anforderung an das Backend übergeben. Die Weitergabe an das Backend kann in Headern, Cookies oder als Params erfolgen - abhängig davon, wie das Backend implementiert wird.

Folgen Sie dem Code, um ein gutes Beispiel für alle in Aktion befindlichen Teile zu sehen (nicht meinen Code) In diesem Beispiel wird die Authorization: Bearer TOKEN-Kopfzeile https://github.com/cornflourblue/ festgelegt. Winkelregistrierung-Login-Beispiel

1
Andrei R

verwenden wir das OAuth-Konzept, um zu beginnen, FE ist hier Client , BE hier ist Ressourcenserver

  • Da Ihr Client bereits autorisiert ist, sollte der Autorisierungsserver dem Client Zugriffstoken gewähren. 
  • Client fordert Anforderung an den Ressourcenserver mit dem Zugriffstoken
  • Ressourcenserver validiert das Access-Token valid Wenn gültig, bearbeiten Sie die Anforderung.

Sie können fragen, was das Access-Token ist. Das Access-Token wurde vom Autorisierungsserver ausgegeben, dem Client erteilt und vom Ressourcenserver erkannt. 

Zugriffstoken ist eine Zeichenfolge, die die Berechtigungsinformationen angibt (z. B. Benutzerinformationen, Berechtigungsbereich , Ablaufdatum ...).

Zugriffstoken kann aus Sicherheitsgründen verschlüsselt werden, und Sie sollten sicherstellen, dass der Ressourcenserver ihn entschlüsseln kann. 

weitere Informationen finden Sie in der OAuth2.0-Spezifikation https://tools.ietf.org/html/rfc6749

1
lessisawesome