Gitinn Home Explore Help
Register Sign In
u198228
/
vue-ptc
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

第三方登录

冯诚 2 years ago
parent
a14e058628
commit
c5b4657853
10 changed files with 102 additions and 10 deletions
Split View Show Diff Stats
  1. 2 2
      .env
  2. 2 0
      index.html
  3. 7 0
      src/env.d.ts
  4. 1 0
      src/main.ts
  5. 13 6
      src/pages/login/index.vue
  6. 3 2
      src/pages/repaire/steps/StepOne.vue
  7. 1 0
      src/style/login.scss
  8. 9 0
      src/utils/asyncTask.ts
  9. 63 0
      src/utils/third-login.ts
  10. 1 0
      vite.config.ts

+ 2 - 2
.env
View File 

@@ -1,2 +1,2 @@
 
-#VITE_API_BASE=http://t.ptcrepair.com.au
 
-VITE_API_BASE=/api
 
+#VITE_API_BASE=/api
 
+VITE_API_BASE=//t.ptcrepair.com.au

+ 2 - 0
index.html
View File 

@@ -8,6 +8,8 @@
 
   </head>
 
   <body ontouchstart="">
 
     <div id="app"></div>
 
+    <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 type="module" src="/src/main.ts"></script>
 
   </body>
 
 </html>

+ 7 - 0
src/env.d.ts
View File 

@@ -12,3 +12,10 @@ interface ImportMetaEnv {
 
 }
 
 
 declare module 'nprogress'
 
+
 
+interface Window {
 
+  fbAsyncInit(): void
 
+}
 
+
 
+declare const FB: any
 
+declare const google: any

+ 1 - 0
src/main.ts
View File 

@@ -5,6 +5,7 @@ import { getUserInfo } from './store'
 
 // import './utils/rem'
 
 import 'nprogress/nprogress.css'
 
 import './style'
 
+import './utils/third-login'
 
 
 import Toast from './components/toast'
 
 import Dialog from './components/dialog'

+ 13 - 6
src/pages/login/index.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
-  <div v-if="!showSurprise" class="p-login">
 
+  <div class="p-login">
 
     <router-link class="nav-home" to="/">
 
       <i class="icon"></i><span class="text">HOME</span>
 
     </router-link>
 
@@ -43,9 +43,9 @@
 
       <div class="alternative">
 
         <div class="delimiter">Or sign in with</div>
 
         <ul class="list">
 
-          <li class="item" name="google"></li>
 
-          <li class="item" name="facebook"></li>
 
-          <li class="item" name="apple"></li>
 
+          <li ref="gSignin" class="item" name="google"></li>
 
+          <li class="item" name="facebook" @click="FBLogin"></li>
 
+          <li class="item" name="apple" @click="AppleLogin"></li>
 
         </ul>
 
       </div>
 
       <div class="policy">
 
@@ -58,23 +58,30 @@
 
 </template>
 
 
 <script setup lang="ts">
 
-import { ref, reactive } from 'vue'
 
+import { ref, reactive, onMounted } from 'vue'
 
 import { useRouter, useRoute } from 'vue-router'
 
 import { login } from '@/service/user'
 
 import useForm from '@/hooks/useForm'
 
 import { string } from 'yup'
 
 import { getUserInfo } from '@/store'
 
 import Toast from '@/components/toast'
 
+import {
 
+  FBLogin,
 
+  AppleLogin,
 
+  renderGoogleLoginButton,
 
+} from '@/utils/third-login'
 
 
 const router = useRouter()
 
 const { from } = useRoute().query as any
 
-const showSurprise = ref(false)
 
 const { values, handleSubmit } = useForm<ApiUser.Login.Request>({
 
   schema: {
 
     email: string().required().email(),
 
     password: string().required(),
 
   },
 
 })
 
+const gSignin = ref<HTMLElement>()
 
+
 
+onMounted(() => renderGoogleLoginButton(gSignin.value!))
 
 
 async function handleLogin() {
 
   const { message } = await login(values as any)

+ 3 - 2
src/pages/repaire/steps/StepOne.vue
View File 

@@ -92,13 +92,14 @@ async function fetchData() {
 
       const res = await getLocation({ timeout: 2000 })
 
       coords = res?.coords
 
     }
 
-    const { results } = await getShopList({
 
+    let { results } = await getShopList({
 
       page: pageNo,
 
       size: 10,
 
       lat: coords?.latitude,
 
       lng: coords?.longitude,
 
       post_code: postCode.value,
 
     })
 
+    results = results.results || results
 
     list.value.push(...results.items)
 
     pageNo++
 
     hasMore.value = list.value.length < results.pageBean.totalCount
 
@@ -117,7 +118,7 @@ const autocomplete = debounce(async () => {
 
     size: 10,
 
     post_code: value,
 
   })
 
-  suggestions.value = results.items
 
+  suggestions.value = results.results?.items || results.items
 
 }, 300)
 
 
 function handleSearch() {

+ 1 - 0
src/style/login.scss
View File 

@@ -94,6 +94,7 @@
 
     width: 80px;
 
     height: 80px;
 
     background-size: 100% 100%;
 
+    cursor: pointer;
 
     &:nth-child(1) {
 
       background-image: url(@img/google.png);
 
     }

+ 9 - 0
src/utils/asyncTask.ts
View File 

@@ -0,0 +1,9 @@
 
+export default class AsyncTask<T> {
 
+  promise: Promise<T | void>
 
+  done: (data?: T | PromiseLike<T>) => void
 
+
 
+  constructor() {
 
+    this.done = () => {}
 
+    this.promise = new Promise(resolve => (this.done = resolve))
 
+  }
 
+}

+ 63 - 0
src/utils/third-login.ts
View File 

@@ -0,0 +1,63 @@
 
+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.
 
+    xfbml: true, // Parse social plugins on this webpage.
 
+    version: 'v13.0',
 
+  })
 
+
 
+  FB.getLoginStatus(statusChangeCallback)
 
+}
 
+
 
+function statusChangeCallback(response: any) {
 
+  // Called with the results from FB.getLoginStatus().
 
+  console.log('statusChangeCallback')
 
+  console.log(response) // The current login status of the person.
 
+  if (response.status === 'connected') {
 
+    // Logged into your webpage and Facebook.
 
+    testAPI()
 
+  }
 
+}
 
+
 
+function testAPI() {
 
+  // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
 
+  FB.api('/me?fields=id,name,email', function (response: any) {
 
+    console.log(response)
 
+    location.href =
 
+      'https://t.ptcrepair.com.au/user/facebook/callback?name=' +
 
+      response.name +
 
+      '&email=' +
 
+      response.email
 
+  })
 
+}
 
+
 
+export function FBLogin() {
 
+  FB.login(statusChangeCallback, { scope: 'public_profile,email' })
 
+}
 
+
 
+export function AppleLogin() {
 
+  location.href = 'https://t.ptcrepair.com.au/user/apple/login'
 
+}
 
+
 
+export async function renderGoogleLoginButton(parent: HTMLElement) {
 
+  await gTask.promise
 
+  google.accounts.id.renderButton(parent, {
 
+    type: 'icon',
 
+    shape: 'circle',
 
+    theme: 'filled_black',
 
+    width: 40,
 
+  })
 
+}
 
+
 
+window.addEventListener('load', () => {
 
+  google.accounts.id.initialize({
 
+    client_id:
 
+      '745604014349-1dthf8ni49l7313opmcicak5978evvfi.apps.googleusercontent.com',
 
+    login_uri: 'https://t.ptcrepair.com.au/user/google/callback',
 
+  })
 
+  gTask.done()
 
+})

+ 1 - 0
vite.config.ts
View File 

@@ -22,6 +22,7 @@ export default defineConfig(({ command }) => ({
 
   },
 
   base: '/ptc/',
 
   server: {
 
+    https: true,
 
     proxy: {
 
       '/api/': {
 
         target: 'http://t.ptcrepair.com.au',