Firebase

iOS開発|Firebaseで電話番号認証を実装する方法

iOS開発での電話番号を使用したFirebaseのユーザー認証を実装する方法を解説していきます。

Firebase Authentication は、メールアドレスとパスワードを使用した認証方法やSNS認証など、様々な認証方法を開発者に提供していて、簡単にiOSアプリに会員機能を実装することができます。今回は、iOS開発での電話番号を使用したFirebaseのユーザー認証を実装する方法を解説していきます。電話番号認証とは、ユーザーのスマートフォンに、ワンタイムコードをSMS メッセージで送信することによってユーザーをログインさせることができるユーザー認証方法の1つ。

日本だと電話番号認証を活用したアプリは少ないと感じますが、SMSでのメッセージが主流なアメリカでは、多くのアプリがログイン認証に電話番号を使っていると感じます。


1. FirebaseAuth SDKを導入する

電話番号認証機能にアクセスするためにFirebase Auth SDKを導入します。まだ、iOSプロジェクトにFirebaseの導入が終わっていない方は、公式ドキュメントを参照して完了させて下さい。導入はとても簡単で、ポッドファイルに以下を追加して、ポッドインストールをします。

pod 'Firebase/Auth'

2. 電話番号ログインを有効にする

次に、Firebaseの管理画面で電話番号によるログイン方法を有効化します。管理画面を開き、左側のメニューからAuthentification > ログイン方法 > 電話番号のステータスを有効化して下さい。

Firebaseの無料プランである「Spark」だと、1万件/月まで無料です。リリースしたばかりのアプリでは、ほとんど超えることはないでしょう。超えた場合は、従量課金での料金設定になります。詳しくは、公式ドキュメントをご覧ください。

Test Image

電話番号認証をテストする上で、毎回SMSメッセージを受け取るのは大変なので、テスト用の電話番号を登録すると、毎回同じ確認コードを入力するだけでログインを完了させることができます。また、毎月の使用量の割り当てを消費することなく、デバッグすることができます。

オレンジ色の枠に国番号と電話番号を入力し、好きな確認コードを入力して下さい。実際に使われている番号は使用できないので「+1 206-555-1234」などの連続した数字を使うと良いでしょう。

3. Xcodeで、プッシュ通知設定を有効にする

次に、iOSプロジェクトを開き、サイレントプッシュ通知をユーザーの端末に送れるよう、Xcode上で設定をしていきます。Targets > プロジェクト名 > Capabilitiesをクリックし、下記の2つの設定を有効化して下さい。

バックグラウンドモードをオン

Test Image

電話番号認証時に、Firebaseからユーザーの端末にサイレントプッシュ通知を通して、トークンを送信する必要があるため、バックグラウンドモードをオンにしして、サイレントプッシュ通知を送信できるようにします。

上記の画像にあるように、オンにした後に Background fetch と Remote Notifications にチェックを入れましょう。

プッシュ通知設定をオン

Test Image

次に Push Notification もオンにしてください。

ユーザーがアプリのバックグラウンド更新を無効にしている場合やシミュレータ上でアプリをテストしている場合は、reCAPTCHA検証(例えば、複数の画像があって、信号機の画像のみをタップして下さい的なよくあるやつです)を用いて、電話番号認証が実行されます。テストをするには、シミュレータ上で電話番号認証を実行するか、バックグランドモードをオフにすると、reCAPTCHAチャレンジでのログインをできます。

APNs認証キーをアップルデベロッパーアカウント上で生成する

このセクションでは、Firebaseにプッシュ通知認証キーをアップロードするやり方を説明します。次に、アップルデベロッパーアカウント上で、APNs認証キーを生成します。

Test Image

アップルデベロッパーアカウントにアクセスしたら、Certificates, Identifiers & Profiles > Keysの画面に遷移して下さい。Keysの画面に辿り着いたら、左上にある「+」ボタンをクリックしましょう。

Test Image

+ボタンをクリックすると、上記画像の画面に遷移するので、オレンジ色で枠で囲ってある欄を入力、チェックを入れて、Contiuneをクリックします。このキーのダウンロードは1回限りなので、ダウンロード後は速やかに、安全な場所に保存するようにして下さい。後でキーを取得することはできません。

Firebaseに生成したAPNs認証キーをアップロード

次にFirebaseの管理画面を開き、先ほど生成したAPNs認証キーをアップロードします。該当プロジェクトのプロジェクト設定をクリックし、クラウドメッセージングのタブに移動して下さい。

Test Image

画面の真ん中に位置する「iOSアプリの設定」にあるAPNs認証キーのアップロードボタンを押すと、上記画像の画面がポップアップしますので、先ほど生成した認証キーをアップロードします。

キーIDは、デベロッパーアカウントから生成した認証キーをクリックすると、確認することができます。また、チームIDもデベロッパーアカウントのメンバーシップセクションから確認することができますので、それを入力して下さい。

Xcode上で、reCAPTCHA検証の設定を有効化する

次に、ユーザーがアプリのバックグラウンド更新を無効にしている場合に備えて、Firebase SDKでreCAPTCHA検証を使えるようにしなければいけません。

Test Image

プロジェクト > Target > Infoに移動して、「URL Types」を開いて下さい。オレンジ色で塗りつぶしてある部分に、GoogleService-Info.plist構成ファイルにあるREVERSED_CLIENT_IDキーを入力します。その他の入力欄は空白で問題ありません。

ここまで出来たら、電話番号認証をする上での準備は終わりました。下記から、実際の電話番号認証の開発に入ります。

ユーザーの電話番号に確認コードを送信する

ユーザーが電話番号を入力できるユーザーインターフェースの作成が完了したら、下記のメソッドをコールすることにより、ユーザーの電話番号に確認コードを送信するよう、Firebase側にリクエストすることができます。

PhoneAuthProvider.provider().verifyPhoneNumber(phoneNumber, uiDelegate: nil) { (verificationID, error) in
  if let error = error {
    print(error.localizedDescription)
    return
  }
  //ユーザーデフォルトにverificationIDをセット
  UserDefaults.standard.set(verificationID, forKey: "authVerificationID")
}

ユーザーが入力した電話番号は、verifyPhoneNumberの第一引数(phoneNumber)に入れることにより、ユーザーの電話番号に向けて、6桁の数字が記載あれたSMSメッセージが送信されます。確認コードを送ることができます。ユーザーの電話番号に確認コードの送信が成功すると、FirebaseからのverificationIDが取得できます。アプリ間の移動や、途中でユーザーがログインプロセスから離脱した場合などに備えて、ユーザーデフォルトに保存するのが鉄則です。

入力フォーマットは「国番号 +ハイフン無しの電話番号」である必要があります。例えばアメリカだったら「+12061234567」のような形です。

確認コードの入力とログイン

ユーザーが確認コードを入力できるUIを用意したら、下記メソッドでユーザーをログインさせます。

let verificationID = UserDefaults.standard.string(forKey: "authVerificationID")
let credential = PhoneAuthProvider.provider().credential(
    withVerificationID: verificationID,
    verificationCode: verificationCode)

Auth.auth().signIn(with: credential) { (authResult, error) in
  if let error = error {
    print("ログインエラー")
    return
  }
  print("ログイン成功")
}

verificationIDの部分に、ユーザーデフォルトに保存されたverificationIDを入れて、verificationCodeにユーザーに送信された確認コードを入力できるようにします。

Test Image

1つの画面で入力させるのもありですが、上記の「HQ Trivia」のような国番号を選択→電話番号を入力しボタンをタップ→確認コードの入力画面に遷移させると、分かりやすくてオススメだと思います。国番号を検索、選択させるライブラリは「FlagPhoneNumber」が使いやすくオススメです。

ここまで完了すると、ユーザーのログインが成功した場合、Firebaseの管理画面 > Authenticationにて、作成されたユーザーの情報が確認できるはずです。