電話認証

電話認証により、ユーザーは自分の電話を認証システムとして使用して Firebase にサインインできます。一意のコードを含む SMS メッセージが (提供された電話番号を使用して) ユーザーに送信されます。コードが承認されると、ユーザーは Firebase にサインインできるようになります。

エンドユーザーが認証のために提供する電話番号は、Google によって送信および保存され、Firebase を含むがこれに限定されない Google サービス全体でスパムおよび不正使用の防止を改善します。デベロッパーは、Firebase Authentication 電話番号ログイン サービスを使用する前に、適切なエンドユーザーの同意を得ていることを確認する必要があります。認証

Firebase 電話認証は、すべての国でサポートされているわけではありません。詳細については、 FAQを参照してください。

設定

電話認証を開始する前に、次の手順に従っていることを確認してください。

1. Firebase コンソールでサインイン方法として電話を有効にします。
2. Android : Firebase コンソールでアプリの SHA-1 ハッシュをまだ設定していない場合は、設定してください。アプリの SHA-1 ハッシュを見つける方法については、クライアントの認証を参照してください。
3. iOS : Xcode で、プロジェクトのプッシュ通知を有効にし、APNs 認証キーがFirebase Cloud Messaging (FCM) で構成されていることを確認します。このステップの詳細な説明を表示するには、 Firebase iOS Phone Authのドキュメントを参照してください。
4. Web : アプリケーション ドメインをFirebase コンソールのOAuth リダイレクト ドメインの下に追加したことを確認します。

注;電話番号サインインは、実際のデバイスと Web でのみ使用できます。デバイス エミュレーターで認証フローをテストするには、「テスト」を参照してください。

使用法

Flutter 用の Firebase Authentication SDK には、ユーザーが電話番号でサインインするための 2 つの個別の方法が用意されています。ネイティブ (Android や iOS など) プラットフォームは、電話番号の検証に Web とは異なる機能を提供するため、プラットフォームごとに排他的に 2 つの方法が存在します。

• ネイティブ プラットフォーム: verifyPhoneNumber 。
• Web プラットフォーム: signInWithPhoneNumber 。

ネイティブ: verifyPhoneNumber

ネイティブ プラットフォームでは、最初にユーザーの電話番号を確認する必要があります。その後、ユーザーはサインインするか、自分のアカウントをPhoneAuthCredentialにリンクできます。

最初に、ユーザーに電話番号の入力を求める必要があります。提供されたら、 verifyPhoneNumber()メソッドを呼び出します。

await FirebaseAuth.instance.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) {},
  verificationFailed: (FirebaseAuthException e) {},
  codeSent: (String verificationId, int? resendToken) {},
  codeAutoRetrievalTimeout: (String verificationId) {},
);

処理する必要がある 4 つの個別のコールバックがあり、それぞれがアプリケーション UI の更新方法を決定します。

1. validationCompleted : Android デバイスでの SMS コードの自動処理。
2. validationFailed : 無効な電話番号や SMS クォータを超えたかどうかなどの失敗イベントを処理します。
3. codeSent : Firebase からデバイスにコードが送信されたときの処理で、ユーザーにコードの入力を促すために使用されます。
4. codeAutoRetrievalTimeout : 自動 SMS コード処理が失敗したときのタイムアウトを処理します。

確認完了

このハンドラーは、自動 SMS コード解決をサポートする Android デバイスでのみ呼び出されます。

SMS コードがデバイスに配信されると、Android は SMS コードを自動的に検証します。ユーザーが手動でコードを入力する必要はありません。このイベントが発生すると、 PhoneAuthCredentialが自動的に提供され、ユーザーの電話番号でサインインまたはリンクするために使用できます。

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) async {
    // ANDROID ONLY!

    // Sign the user in (or link) with the auto-generated credential
    await auth.signInWithCredential(credential);
  },
);

検証失敗

Firebase がエラーを返した場合 (たとえば、電話番号が正しくない場合や、プロジェクトの SMS クォータを超えた場合)、このハンドラーにFirebaseAuthExceptionが送信されます。この場合、エラー コードに応じて、何か問題が発生したことをユーザーに通知します。

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationFailed: (FirebaseAuthException e) {
    if (e.code == 'invalid-phone-number') {
      print('The provided phone number is not valid.');
    }

    // Handle other errors
  },
);

コード送信済み

Firebase が SMS コードをデバイスに送信すると、このハンドラーがresendToken verificationIdトリガーされます ( resendTokenは Android デバイスでのみサポートされ、iOS デバイスは常にnull値を返します)。

トリガーされたら、アプリケーションの UI を更新して、ユーザーが期待する SMS コードを入力するように促す良い機会です。 SMS コードを入力したら、検証 ID と SMS コードを組み合わせて、新しいPhoneAuthCredentialを作成できます。

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  codeSent: (String verificationId, int? resendToken) async {
    // Update the UI - wait for the user to enter the SMS code
    String smsCode = 'xxxx';

    // Create a PhoneAuthCredential with the code
    PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: verificationId, smsCode: smsCode);

    // Sign the user in (or link) with the credential
    await auth.signInWithCredential(credential);
  },
);

デフォルトでは、Firebase は最近送信された新しい SMS メッセージを再送信しません。ただし、 forceResendingToken引数に再送信トークンを指定してverifyPhoneNumberメソッドを再呼び出しすることで、この動作をオーバーライドできます。成功すると、SMS メッセージが再送信されます。

codeAutoRetrievalTimeout

自動 SMS コード解決をサポートする Android デバイスでは、デバイスが特定の時間枠内に SMS メッセージを自動的に解決しなかった場合に、このハンドラーが呼び出されます。この時間が経過すると、デバイスは着信メッセージを解決しようとしなくなります。

デフォルトでは、デバイスは 30 秒間待機しますが、これはtimeout引数でカスタマイズできます。

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  timeout: const Duration(seconds: 60),
  codeAutoRetrievalTimeout: (String verificationId) {
    // Auto-resolution timed out...
  },
);

ウェブ: signInWithPhoneNumber

Web プラットフォームでは、ユーザーは提供された電話番号に送信された SMS コードを入力して、電話にアクセスできることを確認することでサインインできます。セキュリティとスパム防止を強化するために、ユーザーはGoogle reCAPTCHAウィジェットを完成させて、自分が人間であることを証明するよう求められます。確認後、SMSコードが送信されます。

Flutter 用の Firebase Authentication SDK は、デフォルトで reCAPTCHA ウィジェットを管理しますが、必要に応じて表示方法と構成方法を制御できます。まず、電話番号を指定してsignInWithPhoneNumberメソッドを呼び出します。

FirebaseAuth auth = FirebaseAuth.instance;

// Wait for the user to complete the reCAPTCHA & for an SMS code to be sent.
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456');

メソッドを呼び出すと、最初に reCAPTCHA ウィジェットが表示されます。 SMS コードが送信される前に、ユーザーはテストを完了する必要があります。完了したら、解決されたConfirmationResultレスポンスのconfirmメソッドに SMS コードを提供することで、ユーザーをサインインさせることができます。

UserCredential userCredential = await confirmationResult.confirm('123456');

他のサインイン フローと同様に、サインインが成功すると、アプリケーション全体でサブスクライブした認証状態リスナーがトリガーされます。

reCAPTCHA 設定

reCAPTCHA ウィジェットは、Web アプリケーションにセキュリティを提供する完全に管理されたフローです。

signInWithPhoneNumberの 2 番目の引数は、ウィジェットの管理に使用できるオプションのRecaptchaVerifierインスタンスを受け入れます。デフォルトでは、サインイン フローがトリガーされると、ウィジェットは非表示のウィジェットとしてレンダリングされます。 「見えない」ウィジェットは、アプリケーションの上にフルページのモーダルとして表示されます。

ただし、ユーザーが自分自身を確認するために明示的に押す必要があるインライン ウィジェットを表示することは可能です。

インライン ウィジェットを追加するには、 RecaptchaVerifierインスタンスのcontainer引数に DOM 要素 ID を指定します。要素が存在し、空である必要があります。そうでない場合、エラーがスローされます。 container引数が指定されていない場合、ウィジェットは「非表示」としてレンダリングされます。

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
  container: 'recaptcha',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

上記のようにsizeとthemeの引数をカスタマイズすることで、必要に応じてサイズとテーマを変更できます。

reCAPTCHA がユーザーによって完了されたかどうか、reCAPTCHA が期限切れになったかどうか、またはエラーがスローされたかどうかなどのイベントをリッスンすることもできます。

RecaptchaVerifier(
  onSuccess: () => print('reCAPTCHA Completed!'),
  onError: (FirebaseAuthException error) => print(error),
  onExpired: () => print('reCAPTCHA Expired!'),
);

テスト

Firebase は、電話番号をローカルでテストするためのサポートを提供します。

1. Firebase コンソールで、「電話」認証プロバイダーを選択し、「テスト用の電話番号」ドロップダウンをクリックします。
2. 新しい電話番号 (例: +44 7444 555666 ) とテスト コード (例: 123456 ) を入力します。

signInWithPhoneNumber verifyPhoneNumberにテスト電話番号を指定すると、実際には SMS は送信されません。代わりに、テスト コードをPhoneAuthProviderに直接提供するか、 signInWithPhoneNumber s 確認結果ハンドラーを使用して提供することができます。