Vue

Vite FaceBook 第三方登入

FaceBook Sdk 申請

一. 到facebook開發人員網站，點選我的應用程式
二. 點選建立應用程式
三. 點選建立應用程式
四. 點選使用Fb驗證用戶索取資料，按下確定按鈕
五. 如圖先選『我還不想連結商家資產管理組合』，讓繼續按鈕可以選取
六. 選取『前往主控台』
出現跳出框
七. 『自訂使用案例』=> Facebook 權限
八. 『自訂使用案例』 => Facebook 設定
有效得重新導向
九. 『自訂使用案例』 => Facebook 『快速入門』
1.告訴我們您的網站 2.設定 Facebook JavaScript SDK
Facebook JavaScript SDK 沒有任何需要下載或安裝的獨立檔案，您只需要將一小段一般的 JavaScript 置入 HTML 中，就會以非同步的方式將 SDK 載入頁面中。非同步載入是指不會阻擋頁面中其他元素的載入。
3.檢查登入狀態
載入您的網頁時，第一個步驟是確認用戶是否已經使用「Facebook 登入」來登入您的應用程式。呼叫 FB.getLoginStatus 來啟動這個程序。這個函式會觸發對 Facebook 的呼叫來取得登入狀態，接著呼叫您的回呼函式來傳回結果。
以下擷取自上述程式碼範例，為在頁面載入時用來檢查用戶登入狀態所執行的部分程式碼
九. 下圖Id 就是我要們獲取的重要參數
//

安裝

1
npm install --save @healerlab/vue3-facebook-login

Vue3 Facebook Login

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script setup lang="ts">
import { HFaceBookLogin } from '@healerlab/vue3-facebook-login';
const fbAppID = ref<string>(`${import.meta.env.VITE_FB_APP_ID}`)
const onSuccess = (response) => {
  // get your auth token and info
   // 取得你的身分驗證令牌和訊息
}

const onFailure = () => {
  // logic if auth failed
  // 身份驗證失敗時的邏輯
}
</script>

<style scoped lang="scss">
.fb-button {
  display: inline-block;
  margin: 10px 0 10 0;
  color: white;
  background-color: #1967d2;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <HFaceBookLogin 
    v-slot="fbLogin" 
    :app-id="fbAppID" 
    @onSuccess="onSuccess"
    @onFailure="onFailure"
    scope="email,public_profile" 
    fields="id,name,email,first_name,last_name,birthday">
  <i @click="fbLogin.initFBLogin" class="fa-brands fa-facebook"></i>
  </HFaceBookLogin>
</template>