Ahora, como mencioné, Firebase tiene autenticación incorporada, solo necesitamos ir al área
de autenticación allí y luego hacer clic en el método de inicio de sesión de configuración y allí elegir contraseña y
contraseña de correo electrónico o correo electrónico aquí. Habilite esto y haga clic en guardar y
con eso, lo tenemos habilitado.
Ahora podemos enviar solicitudes a una API de Firebase para crear usuarios o iniciar sesión. Ahora, para saber dónde enviar las solicitudes, puede
buscar en Google
la API de autenticación REST de Firebase y encontrará estos documentos oficiales donde aprenderá
cómo crear e iniciar sesión usuarios con su API.
Ahora hay un montón de puntos finales para diferentes cosas, aquí en esta aplicación nos centraremos en registrarse e
iniciar sesión.
Entonces, si hacemos clic en registrarse con correo electrónico y contraseña, aprenderemos cómo funciona.
Necesitamos enviar una solicitud HTTP, una solicitud de publicación con este tipo de contenido a esta URL, ingrese aquí nuestra propia clave API, que le mostraré
de dónde la obtiene en un segundo y adjunte este cuerpo a la solicitud, así que e- Contraseña de correo electrónico y luego este campo
de token seguro de devolución que básicamente debería ser siempre cierto. Como respuesta, recuperaremos un token, ese es el token
que mencioné en la diapositiva, el correo electrónico que utilizamos, un token de actualización que es más
avanzado, este token aquí caducará realmente después de esta
cantidad de segundos que también recuperamos . Con un token de actualización, podríamos recrearlo, volver a
validarlo sin que el usuario vuelva a iniciar sesión, no
lo haremos aquí, tendría un punto final separado al que enviar el
token de actualización para obtener un nuevo token de ID, nosotros ' Lo mantendremos simple aquí
y simplemente use ese token e inicie sesión nuevamente en el usuario después de ese tiempo de vencimiento porque ese tiempo
de vencimiento también es algo que
obtenemos para que sepamos cuándo este token dejará de ser válido y ya no se podrá
usar porque tenemos que limpiarlo en nuestra aplicación para entonces, para que no intentemos adjuntar este token no válido a futuras
solicitudes a nuestra base de datos y localId, ese es el ID de usuario del usuario que Firebase creó en sus servidores porque
no tenemos que hacerlo cualquiera de esa administración de usuarios, Firebase lo hará, no necesitamos escribir ningún código del
lado del servidor.
Entonces, lo que tenemos que hacer es enviar una solicitud HTTP
y como también manejaré todo esto con Redux, crearé un nuevo creador de acciones para esto y
lo llamaré auth.
También crearé un reductor porque también gestionaremos algunas cosas relacionadas con la autenticación allí, por ejemplo, el token
y el ID de usuario.
Sin embargo, comencemos con la acción y, por
lo tanto, exportemos un creador de acciones que podría llamarse registrarse, tiene sentido comenzar con
eso porque iniciar sesión en los usuarios solo será posible después de crear al
menos un usuario. Así que aquí en
el registro, quiero poder crear un nuevo usuario y para eso, necesitaremos un correo
electrónico y una contraseña para que se pueda pasar al creador de la acción de registro desde afuera.
Ahora bien, esto enviará una solicitud HTTP y para poder hacerlo, usaremos el paquete Redux Thunk nuevamente
y, por lo tanto, devolveremos el envío asincrónico aquí, por lo
que devolvemos una función que puede usar async wait que obtiene ese despacho funcionan como un argumento pasado
por el middleware Redux Thunk que comenzamos a usar en el último módulo HTTP de este curso
y esto nos permite ejecutar código asíncrono antes de enviar una acción que realmente llegue a nuestra tienda.
Ahora para eso, también necesitaremos un identificador de acción para esa acción que luego queremos manejar
en nuestra tienda y allí solo usaré registrarse, que también tiene registrarse como un identificador de cadena.
Entonces, al final, enviaremos este objeto de acción donde se registra el tipo y donde probablemente
también agregaremos algunos datos adicionales, pero antes de hacerlo, debemos enviar una solicitud HTTP.
Ahora, eso se puede hacer con la API de recuperación como aprendió en el último módulo y, por lo tanto, definitivamente
revise ese módulo primero
y esta es la URL a la que debemos enviar la solicitud, para que podamos copiar eso. Agréguelo aquí y ahora tenemos esa
clave API.
Ahora eso es algo que podemos obtener de Firebase haciendo clic en el ícono de
ajustes aquí, configuración del proyecto. Allí encontrará
la clave API web y eso es exactamente lo
que necesita, cópiela y reemplace la clave API, incluidos los corchetes con esa clave.
Esta es la URL a la que necesitaremos enviar una solicitud. Ahora, como nos dicen los documentos oficiales, debemos enviar
una solicitud
de publicación, por lo que, como se enteró, debemos agregar este segundo
argumento aquí para obtener cuál es un objeto que nos permite configurar esa solicitud y allí, podemos establecer
el método para publicar y también agregar algunos encabezados porque tendremos que agregar el encabezado JSON de la aplicación, por lo que
el encabezado del tipo de contenido que debe tener un valor de JSON de la aplicación y tendremos que agregar un cuerpo y ese cuerpo
debe estar en formato JSON que podemos obtener con JSON. stringify y los datos que quiero stringificar deben
ser un objeto con estas tres claves: correo electrónico, contraseña y token seguro. Entonces, por supuesto, el correo electrónico se refiere al correo electrónico que
estamos recibiendo como argumento aquí, lo mismo para la contraseña que se refiere al argumento de contraseña que estamos recibiendo
y luego es este tercero y lo copiaré para no escribirlo mal, devuelva el argumento de token seguro aquí
o el par clave-valor donde el valor debería ser verdadero. Esta solicitud debería crear un
nuevo usuario.
Ahora podemos esperar su respuesta con la palabra clave esperar y luego, como aprendió anteriormente, podemos verificar si
la respuesta no está bien, si ese es el caso, quiero arrojar un nuevo error donde digo que algo salió mal y
lo haremos eche un vistazo a un manejo de errores más detallado más adelante, por ahora eso es todo y, si está bien,
sin embargo, quiero obtener mis datos de respuesta esperando la respuesta JSON que desempaquetará el cuerpo de la respuesta y lo
transformará automáticamente del formato JSON a Javascript, así que a un objeto o matriz de Javascript y ahora podremos
trabajar con eso y por el momento, simplemente registraré estos datos de respuesta aquí.
Ahora que no hemos agregado el resto de nuestra tienda Redux relacionada con la autenticación, lo haremos más tarde, pero
tenemos algo que debería funcionar, deberíamos poder enviar esto y, por lo tanto, enviar una solicitud de registro.
Así que ahora podemos volver a la pantalla de autenticación y al final cuando hacemos clic en este botón de inicio de sesión que está etiquetado
incorrectamente como inicio de sesión en el momento en que realmente nos registramos, pero dejémoslo así por el
momento, así
que cuando hacemos clic en este botón Deseo enviar esta solicitud de registro. Para eso, necesitamos, como antes, importar despacho de uso
de React Redux para que podamos despachar acciones y, por supuesto, importar
todo como acciones de autenticación desde los datos de la carpeta de almacenamiento, desde la carpeta de acciones y desde el
archivo de autenticación y con Dicho esto, podemos
agregar una función aquí, ya sea una
función en línea o de esta manera, una función con
nombre almacenada en una constante
que nombraré controlador de
registro, allí no espero argumentos y allí quiero enviar, así
que necesitamos para obtener acceso a esa función de envío ejecutando use dispatch
y luego aquí podemos enviar
este evento de registro de acciones de autenticación o acción de registro.
Ahora el problema es que esto requiere el correo electrónico y la contraseña y
en este momento no estoy almacenando esto.
Recibo esto en mi entrada, pero aquí, en el cambio de entrada, no estoy almacenando esos datos que, por supuesto, debería.
Ahora podemos echar un vistazo a nuestra otra forma aquí para ver cómo lo hicimos.
Por lo tanto, en la pantalla de edición de productos, por supuesto, tenemos aquí nuestro reductor de formularios que gestiona toda la validez relacionada con los
formularios y los valores.
Entonces, al final, podemos copiar eso y agregarlo a la pantalla de autenticación fuera del componente de pantalla de
autenticación como este y volver a la pantalla de edición del producto para luego también tomar la parte allí donde
inicializamos eso con
el uso del reductor, así que copie todo esto y
agregarlo a la pantalla de autenticación también, ahora dentro del componente, tal vez aquí y para que eso funcione, también necesitamos importar el reductor de uso de React
y con eso importado,
ahora solo tenemos que ajustarlo un poco poco. Este reductor de formularios está bien y, por cierto, podría
externalizar esto en un archivo separado porque estamos usando el mismo tipo de reductor tanto en la
pantalla de autenticación como en la pantalla de
edición del producto, incluso podría crear un enlace personalizado si sabe cómo
funciona, por ahora lo dejaré así.
Sin embargo, una cosa que necesito es la actualización
de entrada de formulario, permítanme tomar eso de la pantalla de edición
del producto también, esta
constante aquí, movámoslo también en la pantalla de autenticación.
Así que
ahora con eso, todo está bien, pero ahí abajo, donde llamo usar reductor e inicializar todo esto, eso, por supuesto,
se ve de manera diferente.
Deberíamos tener un correo electrónico que inicialmente está vacío y una contraseña que inicialmente está vacía y para
la validez, es lo mismo,
solo tenemos un correo electrónico que inicialmente no es válido y tenemos una contraseña que inicialmente
no es válida y, por lo tanto, el formulario general También inicialmente no es válido.
Ahora, el estado del formulario de envío debe activarse cada vez que nuestra entrada cambie aquí, así que
aquí, en el cambio de entrada, por supuesto que lo sabe y puede verlo en la pantalla de edición del producto,
obtenemos tres valores: obtenemos el identificador de entrada, el valor de entrada y La validez de entrada.
Entonces, al final, podemos copiar esto aquí desde la pantalla de edición del producto y moverlo a la pantalla de
autenticación y reemplazar esta función anónima con él o realmente almacenar esto en una nueva variable aquí, ingrese
el controlador de cambio que ahora contiene esta función. Ahora, al igual que en la pantalla de edición de productos, debe tomar
esto con la devolución de llamada de uso para asegurarse de que esto no vuelva a funcionar cuando no debería.
Entonces, en realidad, deberíamos tomarlo aquí, incluida la llamada de devolución de llamada de uso y las dependencias de la
devolución de llamada de uso, por lo que esto es realmente lo que debe usarse allí en el controlador de cambio de entrada.
Ahora este controlador de cambio de entrada puede vincularse o establecerse aquí en los accesorios de cambio de entrada para
que estos accesorios apunten a esta
función y ahora con eso, estamos almacenando nuestros valores de formulario o nuestros valores de entrada en nuestro estado
de formulario que manejamos con use reductor y así sucesivamente.
Así que ahora es este estado del formulario lo que me interesa aquí en mi controlador de registro porque para registrarme,
necesito pasar de los valores de entrada de estado. valores de entrada de estado de correo electrónico y formulario. contraseña, por lo que estos dos
valores que se recopilaron y ahora el controlador de registro aquí, esta función se puede vincular a este botón
allí abajo, al botón de inicio de sesión aquí en onPress porque esta es la
función que quiero señalar para ejecutarla cuando Presiona este botón.
Veamos si eso funciona como debería. Si comienzo a ingresar valores aquí, obtengo mis errores
de validación, pero de alguna manera no se muestran, ese es el caso
porque no es un mensaje de error aquí sino un texto de error en las entradas en la pantalla de autenticación.
Entonces, si cambiamos ese mensaje de error a texto de error, ahora si probamos esto,
así que si hago clic aquí, toco fuera de allí, recibo mis advertencias.
Ahora, si ingreso una dirección de correo electrónico
válida, esta desaparecerá, si ingreso una contraseña que sea lo suficientemente larga, desaparecerá, si ahora hago clic en iniciar sesión aquí, veamos si eso
funciona.
Vayamos a Firebase, a la autenticación y allí, ahora debería ver un nuevo usuario, este es
el usuario que acaba de crear.
Así que registrarse funciona, ahora asegurémonos de que
también podemos cambiar al modo de inicio de sesión y hacer que eso funcione también.
Por cierto, también tenga en cuenta que aquí están los datos que obtuvimos, así
que esa es
la respuesta, este objeto con el
correo
electrónico, cuánto tiempo es válido el token en
segundos, luego el token en sí, que es esta larga cadena críptica, y también la ID del usuario que se
creó y ese token de actualización.