müssen oauth 2-client-Implementierung für router reagieren
wir haben unser eigenen oauth-2-server mit dem Autorisierungs-code-Implementierung von unten code-Basis.
https://github.com/FrankHassanabad/Oauth2orizeRecipes
aber wir versuchen, Sie zu integrieren, oauth2-client-Authentifizierung in der web-Anwendung, die beinhaltet, reagieren die router und flux Umsetzung.
schauten wir in viele git-repositories aber nicht immer jede richtige Weg, dies zu tun.
gibt es eine Umsetzung, die uns zeigt, wie es erreicht werden kann?
Nochmals vielen Dank.
UPDATE
suchen wir in unter-repositories, aber immer noch nicht klar, wie wir die Dinge arbeiten. wie, wo merge-Authentifizierung und oauth Logik und das, was die Dinge zu machen, die server - /client-Seite.
https://github.com/rackt/react-router/tree/master/examples/auth-flow
https://github.com/andreareginato/simple-oauth2
https://github.com/LearnBoost/superagent-oauth
https://github.com/zalando/superagent-oauth2-client
wir verwendet github.com/zalando/oauth2-client-js
InformationsquelleAutor jit | 2016-01-24
Du musst angemeldet sein, um einen Kommentar abzugeben.
Werde ich versuchen zu erklären, meine hohes Maß nehmen-Authentifizierung mit reagieren-router. Sie müssen die Implementierung auf server und client und es gibt ein paar Entscheidungen, die Sie brauchen, selbst zu machen. Für dieses Beispiel verwende ich ein redux für das flux-Bibliothek.
Zuerst müssen Sie einen Mechanismus, um zu schützen Ihre Routen, Tue ich dies mit einem höheren order-Komponente wie folgt:
Der code ist hier ziemlich einfach, es exportiert die Funktion, die erwartet, dass ein reagieren Komponente als das einzige argument. Diese
ChildComponent
ist die Komponente, die Sie schützen möchten.Den
hasAuthToken
prop ist die Kontrolle hier, wenn es wahr ist, dann ist dieChildComponent
gerendert werden, sonst wird es RendernSignIn
. Beachten Sie, dass dieser Prozess der renderingSignIn
ist in Ordnung, wenn Sie kümmern sich nicht um SEO, sondern möchten Sie vielleicht umleiten der Benutzer Zeichen-in der route, wenn Sie kümmern sich um den Suchmaschinen die Indizierung Ihrer geschützten Routen.Schließlich
AuthenticatedComponent
verbunden ist die redux-Shopsession
Staates, aber dies kann leicht umgestellt werden, um alle anderen flux-Bibliothek Ihrer Wahl. Einfach ausgedrückt, ist es das abonnieren von änderungen aufsession
. Wenn diehasAuthToken
änderungen in Wert, wird die Komponente neu gerendert, wenn es ist derzeit montiert.Nun für die Strecken:
Hier bin ich die Anwendung der
requireAuthentication
- Methode (die standardmäßig exportierten Methode aus dem code oben) mit der Komponente, auf die ich schützen möchte. Dadurch halten Sie die Seiten aus, es sei denn, die redux-Shopsession.hasAuthToken
- Eigenschaft true ist, und stattdessen derSignIn
Komponente.Anderen Routen verschachtelt unter der geschützten Komponente wird auch geschützt werden, weil die Art und Weise reagieren-router komponiert die Routen.
Auf einem hohen Niveau der
SignIn
Komponente sollte einfach eine Seite mit einem normalen<a href>
(d.h. nicht reagieren-routerLink
) zu beginnen, die Oauth2-handshake. Die einfach-oauth2 Modul hat einige nette Beispiele auf, wie die Umsetzung oauth2-server-Seite, so ich nicht hier. Wenn Sie nach dieser Beispiele, es ist dieapp.get('/auth', function (req, res) {})
Endpunkt, den Sie möchten, verknüpfen Sie den Benutzer.In der
callback
Endpunkt, den Sie wollen, behalten dietoken
irgendwie (z.B. auf Ihrer Sitzung (express-Sitzung wird hier helfen) oder auf die Datenbank), dann leiten Sie den Benutzer wieder auf Ihre app reagieren.Nun werden Sie brauchen, um Ihre Sitzung auf der server-Seite redux-Shop in Vorbereitung, um es hydratisiert auf dem client. Die redux docs erklärt, wie dies zu tun auf der Server-Rendering Seite, speziell die Injizieren Erste Komponente HTML und Staat und Die Client-Seite Abschnitte. Zumindest müssen Sie ein Objekt wie dieses:
Natürlich Ihre tatsächliche Umsetzung hängt ganz auf, wie Sie speichern das token und geben es an den server-side-request.
Ich hoffe, dies wird Ihnen den Einstieg. Dieser Prozess kann verwendet werden, für andere Arten der Authentifizierung, als auch durch den Austausch der Oauth2-link mit einem Benutzernamen und einem Passwort-Formular, dass Ihr server verarbeitet als ein XHR.
Viel Glück.
InformationsquelleAutor Marc Greenstock