create .env and login by Google

This commit is contained in:
NekoVari 2023-11-19 03:50:10 +07:00
parent 6853d106d8
commit 419d6d9813
5 changed files with 67 additions and 4 deletions

3
.gitignore vendored
View file

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

View file

@ -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"
},

View file

@ -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')

View file

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

View file

@ -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"