Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

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

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

FirebaseUI 는 앱에서 사용할 드롭인 UI 흐름을 제공하는 Firebase 인증 SDK를 기반으로 구축된 라이브러리입니다. FirebaseUI는 다음과 같은 이점을 제공합니다.

  • 다중 제공자 : 이메일/비밀번호, 이메일 링크, 전화 인증, 구글 로그인, 페이스북 로그인, 트위터 로그인을 위한 로그인 플로우.
  • 계정 관리 : 계정 생성 및 비밀번호 재설정과 같은 계정 관리 작업을 처리하는 흐름입니다.
  • 익명 계정 연결 : 익명 계정을 ID 공급자에 자동으로 연결하는 흐름입니다.
  • 사용자 정의 가능: 앱과 일치하도록 FirebaseUI의 모양을 사용자 정의합니다. 또한 FirebaseUI는 오픈 소스이므로 프로젝트를 분기하고 필요에 따라 정확하게 사용자 지정할 수 있습니다.

시작하기 전에

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

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

    pod 'FirebaseUI'
    

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

    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. FIREmailLinkAuthSignInMethodFUIEmailAuth 인스턴스를 초기화하여 이메일 링크 로그인을 활성화할 수 있습니다. 또한 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)

오브젝티브-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)

오브젝티브-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. FirebaseUI-iOS의 이메일 링크 로그인은 FirebaseUI-AndroidFirebaseUI-web 과 호환되며 FirebaseUI-Android에서 흐름을 시작하는 한 사용자가 FirebaseUI-web으로 링크를 열고 로그인을 완료할 수 있습니다. 반대 흐름도 마찬가지입니다.

사과

  1. 시작하기 전에 및 Firebase Apple로 로그인 가이드의 Apple 익명 데이터 요구 사항 준수 섹션을 따르세요.

  2. 자격 파일에 Apple로 로그인 기능을 추가합니다.

  3. Apple로 로그인에 대해 구성된 OAuth 공급자 인스턴스를 초기화합니다.

    빠른

    provider = FUIOAuth.appleAuthProvider()
    

    오브젝티브-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

  1. Firebase 콘솔 에서 인증 섹션을 열고 Google 로그인을 활성화합니다.

  2. Xcode 프로젝트에서 역방향 클라이언트 ID를 URL 체계로 추가합니다. 이 값은 GoogleService-Info.plist 파일에서 찾을 수 있습니다.

페이스북

  1. Facebook 시작하기 페이지 에 따라 Facebook 로그인 SDK를 설정합니다.

  2. Firebase 콘솔 에서 인증 섹션을 열고 Facebook을 활성화합니다. Facebook 로그인을 활성화하려면 Facebook 개발자 콘솔에서 얻을 수 있는 Facebook 앱 ID와 앱 암호를 제공해야 합니다.

  3. 프로젝트 설정 > 기능 화면에서 Xcode 프로젝트의 키체인 공유를 활성화합니다.

  4. Xcode 프로젝트에서 fb FACEBOOK_APP_ID 를 URL 스키마로 추가하십시오.

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

    열쇠
    페이스북앱ID FACEBOOK_APP_ID (예: 1234567890 )
    페이스북디스플레이이름 앱 이름
  6. Facebook 공급자 인스턴스를 초기화합니다.

    빠른

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

    오브젝티브-C

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

  7. Facebook Limited Login 을 사용하려면 FUIFacebookAuth 인스턴스에서 useLimitedLogin 속성을 설정하세요.

    빠른

    provider.useLimitedLogin = true
    

    오브젝티브-C

    provider.useLimitedLogin = YES;
    

트위터

  1. Firebase 콘솔 에서 인증 섹션을 열고 Twitter를 활성화합니다. Twitter 로그인을 활성화하려면 Twitter 애플리케이션 관리 콘솔에서 얻을 수 있는 Twitter API 소비자 키와 비밀을 제공해야 합니다.

  2. Twitter 로그인용으로 구성된 OAuth 공급자 인스턴스를 초기화합니다.

    빠른

    provider = FUIOAuth.twitterAuthProvider()
    

    오브젝티브-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

전화 번호

  1. Firebase 콘솔 에서 인증 섹션을 열고 전화번호 로그인을 활성화합니다.

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

    Firebase 인증과 함께 사용할 APN 알림을 활성화하려면 다음 안내를 따르세요.

    1. Xcode에서 프로젝트에 대한 푸시 알림을 활성화 합니다.

    2. APN 인증 키를 Firebase에 업로드합니다. APN 인증 키가 아직 없는 경우 Apple 개발자 회원 센터 에서 생성해야 합니다.

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

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

      3. 키를 저장한 위치를 찾아 선택하고 열기 를 클릭합니다. 키에 대한 키 ID를 추가하고( Apple 개발자 회원 센터 에서 사용 가능) 업로드 를 클릭합니다.

      APN 인증서가 이미 있는 경우 대신 인증서를 업로드할 수 있습니다.

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

    reCAPTCHA 확인을 활성화하려면 역방향 클라이언트 ID를 URL 체계로 아직 추가하지 않은 경우(예: Google 로그인 활성화) Xcode 프로젝트에서 추가합니다. 이 값은 GoogleService-Info.plist 파일에서 찾을 수 있습니다.

  4. 선택 사항 : Firebase는 메서드 재구성을 사용하여 앱의 APN 토큰을 자동으로 가져오고, Firebase가 앱에 보내는 자동 푸시 알림을 처리하고, 확인 중에 reCAPTCHA 확인 페이지에서 사용자 지정 체계 리디렉션을 자동으로 가로챕니다.

    Swizzling을 사용하지 않으려면 Firebase SDK 인증 문서에서 부록: Swizzling 없이 전화 로그인 사용 을 참조하세요.

로그인

FirebaseUI 로그인 흐름을 시작하려면 먼저 FirebaseUI를 초기화하세요.

빠른

import FirebaseAuthUI

/* ... */

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

오브젝티브-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

오브젝티브-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
}

오브젝티브-C

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

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

빠른

로그인 방법 선택기를 가져오려면 다음 단계를 따르세요.

let authViewController = authUI.authViewController()

전화번호 로그인만 사용하는 경우 대신 전화번호 로그인 보기를 직접 표시할 수 있습니다.

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

오브젝티브-C

로그인 방법 선택기를 가져오려면 다음 단계를 따르세요.

UINavigationController *authViewController = [authUI authViewController];

전화번호 로그인만 사용하는 경우 대신 전화번호 로그인 보기를 직접 표시할 수 있습니다.

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

인증 보기를 표시하고 사용자가 로그인하면 결과가 didSignInWithUser:error: 메소드의 FirebaseUI 인증 대리자에게 반환됩니다.

빠른

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

오브젝티브-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 제공업체에서 로그아웃하는 편리한 방법을 제공합니다.

빠른

authUI.signOut()

오브젝티브-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)
}

오브젝티브-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

오브젝티브-C

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

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

빠른

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

오브젝티브-C

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

다음 단계

  • FirebaseUI 사용 및 사용자 지정에 대한 자세한 내용은 GitHub의 README 파일을 참조하세요.
  • FirebaseUI에서 찾아서 문제를 보고하고 싶다면 GitHub 문제 추적기 를 사용하세요.