- improve sign-in process

- open gapi instance - add sign-in status
guruahn · Dec 5, 2018 · f9daa9f · f9daa9f
1 parent 69725a0
commit f9daa9f
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 54 deletions.
diff --git a/index.js b/index.js
@@ -22,55 +22,70 @@ var googleAuth = (function () {
       window.gapi.load('auth2', () => {
         window.gapi.auth2.init(config)
         .then(() => {
-          resolve(window.gapi.auth2.getAuthInstance())
+          resolve(window.gapi)
         })
       })
     })
 
   }
-
+
+  function Auth(){
+    if(!(this instanceof Auth))
+      return new Auth()
+    this.Gapi = null /* window.gapi */
+    this.GoogleAuth = null /* window.gapi.auth2.getAuthInstance() */
+    this.isAuthorized = false
+    this.config = null
+    this.isInit = false
+
+    this.isLoaded = function(){
+      /* eslint-disable */
+      console.warn('isLoaded() will be deprecated. You can use "this.$gAuth.isInit"')
+      return !!this.GoogleAuth
+    };
 
-  let Auth = {
-    GoogleAuthInstance: null,
-    isLoaded() {
-      return !!this.GoogleAuthInstance
-    },
-    load(config) {
+    this.load = (config) => {
+      this.config = config
       installClient()
       .then(() => {
         return initClient(config)
       })
-      .then((instance) => {
-        this.GoogleAuthInstance = instance
+      .then((gapi) => {
+        this.Gapi = gapi
+        this.GoogleAuth = gapi.auth2.getAuthInstance()
+        this.isInit = true
+        this.isAuthorized = this.GoogleAuth.isSignedIn.get()
       })
-    },
-    
-    signIn (successCallback, errorCallback) {
+    };
+
+    this.signIn = (successCallback, errorCallback) => {
       return new Promise((resolve, reject) => {
-        if(!this.GoogleAuthInstance) {
+        if(!this.GoogleAuth) {
           if(typeof errorCallback === 'function') errorCallback(false)
           reject(false)
           return
         }
-        this.GoogleAuthInstance.signIn()
-        .then(function (googleUser) {
+        this.GoogleAuth.signIn()
+        .then(googleUser => {
           if(typeof successCallback === 'function') successCallback(googleUser)
+          this.isAuthorized = this.GoogleAuth.isSignedIn.get()
           resolve(googleUser)
         })
-        .catch(function(error) {
+        .catch(error => {
           if(typeof errorCallback === 'function') errorCallback(error)
           reject(error)
         })
       })
-    },
-    getAuthCode (successCallback, errorCallback) {
+    };
+
+    this.getAuthCode =  (successCallback, errorCallback) => {
       return new Promise((resolve, reject) => {
-        if(!this.GoogleAuthInstance) {
+        if(!this.GoogleAuth) {
           if(typeof errorCallback === 'function') errorCallback(false)
           reject(false)
           return
         }
-        this.GoogleAuthInstance.grantOfflineAccess({prompt: 'select_account'})
+        this.GoogleAuth.grantOfflineAccess({prompt: 'select_account'})
         .then(function(resp) {
           if(typeof successCallback === 'function') successCallback(resp.code)
           resolve(resp.code)
@@ -80,32 +95,30 @@ var googleAuth = (function () {
           reject(error)
         })
       })
-      
-    },
-    signOut (successCallback, errorCallback) {
+    };
+
+    this.signOut = (successCallback, errorCallback) => {
       return new Promise((resolve, reject) => {
-        if(!this.GoogleAuthInstance) {
+        if(!this.GoogleAuth) {
           if(typeof errorCallback === 'function') errorCallback(false)
           reject(false)
           return
         }
-        this.GoogleAuthInstance.signOut()
-        .then(function () {
+        this.GoogleAuth.signOut()
+        .then(() => {
           if(typeof successCallback === 'function') successCallback()
-          resolve()
+          this.isAuthorized = false
+          resolve(true)
         })
-        .catch(function(error) {
+        .catch(error => {
           if(typeof errorCallback === 'function') errorCallback(error)
           reject(error)
         })
       })
-    }
+    };
   }
 
-
-
-
-  return Auth
+  return new Auth()
 })();
 
 
@@ -137,4 +150,4 @@ function installGoogleAuthPlugin (Vue, options) {
   Vue.gAuth.load(GoogleAuthConfig)
 }
 
-export default installGoogleAuthPlugin
+export default installGoogleAuthPlugin
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-google-oauth2",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Handling Google Auth2 sign-in and sign-out",
   "main": "index.js",
   "scripts": {

diff --git a/sample.html b/sample.html
@@ -1,8 +1,9 @@
 <template>
   <div>
     <h1>Test</h1>
-    <button @click="handleClickGetAuth" :disabled="!isLoaded">get auth code</button>
-    <button @click="handleClickSignIn" :disabled="!isLoaded">signIn</button>
+    <button @click="handleClickGetAuth" :disabled="!isInit">get auth code</button>
+    <button @click="handleClickSignIn" v-if="!isSignIn" :disabled="!isInit">signIn</button>
+    <button @click="handleClickSignOut" v-if="isSignIn" :disabled="!isInit">sign out</button>
   </div>
 </template>
 
@@ -16,51 +17,63 @@ <h1>Test</h1>
 */
 export default {
   name: 'test',
-  props: [],
-  components: {
-
-  },
   data () {
     return {
-      isLoaded: false
+      isInit: false,
+      isSignIn: false
     }
   },
-  computed: {
-
-  },
 
   methods: {
     handleClickGetAuth(){
       this.$gAuth.getAuthCode()
       .then(authCode => {
-        //on success
+        // On success
         return this.$http.post('http://your-backend-server.com/auth/google', { code: authCode, redirect_uri: 'postmessage' })
       })
       .then(response => {
-        //and then
+        // And then
       })
       .catch(error => {
-        //on fail do something
+        // On fail do something
       })
     },
 
     handleClickSignIn(){
       this.$gAuth.signIn()
       .then(user => {
-        //on success do something, refer to https://developers.google.com/identity/sign-in/web/reference#users
+        // On success do something, refer to https://developers.google.com/identity/sign-in/web/reference#users
         console.log('user', user)
+        // You can execute API, refer to https://developers.google.com/identity/protocols/googlescopes
+        var request = this.Gapi.client.request({
+          'method': 'GET',
+          'path': '/drive/v3/about',
+          'params': {'fields': 'user'}
+        });
+        this.isSignIn = this.$gAuth.isAuthorized
+      })
+      .catch(error  => {
+        // On fail do something
+      })
+    },
+
+    handleClickSignOut(){
+      this.$gAuth.signOut()
+      .then(() => {
+        // On success do something
+        this.isSignIn = this.$gAuth.isAuthorized
       })
       .catch(error  => {
-        //on fail do something
+        // On fail do something
       })
     }
   },
   mounted(){
     let that = this
     let checkGauthLoad = setInterval(function(){
-      that.isLoaded = that.$gAuth.isLoaded()
-      console.log('checked', that.isLoaded)
-      if(that.isLoaded) clearInterval(checkGauthLoad)
+      that.isInit = that.$gAuth.isInit
+      that.isSignIn = that.$gAuth.isAuthorized
+      if(that.isInit) clearInterval(checkGauthLoad)
     }, 1000);
   }