參考文檔

1. 點此處去 firebase 官網(wǎng)
2. 點此處去 web端的谷歌登錄文檔
3. 點此處去 facebook開發(fā)者官網(wǎng)鏈接

實現(xiàn)（谷歌登錄）

1. 首先注冊一個賬號登錄firebase（可以使用谷歌賬號登錄）
2. 然后創(chuàng)建項目（走默認(rèn)配置就行了）
   
3. 添加應(yīng)用（走默認(rèn)配置），如圖所示，本文介紹web應(yīng)用。
   
4. 應(yīng)用添加完畢后走項目設(shè)置-如下圖（進入常規(guī)界面，然后滾動條滾動至最底部，進入步驟5）
   
5. 在項目中下載依賴并填寫以下初始化代碼（以下代碼在 項目設(shè)置=》常規(guī)（最底部）含有）
   1）下載依賴： npm install firebase
   2）初始化代碼：（只要需要使用firebase的第三方登錄，無論代碼中是否使用初始化信息，以下代碼必須先執(zhí)行?。?pre>// Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional // 初始化firebase的配置信息 const firebaseConfig = { apiKey: "AIzaSyBoayOSkMauSE0rq6vj4NzfsT75tWviJY0", authDomain: "test-csdn.firebaseapp.com", projectId: "test-csdn", storageBucket: "test-csdn.appspot.com", messagingSenderId: "356839085174", appId: "1:356836085174:web:bd0ad1246d767ffce4fa57", measurementId: "G-37QBHYS56N" }; // Initialize Firebase （初始化 firebase ，這一步必須走?。?/span> const app = initializeApp(firebaseConfig);
6. 如果想看詳情可以至 web端的谷歌登錄文檔 看。
   1） 創(chuàng)建 Google 提供方對象實例

   import { GoogleAuthProvider } from "firebase/auth";
   
   const provider = new GoogleAuthProvider();
   

   2） 使用彈出式窗口登錄

   import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // This gives you a Google Access Token. You can use it to access the Google API.
       const credential = GoogleAuthProvider.credentialFromResult(result);
       // 用戶token
       const token = credential.accessToken;
       // 用戶登錄后所獲得的信息 The signed-in user info.
       const user = result.user;
       // IdP data available using getAdditionalUserInfo(result)
       // ...
     }).catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = GoogleAuthProvider.credentialFromError(error);
       // ...
     });
   

   3）此時執(zhí)行會發(fā)現(xiàn)無法進行谷歌登錄，需到firebase后臺管理系統(tǒng)配置google登錄
   
   
   
   4）此時谷歌登錄調(diào)用則有效果了（項目啟動域名必須為 http://localhost:xxxx/，如果不為這個，請配置域名白名單）
   5）打包后發(fā)布到服務(wù)器上后，需要配置域名白名單，不然上線就無法第三方登錄
   
   6）至此谷歌登錄配置結(jié)束；

實現(xiàn)（facebook登錄）

1. facebook第三方登錄需要到 facebook的后臺管理系統(tǒng)配置流程。facebook開發(fā)者官網(wǎng)鏈接

2. 創(chuàng)建自己的應(yīng)用（流程跟著官網(wǎng)走就行了），然后準(zhǔn)備這個界面（應(yīng)用編號和應(yīng)用密鑰）
   

3. 到firebase上增加允許facebook登錄
   

4. 在這里填寫facebook的應(yīng)用編碼和應(yīng)用密鑰。
   

5. 最關(guān)鍵的一步：復(fù)制firebase中的OAuth（上圖密鑰下面那個地址：https://test-85788.firebaseapp.com/__/auth/handler），然后配置到facebook中的重定向OAuth，所在位置看下圖
   
   

6. 完成上面步驟后打包至測試服地址或者線上測試！facebook登錄不支持 http 協(xié)議。文章來源地址http://www.zghlxwxcb.cn/news/detail-850152.html

注意事項

1. facebook配置出現(xiàn)以下圖片問題的原因之一：http鏈接無法使用facebook登錄。必須配置https才行（意味著線下無法測試facebook登錄）！
   

到了這里，關(guān)于前端使用firebase配置第三方登錄介紹（谷歌登錄，facebook登錄等）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！