diff --git a/.gitignore b/.gitignore
index a547bf3..025cdbf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
*.njsproj
*.sln
*.sw?
+
+#env
+.env
diff --git a/package.json b/package.json
index 32364b2..7c85610 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/main.js b/src/main.js
index 04197e6..e945fa1 100644
--- a/src/main.js
+++ b/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')
\ No newline at end of file
+createApp(App).use(router).use(vuetify).use(OpenLayersMap).use(vue3GoogleLogin,{ clientId: import.meta.env.VITE_CLIENT_ID }).mount('#app')
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 0bc4f26..8fc7346 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -50,7 +50,7 @@
ลงชื่อเข้าใช้
-
+
ลงชื่อเข้าใช้ด้วย Google
@@ -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);
+ }
}
}
};
diff --git a/yarn.lock b/yarn.lock
index 4201a38..6850825 100644
--- a/yarn.lock
+++ b/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"