コードはたったの20行！iOSアプリにFirebaseUI Authを使ってGoogle/Apple/Twitter認証をUI含めて実装する
怪しいTechブログの釣りタイトルみたいですが、iOSアプリにFirebaseUI Authを使ってGoogle/Apple/Twitter認証をUI含めて実装していきます。UIはFirebaseUIがよろしくやってくれるのでコードはたったの20行で済みます。
完成したアプリは下記のような動作をします。3つのプロバイダで認証を行なっています。絵的には認証に成功すると真っ黒な画面になるだけですが…。
また、作成したサンプルはGitHubにアップしてあります。ただし、私のプロジェクト固有の情報（GoogleService-Info.plist等）は抜いてあるのでダウンロードしても各種設定を行わなければ動作しません。
では早速始めましょう。
Xcode でプロジェクトの用意
今回はXcodeを起動してiOSアプリをFirebaseUI_Auth_sampleという名前でプロジェクトを作成、FirebaseUIライブラリの設定を行い20行のコードと書いていきます。
基本的にはGoogleのドキュメントの通りに進めますがいくつか違っている部分もあります。
Xcode で FirebaseUI ライブラリの設定
ドキュメントではCocoaPodsでインストールすることになっていますが、今回はSwiftPackageManagerでインストールします。
Xcodeの[File]->[Add Packages...]で表示されるダイアログの右上にある検索窓にhttps://github.com/firebase/FirebaseUI-iOSと入力してFirebaseUI-iOSが表示されたら[Add Package]をクリックしてライブラリを加えます。
途中で表示されるライブラリ選択のダイアログでは下記の3つを選択します。
- FirebaseAuthUI
- FirebaseGoogleAuthUI
- FirebaseOAuthUI
プロジェクトに Sign in with Apple を加える
Appleでの認証機能を使うアプリを作るにはXcodeでプロジェクっとにSign in with Appleの機能を加える必要があります。
TARGETSでSigning & Capabilitiesタブを選択し、Allの左の+をクリックします。
表示されたダイアログからSign in with Appleをダブルクリックして加えます。
20行のコードの詳細
最後にコードを書いていきます。
今回はAppDelegate.swiftとViewController.swiftの2つのファイルを編集します。
AppDelegate.swift
AppDelegate.swiftにはFirebaseを準備するコードを加えます。
最初にFirebaseCoreをimport。
import FirebaseCore
次にFirebaseFirebaseApp.configure()をapplication(_:didFinishLaunchingWithOptions:)に加えます。
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
FirebaseApp.configure()
return true
}
以上で完了です。
ちなみに公式の説明ではGoogle/Facebookの認証を使う場合には下記のコードも加えるようにありますがなくても動作している（このコードが呼ばれない）ので今回は入れていません。
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
let sourceApplication = options[UIApplication.OpenURLOptionsKey.sourceApplication] as! String?
if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication) ?? false {
return true
}
return false
}
ViewController.swift
ViewControllerでは認証を行うプロバイダ（今回はGoogle/Apple/Twitterの3つ）を表示するシートを表示して、それぞれのボタンが押されたら認証作業を行い結果を受け取ります。
まずは各種ライブラリのimport。
import FirebaseAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
FirebaseAuthUIが基本のライブラリ、FirebaseGoogleAuthUIがGoogleで認証を行う場合、そしてFirebaseOAuthUIがAppleとTwitterで認証を行う場合に必要になります。
次に認証の結果を受け取るためにViewControllerをFUIAuthDelegateプロトコルに対応させます。
class ViewController: UIViewController, FUIAuthDelegate {
delegate先をViewControllerにします。
authUI?.delegate = self
認証結果を受け取る際に呼ばれる関数authUI(_:didSignInWith:error:)を実装します。
func authUI(_ authUI: FUIAuth, didSignInWith user: User?, error: Error?) {
}
認証ができていればuserに値が戻ってきます。失敗の時にはerrorに情報が入ってきます。
次にUIを作成する部分のコードです。
まずはFUIAuthのインスタンスを取得します。
let authUI = FUIAuth.defaultAuthUI()
次はUIを作成する認証プロバイダのリストを作成します。
この辺りのコードは公式の説明の通りだとエラーになるのでGitHubのサンプルから拝借しました。
let googleAuthProvider = FUIGoogleAuth(authUI: authUI!)
let appleAuthProvider = FUIOAuth.appleAuthProvider(withAuthUI: authUI!)
let twitterUthProvider = FUIOAuth.twitterAuthProvider(withAuthUI: authUI!)
let providers: [FUIAuthProvider] = [googleAuthProvider, appleAuthProvider, twitterUthProvider]
最後にFUIAuthのインスタンスにプロバイダのリストを渡します。
authUI?.providers = providers
これで準備は整いました。あとは認証の画面を表示するだけです。
表示はViewControllerが表示された後viewDidAppear(_ animated:)でシートを出します。
手順はauthUI?.authViewController()で認証の画面を準備して、それをpresent(_:animated:)で表示しています。
override func viewDidAppear(_ animated: Bool) {
if let authViewController = authUI?.authViewController() {
self.present(authViewController, animated: true)
}
}
以上、全部で20行です。これだけでGoogle/Apple/Twitterで認証をUI込みで行うことができます。
その他の設定
さて、XcodeでFirebaseUIのライブラリを読み込み20行のコードを書いてビルドも問題なく通りました。
しかしアプリを起動しても期待した動作はしません。理由はFirebase Authentication始めそれぞれのプロバイダの設定をしていないからです。
以下、それぞれの設定です。
Firebase
最初に認証を行うアプリを登録するプロジェクトを作成します。
これはFirebaseのトップページから「プロジェクトを追加」をクリックします。
プロジェクト名を付けてその後も基本的に「続ける」をクリックしておけば問題ありません。GoogleAnalyticsは必要な場合はアカウントを作成するか既に使っているものを選択するかします。
全て終わると作成したプロジェクトの概要ページになります。
特に何もしなければプロジェクト名の隣に「Spark プラン」と表示されているはずです。基本無料のプランなので今回の認証だけを行う限りは課金の心配はありません。
??? プロジェクトの設定画面で「公開設定」の「公開名」をFirebaseUI_Auth_sampleにします。プロジェクト番号のままでも良いですが認証時のダイアログで表示される名前なので変えた方が良いでしょう。
プロジェクトにアプリを登録
作成したプロジェクトに認証を行うアプリを登録します。今回はiOSのアプリなので「iOS+」のアイコンをクリックします。
１．アプリの登録
先にXcodeで作成したアプリのバンドルIDとアプリ名をニックネームとして入力します。
２．設定ファイルのダウンロード
「GoogleService-Info.plistをダウンロード」をクリックしてGoogleService-Info.plistファイルをダウンロードし、Webサイトの画像の様にXcodeのFirebaseUI_Auth_sampleフォルダへドラッグ＆ドロップして加えます。
３．Firebase SDK の追加
これは既に行なっているので次へ進みます。
４．初期化コードの追加
これも既に行なっているので次へ進みます。
５．次のステップ
以上でXcodeを使った最初の設定は終了です。
コンソールへ戻るとiOSのアプリが追加されています。
Authentication
次にAuthenticationの設定を行います。
左のリストから「Authentication」を選択し「始める」をクリックします。
ログインプロバイダの一覧が表示されるので必要な認証方法を選択します。今回はGoogleとAppleとTwitterです。
表示される画面で「有効にする」をオンにしてプロジェクトのサポートメールにメールアドレスを入力して「保存」します。プロジェクトの公開名は認証を行う時に表示されるのでアプリ名「FirebaseUI_iOS_sample」に変えた方がわかりやすいかもしれません。
Apple
「有効にする」をオンにして「保存」します。
画面に下記のようなメッセージが表示されますがdebugモードで動作確認をする限りはこの手順は必要ありません。
Apple ログインには追加の構成手順が必要です。お使いのプラットフォームの手順に従ってください。
最初にTwitter側でアプリを作成して認証できる様にする必要があります。
TwitterのDeveloper PortalのProjects&AppsのOverviewから「+Create App」を選択してアプリ名を入力、先へ進んでAPIキーとAPIシークレットをコピーしておきます。
Firebaseへ戻って「新しいプロバイダを追加」をクリックしてTwitterをクリックします。
「有効にする」をオンにして先にコピーしておいたAPIキーとAPIシークレットを入力して「保存」します。
コールバックURLをコピーしておくのを忘れないように。
次にTwitterに戻って「User authentication settings」で「setup」をクリック。
OAuth 1.0aをオンにしたらCallback URI/Redirect URLにFirebaseでコピーしたコールバックURLを入力します。下のWebsite URLはアプリのURLでも入れておきます。
最後に「Save」して終了です。
以上でFirebaseの設定は終了です。
最後に
自分で認証周りを実装するのが面倒だなと思いFirebaseを使ってやってみたら思いの外大変でした。コードではなくFirebaseの設定が。Googleのいろいろな機能は使ってきていたのですが、それがFirebaseと意識して使ったことがなかったので混乱しました。
最終的に、20行でAppleのFaceIDで認証が行えるようになったので今回は満足。あとは表示される画面のカスタマイズをしてエラー処理云々をすれば実際に使えそうです。欲を言えばWWDC22で出たpassKeysもすぐに使えるようになるともっと嬉しいのですが。
Discussion