Adicione facilmente login ao seu aplicativo iOS com FirebaseUI

FirebaseUI é uma biblioteca criada com base no SDK do Firebase Authentication que fornece fluxos de IU integrados para uso em seu aplicativo. FirebaseUI oferece os seguintes benefícios:

  • Vários provedores : fluxos de login para e-mail/senha, link de e-mail, autenticação por telefone, login do Google, login do Facebook e login do Twitter.
  • Gerenciamento de contas : fluxos para lidar com tarefas de gerenciamento de contas, como criação de contas e redefinições de senha.
  • Vinculação de contas anônimas : fluxos para vincular automaticamente contas anônimas a provedores de identidade.
  • Personalizável : personalize a aparência do FirebaseUI para combinar com seu aplicativo. Além disso, como o FirebaseUI é de código aberto, você pode bifurcar o projeto e personalizá-lo exatamente de acordo com suas necessidades.

Antes de você começar

  1. Adicione o Firebase ao seu projeto Apple .

  2. Adicione FirebaseUI ao seu Podfile:

    pod 'FirebaseUI'

    Se preferir, você pode adicionar apenas o componente Auth e os provedores que deseja usar:

    pod 'FirebaseUI/Auth'

pod 'FirebaseUI/Google'
pod 'FirebaseUI/Facebook'
pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc
pod 'FirebaseUI/Phone'

  3. Se você ainda não conectou seu aplicativo ao projeto do Firebase, faça isso no console do Firebase .

Configurar métodos de login

Antes de usar o Firebase para fazer login de usuários, você deve ativar e configurar os métodos de login que deseja oferecer suporte.

Endereço de e-mail e senha

No console do Firebase , abra a seção Autenticação e habilite a autenticação por e-mail e senha.

  1. No console do Firebase , abra a seção Autenticação . Na guia Método de login , habilite o provedor de e-mail/senha . Observe que o login por e-mail ou senha deve estar ativado para usar o login por link de e-mail.

  2. Na mesma seção, habilite o método de login do link de e-mail (login sem senha) e clique em Salvar .

  3. Você pode ativar o login do link de e-mail inicializando uma instância FUIEmailAuth com FIREmailLinkAuthSignInMethod . Você também precisará fornecer um objeto FIRActionCodeSettings válido com handleCodeInApp definido como verdadeiro.

Rápido

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)

Objetivo-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. Além disso, você precisa colocar na lista de permissões o URL que você passa para o inicializador. Você pode fazer isso no console do Firebase , abra a seção Autenticação . Na guia Método de login , adicione o URL em Domínios autorizados .

  2. Depois de capturar o link direto, você precisará passá-lo para a IU de autenticação para que possa ser manipulado.

Rápido

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

Objetivo-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. O login do link de e-mail no FirebaseUI-iOS é compatível com FirebaseUI-Android e FirebaseUI-web , onde um usuário que inicia o fluxo no FirebaseUI-Android pode abrir o link e concluir o login com o FirebaseUI-web. O mesmo se aplica ao fluxo oposto.

Maçã

  1. Siga as seções Antes de começar e Cumprir os requisitos de dados anonimizados da Apple no guia Fazer login com a Apple do Firebase.

  2. Adicione o recurso Fazer login com a Apple ao seu arquivo de direitos.

  3. Inicialize uma instância do provedor OAuth configurada para Sign in with Apple:

    Rápido

    provider = FUIOAuth.appleAuthProvider()

    Objetivo-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

  1. Configure o login do Google usando este tutorial

Facebook

  1. Configure o SDK de login do Facebook seguindo a página de primeiros passos do Facebook .

  2. No console do Firebase , abra a seção Autenticação e habilite o Facebook. Para ativar o login no Facebook, você deve fornecer seu ID e segredo do aplicativo do Facebook, que podem ser obtidos no console de desenvolvedores do Facebook.

  3. Habilite o compartilhamento de chaves em seu projeto Xcode na tela Configurações do projeto > Recursos .

  4. Adicione fb FACEBOOK_APP_ID como um esquema de URL em seu projeto Xcode.

  5. Adicione seu ID do aplicativo do Facebook e nome de exibição ao arquivo Info.plist :

    Chave Valor
    FacebookAppID FACEBOOK_APP_ID (por exemplo, 1234567890 )
    FacebookDisplayName O nome do seu aplicativo

  6. Inicialize uma instância do provedor do Facebook:

    Rápido

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

    Objetivo-C

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

  7. Se você quiser usar o Login limitado do Facebook , defina a propriedade useLimitedLogin na instância FUIFacebookAuth .

    Rápido

    provider.useLimitedLogin = true

    Objetivo-C

    provider.useLimitedLogin = YES;

Twitter

  1. No console do Firebase , abra a seção Autenticação e habilite o Twitter. Para ativar o login no Twitter, você deve fornecer a chave e o segredo do consumidor da API do Twitter, que podem ser obtidos no console de gerenciamento de aplicativos do Twitter.

  2. Inicialize uma instância do provedor OAuth configurada para login no Twitter:

    Rápido

    provider = FUIOAuth.twitterAuthProvider()

    Objetivo-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

Número de telefone

  1. No console do Firebase , abra a seção Autenticação e ative o login por número de telefone.

  2. O Firebase precisa ser capaz de verificar se as solicitações de login por número de telefone vêm do seu aplicativo. Uma das maneiras de fazer isso é por meio de notificações de APNs. Consulte Habilitar verificação de aplicativos para obter detalhes.

    Para ativar notificações de APNs para uso com o Firebase Authentication:

    1. No Xcode, habilite notificações push para seu projeto.

    2. Faça upload da sua chave de autenticação de APNs para o Firebase. Se você ainda não possui uma chave de autenticação de APNs, crie uma no Apple Developer Member Center .

      1. Dentro do seu projeto no console do Firebase, selecione o ícone de engrenagem, selecione Configurações do projeto e selecione a guia Cloud Messaging .

      2. Na chave de autenticação APNs em configuração do aplicativo iOS , clique no botão Upload .

      3. Navegue até o local onde você salvou sua chave, selecione-o e clique em Abrir . Adicione o ID da chave (disponível no Apple Developer Member Center ) e clique em Upload .

      Se você já tiver um certificado de APNs, poderá fazer upload do certificado.

  3. Quando as notificações de APNs não podem ser recebidas em um dispositivo, o Firebase usa o reCAPTCHA para verificar as solicitações.

    Para habilitar a verificação reCAPTCHA, faça o seguinte no Xcode:

    1. Abra a configuração do seu projeto: clique duas vezes no nome do projeto na visualização em árvore à esquerda. Selecione seu aplicativo na seção TARGETS , selecione a guia Informações e expanda a seção Tipos de URL .
    2. Clique no botão + e adicione seu ID de aplicativo codificado como um esquema de URL. Você pode encontrar o ID do aplicativo codificado na página Configurações gerais do console do Firebase, na seção do seu aplicativo iOS. Deixe os demais campos em branco.

      Quando concluída, sua configuração deverá ser semelhante à seguinte (mas com os valores específicos do seu aplicativo):

      Captura de tela da interface de configuração do esquema de URL personalizado do Xcode

  4. Opcional : o Firebase usa o método swizzling para obter automaticamente o token de APNs do seu aplicativo, para lidar com as notificações push silenciosas que o Firebase envia ao seu aplicativo e para interceptar automaticamente o redirecionamento do esquema personalizado da página de verificação do reCAPTCHA durante a verificação.

    Se você preferir não usar swizzling, consulte Apêndice: Como usar o login por telefone sem swizzling na documentação de autenticação do SDK do Firebase.

Entrar

Para iniciar o fluxo de login do FirebaseUI, primeiro inicialize o FirebaseUI:

Rápido

import FirebaseAuthUI

/* ... */

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

Objetivo-C

@import FirebaseAuthUI;

...

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

Em seguida, configure o FirebaseUI para usar os métodos de login que você deseja oferecer suporte:

Rápido

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

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

Objetivo-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;

Se você ativou o login do Google ou do Facebook, implemente um manipulador para o resultado dos fluxos de inscrição do Google e do Facebook:

Rápido

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
}

Objetivo-C

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

Finalmente, obtenha uma instância de AuthViewController de FUIAuth . Você pode então apresentá-lo como o primeiro controlador de visualização do seu aplicativo ou apresentá-lo a partir de outro controlador de visualização no seu aplicativo.

Rápido

Para obter o seletor de método de login:

let authViewController = authUI.authViewController()

Se você usar apenas o login por número de telefone, poderá exibir a visualização de login por número de telefone diretamente:

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

Objetivo-C

Para obter o seletor de método de login:

UINavigationController *authViewController = [authUI authViewController];

Se você usar apenas o login por número de telefone, poderá exibir a visualização de login por número de telefone diretamente:

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

Depois que você apresentar a visualização de autenticação e o usuário fizer login, o resultado será retornado ao delegado FirebaseUI Auth no método didSignInWithUser:error: ::

Rápido

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

Objetivo-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.
}

Sair

O FirebaseUI fornece métodos convenientes para sair do Firebase Authentication, bem como de todos os provedores de identidade social:

Rápido

authUI.signOut()

Objetivo-C

[authUI signOut];

Costumização

Você pode personalizar as telas de login subclassificando os controladores de visualização do FirebaseUI e especificando-os nos métodos delegados do FUIAuth :

Rápido

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)
}

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

Você pode personalizar o URL de acordo com os termos de serviço do seu aplicativo, que estão vinculados na tela de criação da conta:

Rápido

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

Objetivo-C

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

Por fim, você pode personalizar as mensagens e os prompts mostrados aos usuários especificando um pacote personalizado:

Rápido

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

Objetivo-C

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

Próximos passos

  • Para obter mais informações sobre como usar e personalizar o FirebaseUI, consulte o arquivo README no GitHub.
  • Se você encontrar um problema no FirebaseUI e quiser denunciá-lo, use o rastreador de problemas do GitHub .