FlutterとFirebase Authで電話番号認証を実装する

📅

loading..🐩🐩🐩🐩

はじめに 🔗

この記事はfirebase_auth ^5.5.0を前提にしています。

Firebaseコンソール↗にプロジェクトを作成し、アプリを登録済みとします。まだであればアプリを登録するを参照してください。

NAVER Cloud Console、Kakao Alimtalk、NICE認証など、携帯電話による認証を提供するサービスはいくつもあります。ここでは、Flutterで手軽に実装できる

Firebase Auth

を使います。

1. Firebase Authを設定する 🔗

Firebaseコンソールの「構築」→「Authentication」に進み、「始める」を押します。

Authenticationの設定を始める

ログイン方法の設定画面で「電話番号」を有効にします。エミュレーターを使う場合は、テスト用の電話番号と確認コードを追加します。

筆者は +1 1234567812 と 123654 を追加しました。

電話番号認証を有効にする

電話番号認証を有効にした状態

2. SHAフィンガープリントを追加する（Android） 🔗

2.1. 証明書のフィンガープリントを取得する 🔗

AndroidアプリでFirebase認証を使うため、SHAフィンガープリントを追加します。次のコマンドで確認できます。

パスワードを求められたら、既定の android を入力します。

MAC/Linux

keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

Windows

keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

成功すると、次のように表示されます。

SHAフィンガープリントを確認する

2.2. SHAフィンガープリントを追加する 🔗

Firebaseコンソールで、登録したAndroidアプリの設定を開きます。

Androidアプリの設定

全般タブの「マイアプリ」で「フィンガープリントを追加」を押します。

フィンガープリントを追加する

証明書のSHA1とSHA256を、それぞれ追加します。

3. Flutterのコードを書く 🔗

筆者のフォルダー構成は次のとおりです。main.dartからpage_onboarding.dartを呼び出します。

📦lib
┣ 📜main.dart
┣ 📜page_onboarding.dart

3.1. Firebase Authプラグインを追加する 🔗

プロジェクトのルートで次のコマンドを実行し、プラグインを追加します。

flutter pub add firebase_auth

3.2. page_onboarding.dartを書く 🔗

page_onboarding.dartに次のコードを追加します。電話番号は上の手順で追加したテスト番号を使います。

/lib/page_onboarding.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
 
class PageOnboarding extends StatelessWidget {
  const PageOnboarding({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
                onPressed: () async {
                  await FirebaseAuth.instance.verifyPhoneNumber(
                    phoneNumber: '+1 1234567812', // 테스트 번호
                    verificationCompleted: (PhoneAuthCredential credential) {
                      print("credential: $credential");
                    },
                    verificationFailed: (FirebaseAuthException e) {
                      print("verificationFailed: $e");
                    },
                    codeSent: (String verificationId, int? resendToken) {
                      print("codeSent: $verificationId");
                      print("codeSent: $resendToken");
                    },
                    codeAutoRetrievalTimeout: (String verificationId) {
                      print("codeAutoRetrievalTimeout: $verificationId");
                    },
                  );
                },
                child: const Text("Phone Number Verification"))
          ],
        ),
      ),
    );
  }
}

テキストを押してCAPTCHA認証を行い、認証完了のログが出るか確認します。

次のようなエラーが出た場合は、認証リクエストでエラーが出るを参照してください。

Fatal error: Please register custom URL scheme app-1-****** in the app's Info.plist file.

4. verifyPhoneNumberのコールバック 🔗

4.1. verificationCompleted 🔗

Android端末でのみ動作する、SMSコードを自動処理するコールバックです。

verificationCompleted: (PhoneAuthCredential credential) {
  print("credential: $credential");
	await auth.signInWithCredential(credential); // 자동 인증 과정 진행
},

4.2. verificationFailed 🔗

電話番号の誤りやSMS送信枠の超過など、認証の失敗を処理します。

verificationFailed: (FirebaseAuthException e) {
	if (e.code == 'invalid-phone-number') {
		print('The provided phone number is not valid.');
	} else {
		print("verificationFailed: $e");
	}
},

4.3. codeSent 🔗

Firebaseから端末にコードが送信された場合に呼ばれ、ユーザーに入力を促すために使います。

codeSent: (String verificationId, int? resendToken) {
  print("codeSent: $verificationId");
  print("codeSent: $resendToken");
},

4.4. codeAutoRetrievalTimeout 🔗

SMSコードを自動取得できなかった場合のタイムアウトを処理します。

codeAutoRetrievalTimeout: (String verificationId) {
  print("codeAutoRetrievalTimeout: $verificationId");
},

5. 認証完了時の処理 🔗

電話番号認証のコードを入力したら、次のコードで認証を完了できます。

verificationIdには4.3. codeSentで受け取った値を使います。コード全体も参照してください。

/lib/page_onboarding.dart

TextButton(
	onPressed: () async {
		PhoneAuthCredential credential =
				PhoneAuthProvider.credential(
						verificationId: verificationId,
						smsCode: "123654",
						);
		await FirebaseAuth.instance
				.signInWithCredential(credential)
				.then((value) {
				print("signInWithCredential: $value");
		}).catchError((error) {
			print("signInWithCredential: $error");
		});
	},
	child: const Text("Sign In"),
),

問題と対処方法 🔗

ビルド時のエラー - CocoaPodsのバージョン競合 🔗

Firebase/CoreOnly (= 11.8.0)
2
 
    You have either:
     * out-of-date source repos which you can update with pod repo update or with pod install --repo-update.
     * changed the constraints of dependency Firebase/CoreOnly inside your development pod firebase_core.
       You should run pod update Firebase/CoreOnly to apply changes you've made.
 
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:317:in raise_error_unless_state'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:299:in block in unwind_for_conflict'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:297:in tap'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:297:in unwind_for_conflict'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:257:in process_topmost_state'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:182:in resolve'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.8.0/lib/molinillo/resolver.rb:43:in resolve'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/resolver.rb:94:in resolve'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/installer/analyzer.rb:1082:in block in resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/user_interface.rb:64:in section'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/installer/analyzer.rb:1080:in resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/installer/analyzer.rb:125:in analyze'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/installer.rb:422:in analyze'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/installer.rb:244:in block in resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/user_interface.rb:64:in section'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/installer.rb:243:in resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/installer.rb:162:in install!'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/command/install.rb:52:in run'
    /Library/Ruby/Gems/2.6.0/gems/claide-1.1.0/lib/claide/command.rb:334:in run'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/lib/cocoapods/command.rb:52:in run'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.16.2/bin/pod:55:in <top (required)>'
    /usr/local/bin/pod:23:in load'
    /usr/local/bin/pod:23:in `<main>'
 
Error output from CocoaPods:
↳
 
    [!] Automatically assigning platform iOS with version 13.0 on target Runner because no platform was specified. Please specify a platform for this target in your Podfile. See https://guides.cocoapods.org/syntax/podfile.html#platform.
 
Error: CocoaPods's specs repository is too out-of-date to satisfy dependencies.
To update the CocoaPods specs, run:
  pod repo update
 
Error running pod install
Error launching application on iPhone 16 Pro Max.

対処方法 🔗

CocoaPodsのリポジトリが古い可能性があります。更新してから依存関係を再インストールします。

pod repo update
pod install --repo-update

ビルド時のエラー - Firebaseのバージョン競合 🔗

Podfile.lockでFirebase/CoreOnlyが11.6.0に固定されている一方で、firebase_coreが11.8.0を要求するため、バージョンの競合が発生しました。

!] CocoaPods could not find compatible versions for pod "Firebase/CoreOnly":
  In snapshot (Podfile.lock):
    Firebase/CoreOnly (= 11.6.0)
 
  In Podfile:
    firebase_core (from .symlinks/plugins/firebase_core/ios) was resolved to 3.12.0, which depends on
      Firebase/CoreOnly (= 11.8.0)
 
You have either:
 * changed the constraints of dependency Firebase/CoreOnly inside your development pod firebase_core.
   You should run pod update Firebase/CoreOnly to apply changes you've made.

対処方法 🔗

Podfile.lockを削除し、再インストールします。

rm ios/Podfile.lock
pod install --repo-update

認証リクエストでエラーが出る 🔗

iOSでreCAPTCHAのためにブラウザを開いてアプリに戻るとき、URLスキームを登録していないと、次のエラーが出ることがあります。

Fatal error: Please register custom URL scheme app-1-****** in the app's Info.plist file.

対処方法 🔗

Info.plistに次のようにURLスキームを追加します。

/ios/Runner/Info.plist

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>app-1-******</string>
        </array>
    </dict>
</array>

おわりに 🔗

コード全体 🔗

コードを表示する

/lib/page_onboarding.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
 
class PageOnboarding extends StatefulWidget {
  const PageOnboarding({super.key});
 
  @override
  State<PageOnboarding> createState() => _PageOnboardingState();
}
 
class _PageOnboardingState extends State<PageOnboarding> {
  String verificationId = '';
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () async {
                await FirebaseAuth.instance.verifyPhoneNumber(
                  phoneNumber: '+1 1234567812', // 테스트 번호
                  timeout: const Duration(seconds: 60),
                  verificationCompleted: (PhoneAuthCredential credential) {
										print("verificationCompleted: $credential");
                  },
                  verificationFailed: (FirebaseAuthException e) {
										print("verificationFailed: $e");
                  },
                  codeSent: (String verificationId, int? resendToken) {
                    this.verificationId = verificationId;
										print("codeSent: $verificationId");
										print("codeSent: $resendToken");
                  },
                  codeAutoRetrievalTimeout: (String verificationId) {
										print("codeAutoRetrievalTimeout: $verificationId");
                  },
                );
              },
              child: const Text("Phone Number Verification"),
            ),
            const SizedBox(height: 20),
            SizedBox(
              width: 200,
              child: TextField( 	// 인증 코드 입력 (123654)
                onChanged: (value) {
                  setState(() {
                    smsCode = value;
                  });
                },
              ),
            ),
            TextButton(
              onPressed: () async {
                PhoneAuthCredential credential = PhoneAuthProvider.credential(
                    verificationId: verificationId, smsCode: smsCode);
                await FirebaseAuth.instance
                    .signInWithCredential(credential)
											.then((value) {
										print("signInWithCredential: $value");
                }).catchError((error) {
										print("signInWithCredential: $error");
                });
              },
              child: const Text("Sign In"),
            ),
          ],
        ),
      ),
    );
  }
}

もう少し考えてみる 🔗

電話番号認証のコードを入力する専用画面を作ってみましょう。
コードが送信されたかどうかや、残り時間をユーザーが確認できると便利です。
reCAPTCHAを省く方法はあるでしょうか。

参考 🔗

FlutterとFirebase Authで電話番号認証を実装する | PromleeBlog