Agrega acceso a tu app para iOS fácilmente con FirebaseUI

FirebaseUI es una biblioteca creada a partir del SDK de Firebase Authentication que proporciona flujos directos de IU para usar en la app. FirebaseUI proporciona los siguientes beneficios:

  • Proveedores múltiples: Flujos de acceso para correo electrónico/contraseña, vínculo de correo electrónico, autenticación telefónica, Acceso con Google, Acceso con Facebook y Acceso con Twitter.
  • Administración de cuentas: Flujos para controlar las tareas de administración de cuentas, como la creación de cuentas y el restablecimiento de contraseñas.
  • Vinculación de cuentas: Flujos para vincular de forma segura cuentas de usuarios a través de proveedores de identidad.
  • Personalización: Modifica el aspecto de FirebaseUI para adaptarlo a tu aplicación. Además, FirebaseUI es de código abierto, por lo que puedes hacer tu propia bifurcación del proyecto y personalizarla libremente según tus necesidades.

Antes de comenzar

  1. Agrega Firebase a tu proyecto de iOS.

  2. Agrega FirebaseUI a tu Podfile:

    pod 'FirebaseUI'
    

    Si quieres, puedes agregar solo el componente de Auth y los proveedores que quieras usar:

    pod 'FirebaseUI/Auth'
    
    pod 'FirebaseUI/Google'
    pod 'FirebaseUI/Facebook'
    pod 'FirebaseUI/Twitter'
    pod 'FirebaseUI/Phone'
    
  3. Si aún no conectaste la app al proyecto de Firebase, puedes hacerlo desde Firebase console.

Configura métodos de acceso

Antes de que puedas usar Firebase para que los usuarios accedan, debes habilitar y configurar los métodos de acceso que deseas admitir.

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

En Firebase console,abre la sección Autenticación y habilita la autenticación con correo electrónico y contraseña.

  1. En Firebase console, abre la sección Autenticación. En la pestaña Método de acceso, habilita el proveedor de Correo electrónico/Contraseña. Ten en cuenta que se debe habilitar el acceso mediante correo electrónico/contraseña para utilizar el acceso mediante un vínculo de correo electrónico.

  2. En la misma sección, habilita el método de acceso mediante Vínculo de correo electrónico (acceso sin contraseña) y haz clic en Guardar.

  3. Inicializa una instancia de FUIEmailAuth con FIREmailLinkAuthSignInMethod si quieres habilitar el acceso mediante vínculo de correo electrónico. También tendrás que proveer un objeto FIRActionCodeSettings válido con handleCodeInApp configurado como true.

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. Además, debes incluir en la lista blanca a la URL que pasarás al inicializador. Para hacerlo, abre la sección Authentication en Firebase console. Agrega la URL en la sección Dominios autorizados de la pestaña Método de acceso.

  2. Cuando obtengas el vínculo directo, tendrás que pasarlo a la IU de autenticación para poder controlarlo.

Swift

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

Objective-C

[FUIAuth.defaultAuthUI handleOpenURL:url sourceApplication:sourceApplication];
  1. El acceso mediante vínculo de correo electrónico en FirebaseUI-iOS es compatible con FirebaseUI-Android y FirebaseUI-web, y los usuarios que inicien el flujo desde FirebaseUI-Android pueden abrir el vínculo y completar el acceso con FirebaseUI-web. Lo mismo sucede con el flujo contrario.

Google

  1. En Firebase console, abre la sección Autenticación y habilita el Acceso con Google.

  2. Agrega tu ID de cliente invertido como esquema de URL en tu proyecto de Xcode. Puedes encontrar este valor en el archivo GoogleService-Info.plist.

Facebook

  1. En Firebase console, abre la sección Autenticación y habilita Facebook. Para habilitar el acceso con Facebook, debes proporcionar tu ID de aplicación de Facebook y App Secret, que puedes obtener en la consola para desarrolladores de Facebook.

  2. Habilita el uso compartido de claves en tu proyecto de Xcode desde la pantalla Configuración del proyecto > Funciones.

  3. Agrega fbFACEBOOK_APP_ID como esquema de URL a tu proyecto de Xcode.

  4. Agrega tu ID de app de Facebook y el nombre visible al archivo Info.plist:

    Clave Valor
    FacebookAppID FACEBOOK_APP_ID (por ejemplo, 1234567890)
    FacebookDisplayName Nombre de tu app

Twitter

  1. En Firebase console, abre la sección Autenticación y habilita Twitter. Para habilitar el acceso con Twitter, debes proporcionar tu clave y secreto de consumidor de la API de Twitter, que puedes obtener en la consola de administración de aplicaciones de Twitter.

  2. Agrega twitterkit-TWITTER_CONSUMER_KEY como esquema de URL a tu proyecto de Xcode.

  3. En el delegado de la app, inicializa el kit de Twitter con tu clave y secreto de consumidor de 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"];
    }
    

Número de teléfono

  1. En Firebase console, abre la sección Autenticación y habilita el acceso con número de teléfono.

  2. Es necesario que Firebase pueda verificar que las solicitudes de acceso con número de teléfono provienen de tu app. Una forma de hacer esto es mediante notificaciones del APNS. Consulta Habilita la verificación de la app para obtener más detalles.

    Para habilitar las notificaciones de APN a fin de usarlas con Firebase Authentication, haz lo siguiente:

    1. En Xcode, habilita las notificaciones push para el proyecto.

    2. Sube la clave de autenticación del APNS a Firebase. Si aún no tienes una clave de autenticación del APN, consulta cómo configurar el APN con FCM.

      1. Dentro del proyecto en Firebase console, selecciona el ícono de ajustes, elige Configuración del proyecto y, luego, la pestaña Cloud Messaging.

      2. En Clave de autenticación del APN, bajo configuración de app de iOS, haz clic en el botón Subir.

      3. Busca la ubicación donde guardaste la clave, selecciónala y haz clic en Abrir. Agrega el ID de clave correspondiente (disponible en Certificados, identificadores y perfiles en el Centro de miembros desarrolladores de Apple) y haz clic en Subir.

      Si ya tienes un certificado APNS, puedes subirlo para completar el proceso.

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

    Para habilitar la verificación de reCAPTCHA, si aún no agregaste tu ID de cliente invertido como esquema de URL (por ejemplo, para habilitar el Acceso con Google), hazlo en tu proyecto de Xcode. Puedes encontrar este valor en el archivo GoogleService-Info.plist.

  4. Opcional: Firebase usa las referencias de métodos para obtener automáticamente el token del APNS de tu aplicación, gestionar las notificaciones push silenciosas que Firebase envía a tu aplicación y también interceptar automáticamente el redireccionamiento de esquema personalizado de la página de verificación reCAPTCHA durante la verificación.

    Si prefieres no utilizar las referencias, consulta Apéndice: Cómo usar el acceso con número de teléfono sin referencias en los documentos de autenticación del SDK de Firebase.

Acceder

Para iniciar el flujo de acceso de FirebaseUI, primero inicializa 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;

Luego, configura FirebaseUI para usar los métodos de acceso que deseas admitir:

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;

Si habilitaste el acceso con Google o con Facebook, implementa un controlador para el resultado de los flujos de acceso correspondientes:

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

Finalmente, obtén una instancia de AuthViewController de FUIAuth. Luego, puedes presentarlo como el primer controlador de vista de tu aplicación o presentarlo desde uno diferente en tu aplicación.

Swift

Para obtener el selector de método de acceso:

let authViewController = authUI.authViewController()

Si solo usas el acceso con número de teléfono, puedes mostrar la vista de acceso con número de teléfono directamente:

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

Objective-C

Para obtener el selector de método de acceso:

UINavigationController *authViewController = [authUI authViewController];

Si solo usas el acceso con número de teléfono, puedes mostrar la vista de acceso con número de teléfono directamente:

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

Después de que presentes la vista de autenticación y el usuario acceda, el resultado se devuelve al delegado de FirebaseUI Auth en el método didSignInWithUser:error::

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

Salir

FirebaseUI proporciona métodos prácticos para salir de Firebase Authentication y de todos los proveedores de identidad social:

Swift

authUI.signOut()

Objective-C

[authUI signOut];

Personalización

Para personalizar las pantallas de acceso, puedes subclasificar los controladores de vista de FirebaseUI y especificarlos según los métodos de delegado de 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];
}

Puedes personalizar la URL del vínculo a las condiciones del servicio de tu aplicación que aparece en la pantalla de creación de la cuenta:

Swift

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

Objective-C

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

Por último, para personalizar los mensajes y las solicitudes que se muestran a los usuarios, puedes especificar un paquete personalizado:

Swift

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

Objective-C

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

Pasos siguientes

Enviar comentarios sobre...

Si necesitas ayuda, visita nuestra página de asistencia.