create .env and login by Google

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+#env
+.env

package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.4.0",
+    "axios": "^1.6.2",
     "dotenv": "^16.3.1",
     "ol": "^7.4.0",
     "ol-contextmenu": "^5.2.1",
@@ -17,6 +17,8 @@
     "ol-geocoder": "^4.3.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
+    "vue3-google-login": "^2.0.25",
+    "vue3-google-oauth2": "^1.0.7",
     "vue3-openlayers": "^1.0.0",
     "vuetify": "^3.3.8"
   },

src/main.js

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import '@/style.css'
 
+
 // Vuetify
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
@@ -12,10 +13,11 @@ import OpenLayersMap from "vue3-openlayers";
 
 import App from '@/App.vue'
 import router from '@/plugins/router'
+import vue3GoogleLogin from 'vue3-google-login'
 
 const vuetify = createVuetify({
     components,
     directives,
   })
 
-createApp(App).use(router).use(vuetify).use(OpenLayersMap).mount('#app')
+createApp(App).use(router).use(vuetify).use(OpenLayersMap).use(vue3GoogleLogin,{ clientId: import.meta.env.VITE_CLIENT_ID }).mount('#app')

src/views/Login.vue

@@ -50,7 +50,7 @@
               ลงชื่อเข้าใช้</v-btn>
             </v-row>
             <v-row class="button">
-              <v-btn class="text-none" rounded="xl" variant="tonal" width="45vw" height="44px">
+              <v-btn @click.prevent="loginGoogle" class="text-none" rounded="xl" variant="tonal" width="45vw" height="44px">
                 ลงชื่อเข้าใช้ด้วย Google</v-btn>
             </v-row>
             <v-row class="button">
@@ -76,6 +76,10 @@ import {RouterLink} from 'vue-router';
 import TopBar from '@/components/TopBar.vue';
 import { VContainer } from 'vuetify/lib/components/index.mjs';
 
+import { googleSdkLoaded } from "vue3-google-login";
+import axios from 'axios'
+
+
 export default {
   components: {
     TopBar
@@ -123,6 +127,43 @@ export default {
       } else {
         console.log('Email and Password cannot be empty');
       }
+    },
+
+    loginGoogle(){
+      googleSdkLoaded(google => {
+        google.accounts.oauth2
+          .initCodeClient({
+            client_id:
+              import.meta.env.VITE_CLIENT_ID,
+            scope: "email profile openid",
+            redirect_uri: "http://localhost:5000/api/users/googleAuth/callback",
+            callback: response => {
+              if (response.code) {
+                this.sendCodeToBackend(response.code);
+              }
+            }
+          })
+          .requestCode();
+      });
+    },
+    async sendCodeToBackend(code) {
+      try {
+        const headers = {
+          Authorization: code
+        };
+        const response = await axios.post("http://localhost:5000/api/users/googleAuth", null, { headers });
+        const userDetails = response.data;
+        console.log("User Details:", userDetails);
+        this.userDetails = userDetails;
+
+        sessionStorage.setItem('current_user', userDetails.user.username);
+        this.$router.push({ name: 'home' });
+
+        // Redirect to the homepage ("/")
+        // this.$router.push({ name: 'home' });
+      } catch (error) {
+        console.error("Failed to send authorization code:", error);
+      }
     }
   }
 };

yarn.lock

@@ -278,7 +278,7 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-axios@^1.4.0:
+axios@^1.6.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
   integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
@@ -350,6 +350,11 @@ dompurify@^2.2.0:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.7.tgz#277adeb40a2c84be2d42a8bcd45f582bfa4d0cfc"
   integrity sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==
 
+dotenv@^16.3.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+
 earcut@^2.2.3:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a"
@@ -728,6 +733,16 @@ vue-router@^4.2.4:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue3-google-login@^2.0.25:
+  version "2.0.25"
+  resolved "https://registry.yarnpkg.com/vue3-google-login/-/vue3-google-login-2.0.25.tgz#ee5dbd758a4ff658faab4f7faf1637423301df30"
+  integrity sha512-b6EfYFF2KH1qSiiCKI9WmPB79GdXifPB8qOt48RRmo1F5h3UcigrrqzQCosjcRLcTqUpRQcZ9TeKYP4ZVroNHQ==
+
+vue3-google-oauth2@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/vue3-google-oauth2/-/vue3-google-oauth2-1.0.7.tgz#2b229d438aa581467d40ab7acdf2925cb37b3b20"
+  integrity sha512-XZv5+IVRLqKrsfm6DamD75e4LPynDt3xpmEw3SQBKfnUvpaIq6YuimOCPoXMfedR6nQHJeZkw62E/ii2disppA==
+
 vue3-openlayers@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/vue3-openlayers/-/vue3-openlayers-1.3.0.tgz#064f854cacffed900f5e99b3f0f82c70a0daf346"