new: login

package-lock.json

@@ -11,7 +11,8 @@
         "@quasar/extras": "^1.0.0",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
-        "quasar": "^1.0.0"
+        "quasar": "^1.0.0",
+        "vue-google-oauth2": "^1.5.8"
       },
       "devDependencies": {
         "@quasar/app": "^2.0.0"
@@ -12866,6 +12867,11 @@
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
       "dev": true
     },
+    "node_modules/vue-google-oauth2": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/vue-google-oauth2/-/vue-google-oauth2-1.5.8.tgz",
+      "integrity": "sha512-mATpPrLjzjAoUwgFC2feEZEhyoFyItPQSdEgX3m+rHI17sXLEdKzcMLmk+8B1obu4J/YVuVRR9A1afs+4VEk0Q=="
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -25891,6 +25897,11 @@
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
       "dev": true
     },
+    "vue-google-oauth2": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/vue-google-oauth2/-/vue-google-oauth2-1.5.8.tgz",
+      "integrity": "sha512-mATpPrLjzjAoUwgFC2feEZEhyoFyItPQSdEgX3m+rHI17sXLEdKzcMLmk+8B1obu4J/YVuVRR9A1afs+4VEk0Q=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -12,7 +12,8 @@
     "@quasar/extras": "^1.0.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "quasar": "^1.0.0"
+    "quasar": "^1.0.0",
+    "vue-google-oauth2": "^1.5.8"
   },
   "devDependencies": {
     "@quasar/app": "^2.0.0"

quasar.conf.js

@@ -18,7 +18,7 @@ module.exports = function (/* ctx */) {
     // --> boot files are part of "main.js"
     // https://v1.quasar.dev/quasar-cli/boot-files
     boot: [
-      
+      'google',
       'axios',
     ],
 

src/boot/google.js

+import GAuth from 'vue-google-oauth2'
+
+export default ({ Vue }) => {
+  const gauthOption = {
+    clientId: '502899943335-f47psuotb2m4jq5019fnnl8mjg9p6k5j.apps.googleusercontent.com',
+    scope: 'profile email',
+    prompt: 'select_account',
+    // ux_mode: 'redirect',
+    // redirect_uri: 'http://localhost:8080/callback'
+  }
+  Vue.use(GAuth, gauthOption)
+}
\ No newline at end of file

src/layouts/MainLayout.vue

@@ -39,8 +39,8 @@
             <q-tooltip>Notifications</q-tooltip>
           </q-btn>
           <q-btn round flat>
-            <q-avatar size="26px">
-              <img src="https://cdn.quasar.dev/img/boy-avatar.png">
+            <q-avatar size="26px" @click="loginGoogle">
+              <img :src="defaultAvatar">
             </q-avatar>
             <q-tooltip>Account</q-tooltip>
           </q-btn>
@@ -142,6 +142,18 @@ export default {
   name: 'MyLayout',
   data () {
     return {
+      defaultAvatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
+      userUpdate: {
+        token: '',
+        firstName: '',
+        lastName: '',
+        email: '',
+        avatar: '',
+        fullname: '',
+        id: '',
+        isAdmin: false,
+        isAuth: false
+      },
       leftDrawerOpen: false,
       search: '',
       links1: [
@@ -178,6 +190,45 @@ export default {
   },
   created () {
     this.fabYoutube = fabYoutube
+  },
+  methods: {
+    async loginGoogle() {
+      try {
+        const googleUser = await this.$gAuth.signIn()
+        // const authCode = await this.$gAuth.getAuthCode()
+        // console.log('getAuthCode()',authCode)
+        if (!googleUser) {
+          return null
+        }
+        else{
+          const bio = googleUser.getBasicProfile()
+          this.userUpdate.token = ''
+          this.userUpdate.firstName = bio.getGivenName()
+          this.userUpdate.lastName = bio.getFamilyName()
+          this.userUpdate.email = bio.getEmail()
+          this.userUpdate.avatar = bio.getImageUrl()
+          this.userUpdate.fullname = bio.getName()
+          this.userUpdate.id = bio.getId()
+          this.userUpdate.isAdmin = false
+          this.userUpdate.isAuth = true
+          this.defaultAvatar = this.userUpdate.avatar
+          console.log(bio)
+          
+          // this.upsertUser()
+          if (this.$route.query.redirect){
+            this.$router.push(this.$route.query.redirect)
+          }
+          else{
+            // this.$router.push('/')
+
+          }
+        }
+      } catch (error) {
+        //on fail do something
+        console.error(error)
+        return null
+      }
+    }
   }
 }
 </script>