vue-google-auth
Handling Google sign-in and sign-out for Vue.js applications
Installation
``` npm install vue-google-auth ```Initialization
``` import GoogleAuth from 'vue-google-auth' Vue.use(GoogleAuth, { clientID: 'xxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com' }) Vue.googleAuth().load() ``` Ideally you shall place this in your app entry file, e.g. src/main.jsUsage - Sign-in
(a) Handling Google sign-in, getting the one-time authorization code from Google
``` import Vue from 'vue' Vue.googleAuth().signIn(function (authorizationCode) { // things to do when sign-in succeeds // You can send the authorizationCode to your backend server for further processing, for example this.$http.post('http://your/backend/server', { code: authorizationCode, redirecturi: 'postmessage' }).then(function (response) {if (response.body) {
// ...
}
}, function (error) {
console.log(error)
})
}, function (error) {
// things to do when sign-in fails
))
```
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.
(b) Alternatively, if you would like to directly get back the accesstoken and idtoken
``` import Vue from 'vue' // Just add in this line Vue.googleAuth().directAccess() Vue.googleAuth().signIn(function (googleUser) { // things to do when sign-in succeeds }, function (error) { // things to do when sign-in fails )) ``` ThegoogleUser
object that is being returned will be:
```
{
"tokentype": "Bearer",
"accesstoken": "xxx",
"scope": "xxx",
"loginhint": "xxx",
"expiresin": 3600,
"idtoken": "xxx",
"sessionstate": {
"extraQueryParams": {
"authuser": "0"
}
},
"firstissuedat": 1234567891011,
"expiresat": 1234567891011,
"idpId": "google"
}
```