|
@@ -6,10 +6,29 @@ import { useDisplay } from "vuetify";
|
|
import { storeToRefs } from "pinia";
|
|
import { storeToRefs } from "pinia";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useI18n } from "vue-i18n";
|
|
import Navbar from "@/components/Navbar.vue";
|
|
import Navbar from "@/components/Navbar.vue";
|
|
|
|
+import { googleTokenLogin } from "vue3-google-login";
|
|
|
|
+
|
|
|
|
+const GOOGLE_CLIENT_ID =
|
|
|
|
+ "136107811725-n71808u8t465f1afhpe2e5j7mn606nd8.apps.googleusercontent.com";
|
|
|
|
+
|
|
|
|
+const data = ref();
|
|
|
|
+
|
|
|
|
+const handleGoogleAccessTokenLogin = () => {
|
|
|
|
+ googleTokenLogin({
|
|
|
|
+ clientId: GOOGLE_CLIENT_ID,
|
|
|
|
+ }).then((response) => {
|
|
|
|
+ console.log("Google response", response);
|
|
|
|
+ data.value = response;
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
|
|
const mainStore = useMainStore();
|
|
const mainStore = useMainStore();
|
|
const mainStoreRef = storeToRefs(mainStore);
|
|
const mainStoreRef = storeToRefs(mainStore);
|
|
|
|
|
|
|
|
+const callback = (response: any) => {
|
|
|
|
+ console.log("Google response", response);
|
|
|
|
+};
|
|
|
|
+
|
|
// variable
|
|
// variable
|
|
const email = ref("");
|
|
const email = ref("");
|
|
const password = ref("");
|
|
const password = ref("");
|
|
@@ -110,11 +129,20 @@ onMounted(() => {
|
|
<span></span>
|
|
<span></span>
|
|
</section>
|
|
</section>
|
|
|
|
|
|
- <v-btn rounded="pill" @click.prevent="submit" class="google-btn">
|
|
|
|
|
|
+ <v-btn
|
|
|
|
+ class="google-btn"
|
|
|
|
+ type="button"
|
|
|
|
+ @click="handleGoogleAccessTokenLogin"
|
|
|
|
+ rounded="pill"
|
|
|
|
+ >
|
|
<img src="@/assets/img/google.png" alt="" />
|
|
<img src="@/assets/img/google.png" alt="" />
|
|
- 以 Google 帳號登入
|
|
|
|
|
|
+ 使用 Google 進行登入
|
|
</v-btn>
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ <!-- <button type="button" @click="handleGoogleAccessTokenLogin">
|
|
|
|
+ 使用 Google 進行登入
|
|
|
|
+ </button> -->
|
|
</v-form>
|
|
</v-form>
|
|
</v-col>
|
|
</v-col>
|
|
</v-row>
|
|
</v-row>
|