vue-google-auth

Handling Google sign-in and sign-out

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-google-auth
45141.0.57 years ago7 years agoMinified + gzip package size for vue-google-auth in KB

Readme

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.js

Usage - 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 )) ``` The googleUser object that is being returned will be: ``` { "token
type": "Bearer", "accesstoken": "xxx", "scope": "xxx", "loginhint": "xxx", "expiresin": 3600, "idtoken": "xxx", "sessionstate": {
"extraQueryParams": {
"authuser": "0"
}
}, "first
issuedat": 1234567891011, "expiresat": 1234567891011, "idpId": "google" } ```

Usage - Sign-out

Handling Google sign-out ``` import Vue from 'vue' Vue.googleAuth().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 Google Sign-in Flow