콘솔로 이동

FirebaseUI로 손쉽게 iOS 앱에 로그인 추가

FirebaseUI는 Firebase 인증 SDK를 바탕으로 구축된 라이브러리이며 앱에서 사용할 수 있는 삽입형 UI 흐름을 제공합니다. FirebaseUI의 장점은 다음과 같습니다.

  • 여러 제공업체: 이메일/비밀번호, 이메일 링크, 전화 인증, Google 로그인, Facebook 로그인, Twitter 로그인을 위한 로그인 흐름을 제공합니다.
  • 계정 관리: 계정 생성 및 비밀번호 재설정과 같은 계정 관리 작업을 처리하는 흐름을 제공합니다.
  • 계정 연결: 여러 ID 공급업체에서 사용자 계정을 안전하게 연결하는 흐름을 제공합니다.
  • 맞춤설정 가능: 앱에 맞게 FirebaseUI의 디자인을 맞춤설정할 수 있습니다. 또한 FirebaseUI는 오픈소스이므로 프로젝트를 퍼오고 내 요구사항에 정확하게 맞춰 맞춤설정할 수 있습니다.

시작하기 전에

  1. iOS 프로젝트에 Firebase를 추가합니다.

  2. Podfile에 FirebaseUI를 추가합니다.

    pod 'FirebaseUI'
    

    원하는 경우 사용할 인증 구성요소와 제공업체만 추가할 수 있습니다.

    pod 'FirebaseUI/Auth'
    
    pod 'FirebaseUI/Google'
    pod 'FirebaseUI/Facebook'
    pod 'FirebaseUI/Twitter'
    pod 'FirebaseUI/Phone'
    
  3. 아직 Firebase 프로젝트에 앱을 연결하지 않았다면 Firebase 콘솔에서 연결합니다.

로그인 방법 설정

사용자 로그인에 Firebase를 사용하려면 먼저 지원하려는 로그인 방법을 사용 설정하고 구성해야 합니다.

이메일 주소 및 비밀번호

Firebase Console에서 인증 섹션을 열고 이메일 및 비밀번호 인증을 사용 설정합니다.

  1. Firebase Console에서 인증 섹션을 엽니다. 로그인 방법 탭에서 이메일/비밀번호 제공업체를 사용 설정합니다. 이메일 링크 로그인을 사용하려면 이메일/비밀번호 로그인이 사용 설정되어야 합니다.

  2. 같은 섹션에서 이메일 링크(비밀번호가 없는 로그인) 로그인 방법을 사용 설정하고 저장을 클릭합니다.

  3. FIREmailLinkAuthSignInMethodFUIEmailAuth 인스턴스를 초기화하면 이메일 링크 로그인을 사용 설정할 수 있습니다. handleCodeInApp을 true로 설정한 올바른 FIRActionCodeSettings 객체도 제공해야 합니다.

Swift

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.initAuthAuthUI(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] initAuthAuthUI:[FUIAuth defaultAuthUI]
                                                       signInMethod:FIREmailLinkAuthSignInMethod
                                                    forceSameDevice:NO
                                              allowNewEmailAccounts:YES
                                                  actionCodeSetting:actionCodeSettings];
  1. 또한 초기화 메소드에 전달할 URL을 허용해야 합니다. 이 URL을 허용하려면 Firebase Console에서 인증 섹션을 엽니다. 로그인 방법 탭에 있는 승인된 도메인에 해당 URL을 추가합니다.

  2. 딥 링크가 포착되면 이를 처리할 수 있도록 인증 UI로 전달해야 합니다.

Swift

Auth.defaultAuthUI.handleOpenURL(url, sourceApplication: sourceApplication)

Objective-C

[FUIAuth.defaultAuthUI handleOpenURL:url sourceApplication:sourceApplication];
  1. FirebaseUI-iOS의 이메일 링크 로그인은 FirebaseUI-AndroidFirebaseUI-web과 호환되어 FirebaseUI-Android에서 흐름을 시작한 사용자가 링크를 열고 FirebaseUI-web으로 로그인을 완료할 수 있습니다. 이와 역순으로 진행되는 흐름 역시 가능합니다.

Google

  1. Firebase Console에서 인증 섹션을 열고 Google 로그인을 사용 설정합니다.

  2. Xcode 프로젝트에서 반전된 클라이언트 ID를 URL 스키마로 추가합니다. 이 값은 GoogleService-Info.plist 파일에서 찾을 수 있습니다.

Facebook

  1. Firebase Console에서 인증 섹션을 열고 Facebook을 사용 설정합니다. Facebook 로그인을 사용 설정하려면 Facebook 앱 ID와 앱 비밀번호(Facebook 개발자 콘솔에서 확인 가능)를 입력해야 합니다.

  2. 프로젝트 설정 > 기능에서 Xcode 프로젝트에 키체인 공유를 사용 설정합니다.

  3. Xcode 프로젝트에서 fbFACEBOOK_APP_ID를 URL 스키마로 추가합니다.

  4. Info.plist 파일에 Facebook 앱 ID와 표시 이름을 추가합니다.

    FacebookAppID FACEBOOK_APP_ID(예: 1234567890)
    FacebookDisplayName 앱의 이름

Twitter

  1. Firebase Console에서 인증 섹션을 열고 Twitter를 사용 설정합니다. Twitter 로그인을 사용 설정하려면 Twitter 애플리케이션 관리 콘솔에서 확인할 수 있는 Twitter API 고객 키와 비밀번호를 입력해야 합니다.

  2. Xcode 프로젝트에서 twitterkit-TWITTER_CONSUMER_KEY를 URL 스키마로 추가합니다.

  3. 앱 대리자에서 Twitter 고객 키와 비밀번호로 Twitter 키트를 초기화합니다.

    Swift

    func application(_ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
      Twitter.sharedInstance().start(withConsumerKey:"TWITTER_CONSUMER_KEY",
                                      consumerSecret:"TWITTER_CONSUMER_SECRET")
      return true
    }
    

    Objective-C

              - (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        [[Twitter sharedInstance] startWithConsumerKey:@"TWITTER_CONSUMER_KEY"
                                        consumerSecret:@"TWITTER_CONSUMER_SECRET"];
    }
    

전화번호

  1. Firebase Console에서 인증 섹션을 열고 전화번호 로그인을 사용 설정합니다.

  2. Firebase에서 전화번호 로그인 요청이 내 앱에서 발생한 것인지 확인할 수 있어야 합니다. 확인 방법 중 하나는 APN 알림을 통해 확인하는 것입니다. 자세한 내용은 앱 인증 사용 설정을 참조하세요.

    Firebase 인증과 함께 사용하기 위해 APN 알림을 사용 설정하는 방법은 다음과 같습니다.

    1. Xcode에서 프로젝트에 푸시 알림을 사용 설정합니다.

    2. Firebase에 APN 인증 키를 업로드합니다. 아직 APN 인증 키가 없으면 FCM에서 APN 구성을 참조하세요.

      1. Firebase 콘솔의 프로젝트 내에서 톱니바퀴 아이콘을 선택하고 프로젝트 설정을 선택한 다음 클라우드 메시징 탭을 선택합니다.

      2. iOS 앱 구성APN 인증 키에서 업로드 버튼을 클릭합니다.

      3. 키를 저장한 위치로 이동하여 키를 선택하고 열기를 클릭합니다. 키에 해당하는 키 ID(Apple Developer Member Center인증, 식별자, 프로필에서 확인 가능)를 추가하고 업로드를 클릭합니다.

      APN 인증서를 이미 갖고 있다면 인증서를 대신 업로드할 수 있습니다.

  3. 기기에서 APN 알림을 수신할 수 없으면 Firebase에서 reCAPTCHA를 사용하여 요청을 확인합니다.

    reCAPTCHA 인증을 사용 설정하려는 경우, 아직까지 반전된 클라이언트 ID를 (Google 로그인 사용 설정 등을 위해) URL 스키마로 추가하지 않았다면 Xcode 프로젝트에서 추가합니다. 이 값은 GoogleService-Info.plist 파일에서 찾을 수 있습니다.

  4. 선택사항: Firebase에서는 메소드 재구성을 사용하여 앱의 APN 토큰을 자동으로 가져오고, Firebase가 사용자 모르게 앱으로 전송하는 푸시 알림을 처리하고, 인증 중에 reCAPTCHA 인증 페이지의 맞춤 스키마 리디렉션을 자동으로 가로챕니다.

    재구성을 사용하지 않으려면 Firebase SDK 인증 문서의 부록: 재구성 없이 전화번호 로그인 사용을 참조하세요.

로그인

FirebaseUI 로그인 흐름을 시작하려면 먼저 FirebaseUI를 초기화합니다.

Swift

import FirebaseUI

/* ... */

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

Objective-C

@import FirebaseUI;

...

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

그런 다음 지원하고자 하는 로그인 방법을 사용하도록 FirebaseUI를 구성합니다.

Swift

import FirebaseUI

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

Objective-C

@import FirebaseUI;

...

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 로그인 흐름의 결과에 대한 핸들러를 구현합니다.

Swift

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];
}

마지막으로 FUIAuth에서 AuthViewController의 인스턴스를 가져옵니다. 그런 다음 앱의 첫 번째 보기 컨트롤러로 표시하거나 앱의 다른 보기 컨트롤러로 표시할 수 있습니다.

Swift

로그인 방법 선택기를 가져오는 방법은 다음과 같습니다.

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: 메소드의 FirebaseUI 인증 대리자로 반환됩니다.

Swift

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는 Firebase 인증은 물론 모든 소셜 ID 제공업체에서 로그아웃시키는 편리한 메소드를 제공합니다.

Swift

authUI.signOut()

Objective-C

[authUI signOut];

맞춤설정

FirebaseUI의 보기 컨트롤러를 하위 클래스로 만들고 FUIAuth의 대리자 메소드에서 지정하면 로그인 화면을 맞춤설정할 수 있습니다.

Swift

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을 맞춤설정할 수 있습니다.

Swift

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

Objective-C

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

마지막으로 맞춤 번들을 지정하여 사용자에게 표시되는 메시지를 맞춤설정할 수 있습니다.

Swift

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

Objective-C

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

다음 단계

  • FirebaseUI 사용 및 맞춤설정에 관한 자세한 내용은 GitHub의 README 파일을 참조하세요.
  • FirebaseUI에서 문제를 발견했으며 신고하기를 원한다면 GitHub 문제 추적기를 사용하세요.