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
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'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.
Autenticación de enlace de correo electrónico
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.
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 .
Puede habilitar el inicio de sesión mediante enlace de correo electrónico inicializando una instancia
FUIEmailAuthconFIREmailLinkAuthSignInMethod. También deberá proporcionar un objetoFIRActionCodeSettingsválido conhandleCodeInAppestablecido 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];
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 .
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];
- 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
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.
Agregue la capacidad Iniciar sesión con Apple a su archivo de derechos.
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];
- Configure el inicio de sesión de Google usando este tutorial
Configure el SDK de inicio de sesión de Facebook siguiendo la página de inicio de Facebook .
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.
Habilite el uso compartido de llaveros en su proyecto Xcode desde la pantalla Configuración del proyecto > Capacidades .
Agregue
fb FACEBOOK_APP_IDcomo esquema de URL en su proyecto Xcode.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 Inicialice una instancia de proveedor de Facebook:
Rápido
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
C objetivo
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
Si desea utilizar el inicio de sesión limitado de Facebook , establezca la propiedad
useLimitedLoginen la instanciaFUIFacebookAuth.Rápido
provider.useLimitedLogin = true
C objetivo
provider.useLimitedLogin = YES;
Gorjeo
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.
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
En Firebase console , abra la sección Autenticación y habilite el inicio de sesión con número de teléfono.
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:
En Xcode, habilite las notificaciones push para su proyecto.
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 .
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 .
En la clave de autenticación de APN en la configuración de la aplicación iOS , haga clic en el botón Cargar .
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.
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:
- 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 .
- 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):
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 .