Ionic2認證火力

我離子2，創建認證系統，通過手機號碼，我使用谷歌的引導 Ionic2認證火力

首先，我相信firebase.auth.RecaptchaVerifier（是必要的參數之一）

this.autVer = new firebase.auth.RecaptchaVerifier('contCatcha', { 
'size': 'invisible', 
'callback': function (response) { 
// reCAPTCHA solved, allow signInWithPhoneNumber. 
} 
});

和拉斯特使用auth.signInWithPhoneNumber angularfire

this.afAuth.auth.signInWithPhoneNumber("+57" + this.numeroCelular, this.autVer).then(verificationId => { 
console.log("SMS Enviado"); 
this.confor = verificationId; 
this.loading.dismiss(); 
this.estado = 1; 
this.esperarCodigo(); 
})

當第二個參數是firebase.auth.Reca ptchaVerifier創建

在我的電腦一切正常的瀏覽器，但在美孚顯示以下錯誤信息：

我需要更換firebase.auth.RecaptchaVerifier，但我不知道是否有任何插件或亞米做，ahcer一切正常我真的很感謝你的建議

來源

2017-05-20 Isaac David Chavez Perez

您沒有提供錯誤。目前尚不清楚問題是什麼。你能澄清嗎？您是在移動離子應用程序還是移動瀏覽器中使用它？ – bojeil

對不起，這是我的第一篇文章，問題以離子形式出現，這是錯誤 https://cdn-enterprise.discourse.org/ionicframework/uploads/default/original/3X/a/8/a8d5ca92c55ad9c0fcad055ebaa59fe0dd480f97.png 這是我的代碼 https://cdn-enterprise.discourse.org/ionicframework/uploads/default/original/3X/b/e/be41db72eaa9180bd051928b08ccc530212f3c7f.png –

我發現從一個真棒信息[javebratt.com]（HTTPS ：//javebratt.com/firebase-phone-authentication/），請查看！ – ray

不幸的是，使用火力地堡JS庫不會因爲驗證碼一個科爾多瓦/離子環境下工作的手機認證將無法驗證應用程序的來源。這是由於源文件看起來像file：//assets/index.html。

您可以通過以下方式來實現它： Firebase基於Web的電話驗證取決於RecaptchaVerifier實施的應用驗證程序界面：https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier。它定義了一個屬性'type'，它應該等於'recaptcha'。它定義了一個方法verify（）：使用reCAPTCHA標記解析的Promise。

你可以做什麼，你需要打開一個網站，使驗證碼，獲得驗證碼的令牌，然後傳回您的應用程序，你會實現你自己的firebase.auth.ApplicationVerifier

最這樣做安全的方式如下：

打開Chrome自定義選項卡或SFSafariViewController（不使用嵌入式網頁視圖）和重定向到你自己的網站，並在火力地堡控制檯列入白名單，其中firebase.auth.RecaptchaVerifier會被渲染。你可以爲此使用cordova-plugin-browsertab。
然後，您使用FDL（Firebase動態鏈接）將reCAPTCHA響應令牌傳遞迴您的應用程序並將其添加到深層鏈接中。這保證只有你的應用可以打開它。您需要配置Firebase動態鏈接才能使其正常工作。
您需要聆聽移動應用程序中的傳入鏈接。你可以使用cordova-universal-links-plugin。
解析來自深層鏈接的reCAPTCHA令牌。將它重新包裝在firebase.auth.ApplicationVerifier實現中。您現在可以將其傳遞給signInWithPhoneNumber以完成登錄。

這將需要一些工作，但有必要儘量減少網絡釣魚攻擊和濫用的風險。

來源

2017-05-20 22:03:01 bojeil

希望你能接受這個答案否？@伊薩克大衛查韋斯佩雷茲 – Sampath

好推薦。這對我很好。這應該被標記爲接受的答案，直到完成將電話號碼身份驗證合併到Cordova Firebase插件爲止。 –

@bojeil你爲什麼說「不使用嵌入式網頁瀏覽」？ – ian

首先，Cordova/Ionic使用file：///協議，因此Recaptcha將無法在您的應用上工作（僅在瀏覽器上，因爲它是http）。Firebase/Recaptcha庫會檢查location.protocol，並期待http/https，但如上所述，Cordova並非如此。可能的解決方法是在手機上運行本地服務器。例如cordova-httpd或cordova-plugins＃local-webserver（或應用內http瀏覽器）。之後，您可以實現不可見的驗證碼（如firebase文檔中所述）。但是，仍然有時用戶會得到一個彈出框來解決驗證碼，所以它不是很理想。

由於在移動環境下驗證無效（至少在大多數情況下），我開始爲Cordova/Ionic開發本地實現的Firebase電話驗證。我從iOS版本開始。

有人可以支持我實現java/android版本嗎？

https://github.com/guyromb/cordova-firebase-phoneauth

來源

2017-05-30 11:08:04 guyromb

Ionic2認證火力

回答

相關問題