Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

FirebaseUIを使用してiOSアプリにサインインを簡単に追加する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

FirebaseUIは、Firebase Authentication SDKの上に構築されたライブラリであり、アプリで使用するためのドロップインUIフローを提供します。 FirebaseUIには、次の利点があります。

  • 複数のプロバイダー:電子メール/パスワード、電子メールリンク、電話認証、Googleサインイン、Facebookログイン、およびTwitterログインのサインインフロー。
  • アカウント管理:アカウントの作成やパスワードのリセットなどのアカウント管理タスクを処理するためのフロー。
  • 匿名アカウントのリンク:匿名アカウントをIDプロバイダーに自動的にリンクするフロー。
  • カスタマイズ可能:アプリに合わせてFirebaseUIの外観をカスタマイズします。また、FirebaseUIはオープンソースであるため、プロジェクトをフォークして、ニーズに合わせてカスタマイズすることができます。

あなたが始める前に

  1. AppleプロジェクトにFirebaseを追加します

  2. ポッドファイルにFirebaseUIを追加します。

    pod 'FirebaseUI'
    

    必要に応じて、使用するAuthコンポーネントとプロバイダーのみを追加できます。

    pod 'FirebaseUI/Auth'
    
    pod 'FirebaseUI/Google'
    pod 'FirebaseUI/Facebook'
    pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc
    pod 'FirebaseUI/Phone'
    
  3. アプリをFirebaseプロジェクトにまだ接続していない場合は、 Firebaseコンソールから接続します。

サインイン方法を設定する

Firebaseを使用してユーザーにログインする前に、サポートするログイン方法を有効にして構成する必要があります。

メールアドレスとパスワード

Firebaseコンソールで、[認証]セクションを開き、メールとパスワードの認証を有効にします。

  1. Firebaseコンソールで、[認証]セクションを開きます。 [サインイン方法]タブで、電子メール/パスワードプロバイダーを有効にします。電子メールリンクサインインを使用するには、電子メール/パスワードサインインを有効にする必要があることに注意してください。

  2. 同じセクションで、電子メールリンク(パスワードなしのサインイン)サインイン方法を有効にして、[保存]をクリックします。

  3. FIREmailLinkAuthSignInMethodを使用してFUIEmailAuthインスタンスを初期化することにより、電子メールリンクのサインインを有効にできます。また、 handleCodeInAppがtrueに設定された有効なFIRActionCodeSettingsオブジェクトを提供する必要があります。

迅速

var actionCodeSettings = ActionCodeSettings()
actionCodeSettings.url = URL(string: "https://example.appspot.com")
actionCodeSettings.handleCodeInApp = true
actionCodeSettings.setAndroidPackageName("com.firebase.example", installIfNotAvailable: false, minimumVersion: "12")

let provider = FUIEmailAuth(authUI: FUIAuth.defaultAuthUI()!,
                            signInMethod: FIREmailLinkAuthSignInMethod,
                            forceSameDevice: false,
                            allowNewEmailAccounts: true,
                            actionCodeSetting: actionCodeSettings)

Objective-C

FIRActionCodeSettings *actionCodeSettings = [[FIRActionCodeSettings alloc] init];
actionCodeSettings.URL = [NSURL URLWithString:@"https://example.appspot.com"];
actionCodeSettings.handleCodeInApp = YES;
[actionCodeSettings setAndroidPackageName:@"com.firebase.example"
                    installIfNotAvailable:NO
                           minimumVersion:@"12"];

id<FUIAuthProvider> provider = [[FUIEmailAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]
                                                       signInMethod:FIREmailLinkAuthSignInMethod
                                                    forceSameDevice:NO
                                              allowNewEmailAccounts:YES
                                                  actionCodeSetting:actionCodeSettings];
  1. さらに、イニシャライザーに渡すURLをホワイトリストに登録する必要があります。これは、 Firebaseコンソールで行うことができます。[認証]セクションを開きます。 [サインイン方法]タブで、[承認済みドメイン]の下にURLを追加します。

  2. ディープリンクをキャッチしたら、それを認証UIに渡して、処理できるようにする必要があります。

迅速

FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)

Objective-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. FirebaseUI-iOSでの電子メールリンクサインインは、 FirebaseUI-AndroidおよびFirebaseUI-webと互換性があり、FirebaseUI-Androidからフローを開始する1人のユーザーがリンクを開いて、FirebaseUI-webでサインインを完了することができます。反対の流れについても同じことが言えます。

アップル

  1. 始める前に、「Appleでサインイン」ガイドの「Firebaseサインイン」の「 Appleの匿名化されたデータ要件」セクションに従ってください。

  2. サインインwithApple機能をエンタイトルメントファイルに追加します。

  3. Appleでサインインするように構成されたOAuthプロバイダーインスタンスを初期化します。

    迅速

    provider = FUIOAuth.appleAuthProvider()
    

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

グーグル

  1. Firebaseコンソールで、[認証]セクションを開き、Googleログインを有効にします。

  2. 逆にしたクライアントIDをXcodeプロジェクトのURLスキームとして追加します。この値は、 GoogleService-Info.plistファイルにあります。

フェイスブック

  1. Facebookのスタートページに従って、FacebookLoginSDKをセットアップします。

  2. Firebaseコンソールで、[認証]セクションを開き、Facebookを有効にします。 Facebookサインインを有効にするには、Facebook開発者コンソールで取得できるFacebookアプリIDとアプリシークレットを提供する必要があります。

  3. [プロジェクト設定]>[機能]画面から、Xcodeプロジェクトでキーチェーン共有を有効にします。

  4. XcodeプロジェクトのURLスキームとしてfb FACEBOOK_APP_IDを追加します。

  5. FacebookアプリIDと表示名をInfo.plistファイルに追加します。

    価値
    FacebookAppID FACEBOOK_APP_ID (たとえば、 1234567890
    FacebookDisplayNameアプリの名前
  6. Facebookプロバイダーインスタンスを初期化します。

    迅速

    provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
    

    Objective-C

    FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
    

  7. Facebook限定ログインを使用する場合は、 FUIFacebookAuthインスタンスでuseLimitedLoginプロパティを設定します。

    迅速

    provider.useLimitedLogin = true
    

    Objective-C

    provider.useLimitedLogin = YES;
    

ツイッター

  1. Firebaseコンソールで、[認証]セクションを開き、Twitterを有効にします。 Twitterサインインを有効にするには、Twitter APIコンシューマーキーとシークレットを提供する必要があります。これらは、Twitterアプリケーション管理コンソールで取得できます。

  2. Twitterログイン用に構成されたOAuthプロバイダーインスタンスを初期化します。

    迅速

    provider = FUIOAuth.twitterAuthProvider()
    

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

電話番号

  1. Firebaseコンソールで、[認証]セクションを開き、電話番号のサインインを有効にします。

  2. Firebaseは、電話番号のログインリクエストがアプリから送信されていることを確認できる必要があります。これを実現する方法の1つは、APN通知を使用することです。詳細については、アプリの検証を有効にするをご覧ください。

    Firebase認証で使用するAPN通知を有効にするには:

    1. Xcodeで、プロジェクトのプッシュ通知を有効にします。

    2. APNs認証キーをFirebaseにアップロードします。 APNs認証キーをまだお持ちでない場合は、 Apple DeveloperMemberCenterで作成してください。

      1. Firebaseコンソールのプロジェクト内で、歯車のアイコンを選択し、[プロジェクト設定]を選択してから、[クラウドメッセージング]タブを選択します。

      2. iOSアプリ構成APNs認証キーで、[アップロード]ボタンをクリックします。

      3. キーを保存した場所を参照して選択し、[開く]をクリックします。キーのキーID( Apple Developer Member Centerで入手可能)を追加し、[アップロード]をクリックします。

      すでにAPN証明書をお持ちの場合は、代わりに証明書をアップロードできます。

  3. デバイスでAPN通知を受信できない場合、FirebaseはreCAPTCHAを使用してリクエストを確認します。

    reCAPTCHA検証を有効にするには、逆にしたクライアントIDをURLスキームとしてまだ追加していない場合(たとえば、Googleサインインを有効にするため)、Xcodeプロジェクトで追加します。この値は、 GoogleService-Info.plistファイルにあります。

  4. オプション:Firebaseはメソッドスウィズリングを使用してアプリのAPNトークンを自動的に取得し、Firebaseがアプリに送信するサイレントプッシュ通知を処理し、検証中にreCAPTCHA検証ページからのカスタムスキームリダイレクトを自動的にインターセプトします。

    スウィズリングを使用したくない場合は、Firebase SDK認証ドキュメントの付録:スウィズリングなしでの電話サインインの使用を参照してください。

ログイン

FirebaseUIサインインフローを開始するには、最初にFirebaseUIを初期化します。

迅速

import FirebaseAuthUI

/* ... */

FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self

Objective-C

@import FirebaseAuthUI;

...

[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;

次に、サポートするサインイン方法を使用するようにFirebaseUIを構成します。

迅速

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

let providers: [FUIAuthProvider] = [
  FUIGoogleAuth(),
  FUIFacebookAuth(),
  FUITwitterAuth(),
  FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers

Objective-C

@import FirebaseAuthUI;
@import FirebaseFacebookAuthUI;
@import FirebaseGoogleAuthUI;
@import FirebaseOAuthUI;
@import FirebasePhoneAuthUI;

...

NSArray<id<FUIAuthProvider>> *providers = @[
  [[FUIGoogleAuth alloc] init],
  [[FUIFacebookAuth alloc] init],
  [[FUITwitterAuth alloc] init],
  [[FUIPhoneAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]]
];
_authUI.providers = providers;

GoogleまたはFacebookのサインインを有効にした場合は、GoogleおよびFacebookのサインアップフローの結果のハンドラーを実装します。

迅速

func application(_ app: UIApplication, open url: URL,
    options: [UIApplicationOpenURLOptionsKey : Any]) -> Bool {
  let sourceApplication = options[UIApplicationOpenURLOptionsKey.sourceApplication] as! String?
  if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication) ?? false {
    return true
  }
  // other URL handling goes here.
  return false
}

Objective-C

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary *)options {
  NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
  return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}

最後に、 AuthViewControllerからFUIAuthのインスタンスを取得します。次に、それをアプリの最初のView Controllerとして提示するか、アプリ内の別のViewControllerから提示することができます。

迅速

サインインメソッドセレクターを取得するには:

let authViewController = authUI.authViewController()

電話番号サインインのみを使用する場合は、代わりに電話番号サインインビューを直接表示できます。

let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)

Objective-C

サインインメソッドセレクターを取得するには:

UINavigationController *authViewController = [authUI authViewController];

電話番号サインインのみを使用する場合は、代わりに電話番号サインインビューを直接表示できます。

FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];

認証ビューを表示してユーザーがサインインすると、結果がdidSignInWithUser:error:メソッドのFirebaseUIAuthデリゲートに返されます。

迅速

func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
  // handle user and error as necessary
}

Objective-C

   - (void)authUI:(FUIAuth *)authUI
didSignInWithUser:(nullable FIRUser *)user
            error:(nullable NSError *)error {
  // Implement this method to handle signed in user or error if any.
}

サインアウト

FirebaseUIは、FirebaseAuthenticationおよびすべてのソーシャルIDプロバイダーからサインアウトするための便利なメソッドを提供します。

迅速

authUI.signOut()

Objective-C

[authUI signOut];

カスタマイズ

FirebaseUIのビューコントローラをサブクラス化し、 FUIAuthのデリゲートメソッドでそれらを指定することにより、サインイン画面をカスタマイズできます。

迅速

func authPickerViewController(forAuthUI authUI: FUIAuth) -> FUIAuthPickerViewController {
  return FUICustomAuthPickerViewController(nibName: "FUICustomAuthPickerViewController",
                                           bundle: Bundle.main,
                                           authUI: authUI)
}

func emailEntryViewController(forAuthUI authUI: FUIAuth) -> FUIEmailEntryViewController {
  return FUICustomEmailEntryViewController(nibName: "FUICustomEmailEntryViewController",
                                           bundle: Bundle.main,
                                           authUI: authUI)
}

func passwordRecoveryViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordRecoveryViewController {
  return FUICustomPasswordRecoveryViewController(nibName: "FUICustomPasswordRecoveryViewController",
                                                 bundle: Bundle.main,
                                                 authUI: authUI,
                                                 email: email)
}

func passwordSignInViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordSignInViewController {
  return FUICustomPasswordSignInViewController(nibName: "FUICustomPasswordSignInViewController",
                                               bundle: Bundle.main,
                                               authUI: authUI,
                                               email: email)
}

func passwordSignUpViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordSignUpViewController {
  return FUICustomPasswordSignUpViewController(nibName: "FUICustomPasswordSignUpViewController",
                                               bundle: Bundle.main,
                                               authUI: authUI,
                                               email: email)
}

func passwordVerificationViewController(forAuthUI authUI: FUIAuth, email: String, newCredential: AuthCredential) -> FUIPasswordVerificationViewController {
  return FUICustomPasswordVerificationViewController(nibName: "FUICustomPasswordVerificationViewController",
                                                     bundle: Bundle.main,
                                                     authUI: authUI,
                                                     email: email,
                                                     newCredential: newCredential)
}

Objective-C

- (FUIAuthPickerViewController *)authPickerViewControllerForAuthUI:(FUIAuth *)authUI {
  return [[FUICustomAuthPickerViewController alloc] initWithNibName:@"FUICustomAuthPickerViewController"
                                                             bundle:[NSBundle mainBundle]
                                                             authUI:authUI];
}

- (FUIEmailEntryViewController *)emailEntryViewControllerForAuthUI:(FUIAuth *)authUI {
  return [[FUICustomEmailEntryViewController alloc] initWithNibName:@"FUICustomEmailEntryViewController"
                                                             bundle:[NSBundle mainBundle]
                                                             authUI:authUI];

}

- (FUIPasswordSignInViewController *)passwordSignInViewControllerForAuthUI:(FUIAuth *)authUI
                                                                     email:(NSString *)email {
  return [[FUICustomPasswordSignInViewController alloc] initWithNibName:@"FUICustomPasswordSignInViewController"
                                                                 bundle:[NSBundle mainBundle]
                                                                 authUI:authUI
                                                                  email:email];

}

- (FUIPasswordSignUpViewController *)passwordSignUpViewControllerForAuthUI:(FUIAuth *)authUI
                                                                     email:(NSString *)email {
  return [[FUICustomPasswordSignUpViewController alloc] initWithNibName:@"FUICustomPasswordSignUpViewController"
                                                                 bundle:[NSBundle mainBundle]
                                                                 authUI:authUI
                                                                  email:email];

}

- (FUIPasswordRecoveryViewController *)passwordRecoveryViewControllerForAuthUI:(FUIAuth *)authUI
                                                                         email:(NSString *)email {
  return [[FUICustomPasswordRecoveryViewController alloc] initWithNibName:@"FUICustomPasswordRecoveryViewController"
                                                                   bundle:[NSBundle mainBundle]
                                                                   authUI:authUI
                                                                    email:email];

}

- (FUIPasswordVerificationViewController *)passwordVerificationViewControllerForAuthUI:(FUIAuth *)authUI
                                                                                 email:(NSString *)email
                                                                         newCredential:(FIRAuthCredential *)newCredential {
  return [[FUICustomPasswordVerificationViewController alloc] initWithNibName:@"FUICustomPasswordVerificationViewController"
                                                                       bundle:[NSBundle mainBundle]
                                                                       authUI:authUI
                                                                        email:email
                                                                newCredential:newCredential];
}

アカウント作成画面にリンクされているアプリの利用規約のURLをカスタマイズできます。

迅速

let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService

Objective-C

authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];

最後に、カスタムバンドルを指定することで、ユーザーに表示されるメッセージとプロンプトをカスタマイズできます。

迅速

authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.

Objective-C

authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.

次のステップ

  • FirebaseUIの使用とカスタマイズの詳細については、GitHubのREADMEファイルを参照してください。
  • FirebaseUIで見つけて発行し、それを報告したい場合は、 GitHub課題トラッカーを使用してください。