Tecnológico de Estudios Superiores de Ecatepec

Desarrollo de Aplicaciones
Moviles

Profesor: Leonardo Miguel Moreno

Villalba
Alumno: Amaury Castillo Cruz
Tecnológico de Estudios Superiores de Ecatepec

Firebase Authentication
Acceso sencillo con cualquier plataforma
Firebase Authentication busca facilitar la creación de sistemas de autenticación
seguros, a la vez que mejora la experiencia de integración y acceso para los
usuarios finales. Proporciona una solución de identidad de extremo a extremo,
compatible con cuentas de correo electrónico y contraseñas, autenticación
telefónica, acceso mediante Google, Twitter, Facebook y GitHub, y mucho más.

IU flexible y directa
FirebaseUI proporciona una solución de autenticación directa, personalizable y de
código abierto que administra los flujos de IU para el acceso de los usuarios. El
componente de FirebaseUI Auth implementa recomendaciones para la
autenticación en sitios web y dispositivos móviles, lo que puede maximizar la
conversión de acceso y registro de tu app.

Seguridad integral
La seguridad de Firebase, creada por el mismo equipo que desarrolló Acceso con
Google, Smart Lock y el Administrador de contraseñas de Chrome, aplica la
experiencia interna de Google en la administración de una de las bases de datos de
cuentas más grandes del mundo.
Tecnológico de Estudios Superiores de Ecatepec

Implementación rápida
Configurar tu propio sistema de autenticación puede tardar meses, y se necesita un
equipo de ingeniería para mantenerlo y garantizar su correcto funcionamiento a
futuro. Configura todo el sistema de autenticación de tu app en menos de 10 líneas
de código, incluso para administrar casos complejos, como la fusión de cuentas.

Funciones avanzadas disponibles con Google Cloud Identity Platform

Ofrecemos una actualización sin inconvenientes a Google Cloud Identity Platform
que te ofrece beneficios y funciones adicionales, como la autenticación de varios
factores, funciones de bloqueo y ANS empresariales.
Puede usar Firebase Authentication para iniciar sesión en un usuario mediante el
envío de un mensaje SMS al teléfono del usuario. El usuario inicia sesión con un
código de un solo uso contenido en el mensaje SMS.
La forma más fácil de agregar el inicio de sesión con número de teléfono a su
aplicación es usar FirebaseUI , que incluye un widget de inicio de sesión directo que
implementa flujos de inicio de sesión para el inicio de sesión con número de
teléfono, así como inicio de sesión federado y basado en contraseña. -en. Este
documento describe cómo implementar un flujo de inicio de sesión de número de
teléfono mediante el SDK de Firebase.
Muchos SDK requieren una clase Context de Android para cumplir con su función.
Esta clase Context es el vínculo con el tiempo de ejecución de Android que permite
al SDK acceder a recursos de apps, usar servicios y registrar clases
 Tecnológico de Estudios Superiores de Ecatepec
BroadcastReceiver. Muchos SDK solicitan pasar una clase Context a un método de
inicialización estática una vez, para retener y usar dicha referencia mientras el
proceso permanezca activo. Para obtener esa clase en el momento en que se inicia
la app, los desarrolladores del SDK normalmente solicitan pasarla en una subclase
Application.

public class MyApplication extends Application {

@Override
public void onCreate() {
super.onCreate();
SomeSdk.init(this); // init some SDK, MyApplication is the
Context
}
}

1. Se crea e inicializa (en el subproceso principal) después de todos los demás

componentes, como las clases Activity, Service y BroadcastReceiver, una vez

iniciado el proceso de la app.

2. Forman parte de la fusión de manifiestos en el momento de la compilación,

si se declaran en el manifiesto de un proyecto de biblioteca de Android. Como

resultado, se agregan de manera automática al manifiesto de la app.

El número de teléfono en su aplicación, debe ofrecerlo junto con métodos de inicio

de sesión más seguros e informar a los usuarios sobre las ventajas y desventajas

de seguridad del uso del inicio de sesión con el número de teléfono.

Habilite el inicio de sesión con número de teléfono para su proyecto de Firebase

Para que los usuarios inicien sesión por SMS, primero debe habilitar el método de
inicio de sesión con número de teléfono para su proyecto de Firebase:

1. En Firebase console , abra la sección Autenticación .

2. En la página Método de inicio de sesión , habilite el método de inicio de
sesión Número de teléfono .
3. En la misma página, si el dominio que alojará su aplicación no aparece en la sección
de dominios de redirección de OAuth , agregue su dominio.
Tecnológico de Estudios Superiores de Ecatepec
La cuota de solicitud de inicio de sesión del número de teléfono de Firebase es lo
suficientemente alta como para que la mayoría de las aplicaciones no se vean
afectadas. Sin embargo, si necesita iniciar sesión en un volumen muy alto de
usuarios con autenticación telefónica, es posible que deba actualizar su plan de
precios.

Configurar el verificador reCAPTCHA

Antes de que pueda iniciar sesión en los usuarios con sus números de teléfono,
debe configurar el verificador reCAPTCHA de Firebase. Firebase usa reCAPTCHA
para evitar abusos, por ejemplo, al garantizar que la solicitud de verificación del
número de teléfono provenga de uno de los dominios permitidos de su aplicación.

No necesita configurar manualmente un cliente reCAPTCHA; cuando usas el

objeto RecaptchaVerifier del SDK de Firebase, Firebase crea y maneja
automáticamente las claves y los secretos de cliente necesarios.

El objeto RecaptchaVerifier admite reCAPTCHA invisible , que a menudo puede

verificar al usuario sin requerir ninguna acción del usuario, así como el widget
reCAPTCHA, que siempre requiere la interacción del usuario para completarse
correctamente.

El reCAPTCHA renderizado subyacente se puede localizar según las preferencias

del usuario actualizando el código de idioma en la instancia de Auth antes de
renderizar el reCAPTCHA. La localización antes mencionada también se aplicará al
mensaje SMS enviado al usuario, que contiene el código de verificación.

import { getAuth } from "firebase/auth";

const auth = getAuth();

auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
auth_set_language_code.js
Tecnológico de Estudios Superiores de Ecatepec
Opcionalmente, puede establecer funciones de devolución de llamada en el objeto
RecaptchaVerifier que se llaman cuando el usuario resuelve el reCAPTCHA o el
reCAPTCHA caduca antes de que el usuario envíe el formulario:

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();

window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
'size': 'normal',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
// ...
},
'expired-callback': () => {
// Response expired. Ask user to solve reCAPTCHA again.
// ...
}
}, auth);
auth_phone_recaptcha_verifier_visible.js

Enviar un código de verificación al teléfono del usuario

Para iniciar el inicio de sesión con el número de teléfono, presente al usuario una
interfaz que le solicite que proporcione su número de teléfono y luego llame a
signInWithPhoneNumber para solicitar que Firebase envíe un código de
autenticación al teléfono del usuario por SMS:

Obtener el número de teléfono del usuario.

Los requisitos legales varían, pero como práctica recomendada y para establecer
expectativas para sus usuarios, debe informarles que si usan el inicio de sesión por
teléfono, pueden recibir un mensaje SMS para verificación y se aplican tarifas
estándar.
Llame signInWithPhoneNumber , pasándole el número de teléfono del usuario y el
RecaptchaVerifier que creó anteriormente.

import { getAuth, signInWithPhoneNumber } from "firebase/auth";

const phoneNumber = getPhoneNumberFromUserInput();

const appVerifier = window.recaptchaVerifier;

const auth = getAuth();

signInWithPhoneNumber(auth, phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Prompt user to type the code from the message, then sign the
 Tecnológico de Estudios Superiores de Ecatepec
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
// ...
}).catch((error) => {
// Error; SMS not sent
// ...
});
auth_phone_signin.js

Iniciar sesión del usuario con el código de verificación

Después de que la llamada a signInWithPhoneNumber tenga éxito, solicite al

usuario que escriba el código de verificación que recibió por SMS. Luego, inicie
sesión con el usuario pasando el código al método de confirm del
objeto ConfirmationResult que se pasó al controlador de cumplimiento
de signInWithPhoneNumber (es decir, su bloque then ).

const code = getCodeFromUserInput();

confirmationResult.confirm(code).then((result) => {
// User signed in successfully.
const user = result.user;
// ...
}).catch((error) => {
// User couldn't sign in (bad verification code?)
// ...
});

Prueba con números de teléfono ficticios

Puede configurar números de teléfono ficticios para el desarrollo a través de la

consola de Firebase. Las pruebas con números de teléfono ficticios brindan estos
beneficios:

 Pruebe la autenticación del número de teléfono sin consumir su cuota de uso.

 Pruebe la autenticación del número de teléfono sin enviar un mensaje SMS real.
 Ejecute pruebas consecutivas con el mismo número de teléfono sin verse limitado.
Esto minimiza el riesgo de rechazo durante el proceso de revisión de la tienda de
aplicaciones si el revisor usa el mismo número de teléfono para la prueba.
 Pruebe fácilmente en entornos de desarrollo sin ningún esfuerzo adicional, como la
capacidad de desarrollar en un simulador de iOS o un emulador de Android sin
Google Play Services.
 Escriba pruebas de integración sin que lo bloqueen los controles de seguridad que
normalmente se aplican a números de teléfono reales en un entorno de producción.
 Tecnológico de Estudios Superiores de Ecatepec
Los números de teléfono ficticios deben cumplir estos requisitos:

1. Asegúrese de utilizar números de teléfono que sean realmente ficticios y que aún
no existan. Firebase Authentication no le permite establecer números de teléfono
existentes utilizados por usuarios reales como números de prueba. Una opción es
usar números con el prefijo 555 como números de teléfono de prueba de EE. UU.,
por ejemplo: +1 650-555-3434
2. Los números de teléfono deben tener el formato correcto para la longitud y otras
restricciones. Seguirán pasando por la misma validación que el número de teléfono
de un usuario real.
3. Puede agregar hasta 10 números de teléfono para el desarrollo.
4. Use números de teléfono/códigos de prueba que sean difíciles de adivinar y
cámbielos con frecuencia.

Prueba manual
Puede comenzar directamente a usar un número de teléfono ficticio en su
aplicación. Esto le permite realizar pruebas manuales durante las etapas de
desarrollo sin encontrarse con problemas de cuota o limitaciones. También puede
probar directamente desde un simulador de iOS o un emulador de Android sin tener
instalados los servicios de Google Play.

Cuando proporciona el número de teléfono ficticio y envía el código de verificación,

no se envía ningún SMS real. En su lugar, debe proporcionar el código de
verificación configurado previamente para completar el inicio de sesión.

// Turn off phone auth app verification.

firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "+16505554567";

var testVerificationCode = "123456";
 Tecnológico de Estudios Superiores de Ecatepec

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.

// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a
fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function (confirmationResult) {
// confirmationResult can resolve with the fictional testVerificationCode above.
return confirmationResult.confirm(testVerificationCode)
}).catch(function (error) {
// Error; SMS not sent
// ...
});

Los verificadores de aplicaciones reCAPTCHA simulados visibles e invisibles se

comportan de manera diferente cuando la verificación de aplicaciones está
deshabilitada:

 ReCAPTCHA visible : cuando el reCAPTCHA visible se procesa a

través appVerifier.render() , se resuelve automáticamente después de una fracción
de segundo de retraso. Esto es equivalente a que un usuario haga clic en
reCAPTCHA inmediatamente después de renderizar. La respuesta de reCAPTCHA
caducará después de un tiempo y luego se resolverá automáticamente nuevamente.
 ReCAPTCHA invisible : el reCAPTCHA invisible no se resuelve automáticamente
al renderizar y, en cambio, lo hace en la llamada appVerifier.verify() o cuando se
hace clic en el botón ancla de reCAPTCHA después de una fracción de segundo de
retraso. Del mismo modo, la respuesta caducará después de un tiempo y solo se
resolverá automáticamente después de la llamada appVerifier.verify() o cuando se
haga clic nuevamente en el botón ancla de reCAPTCHA.(capcha, 2022)

Bibliografía
capcha. (2022). autenticacion . USA: https://firebase.google.com/docs/auth/web/phone-
auth?hl=es-419.