在Node / Vuejs App中处理用户登录的逻辑

Question

I am building a webapp in Vuejs and I've run into the same issue again.

In short, I'm allowing users to register using their Twitch account (Login with Twitch), and it works great. My question is more about the general architecture of a single-page application in regards to logging in with a third-party service.

My stack is Nodejs, Vuejs for the frontend, and connect-mongo for handling session in my Mongo database.

My questions are a bit more general:

1) once the user logs in with Twitch, I've got an access_token and a refresh_token, along with a profile object. What am I supposed to do with these things? Create a user object in my database with the tokens?

2) connect-mongo is working properly - it's setting up a record in my Mongo db sessions table. Again - am I supposed to do anything with this data or is it purely managing user logins behind the scenes?

3) I'd like to use this logged in state on the frontend (for example, kicking a user back to the login page if they try to access a members-only page) - from the perspective of the frontend, what can I "check" to know if the user is logged in? There are tons of cookies set from the Twitch login, but I have no idea what any of them mean.

4) If their login has expired, how do I force them to login again?

One more piece of information is that I'm not pulling any information about them when they aren't on the site. The Twitch login is purely to get their profile to customize their experience.

I've seen a hundred flow charts of the Oauth login process, but none of them are laid out in layman's terms. At least none that I've found - it seems like dozens of handshakes are occurring but I have no idea what's actually happening in the context of my app after they login. Lots of random strings of characters and tokens flying around, not much in the way of explanation.

Here is my server code currently: https://github.com/gedrick/multitwitch/blob/master/server.js

around line 70 is where I hit the "I copied sample code and now have no idea what's happening" train of thought.

These are some general questions and any and all help to understand how to authenticate and manage user logins is SUPER appreciated. Everything I've tried for weeks has sadly ended in frustration. Thank you for reading!

Answer 1

I hope this isn't considered cheating, but I put together a full demo of Passport signin / authentication. It uses Mongo to store the user and their tokens.

https://github.com/gedrick/vue-node-passport