簡體   English   中英

離子電容 Firebase 電話號碼認證問題

[英]Ionic Capacitor Firebase Phone Number Authentication Problems

對於嘗試使用 ionic 通過 firebase 電話號碼進行身份驗證的任何人,這篇文章適合您。

我花了數周時間嘗試為我自己的應用程序解決這個問題,並開始使用 email,因為解決電話號碼問題需要花費太多時間,但我發布這篇文章是為了避免您將時間浪費在紅鯡魚上。

問題:

電話號碼只能在附加到 url 時使用,因此如果您通過網站進行離子應用程序,則通過 firebase 的電話號碼身份驗證將起作用,但是,如果您嘗試在移動設備上進行操作,它將無法正常工作,因為 ZC3ABF12E152FCC215需要附加 url 並且移動應用程序中當然沒有網址( firebase )。

選項 1:插件

因此,最簡單的選擇是尋找第三方插件來實現電話號碼身份驗證。 我相信有一個 Cordova 插件( cordova-plugin-firebase-authentication ),但是該庫與電容器不兼容(兼容插件)。

我嘗試實現其他一些插件但沒有取得多大成功。 值得注意的是(電容器-firebase-auth 插件)。 它聲稱電話身份驗證適用於 ios 和 android,但是,執行此操作的實際方法似乎非常復雜,並且使用我無法跟進的.p8 代碼遵循不同的路徑( 混淆)。 而且這個插件有一些主要的限制

選項 2:應用內瀏覽器

由於選項一目前似乎不太可行,因此第二個選項是將代碼放在網站上進行電話號碼驗證,然后在您的應用程序中打開瀏覽器進行驗證。 我花了很多時間試圖讓這種方法無效。 理論上似乎可行,但在實踐中,它是一團糟。 這種方法的最大問題是您想要的是能夠在您的移動應用程序上運行signInWithPhoneNumber(phoneNumber, appVerifier) ,因為這樣您的應用程序就會像對待任何其他用戶一樣對待通過電話號碼登錄的用戶,這使得通用在您的應用程序的下游更容易進行身份驗證。 但是,為了做到這一點,您需要經過驗證的appVerifier ,它屬於 class firebase.auth.RecaptchaVerifier firebase.auth.RecaptchaVerifier應該運行 .render .render()來啟動 recaptcha provlem,然后運行.verify()來驗證用戶執行 recaptcha 后給出的令牌( 文檔)。 我嘗試在網站上運行.verify() .render()然后在移動應用程序上運行 .verify(),在兩者之間傳遞令牌。 我不確定為什么這不起作用,這可能只是我的設置有問題,但是在嘗試了這個方法一個多星期后,我放棄了嘗試讓它工作。 我通過的令牌只是沒有確認。 我不知道這兩個函數是如何工作的,對於firebase.auth.RecaptchaVerifier的每個唯一實例可能有一些識別系統使這種方法無效,我真的不知道。

如果您想嘗試這種方法,我建議使用cordova 插件(它與電容器項目兼容)而不是 iframe 或用於網站內應用程序瀏覽器的電容器瀏覽器插件,因為它更易於使用和在應用程序和網站之間傳遞數據有更好的功能。

選項 3:在 IOS 和 Android 上手動實施

I haven't tried out this method, however, theoretically, you could go into your android studio and Xcode projects to actually write swift and java code following the firebase instructions for firebase phone auth ( android tutorial ) ( ios tutorial ). 這可能會起作用,但我不確定您將如何通知您的 ionic 項目在進行身份驗證時遵循 swift 和 java 文件。


請讓我知道是否有任何對您有用的方法或任何解決我遇到的障礙的方法,這是我迄今為止嘗試過的!

我是OP。 在做了更多的工作之后,我終於讓電話身份驗證系統使用電容器火力基礎身份驗證( https://github.com/baumblatt/capacitor-firebase-auth )工作。 我還創建了一個 git 存儲庫,展示了我的代碼示例以及如何使用它: https://github.com/Darrow8/capacitor-phone-test

在我之前的嘗試中,我遇到了讓cfaSignInPhone工作的問題,但經過更多調整后,它工作了。 另一個主要問題是讓firebase.auth().signInWithCredential工作。 事實證明,我必須將上述的capacitor-firebase-auth庫與@angular/fire https://www.npmjs.com/package/@angular/fire結合起來

您可以簡單地使用與電容器兼容的cordova-plugin-firebase-authentication,它對我有用。

https://ionicframework.com/docs/native/firebase-authentication

您好,我嘗試與 Firebase Web 合作,它對我來說效果很好。 沒有外部插件,只有 firebase web 實現

由於聲譽而無法發表評論,但我希望能實現它,我正在瀏覽您的代碼,但不確定在哪里調用您提到的方法。 任何反饋都將受到歡迎。 最好的

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM