Come gestire OAuth nell'app Web Node-Express / Vue?

Question

Sono un po 'confuso su come gestire il flusso OAuth nella mia applicazione. Posso farlo funzionare, ma non sono sicuro delle migliori pratiche e vorrei trovare alcuni buoni articoli / tutorial / documentazione su questo argomento.

La mia app è strutturata come segue:

• Un front-end Vue che invia richieste HTTP tramite axios a un back-end
• Un back-end Node.js / Express che utilizza Passport.js consentendo strategie locali, Google e Facebook

Passport è configurato in questo modo:

passport.use(
    new GoogleStrategy(
        {
            clientID: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
            callbackURL: '/api/login/google/callback'
        },
        async (accesToken, refreshToken, profile, done) => {
            try {
                let user = await User.findOne({ googleId: profile.id });
                if (user) {
                    if (
                        user.email != profile.emails[0].value ||
                        user.pic != profile.photos[0].value
                    ) {
                        user.email = profile.emails[0].value;
                        user.pic = profile.photos[0].value;
                        user.save();
                    }
                    return done(null, user);
                } else {
                    user = await User.findOne({
                        email: profile.emails[0].value
                    });
                    if (user) done(new UserError('existing-user'));
                    const newUser = await new User({
                        googleId: profile.id,
                        email: profile.emails[0].value,
                        name: profile.displayName,
                        pic: profile.photos[0].value
                    }).save();
                    return done(null, newUser);
                }
            } catch (e) {
                return done(e);
            }
        }
    )
);

E questi sono i metodi di autenticazione nel mio componente di accesso:

methods: {
        async login() {
            await authClient.login(this.credentials);
        },
        async googleLogin() {
            window.open('/api/login/google', 'loginPopup', 'menubar=on');
            // window.location.href = '/api/login/google';
        },
        async facebookLogin() {
            window.location.href = '/api/login/facebook';
        },
        async requestResetToken() {
            await userClient.requestResetToken({
                email: this.emailReset
            });
        }
    }

La mia confusione deriva dal fatto che per avviare il flusso OAuth, devo effettivamente lasciare la mia app Vue collegandomi a / api / login / google, che reindirizza alla pagina OAuth di Google. Una volta completato OAuth, non vengo reindirizzato alla mia app Vue ma al back-end Node (tramite la configurazione della richiamata nella configurazione di Passport).

Un modo per farlo funzionare è aprire quel flusso OAuth in una finestra popup, tracciare attraverso la mia app Vue il contenuto di quella finestra e non appena ottengo l'oggetto utente chiudo la finestra e accedo all'utente nel front-end . Ma in qualche modo non sembra del tutto corretto.

Devo trovare un modo per reindirizzare effettivamente la funzione di callback alla mia app Vue e far sì che l'app Vue se ne occupi? Qualche buona risorsa online con esempi per capirlo chiaramente?

Grazie per l'aiuto!

Answer 1

:) Ciao,

Per un'app web di una pagina dovresti usare il flusso del codice di autorizzazione e con Passport dopo un tentativo di oauth dovresti avere un middleware che ti reindirizzerà in caso di fallimento o successo: Documentazione del passaporto :

E un buon esempio per me è stato questo Traversy Media - app di backend con oAuth

Non penso che il passaporto sia il problema, il flusso del token è nel tuo caso ...