web-dev-qa-db-ja.com

Ionic2認証Firebase

ionic 2で携帯電話の数による認証システムを作成しています。そのため、Googleガイドを使用しています。

まず、firebase.auth.RecaptchaVerifier（必要なパラメーターの1つです）

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();
})

2番目のパラメーターは、作成されたfirebase.auth.RecaptchaVerifierです。

私のPCのブラウザではすべてが正常に動作しますが、モービルでは次のエラーメッセージが表示されます。

交換する必要がありますfirebase.auth.RecaptchaVerifier、しかし、プラグインやサブメーターがあるかどうかはわかりませんが、すべてが機能することを心配しています。

cordovafirebaseionic2firebase-authenticationphone-number
9
Isaac David Chavez Perez

残念ながら、reCAPTCHAはアプリケーションのオリジンを確認できないため、Firebase JSライブラリを使用した電話認証はCordova/Ionic環境では機能しません。これは、Originがfile：//assets/index.htmlのように見えるためです。

これを機能させるためにできることは次のとおりです。WebのFirebase Phone authはアプリ検証インターフェースに依存します： https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier RecaptchaVerifierが実装します。これは、「recaptcha」に等しいプロパティ「type」を定義します。メソッドverify（）を定義します：reCAPTCHAトークンで解決するPromise。

あなたができることは、あなたがウェブサイトを開き、reCAPTCHAをレンダリングし、reCAPTCHAトークンを取得し、そしてそれをあなた自身のfirebase.auth.ApplicationVerifierを実装するアプリに戻す必要があることです。

これを行う最も安全な方法は次のとおりです。

  1. chromeカスタムタブまたはSFSafariViewController（埋め込みWebビューを使用しないでください）を開き、Firebaseコンソールで所有していてホワイトリストに登録されているWebサイトにリダイレクトします。Firebase.auth.RecaptchaVerifierがレンダリングされます。cordovaを使用できます。 -plugin-browsertab。

  2. 次に、FDL（Firebase Dynamic Links）を使用してreCAPTCHA応答トークンをアプリに戻し、ディープリンクに追加します。これはあなたのアプリだけがそれを開くことができることを保証します。 Firebase Dynamic Linksを正しく機能させるには、それらを構成する必要があります。

  3. モバイルアプリで着信リンクを聞く必要があります。 Cordova-universal-links-pluginを使用できます。

  4. ディープリンクからのreCAPTCHAトークンを解析します。それをfirebase.auth.ApplicationVerifier実装に再パッケージ化します。これをsignInWithPhoneNumberに渡して、サインインを完了することができます。

これには多少の作業が必要ですが、フィッシング攻撃や虐待のリスクを最小限に抑えるために必要です。

17
bojeil

まず、Cordova/Ionicはfile：///プロトコルを使用するため、Recaptchaはアプリで機能しません（httpであるため、ブラウザーでのみ機能します）。 Firebase/Recaptchaライブラリーは、location.protocolをチェックし、http/httpsを期待しますが、前述のように、Cordovaには当てはまりません。考えられる回避策は、ローカルサーバーを携帯電話で実行することです。例えばcordova-httpdまたはcordova-plugins＃local-webserver（またはアプリ内のhttpブラウザー）。その後、（firebase docsで説明されているように）非表示のキャプチャを実装できます。しかし、それでもユーザーがキャプチャを解決するためのポップアップを表示する場合があるため、理想的ではありません。

（少なくともほとんどの場合）モバイル環境でキャプチャを使用するのは意味がないため、Cordova/IonicのFirebase電話認証のネイティブ実装に取り​​組み始めました。 iOS版から始めました。

誰かがJava/Androidバージョンの実装をサポートしてくれますか？

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

3
guyromb

Bojeilによって提案されているように動的/ディープリンクを使用したくない場合は、これを試すことができます：

Cordovaを使用して、すべての認証プロセスをサーバーでホストされているWebページに移動しました。私のアプリから、アプリ内ブラウザーを使用してWebページを起動し、仲介者として機能するサーバーをロングポーリングして、すべてのアプリとブラウザーの通信を実行しました。 SMSを解析し、最後にブラウザを自動的に閉じることもできました。

これが機能するには、セキュリティに注意する必要があります。

または、サーバーポーリングの代わりにFirebase Realtime Databaseを使用してメッセージを渡すこともできます。

次のCordovaプラグインが必要になる場合があります。

  • InAppBrowser
  • BackgroundMode
  • 許可
  • Cordova SMS受信プラグイン
1
Chong Lip Phang

@bojeilの回避策を適用できなかったため、ApplicationVerifierを独自に実装する方法を見つけることができませんでした。しかし、私はAndroidで説明されているようにCordova firebaseプラグインを使用して このビデオで でFirebase Phone Authenticationを達成できました。それがお役に立てば幸いです。

0
Pierre El Khoury