国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

前端使用firebase配置第三方登錄介紹(谷歌登錄,facebook登錄等)

這篇具有很好參考價值的文章主要介紹了前端使用firebase配置第三方登錄介紹(谷歌登錄,facebook登錄等)。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

參考文檔

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

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

  1. 首先注冊一個賬號登錄firebase(可以使用谷歌賬號登錄)
  2. 然后創(chuàng)建項目(走默認(rèn)配置就行了)
    firebase google第三方登錄,js系列,前端
  3. 添加應(yīng)用(走默認(rèn)配置),如圖所示,本文介紹web應(yīng)用。
    firebase google第三方登錄,js系列,前端
  4. 應(yīng)用添加完畢后走項目設(shè)置-如下圖(進入常規(guī)界面,然后滾動條滾動至最底部,進入步驟5)
    firebase google第三方登錄,js系列,前端
  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登錄
    firebase google第三方登錄,js系列,前端
    firebase google第三方登錄,js系列,前端
    firebase google第三方登錄,js系列,前端
    4)此時谷歌登錄調(diào)用則有效果了(項目啟動域名必須為 http://localhost:xxxx/,如果不為這個,請配置域名白名單)
    5)打包后發(fā)布到服務(wù)器上后,需要配置域名白名單,不然上線就無法第三方登錄
    firebase google第三方登錄,js系列,前端
    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)用密鑰)
    firebase google第三方登錄,js系列,前端

  3. 到firebase上增加允許facebook登錄
    firebase google第三方登錄,js系列,前端

  4. 在這里填寫facebook的應(yīng)用編碼和應(yīng)用密鑰。
    firebase google第三方登錄,js系列,前端

  5. 最關(guān)鍵的一步:復(fù)制firebase中的OAuth(上圖密鑰下面那個地址:https://test-85788.firebaseapp.com/__/auth/handler),然后配置到facebook中的重定向OAuth,所在位置看下圖firebase google第三方登錄,js系列,前端
    firebase google第三方登錄,js系列,前端
    firebase google第三方登錄,js系列,前端

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

注意事項

  1. facebook配置出現(xiàn)以下圖片問題的原因之一:http鏈接無法使用facebook登錄。必須配置https才行(意味著線下無法測試facebook登錄)!
    firebase google第三方登錄,js系列,前端

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

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • pc端web網(wǎng)站使用第三方微信登錄流程(web、js)

    pc端web網(wǎng)站使用第三方微信登錄流程(web、js)

    網(wǎng)站應(yīng)用微信登錄是基于OAuth2.0協(xié)議標(biāo)準(zhǔn)構(gòu)建的微信OAuth2.0授權(quán)登錄系統(tǒng)。 網(wǎng)站接入準(zhǔn)備工作 微信開放平臺注冊開發(fā)者賬號,點擊查看操作指引; 微信開放平臺-管理中心-創(chuàng)建網(wǎng)站應(yīng)用并通過審核; 通過審核后可以獲得相應(yīng)的AppID和AppSecret; 應(yīng)用申請微信登錄且通過審核后,

    2024年03月25日
    瀏覽(20)
  • ios swift5 “Sign in with Apple“(使用蘋果登錄)怎樣接入(第三方登錄)集成AppleID登錄

    ios swift5 “Sign in with Apple“(使用蘋果登錄)怎樣接入(第三方登錄)集成AppleID登錄

    1.1 如果你新建app id,記得在新建的時候就選中Sign in with Apple功能 1.2 如果app已經(jīng)上線了,后面再需要加蘋果登錄的功能,也可以在app id的配置中加這個功能,只是勾選Sign in with Apple點擊Save后,profilex需要重新生成 iOS 蘋果登錄(第三方登錄) - csdn 集成AppleID登錄 - 簡書 要在你的

    2024年04月09日
    瀏覽(38)
  • (待完善)2023-selenium 實現(xiàn)知乎自動登錄(第三方登錄/使用cookie自動登錄)+指定用戶的信息相關(guān)搜集(2023.3)

    疊甲:本文寫作目的僅為本人學(xué)習(xí)參考、實現(xiàn)功能為課程實驗要求、本文寫作過程處于作者對于爬蟲技術(shù)學(xué)習(xí)的過程,部分代碼編寫時水平還不夠,出現(xiàn)的錯誤比較多、部分變量名字又臭又長,水平有限,請各位給我的作業(yè)匯報留條活路[拜托],請不要卷我,如果發(fā)現(xiàn)有什么

    2023年04月10日
    瀏覽(21)
  • Gitee第三方登錄

    Gitee第三方登錄

    寫這篇文章時,參考了一位大佬的文章,算是把大佬文章里一些不詳細(xì)的部分補充完整了,但是核心的代碼沒有什么改動,只是拋棄掉了那個重定向的工具類,以下是大佬文章的鏈接:http://t.csdn.cn/0L7T4 1、登錄gitee 官網(wǎng):https://gitee.com/ 2、注冊或登錄賬號 3、進入 設(shè)置》第三

    2024年02月12日
    瀏覽(16)
  • Springboot整合第三方登錄

    Springboot整合第三方登錄

    Springboot整合第三方登錄 為什么采用第三方登錄 ? 采用第三方登錄可以避免重新注冊賬號的繁瑣,也不需要再為密碼和昵稱發(fā)愁,而第三方登錄有一個比較好用的包,里面整合了多種第三方登錄,開箱即用,非常方便。就是JustAuth,網(wǎng)址https://www.justauth.cn/。 整合第三方登錄

    2024年02月09日
    瀏覽(115)
  • 微信小程序第三方登錄

    目錄 小程序第三方登錄操作流程如下: 1.第一步 2.第二步 2.第三步 4.第四步 5.第五步 注意:如果第一步?jīng)]打印出來,看看微信模擬器上的Id有沒有更改,或則去源碼試圖,weixinId更改 進入uniapp官網(wǎng)=Api=第三方服務(wù)=登錄=微信小程序登錄 創(chuàng)建一個觸發(fā)事件,獲取頭像和名稱 調(diào)用

    2024年02月13日
    瀏覽(86)
  • 實現(xiàn) Google 第三方授權(quán)登錄

    實現(xiàn) Google 第三方授權(quán)登錄

    最近做項目要實現(xiàn)Google的第三方登錄,這簡單的記錄一下。 目前Google的第三方登錄有很多方案,且官方提供SDK方便接入。但是我這個項目同時要實現(xiàn)網(wǎng)頁和客戶端。所以選擇了?Google OAuth 2.0?的方案。 當(dāng)然,也可以?《實現(xiàn) Facebook 第三方授權(quán)登錄》 Google 的 OAuth 2.0 流程 首先

    2024年02月09日
    瀏覽(23)
  • PHP Twitter 推特 第三方登錄

    PHP Twitter 推特 第三方登錄

    twitter登錄文檔 開發(fā)者平臺 申請成為開發(fā)流程按引導(dǎo)操作就可以了, 但是要注意信息填寫要真實完善的信息, 否則容易被拒絕(被拒絕可能不能二次申請, 之前不能, 現(xiàn)在不知道能不能) 目前推特一個號只能開通一個免費應(yīng)用, 可付費開通多個 設(shè)置基礎(chǔ)信息 User authentication setting

    2024年04月16日
    瀏覽(26)
  • 若依 關(guān)于 springsecurity 不用密碼登錄,自定義第三方登錄、免登錄

    用的是若依的前后端分離的版本,項目接口是給小程序用 openid 直接免登錄 找到登錄方法 他這是根據(jù)用戶名和密碼進行比對、由于密碼沒辦法轉(zhuǎn)換成明文 只能改成如下方法免登錄

    2024年02月07日
    瀏覽(15)
  • uniapp 對接谷歌第三方登錄

    uniapp 對接谷歌第三方登錄

    1.登錄谷歌開發(fā)者后臺 https://console.developers.google.com/ 2.添加憑證 3.拿到客戶端id后,項目中配置google登錄: ?示例代碼:

    2024年04月29日
    瀏覽(19)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包