參考文檔
- 點此處去 firebase 官網(wǎng)
- 點此處去 web端的谷歌登錄文檔
- 點此處去 facebook開發(fā)者官網(wǎng)鏈接
實現(xiàn)(谷歌登錄)
- 首先注冊一個賬號登錄firebase(可以使用谷歌賬號登錄)
- 然后創(chuàng)建項目(走默認(rèn)配置就行了)
- 添加應(yīng)用(走默認(rèn)配置),如圖所示,本文介紹web應(yīng)用。
- 應(yīng)用添加完畢后走項目設(shè)置-如下圖(進入常規(guī)界面,然后滾動條滾動至最底部,進入步驟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);
- 如果想看詳情可以至 web端的谷歌登錄文檔 看。
1) 創(chuàng)建 Google 提供方對象實例
2) 使用彈出式窗口登錄import { GoogleAuthProvider } from "firebase/auth"; const provider = new GoogleAuthProvider();
3)此時執(zhí)行會發(fā)現(xiàn)無法進行谷歌登錄,需到firebase后臺管理系統(tǒng)配置google登錄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); // ... });
4)此時谷歌登錄調(diào)用則有效果了(項目啟動域名必須為 http://localhost:xxxx/,如果不為這個,請配置域名白名單)
5)打包后發(fā)布到服務(wù)器上后,需要配置域名白名單,不然上線就無法第三方登錄
6)至此谷歌登錄配置結(jié)束;
實現(xiàn)(facebook登錄)
-
facebook第三方登錄需要到 facebook的后臺管理系統(tǒng)配置流程。facebook開發(fā)者官網(wǎng)鏈接
-
創(chuàng)建自己的應(yīng)用(流程跟著官網(wǎng)走就行了),然后準(zhǔn)備這個界面(應(yīng)用編號和應(yīng)用密鑰)
-
到firebase上增加允許facebook登錄
-
在這里填寫facebook的應(yīng)用編碼和應(yīng)用密鑰。
-
最關(guān)鍵的一步:復(fù)制firebase中的OAuth(上圖密鑰下面那個地址:https://test-85788.firebaseapp.com/__/auth/handler),然后配置到facebook中的重定向OAuth,所在位置看下圖
文章來源:http://www.zghlxwxcb.cn/news/detail-850152.html
-
完成上面步驟后打包至測試服地址或者線上測試!facebook登錄不支持
http
協(xié)議。文章來源地址http://www.zghlxwxcb.cn/news/detail-850152.html
注意事項
- facebook配置出現(xiàn)以下圖片問題的原因之一:http鏈接無法使用facebook登錄。必須配置https才行(
意味著線下無法測試facebook登錄
)!
到了這里,關(guān)于前端使用firebase配置第三方登錄介紹(谷歌登錄,facebook登錄等)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!