Vue, Vuex and Google OAuth 2.0
This is an easy, basic and raw (no styles attached) example of HOW to implement OAuth 2.0
(Google) in Vue
with Vuex store
and localStorage
to persist the token
.
Project setup
npm install
Compiles and hot-reloads for development
npm serve
Compiles and minifies for production
npm build
Lints and fixes files
npm lint
Google's conf
- Create
credentials
: https://console.developers.google.com/apis/credentials and selectOAuth client ID
- Configure consent screen (App example:
OAuth flow for Vue
) and save. - Select
Web Application
- For Authorized URIs put:
http://localhost:8086/callback
(port
should match the port of your running server. ex:8086
). - Add to your
.env
orenvironment variables
the followingdata
(and exclude.env
from version control in your.gitignore
)
VUE_APP_GOOGLE_CLIENT_ID=*****.apps.googleusercontent.com
VUE_APP_GOOGLE_CLIENT_SECRET==*****
VUE_APP_GOOGLE_URL=https://accounts.google.com/o/oauth2/v2/auth?
VUE_APP_GOOGLE_REDIRECT_URI=http://localhost:8086/callback
VUE_APP_GOOGLE_USER_INFO_URI=https://www.googleapis.com/oauth2/v1/userinfo?access_token=
VUE_APP_GOOGLE_TOKEN_URL=https://www.googleapis.com/oauth2/v4/token
VUE_APP_GOOGLE_SCOPE=scope=profile&