create .env and login by Google

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);
+      }
     }
   }
 };