vue-google-oauth2-gapi
Handling Google sign-in and sign-out for Vue.js applications
Forked from https://github.com/guruahn/vue-google-oauth2
Same as fork but allows you to override options and a few other bug fixes.
This package contains Google API script loading before calling that (it was required for my project and I wasn't able to wait for merge my PR into repository forked from)
Installation
npm install vue-google-oauth2-gapi
Initialization
Vue
Ideally you shall place this in your app entry file, e.g. src/main.js
Usage - Sign-in
(a) Handling Google sign-in, getting the one-time authorization code from Google
Frontend-side(Vue.js)
this$gAuth
The authorizationCode
that is being returned is the one-time code
that you can send to your backend server, so that the server can exchange for its own access token and refresh token.
Backend-side(Golang)
auth_code := ac.Code //from front-end side// generate a config of oauthconf := &oauth2.Config{ ClientID: "XXXXXXXX", ClientSecret: "XXXXXXXX", RedirectURL: "postmessage", Scopes: []string{ "profile", "email", "https://www.googleapis.com/auth/plus.login", }, Endpoint: "XXXXXX",}// exchange to token inclued refresh_token from codetoken, err = conf.Exchange(oauth2.NoContext, auth_code)if err != nil { sErr := NewStatusErr(401, err.Error(), "Unauthorized") return nil, &sErr}
Note, RedirectURL
must be postmessage
!!
(b) Alternatively, if you would like to directly get back the access_token and id_token
this.$gAuth.signIn(function (user) {
//on success do something
console.log('user', user)
}, function (error) {
//on fail do something
})
The googleUser
object that is being returned will be:
{
"token_type": "Bearer",
"access_token": "xxx",
"scope": "xxx",
"login_hint": "xxx",
"expires_in": 3600,
"id_token": "xxx",
"session_state": {
"extraQueryParams": {
"authuser": "0"
}
},
"first_issued_at": 1234567891011,
"expires_at": 1234567891011,
"idpId": "google"
}
Usage - Sign-out
Handling Google sign-out
this.$gAuth.signOut(function () {
// things to do when sign-out succeeds
}, function (error) {
// things to do when sign-out fails
})
Additional Help
Do refer to this sample login page HTML file.
If you are curious of how the entire Google sign-in flow works, please refer to the diagram below