1 00:00:02,170 --> 00:00:05,530 Ahora, como mencioné, Firebase tiene autenticación incorporada, solo necesitamos ir al área 2 00:00:05,530 --> 00:00:11,350 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 3 00:00:11,350 --> 00:00:16,500 contraseña de correo electrónico o correo electrónico aquí. Habilite esto y haga clic en guardar y 4 00:00:16,600 --> 00:00:18,550 con eso, lo tenemos habilitado. 5 00:00:18,550 --> 00:00:25,640 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 6 00:00:25,640 --> 00:00:27,140 buscar en Google 7 00:00:27,140 --> 00:00:32,630 la API de autenticación REST de Firebase y encontrará estos documentos oficiales donde aprenderá 8 00:00:32,630 --> 00:00:36,180 cómo crear e iniciar sesión usuarios con su API. 9 00:00:36,210 --> 00:00:40,820 Ahora hay un montón de puntos finales para diferentes cosas, aquí en esta aplicación nos centraremos en registrarse e 10 00:00:40,820 --> 00:00:41,440 iniciar sesión. 11 00:00:41,540 --> 00:00:45,200 Entonces, si hacemos clic en registrarse con correo electrónico y contraseña, aprenderemos cómo funciona. 12 00:00:45,290 --> 00:00:52,250 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é 13 00:00:52,280 --> 00:00:58,890 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 14 00:00:58,910 --> 00:01:05,180 de token seguro de devolución que básicamente debería ser siempre cierto. Como respuesta, recuperaremos un token, ese es el token 15 00:01:05,180 --> 00:01:10,820 que mencioné en la diapositiva, el correo electrónico que utilizamos, un token de actualización que es más 16 00:01:10,940 --> 00:01:13,790 avanzado, este token aquí caducará realmente después de esta 17 00:01:13,790 --> 00:01:19,430 cantidad de segundos que también recuperamos . Con un token de actualización, podríamos recrearlo, volver a 18 00:01:19,430 --> 00:01:22,350 validarlo sin que el usuario vuelva a iniciar sesión, no 19 00:01:22,910 --> 00:01:26,460 lo haremos aquí, tendría un punto final separado al que enviar el 20 00:01:26,570 --> 00:01:31,100 token de actualización para obtener un nuevo token de ID, nosotros ' Lo mantendremos simple aquí 21 00:01:31,100 --> 00:01:37,310 y simplemente use ese token e inicie sesión nuevamente en el usuario después de ese tiempo de vencimiento porque ese tiempo 22 00:01:37,310 --> 00:01:39,080 de vencimiento también es algo que 23 00:01:39,080 --> 00:01:43,880 obtenemos para que sepamos cuándo este token dejará de ser válido y ya no se podrá 24 00:01:43,880 --> 00:01:49,850 usar porque tenemos que limpiarlo en nuestra aplicación para entonces, para que no intentemos adjuntar este token no válido a futuras 25 00:01:49,850 --> 00:01:56,600 solicitudes a nuestra base de datos y localId, ese es el ID de usuario del usuario que Firebase creó en sus servidores porque 26 00:01:56,600 --> 00:02:02,050 no tenemos que hacerlo cualquiera de esa administración de usuarios, Firebase lo hará, no necesitamos escribir ningún código del 27 00:02:02,060 --> 00:02:03,380 lado del servidor. 28 00:02:03,440 --> 00:02:07,610 Entonces, lo que tenemos que hacer es enviar una solicitud HTTP 29 00:02:07,610 --> 00:02:13,340 y como también manejaré todo esto con Redux, crearé un nuevo creador de acciones para esto y 30 00:02:13,340 --> 00:02:14,500 lo llamaré auth. 31 00:02:14,510 --> 00:02:20,720 También crearé un reductor porque también gestionaremos algunas cosas relacionadas con la autenticación allí, por ejemplo, el token 32 00:02:20,720 --> 00:02:22,790 y el ID de usuario. 33 00:02:23,090 --> 00:02:25,980 Sin embargo, comencemos con la acción y, por 34 00:02:26,510 --> 00:02:31,810 lo tanto, exportemos un creador de acciones que podría llamarse registrarse, tiene sentido comenzar con 35 00:02:31,940 --> 00:02:37,070 eso porque iniciar sesión en los usuarios solo será posible después de crear al 36 00:02:37,070 --> 00:02:40,130 menos un usuario. Así que aquí en 37 00:02:40,130 --> 00:02:44,590 el registro, quiero poder crear un nuevo usuario y para eso, necesitaremos un correo 38 00:02:44,600 --> 00:02:50,420 electrónico y una contraseña para que se pueda pasar al creador de la acción de registro desde afuera. 39 00:02:50,690 --> 00:02:56,750 Ahora bien, esto enviará una solicitud HTTP y para poder hacerlo, usaremos el paquete Redux Thunk nuevamente 40 00:02:56,750 --> 00:03:01,180 y, por lo tanto, devolveremos el envío asincrónico aquí, por lo 41 00:03:01,460 --> 00:03:07,970 que devolvemos una función que puede usar async wait que obtiene ese despacho funcionan como un argumento pasado 42 00:03:08,000 --> 00:03:14,150 por el middleware Redux Thunk que comenzamos a usar en el último módulo HTTP de este curso 43 00:03:14,150 --> 00:03:20,480 y esto nos permite ejecutar código asíncrono antes de enviar una acción que realmente llegue a nuestra tienda. 44 00:03:20,620 --> 00:03:25,940 Ahora para eso, también necesitaremos un identificador de acción para esa acción que luego queremos manejar 45 00:03:25,940 --> 00:03:31,590 en nuestra tienda y allí solo usaré registrarse, que también tiene registrarse como un identificador de cadena. 46 00:03:31,850 --> 00:03:39,290 Entonces, al final, enviaremos este objeto de acción donde se registra el tipo y donde probablemente 47 00:03:39,290 --> 00:03:45,940 también agregaremos algunos datos adicionales, pero antes de hacerlo, debemos enviar una solicitud HTTP. 48 00:03:46,020 --> 00:03:51,170 Ahora, eso se puede hacer con la API de recuperación como aprendió en el último módulo y, por lo tanto, definitivamente 49 00:03:51,170 --> 00:03:52,360 revise ese módulo primero 50 00:03:52,370 --> 00:04:01,130 y esta es la URL a la que debemos enviar la solicitud, para que podamos copiar eso. Agréguelo aquí y ahora tenemos esa 51 00:04:01,130 --> 00:04:03,700 clave API. 52 00:04:04,220 --> 00:04:07,240 Ahora eso es algo que podemos obtener de Firebase haciendo clic en el ícono de 53 00:04:07,250 --> 00:04:09,700 ajustes aquí, configuración del proyecto. Allí encontrará 54 00:04:09,760 --> 00:04:13,450 la clave API web y eso es exactamente lo 55 00:04:13,460 --> 00:04:19,680 que necesita, cópiela y reemplace la clave API, incluidos los corchetes con esa clave. 56 00:04:19,700 --> 00:04:25,970 Esta es la URL a la que necesitaremos enviar una solicitud. Ahora, como nos dicen los documentos oficiales, debemos enviar 57 00:04:25,970 --> 00:04:26,870 una solicitud 58 00:04:26,990 --> 00:04:30,950 de publicación, por lo que, como se enteró, debemos agregar este segundo 59 00:04:30,950 --> 00:04:36,680 argumento aquí para obtener cuál es un objeto que nos permite configurar esa solicitud y allí, podemos establecer 60 00:04:37,280 --> 00:04:44,180 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 61 00:04:44,180 --> 00:04:52,130 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 62 00:04:52,130 --> 00:04:58,700 debe estar en formato JSON que podemos obtener con JSON. stringify y los datos que quiero stringificar deben 63 00:04:58,700 --> 00:05:07,660 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 64 00:05:07,660 --> 00:05:14,890 estamos recibiendo como argumento aquí, lo mismo para la contraseña que se refiere al argumento de contraseña que estamos recibiendo 65 00:05:14,890 --> 00:05:22,060 y luego es este tercero y lo copiaré para no escribirlo mal, devuelva el argumento de token seguro aquí 66 00:05:22,060 --> 00:05:29,770 o el par clave-valor donde el valor debería ser verdadero. Esta solicitud debería crear un 67 00:05:29,770 --> 00:05:31,770 nuevo usuario. 68 00:05:31,900 --> 00:05:38,530 Ahora podemos esperar su respuesta con la palabra clave esperar y luego, como aprendió anteriormente, podemos verificar si 69 00:05:38,620 --> 00:05:46,660 la respuesta no está bien, si ese es el caso, quiero arrojar un nuevo error donde digo que algo salió mal y 70 00:05:46,930 --> 00:05:55,340 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, 71 00:05:55,380 --> 00:06:02,970 sin embargo, quiero obtener mis datos de respuesta esperando la respuesta JSON que desempaquetará el cuerpo de la respuesta y lo 72 00:06:02,970 --> 00:06:09,780 transformará automáticamente del formato JSON a Javascript, así que a un objeto o matriz de Javascript y ahora podremos 73 00:06:10,500 --> 00:06:16,200 trabajar con eso y por el momento, simplemente registraré estos datos de respuesta aquí. 74 00:06:17,910 --> 00:06:23,590 Ahora que no hemos agregado el resto de nuestra tienda Redux relacionada con la autenticación, lo haremos más tarde, pero 75 00:06:23,590 --> 00:06:28,840 tenemos algo que debería funcionar, deberíamos poder enviar esto y, por lo tanto, enviar una solicitud de registro. 76 00:06:28,840 --> 00:06:36,460 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 77 00:06:36,460 --> 00:06:41,770 incorrectamente como inicio de sesión en el momento en que realmente nos registramos, pero dejémoslo así por el 78 00:06:41,770 --> 00:06:42,420 momento, así 79 00:06:42,460 --> 00:06:50,330 que cuando hacemos clic en este botón Deseo enviar esta solicitud de registro. Para eso, necesitamos, como antes, importar despacho de uso 80 00:06:50,390 --> 00:06:55,810 de React Redux para que podamos despachar acciones y, por supuesto, importar 81 00:06:56,150 --> 00:07:05,810 todo como acciones de autenticación desde los datos de la carpeta de almacenamiento, desde la carpeta de acciones y desde el 82 00:07:05,810 --> 00:07:09,590 archivo de autenticación y con Dicho esto, podemos 83 00:07:09,840 --> 00:07:13,170 agregar una función aquí, ya sea una 84 00:07:13,190 --> 00:07:17,880 función en línea o de esta manera, una función con 85 00:07:18,410 --> 00:07:20,850 nombre almacenada en una constante 86 00:07:20,990 --> 00:07:23,240 que nombraré controlador de 87 00:07:23,250 --> 00:07:27,780 registro, allí no espero argumentos y allí quiero enviar, así 88 00:07:27,780 --> 00:07:33,590 que necesitamos para obtener acceso a esa función de envío ejecutando use dispatch 89 00:07:33,650 --> 00:07:36,090 y luego aquí podemos enviar 90 00:07:36,210 --> 00:07:41,410 este evento de registro de acciones de autenticación o acción de registro. 91 00:07:41,430 --> 00:07:44,430 Ahora el problema es que esto requiere el correo electrónico y la contraseña y 92 00:07:44,430 --> 00:07:46,020 en este momento no estoy almacenando esto. 93 00:07:46,020 --> 00:07:51,500 Recibo esto en mi entrada, pero aquí, en el cambio de entrada, no estoy almacenando esos datos que, por supuesto, debería. 94 00:07:51,570 --> 00:07:56,320 Ahora podemos echar un vistazo a nuestra otra forma aquí para ver cómo lo hicimos. 95 00:07:56,370 --> 00:08:06,760 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 96 00:08:06,910 --> 00:08:08,670 formularios y los valores. 97 00:08:08,800 --> 00:08:15,790 Entonces, al final, podemos copiar eso y agregarlo a la pantalla de autenticación fuera del componente de pantalla de 98 00:08:16,990 --> 00:08:24,140 autenticación como este y volver a la pantalla de edición del producto para luego también tomar la parte allí donde 99 00:08:24,140 --> 00:08:25,400 inicializamos eso con 100 00:08:25,430 --> 00:08:28,970 el uso del reductor, así que copie todo esto y 101 00:08:28,970 --> 00:08:38,730 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 102 00:08:38,730 --> 00:08:40,350 y con eso importado, 103 00:08:40,480 --> 00:08:46,140 ahora solo tenemos que ajustarlo un poco poco. Este reductor de formularios está bien y, por cierto, podría 104 00:08:46,150 --> 00:08:51,160 externalizar esto en un archivo separado porque estamos usando el mismo tipo de reductor tanto en la 105 00:08:51,400 --> 00:08:53,860 pantalla de autenticación como en la pantalla de 106 00:08:53,860 --> 00:08:57,160 edición del producto, incluso podría crear un enlace personalizado si sabe cómo 107 00:08:57,160 --> 00:08:59,180 funciona, por ahora lo dejaré así. 108 00:08:59,230 --> 00:09:01,560 Sin embargo, una cosa que necesito es la actualización 109 00:09:01,570 --> 00:09:04,620 de entrada de formulario, permítanme tomar eso de la pantalla de edición 110 00:09:04,630 --> 00:09:05,810 del producto también, esta 111 00:09:05,830 --> 00:09:08,020 constante aquí, movámoslo también en la pantalla de autenticación. 112 00:09:08,980 --> 00:09:09,670 Así que 113 00:09:09,670 --> 00:09:15,190 ahora con eso, todo está bien, pero ahí abajo, donde llamo usar reductor e inicializar todo esto, eso, por supuesto, 114 00:09:15,190 --> 00:09:16,470 se ve de manera diferente. 115 00:09:16,630 --> 00:09:22,120 Deberíamos tener un correo electrónico que inicialmente está vacío y una contraseña que inicialmente está vacía y para 116 00:09:22,120 --> 00:09:23,720 la validez, es lo mismo, 117 00:09:23,800 --> 00:09:28,690 solo tenemos un correo electrónico que inicialmente no es válido y tenemos una contraseña que inicialmente 118 00:09:28,690 --> 00:09:33,310 no es válida y, por lo tanto, el formulario general También inicialmente no es válido. 119 00:09:34,570 --> 00:09:40,240 Ahora, el estado del formulario de envío debe activarse cada vez que nuestra entrada cambie aquí, así que 120 00:09:43,290 --> 00:09:49,830 aquí, en el cambio de entrada, por supuesto que lo sabe y puede verlo en la pantalla de edición del producto, 121 00:09:49,830 --> 00:09:55,230 obtenemos tres valores: obtenemos el identificador de entrada, el valor de entrada y La validez de entrada. 122 00:09:56,100 --> 00:10:03,630 Entonces, al final, podemos copiar esto aquí desde la pantalla de edición del producto y moverlo a la pantalla de 123 00:10:03,630 --> 00:10:10,630 autenticación y reemplazar esta función anónima con él o realmente almacenar esto en una nueva variable aquí, ingrese 124 00:10:10,770 --> 00:10:18,620 el controlador de cambio que ahora contiene esta función. Ahora, al igual que en la pantalla de edición de productos, debe tomar 125 00:10:18,620 --> 00:10:24,620 esto con la devolución de llamada de uso para asegurarse de que esto no vuelva a funcionar cuando no debería. 126 00:10:24,620 --> 00:10:31,190 Entonces, en realidad, deberíamos tomarlo aquí, incluida la llamada de devolución de llamada de uso y las dependencias de la 127 00:10:31,250 --> 00:10:38,360 devolución de llamada de uso, por lo que esto es realmente lo que debe usarse allí en el controlador de cambio de entrada. 128 00:10:38,460 --> 00:10:45,690 Ahora este controlador de cambio de entrada puede vincularse o establecerse aquí en los accesorios de cambio de entrada para 129 00:10:45,720 --> 00:10:48,340 que estos accesorios apunten a esta 130 00:10:48,840 --> 00:10:55,740 función y ahora con eso, estamos almacenando nuestros valores de formulario o nuestros valores de entrada en nuestro estado 131 00:10:55,740 --> 00:10:59,370 de formulario que manejamos con use reductor y así sucesivamente. 132 00:10:59,380 --> 00:11:04,630 Así que ahora es este estado del formulario lo que me interesa aquí en mi controlador de registro porque para registrarme, 133 00:11:04,630 --> 00:11:11,830 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 134 00:11:11,840 --> 00:11:18,850 valores que se recopilaron y ahora el controlador de registro aquí, esta función se puede vincular a este botón 135 00:11:18,850 --> 00:11:24,320 allí abajo, al botón de inicio de sesión aquí en onPress porque esta es la 136 00:11:24,560 --> 00:11:28,160 función que quiero señalar para ejecutarla cuando Presiona este botón. 137 00:11:28,410 --> 00:11:34,810 Veamos si eso funciona como debería. Si comienzo a ingresar valores aquí, obtengo mis errores 138 00:11:38,160 --> 00:11:42,750 de validación, pero de alguna manera no se muestran, ese es el caso 139 00:11:44,040 --> 00:11:50,950 porque no es un mensaje de error aquí sino un texto de error en las entradas en la pantalla de autenticación. 140 00:11:51,060 --> 00:11:54,920 Entonces, si cambiamos ese mensaje de error a texto de error, ahora si probamos esto, 141 00:11:55,020 --> 00:11:58,460 así que si hago clic aquí, toco fuera de allí, recibo mis advertencias. 142 00:11:58,500 --> 00:12:00,960 Ahora, si ingreso una dirección de correo electrónico 143 00:12:00,960 --> 00:12:08,350 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 144 00:12:08,350 --> 00:12:08,740 funciona. 145 00:12:08,740 --> 00:12:14,880 Vayamos a Firebase, a la autenticación y allí, ahora debería ver un nuevo usuario, este es 146 00:12:14,950 --> 00:12:17,360 el usuario que acaba de crear. 147 00:12:17,530 --> 00:12:19,810 Así que registrarse funciona, ahora asegurémonos de que 148 00:12:19,810 --> 00:12:24,060 también podemos cambiar al modo de inicio de sesión y hacer que eso funcione también. 149 00:12:25,100 --> 00:12:28,970 Por cierto, también tenga en cuenta que aquí están los datos que obtuvimos, así 150 00:12:29,030 --> 00:12:30,150 que esa es 151 00:12:30,150 --> 00:12:31,810 la respuesta, este objeto con el 152 00:12:31,880 --> 00:12:32,300 correo 153 00:12:32,300 --> 00:12:34,440 electrónico, cuánto tiempo es válido el token en 154 00:12:34,550 --> 00:12:40,220 segundos, luego el token en sí, que es esta larga cadena críptica, y también la ID del usuario que se 155 00:12:40,220 --> 00:12:41,960 creó y ese token de actualización.