谷歌登录方式修改

index.html

@@ -18,7 +18,7 @@
       }
     </script>
     <script src="https://connect.facebook.net/en_US/sdk.js" async defer crossorigin="anonymous"></script>
-    <script src="https://accounts.google.com/gsi/client" async defer></script>
+    <!-- <script src="https://accounts.google.com/gsi/client" async defer></script> -->
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

src/pages/login/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-login">
+  <div ref="root" class="p-login">
     <router-link class="nav-home" to="/">
       <i class="icon"></i><span class="text">HOME</span>
     </router-link>
@@ -43,7 +43,14 @@
       <div class="alternative">
         <div class="delimiter">Or sign in with</div>
         <ul class="list">
-          <li ref="gSignin" class="item" name="google"></li>
+          <li
+            class="item g_id_signin"
+            name="google"
+            data-type="icon"
+            data-shape="circle"
+            data-theme="filled_black"
+            data-width="40"
+          ></li>
           <li class="item" name="facebook" @click="FBLogin"></li>
           <li class="item" name="apple" @click="AppleLogin"></li>
         </ul>
@@ -54,6 +61,12 @@
         and acknowledged PTC’s <span class="primary">privacy policy</span>
       </div>
     </div>
+    <div
+      id="g_id_onload"
+      data-client_id="393349837160-3opoqoo9l0gk9uimu212gp9uvm72406m.apps.googleusercontent.com"
+      data-login_uri="https://test.ptcrepair.com.au/api/user/google/callback"
+      data-auto_prompt="false"
+    ></div>
   </div>
 </template>
 
@@ -68,7 +81,7 @@ import Toast from '@/components/toast'
 import {
   FBLogin,
   AppleLogin,
-  renderGoogleLoginButton,
+  // renderGoogleLoginButton,
 } from '@/utils/third-login'
 
 const router = useRouter()
@@ -79,9 +92,14 @@ const { values, handleSubmit } = useForm<ApiUser.Login.Request>({
     password: string().required(),
   },
 })
-const gSignin = ref<HTMLElement>()
+const root = ref<HTMLElement>()
 
-onMounted(() => renderGoogleLoginButton(gSignin.value!))
+// onMounted(() => renderGoogleLoginButton(gSignin.value!))
+onMounted(() => {
+  const s = document.createElement('script')
+  s.src = 'https://accounts.google.com/gsi/client'
+  root.value!.appendChild(s)
+})
 
 async function handleLogin() {
   const { message } = await login(values as any)

src/utils/third-login.ts

@@ -1,14 +1,6 @@
-import AsyncTask from './asyncTask'
+// import AsyncTask from './asyncTask'
 
-const gTask = new AsyncTask()
-
-/* window.fbAsyncInit = () => {
-  FB.init({
-    appId: '683963442752208',
-    cookie: true, // Enable cookies to allow the server to access the session.
-    version: 'v13.0',
-  })
-} */
+// const gTask = new AsyncTask()
 
 function fbStatusChangeCallback(response: any) {
   // Called with the results from FB.getLoginStatus().
@@ -40,7 +32,7 @@ export function AppleLogin() {
   location.href = '/api/user/apple/login'
 }
 
-export async function renderGoogleLoginButton(parent: HTMLElement) {
+/* export async function renderGoogleLoginButton(parent: HTMLElement) {
   await gTask.promise
   google.accounts.id.renderButton(parent, {
     type: 'icon',
@@ -48,17 +40,14 @@ export async function renderGoogleLoginButton(parent: HTMLElement) {
     theme: 'filled_black',
     width: 40,
   })
-}
+} */
 
-window.addEventListener('load', () => {
+/* window.addEventListener('load', () => {
   google.accounts.id.initialize({
     client_id:
       '393349837160-3opoqoo9l0gk9uimu212gp9uvm72406m.apps.googleusercontent.com',
-    // login_uri: import.meta.env.VITE_ORIGIN + '/api/user/google/callback',
-    // ux_mode: 'redirect',
-    callback() {
-      location.href = '/api/user/google/callback'
-    },
+    login_uri: import.meta.env.VITE_ORIGIN + '/api/user/google/callback',
+    ux_mode: 'redirect',
   })
   gTask.done()
-})
+}) */