PassportJS + RestAPI + SPA

Question

Ich verwende ExpressJS, um RestAPI zu erstellen, Client ist SPA und unterstütze die Authentifizierung von Google/FaceBook/GitHub/... über PassportJS. Meine Frage, Rückruf von Social Login wird zurück zu RestAPI oder SPA? Wenn das System zu RestAPI zurückkehrt, wie kann auf die Startseite im SPA umgeleitet werden. Ein weiterer Fall, wenn System Callback SPA, wie kann RestAPI Token vom Client empfangen und validieren. Bitte lassen Sie mich gemeinsame Ansätze wissen.

Danke,

Answer 1

Sie die Callback-URL zu dem Authentifizierungsdienst zur Verfügung stellen, können Sie entscheiden, ob Sie die Route durch die SPA oder die API behandeln. Oauth-Authentifizierung (vereinfacht) hat zwei Schritte. Illustration auf GitHub:

Schritt 1) ​​https://github.com/login/oauth/authorize?client_id=*YOUR_CLIENT_ID*$redirect_uri=*YOUR_REDIRECT_URI*
öffnet ein Popup-Dialogfeld, das die Benutzer fordert Ihre Anwendung zu genehmigen, wenn sie erfolgreich wieder in Ihre redirect_uri mit einem Abfrageparameter code = AUTHORIZATION_CODE

Schritt 2)? Sie tauschen den obigen AUTHORIZATION_CODE für einen Langzeitzugriffstoken über https://github.com/login/oauth/access_token

aus. In Ihrer Architektur sollten Sie Schritt 1 im SPA und Schritt 2 in der Rest-API durchführen. Sie sollten sich auf den Spa verlassen, um den Autorisierungscode vom Authentifizierungsanbieter zu erhalten, ihn an Ihre Rest-API zu senden, den Rest an ein Long-Term-Access-Token zu übergeben, dieses Token in der Datenbank zu speichern, es zum Abrufen von Benutzerinformationen zu verwenden was auch immer Sie wollen, dann loggen Sie sich in den Benutzer ein.

Für Schritt 1 müssen Sie nur den CLIENT_ID für Schritt 2 CLIENT_ID und CLIENT_SECRET als gut, so können Sie Ihre Anwendung sicher halten, indem nur die CLIENT_SECRET auf der Serverseite zu speichern.

Das Problem mit der Callback-URI von Ihrem Rest API behandelt, ist, dass die Callback-URI vom Authentifizierungsanbieter (in diesem Fall GitHub) und nicht von Ihrem SPA aufgerufen wird, daher können Sie keine Antwort senden, die umleitet der Benutzer auf der Startseite. Dies würde nur funktionieren, wenn Ihre Vorlagen und Ihr Routing auf der Serverseite behandelt würden, was in Ihrer Architektur nicht der Fall ist.

Es ist nicht klar, aus der Dokumentation, aber wenn Sie eine Pass-Middleware auf einer Strecke wie app.post('/login', passport.authenticate('github'), registrieren, prüft die Middleware, wenn die ‚Code‘ Abfrage param eine AUTHORIZATION_CODE enthält, wenn nicht, es tritt weg Schritt 1, wenn ja Schritt 2.

Answer 2

Ich benutzte den gleichen Stapel (Express, eckig, Pass) und folgte diesem Ansatz.

Ich habe eine Schaltfläche erstellt.

<a href="/auth/facebook">Login with facebook</a> 

Auch habe ich zwei Routen für Pass

// send to facebook to do the authentication 
    app.get('/auth/facebook', passport.authenticate('facebook', {scope: 'email'})); 

    // handle the callback after facebook has authenticated the user 
    app.get('/auth/facebook/callback', passport.authenticate('facebook', { 
    successRedirect: '/#/profile', 
    failureRedirect: '/' //Redirect Homepage 
    })); 

Dieser Code zeigt, dass, wenn Sie sich erfolgreich anmelden werden Sie auf Winkel Route umleiten sein (/ #/profile) Nach umleiten Sie ein Cookie haben werden Das hat ein Token mit dem Namen connect.sid, da passpjs express-session verwendet.

Anschließend können Sie überprüfen, ob Benutzer dieses Middleware in überall angemeldet

// route middleware to ensure user is logged in 
function isLoggedIn(req, res, next) { 
    if (req.isAuthenticated()) 
    return next(); 

    res.redirect(301, '/'); 
} 

Sie einen Blick auf mein Repository nehmen können, die über den Code enthält. https://github.com/AOnurOzcan/meanTest

Wenn Sie auf ein Problem stoßen, lassen Sie es mich bitte wissen.