Google I/O 2022 で発表された Firebase の最新情報をご覧ください。詳細

電話認証

電話認証を使用すると、ユーザーは自分の電話をオーセンティケーターとして使用してFirebaseにログインできます。一意のコードを含むSMSメッセージが（提供された電話番号を使用して）ユーザーに送信されます。コードが承認されると、ユーザーはFirebaseにログインできるようになります。

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

Firebase Phone認証は、すべての国でサポートされているわけではありません。詳細については、よくある質問をご覧ください。

設定

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

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

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

使用法

Firebase Authentication SDK for Flutterは、ユーザーが電話番号でサインインするための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. verifyCompleted ：AndroidデバイスでのSMSコードの自動処理。
  2. verifyFailed ：無効な電話番号や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);
  },
);

検証に失敗しました

電話番号が正しくない場合や、プロジェクトのSMS割り当てを超えた場合など、Firebaseがエラーを返した場合、 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
  },
);

codeSent

FirebaseがSMSコードをデバイスに送信すると、このハンドラーはverificationIdとresendTokenでトリガーされます（ 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...
  },
);

Web： signInWithPhoneNumber

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

Firebase Authentication SDK for Flutterは、デフォルトで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 Consoleで、[電話]認証プロバイダーを選択し、[テスト用の電話番号]ドロップダウンをクリックします。
  2. 新しい電話番号（例： +44 7444 555666 ）とテストコード（例： 123456 ）を入力します。

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