Agregue fácilmente el inicio de sesión a su aplicación iOS con FirebaseUI

FirebaseUI es una biblioteca creada sobre el SDK de autenticación de Firebase que proporciona flujos de interfaz de usuario directos para usar en su aplicación. FirebaseUI proporciona los siguientes beneficios:

  • Múltiples proveedores : flujos de inicio de sesión para correo electrónico/contraseña, enlace de correo electrónico, autenticación telefónica, inicio de sesión de Google, inicio de sesión de Facebook e inicio de sesión de Twitter.
  • Gestión de cuentas : flujos para manejar tareas de gestión de cuentas, como la creación de cuentas y el restablecimiento de contraseñas.
  • Vinculación de cuentas anónimas : flujos para vincular automáticamente cuentas anónimas a proveedores de identidad.
  • Personalizable : personaliza el aspecto de FirebaseUI para que coincida con tu aplicación. Además, como FirebaseUI es de código abierto, puedes bifurcar el proyecto y personalizarlo exactamente según tus necesidades.

Antes de que empieces

  1. Agrega Firebase a tu proyecto de Apple .

  2. Agregue FirebaseUI a su Podfile:

    pod 'FirebaseUI'
    

    Si lo prefieres, puedes agregar solo el componente de autenticación y los proveedores que deseas utilizar:

    pod 'FirebaseUI/Auth'
    
    pod 'FirebaseUI/Google'
    pod 'FirebaseUI/Facebook'
    pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc
    pod 'FirebaseUI/Phone'
    
  3. Si aún no has conectado tu aplicación a tu proyecto de Firebase, hazlo desde Firebase console .

Configurar métodos de inicio de sesión

Antes de poder usar Firebase para iniciar sesión en los usuarios, debes habilitar y configurar los métodos de inicio de sesión que deseas admitir.

Dirección de correo electrónico y contraseña

En Firebase console , abra la sección Autenticación y habilite la autenticación de correo electrónico y contraseña.

  1. En Firebase console , abre la sección Autenticación . En la pestaña Método de inicio de sesión , habilite el proveedor de correo electrónico/contraseña . Tenga en cuenta que el inicio de sesión por correo electrónico o contraseña debe estar habilitado para utilizar el inicio de sesión mediante enlace de correo electrónico.

  2. En la misma sección, habilite el método de inicio de sesión mediante enlace de correo electrónico (inicio de sesión sin contraseña) y haga clic en Guardar .

  3. Puede habilitar el inicio de sesión mediante enlace de correo electrónico inicializando una instancia FUIEmailAuth con FIREmailLinkAuthSignInMethod . También deberá proporcionar un objeto FIRActionCodeSettings válido con handleCodeInApp establecido en verdadero.

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)

C objetivo

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. Además, debe incluir en la lista blanca la URL que pasa al inicializador. Puedes hacerlo en Firebase console , abre la sección Autenticación . En la pestaña Método de inicio de sesión , agregue la URL en Dominios autorizados .

  2. Una vez que capture el enlace profundo, deberá pasarlo a la interfaz de usuario de autenticación para que pueda manejarse.

Rápido

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

C objetivo

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. El inicio de sesión con enlace de correo electrónico en FirebaseUI-iOS es compatible con FirebaseUI-Android y FirebaseUI-web , donde un usuario que inicia el flujo desde FirebaseUI-Android puede abrir el enlace y completar el inicio de sesión con FirebaseUI-web. Lo mismo ocurre con el flujo opuesto.

Manzana

  1. Siga las secciones Antes de comenzar y Cumplir con los requisitos de datos anónimos de Apple en la guía Iniciar sesión con Apple de Firebase.

  2. Agregue la capacidad Iniciar sesión con Apple a su archivo de derechos.

  3. Inicialice una instancia de proveedor de OAuth configurada para Iniciar sesión con Apple:

    Rápido

    provider = FUIOAuth.appleAuthProvider()
    

    C objetivo

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

  1. Configure el inicio de sesión de Google usando este tutorial

Facebook

  1. Configure el SDK de inicio de sesión de Facebook siguiendo la página de inicio de Facebook .

  2. En Firebase console , abre la sección Autenticación y habilita Facebook. Para habilitar el inicio de sesión en Facebook, debe proporcionar su ID de aplicación de Facebook y su secreto de aplicación, que puede obtener en la consola de desarrolladores de Facebook.

  3. Habilite el uso compartido de llaveros en su proyecto Xcode desde la pantalla Configuración del proyecto > Capacidades .

  4. Agregue fb FACEBOOK_APP_ID como esquema de URL en su proyecto Xcode.

  5. Agregue su ID de aplicación de Facebook y nombre para mostrar al archivo Info.plist :

    Llave Valor
    ID de aplicación de Facebook FACEBOOK_APP_ID (por ejemplo, 1234567890 )
    FacebookNombre para mostrar El nombre de tu aplicación
  6. Inicialice una instancia de proveedor de Facebook:

    Rápido

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

    C objetivo

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

  7. Si desea utilizar el inicio de sesión limitado de Facebook , establezca la propiedad useLimitedLogin en la instancia FUIFacebookAuth .

    Rápido

    provider.useLimitedLogin = true
    

    C objetivo

    provider.useLimitedLogin = YES;
    

Gorjeo

  1. En Firebase console , abre la sección Autenticación y habilita Twitter. Para habilitar el inicio de sesión en Twitter, debe proporcionar su clave de consumidor y secreto de la API de Twitter, que puede obtener en la consola de administración de aplicaciones de Twitter.

  2. Inicialice una instancia de proveedor OAuth configurada para iniciar sesión en Twitter:

    Rápido

    provider = FUIOAuth.twitterAuthProvider()
    

    C objetivo

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

Número de teléfono

  1. En Firebase console , abra la sección Autenticación y habilite el inicio de sesión con número de teléfono.

  2. Firebase debe poder verificar que las solicitudes de inicio de sesión de números de teléfono provienen de su aplicación. Una de las formas en que esto se logra es mediante notificaciones de APN. Consulte Habilitar la verificación de aplicaciones para obtener más detalles.

    Para habilitar las notificaciones de APN para usar con Firebase Authentication:

    1. En Xcode, habilite las notificaciones push para su proyecto.

    2. Cargue su clave de autenticación de APN en Firebase. Si aún no tiene una clave de autenticación de APN, asegúrese de crear una en el Centro de miembros desarrolladores de Apple .

      1. Dentro de su proyecto en Firebase console, seleccione el ícono de ajustes, seleccione Configuración del proyecto y luego seleccione la pestaña Mensajería en la nube .

      2. En la clave de autenticación de APN en la configuración de la aplicación iOS , haga clic en el botón Cargar .

      3. Busque la ubicación donde guardó su clave, selecciónela y haga clic en Abrir . Agregue el ID de la clave (disponible en el Centro de miembros desarrolladores de Apple ) y haga clic en Cargar .

      Si ya tiene un certificado APN, puede cargar el certificado en su lugar.

  3. Cuando no se pueden recibir notificaciones de APN en un dispositivo, Firebase usa reCAPTCHA para verificar las solicitudes.

    Para habilitar la verificación reCAPTCHA, haga lo siguiente en Xcode:

    1. Abra la configuración de su proyecto: haga doble clic en el nombre del proyecto en la vista de árbol de la izquierda. Seleccione su aplicación en la sección OBJETIVOS , luego seleccione la pestaña Información y expanda la sección Tipos de URL .
    2. Haga clic en el botón + y agregue su ID de aplicación codificada como un esquema de URL. Puede encontrar su ID de aplicación codificada en la página Configuración general de Firebase console, en la sección de su aplicación iOS. Deje los demás campos en blanco.

      Cuando esté completa, su configuración debería verse similar a la siguiente (pero con los valores específicos de su aplicación):

      Captura de pantalla de la interfaz de configuración del esquema de URL personalizado de Xcode
  4. Opcional : Firebase utiliza el método swizzling para obtener automáticamente el token APN de su aplicación, para manejar las notificaciones push silenciosas que Firebase envía a su aplicación e interceptar automáticamente el redireccionamiento del esquema personalizado desde la página de verificación reCAPTCHA durante la verificación.

    Si prefiere no utilizar swizzling, consulte el Apéndice: Uso del inicio de sesión telefónico sin swizzling en los documentos de autenticación del SDK de Firebase.

Iniciar sesión

Para iniciar el flujo de inicio de sesión de FirebaseUI, primero inicialice FirebaseUI:

Rápido

import FirebaseAuthUI

/* ... */

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

C objetivo

@import FirebaseAuthUI;

...

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

Luego, configura FirebaseUI para usar los métodos de inicio de sesión que deseas admitir:

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

C objetivo

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

Si habilitó el inicio de sesión de Google o Facebook, implemente un controlador para el resultado de los flujos de registro de Google y 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
}

C objetivo

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

Finalmente, obtenga una instancia de AuthViewController de FUIAuth . Luego puede presentarlo como el primer controlador de vista de su aplicación o presentarlo desde otro controlador de vista en su aplicación.

Rápido

Para obtener el selector de método de inicio de sesión:

let authViewController = authUI.authViewController()

Si solo utiliza el inicio de sesión con número de teléfono, puede mostrar la vista de inicio de sesión con número de teléfono directamente:

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

C objetivo

Para obtener el selector de método de inicio de sesión:

UINavigationController *authViewController = [authUI authViewController];

Si solo utiliza el inicio de sesión con número de teléfono, puede mostrar la vista de inicio de sesión con número de teléfono directamente:

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

Después de presentar la vista de autenticación y el usuario inicia sesión, el resultado se devuelve al delegado de autenticación de FirebaseUI en el método didSignInWithUser:error:

Rápido

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

C objetivo

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

Desconectar

FirebaseUI proporciona métodos convenientes para cerrar sesión en Firebase Authentication, así como en todos los proveedores de identidad social:

Rápido

authUI.signOut()

C objetivo

[authUI signOut];

Personalización

Puedes personalizar las pantallas de inicio de sesión subclasificando los controladores de vista de FirebaseUI y especificándolos en los métodos delegados de 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)
}

C objetivo

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

Puede personalizar la URL según los términos de servicio de su aplicación, que está vinculada en la pantalla de creación de cuenta:

Rápido

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

C objetivo

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

Finalmente, puede personalizar los mensajes y las indicaciones que se muestran a sus usuarios especificando un paquete personalizado:

Rápido

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

C objetivo

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

Próximos pasos

  • Para obtener más información sobre el uso y la personalización de FirebaseUI, consulte el archivo README en GitHub.
  • Si encuentra un problema en FirebaseUI y desea informarlo, utilice el rastreador de problemas de GitHub .