web analytics

Autenticación en Flutter

flutter auth
auth flutter
auth library package

La autenticación es una tarea común para las aplicaciones móviles, por lo que es un candidato ideal para una biblioteca de clase. Una biblioteca de clase ejecutaría la tarea de manera formalizada y estandarizada, lo que facilitaría la autenticación. Utilizo dicha biblioteca de clases para mis propias aplicaciones en forma del paquete Dart, Auth. Usaré el código de "ejemplo" para demostrar este paquete. Este código de ejemplo se puede ver en la pestaña de ejemplo del paquete Dart. Luego haré un seguimiento con el tradicional "tutorial" de la biblioteca de clases en agradables capturas de pantalla "fáciles de leer".

[wp_ad_camp_1]

Irónicamente, es mejor leer este artículo sobre desarrollo móvil en su computadora que en su teléfono. Además, programamos principalmente en nuestras computadoras; No en nuestros teléfonos. Por ahora.

Vamos a empezar.

1*w1CY 3SD5h3GDPW VJs8Dw

Índice
  1. [nextpage title="Configurando Firebase"]
  2. [nextpage title="¿Qué hay en el Gradle?"]
  3. SHA1
  4. [nextpage title="Empezando!"]
  5. Init
  6. Dispose
  7. [nextpage title="Usando firebase"]
  8. Listeners
  9. [nextpage title="Anónimamente"]
  10. [nextpage title="Por Email"]
  11. Fetch
  12. [nextpage title="Sus credenciales"]
  13. Custom Sign
  14. [nextpage title="Desde Firebase"]
  15. Login en Firebase con Google
  16. Error interno
  17. [nextpage title="Sign In"]
  18. Usuario desde Google
  19. [nextpage title="Autenticación de información"]
  20. [nextpage title="Facebook"]
  21. [nextpage title="Twitter"]
  22. [nextpage title="Desconectar"]
  23. SignOut
  24. In O Not
  25. [nextpage title="Setter Info"]
  26. Conclusión

[nextpage title="Configurando Firebase"]

Antes de hacer nada, debes configurar Firebase. No voy a instruirlo paso a paso, ya que está más allá del alcance de este artículo. Puedes hacerlo por tu cuenta. Sin embargo, haré algunas capturas de pantalla que te darán pistas sobre lo que debes hacer y lo que probablemente verás en tu pantalla si intentas adelantarte y ejecutar este paquete de biblioteca.Tenga en cuenta que la mayoría de las capturas de pantalla tendrán una entrada de Github o Gist correspondiente en sus subtítulos. Puede ir a estas entradas para copiar y pegar fácilmente, por ejemplo.

Ahora, en cuanto al resto de ustedes, quizás abran este sitio web, Agregue Firebase a su proyecto de Android, como un suplemento para ayudarlo a configurar Firebase, ya que voy a describir esto brevemente. En el directorio, android, agregue las siguientes dos dependencias al archivo build.gradle.

Ahora es importante agregar también lo siguiente al final del segundo archivo build.gradle. Este archivo se encuentra en el directorio: android / app

[nextpage title="¿Qué hay en el Gradle?"]

Puede encontrar el siguiente error si luego prueba la biblioteca de clases. Parece que hay un requisito mínimo de versión, y deberá ir al directorio "wrapper" y actualizar su archivo gradle-wrapper.properties. Por ejemplo, cambie la entrada del archivo, gradle-4.4-all.zip a gradle-5.1.1-all.zip.

1*TDDGRZzmwyY4Q qW9mdszQ

1*Xa9Gvv1VglqwbebLK984Eg

El siguiente error que puede encontrar implica un archivo json. A continuación se muestra un ejemplo del error, y se queja de que falta el archivo json. Deberá ir a Firebase (teniendo en cuenta el nombre del paquete de su aplicación de muestra) y crear un archivo de configuración google-services.json: sus proyectos de Firebase

[wp_ad_camp_2]

0*C6C oASPvLibSlC6

SHA1

Junto con ese archivo de configuración, es probable que necesite obtener el número SHA1 para su aplicación. Visite este sitio web para obtener exactamente eso, autenticar a su cliente. Y así, después de todo eso. Estás listo para ejecutar la aplicación de muestra e iniciar sesión en Firebase.

A partir de la versión 4.0, puede usar Facebook para autenticarse. Sin embargo, eso significa que debe obtener una "identificación de la aplicación de Facebook". Si no lo hace, perderá la conexión a su dispositivo con un "asegúrese de llamar a FacebookSdk.sdkInitialize () primero".

1*TqTIXLQeXRZJkcsF3vZ4YQ

Deberá actualizar sus archivos de Android, tanto AndroidManifest.xml como strings.xml. Además de ir al sitio web "Facebook para desarrolladores" y crear una nueva aplicación para obtener la identificación adecuada.

1*5h90Np8 nIivPmqj euz0A

[nextpage title="Empezando!"]

Con Firebase todo configurado, avancemos y ejecutemos esa aplicación de muestra y veamos qué hace. Como regla, ejecuto esas cosas directamente desde Android Studio usando un emulador.

Ahí tienes. Cuando todo esté listo y ejecutes la aplicación, serás recibido con los botones "iniciar sesión". Ahora, a diferencia de la mayoría de los paquetes de mi biblioteca, este funciona no con uno sino con dos complementos: firebase_auth y google_sign_in. Entonces, si tiene una cuenta de Google Gmail, tiene los medios para iniciar sesión en la aplicación utilizando esa cuenta. Por ejemplo, haga clic en el botón "Iniciar sesión en Google" como se presenta arriba, y la aplicación le pedirá que inicie sesión con su cuenta de Google.

Lo que sigue son las capturas de pantalla del proceso:

1*9 h7MGPFHa7XvkcXyPmW1w

1*yFHsQOV6rGYKjMjw7MqSjA

La última captura de pantalla anterior es interesante porque la aplicación (usando el parámetro "ámbitos" de la biblioteca de clases) solicitó acceso a los contactos del usuario. A pesar de hacer clic en el botón, permitir, yo mismo recibí una respuesta 403 (permiso denegado), por lo que ninguno de mis contactos tiene acceso. Sospecho que uno tendría que pasar por debajo de su consola de desarrollador y habilitar dichos permisos, pero no voy a hacerlo con franqueza. Saber que funcionó es lo suficientemente bueno por ahora. La siguiente captura de pantalla muestra la biblioteca de clases utilizando su parámetro "ámbitos" que solicita acceso a la información de contacto del usuario, así como a la información de correo electrónico.

Te puede interesar:  Flutter Arquitectura Limpia [13] – Inyección de dependencia

[wp_ad_camp_3]

1* E02LAFE6SeyNXUt3J5Dvg

SignInDemoState class

Después de iniciar sesión con éxito, puede tocar la pestaña "Resultados" para ver algunas de las muchas propiedades de las que tiene acceso a través del objeto Auth. Estas propiedades se presentarán un poco más adelante.

1*czD1ggjqEaStIBIoqAYH3w

[nextpage title="¿Cómo funciona?"]

Está en la función, initState (), en la aplicación de ejemplo donde se intenta el "inicio de sesión". Hay unas ocho funciones diferentes en esta biblioteca de clases que se usan para iniciar sesión. Por ejemplo, en la captura de pantalla a continuación, la función, signInSilently (), se usa para permitir que el usuario inicie sesión automáticamente a través de su cuenta de Google sin involucrar al usuario si Ya lo he hecho en el pasado. Si es así, la aplicación iniciará sesión en silencio en ese momento. El parámetro con nombre, listen, se activará cuando inicie sesión correctamente con Google.

Nuevamente, verá en la función init (), solicito acceso a los contactos del usuario. Sin embargo, tenga en cuenta que el segundo parámetro con nombre, listener, proporciona una función anónima que se activará cuando el usuario inicie sesión correctamente utilizando Firebase y no Google. Y así, con dos complementos diferentes, hay dos controladores de eventos diferentes involucrados. Uno nombrado, listen; El otro listener.

1*nHksswv2z9HSW6j EsDgzA

SignInDemo class

Por último, en la captura de pantalla anterior, como cualquier buena biblioteca de clases, se limpia después de sí misma cuando la aplicación finaliza llamando a su función, dispose (), en la función dispose () del propio objeto State.

[nextpage title="¿Cuándo iniciar sesión?"]

Cuando el usuario inicia sesión con éxito en Google, nuevamente, se activa esa función anónima asignada al parámetro nombrado, escuchar. Allí, a la variable, loginIn, se le asigna un valor booleano dependiendo de si la variable, cuenta, es nula o no. Véase más arriba.

La variable, cuenta, por cierto, es de tipo, GoogleSignInAccount, y cuando se inicia sesión correctamente contiene la información de la cuenta de Google del usuario. Observe arriba de la función, setState (), se llama a continuación. Esto hará que se llame al build () del objeto State y, en consecuencia, se ejecute la función _buildBody (). Como puede ver en el código a continuación, si la variable, loginIn, se establece en true, entonces eso mostrará el nombre y la dirección de correo electrónico del usuario en la pantalla.

[wp_ad_camp_4]

1*Uif5uNUv0n1RCE0qjrBpCg

SignInDemoState class

A continuación, verá que he cambiado un poco las cosas. La función init () se ha modificado para proporcionar ahora los dos parámetros de "manejadores de eventos", dejando que la función de "inicio de sesión" se llame sin ningún parámetro. Esto demuestra cómo la biblioteca de clases permite llamar a signInSilently () en otro lugar (en cualquier lugar que el desarrollador quiera) dejando la función init () en initState () para inicializar.

SignInDemoState class

Mirando nuevamente los dos parámetros nombrados: listener y listen. La distinción entre ellos son sus valores de parámetros. La función, escuchar, se utiliza para iniciar sesión en Google y se le pasa el parámetro de tipo de clase, GoogleSignInAccount. La función, listener, se usa para iniciar sesión con Firebase y se le pasa el parámetro de tipo de clase, FirebaseUser. Puede ver esto a continuación con una captura de pantalla de la clase Auth y su constructor con nombre, Auth.init ().

1* hBW2OaPE6jp8yXd OAsPQ

Auth class

Por brevedad, el código que demuestra esta biblioteca de clases se presenta en un solo lugar, en la función initState (), pero no tiene que hacerse todo en la función initState (), por supuesto. Supongamos, por ejemplo, que tiene una aplicación que establece el alcance de autenticación en un lugar, y las opciones de 'controlador de eventos' en otro lugar, o (como verá más adelante) establece escuchas de autenticación más de una vez en muchos lugares diferentes en el código. Tiene la opción de hacerlo utilizando los configuradores de la biblioteca de clases.

Init

Comencemos nuestro recorrido por la biblioteca de la clase. Mira la lista de parámetros a continuación. ¿Que ves? Verá todos los "parámetros con nombre" que vería si usara los complementos por separado ... solo que aquí se combinan. Debido a que se denominan parámetros, todos son opcionales, pero una vez que se llama a esta función, sabes una cosa: ambas instancias se han creado esos complementos. Se crean y almacenan en la variable estática respectiva resaltada a continuación. Tenga en cuenta que la biblioteca de clases en sí también se almacena en una variable estática, _esta, porque esta clase usa un constructor de fábrica.

Te puede interesar:  Flutter y la creación de aplicaciones móvil y web

1*5qQm6HfR5Y UY69810Ik5Q

Auth class

Dispose

La función dispose () se enumera a continuación y se llamará en la función dispose () correspondiente de un objeto State. En otras palabras, se llama cuando su aplicación está finalizando. Esta función limpia las cosas al cerrar sesión y borrar de la memoria una serie de variables "pesadas", que ocupan mucha memoria valiosa.

1*dkCXlPmLYlm 0VXAynnLaw

Auth class

Lo que sigue es las dos suscripciones de Stream implementadas "para capturar" todos y cada uno de los eventos de autenticación que se producen al iniciar o cerrar sesión, por ejemplo. Es entonces la función privada de la biblioteca, _init (), un constructor con nombre que es llamado por el constructor de fábrica para inicializar los dos complementos a las variables estáticas, _fireBaseAuth y _googleSignIn. Puede ver el complemento "Google" inicializado allí mismo en la función, mientras que el complemento "Firebase" se inicializa más adelante en la función, _initFirebase ().

1*WTuCG6bnOPMgIar64kTPlA

Auth class

De hecho, la función, _initFireBase (), es el siguiente tramo de código que figura en la biblioteca de clases. Allí, el complemento Firebase se inicializa y se hace referencia en la variable _fireBaseAuth. Tenga en cuenta que también se asigna una referencia al complemento a una variable de instancia, _fbAuth, por lo que está disponible públicamente a través de un getter.

1*YZzh GCT3tf N5bZ22fydw

Auth class

[nextpage title="Usando firebase"]

Cuando se crea una instancia del complemento, FirebaseAuth, se le asigna la función de escucha, _listFireBaseListeners. La variable Lista, _fireBaseListeners, se usa para almacenar una o más funciones que pueden activarse si se produce un "cambio de autenticación". Por ejemplo, cuando un usuario de tipo FirebaseUser inicia o cierra sesión. Existe la función fireBaseListener y el setter, listener, que ofrece dos formas de asignar cualquier número de "listener" a la biblioteca de la clase.

1*YLNRci UkqU3jRmVGBgJlQ

Auth class

Listeners

Lo que sigue a continuación es la función, _initListen (), y, como ha visto anteriormente, se llama en la función _init (). Se pasan cuatro parámetros a esta función, que luego se pasan al "listener" de GoogleSignIn.

Tenga en cuenta que el primer parámetro, listen, se pasa indirectamente al oyente. Primero se agrega a la variable Lista, _googleListeners, que luego se procesa en la función, _listGoogleListeners. Es esta función, _listGoogleListeners, la que realmente se pasa como primer parámetro al listener. Esta disposición, nuevamente, le permite asignar cualquier cantidad de listeners al complemento porque la función _listGoogleListeners, luego usa el bucle for para pasar por todos esos listeners.

1*ldYOj TLwn6MNEXqIPgPmQ

Auth class

Auth class

La función, alreadyLoggedIn (), sirve para reducir la recreación innecesaria de objetos importantes. Si el usuario ya inició sesión, no hay necesidad de iniciar sesión nuevamente. Se usa en toda la biblioteca de clases con casi todas las funciones de autenticación. También es público, por lo que los desarrolladores también pueden usarlo.

Auth class

[nextpage title="Anónimamente"]

La siguiente función le permite iniciar sesión en Firebase de forma anónima. Al hacerlo, le permite proporcionar una función de "escucha" para que se active después de iniciar sesión correctamente. Tenga en cuenta que con esta función y prácticamente todas las demás funciones de "inicio de sesión" hay una declaración try..catch para "detectar" cualquier error eso puede ocurrir. La excepción se almacena en la variable "biblioteca privada", _ex, utilizando la función, _setError ().

1*BIHTPpj qS4RvCamu0mY1w

Auth class

1*aARtsZ1R0e M75ZW8yfzDQ

1*n9OhpMiCI7J AXRCcNguzA

[nextpage title="Por Email"]

La siguiente función le permitirá a uno iniciar sesión en Firebase usando su correo electrónico y contraseña. Aquí hay algo de preparación involucrada. Debes ir a tu consola Firebase y permitir que las contraseñas se usen para la autenticación. Esto se detalla más adelante en el sitio web de Firebase:

Authenticate with Firebase using Password-Based Accounts on

AndroidAuthenticate with Firebase using Password-Based Accounts on iOS

Además, tenga en cuenta que estoy usando los mismos nombres para las funciones que los utilizados por los complementos. Quiero hacer que esta biblioteca de clases sea reconocible para los desarrolladores. Si ya saben cómo usar los complementos, sabrán cómo usar esta biblioteca de clases.

1*i3Lvi4Gitbf7crC1nMOcjg

Auth class

Fetch

Si su aplicación requiere que proporcione una lista de los "proveedores" en los que ha iniciado sesión su usuario, hay una función para eso: fetchProvidersForEmail (). ¿Por qué? ¡¿Cómo debería saberlo?! Es tu aplicación. El complemento proporciona dicha función, y también la biblioteca de clases. Lo que sigue es un medio para "restablecer" su contraseña. Es decir, si ha iniciado sesión en Firebase con un correo electrónico y una contraseña, regístreseInWithEmailAndPassword ()

Auth class

Auth class

1*olt3mbCNfgi4cIPKK0ySjw

1*1u1pS3yq7sspQOYMz1JBug

1*4Oc

[nextpage title="Sus credenciales"]

El tipo de clase, AuthCredential, es utilizado por algunos sistemas (Google para uno) para obtener más información de autenticación del usuario conectado. De hecho, más adelante en esta biblioteca de clases, se utiliza para obtener dicha información al iniciar sesión con Facebook. También puede acceder a esta función a continuación si lo desea.

Te puede interesar:  Flutter Arquitectura Limpia [9] – Fuente de Datos Remota
[wp_ad_camp_5]

1*vDCNjhRr GeO5GnQ5un 8A

Auth class

Custom Sign

Esta función se usa cuando tiene que "actualizar la sesión de inicio de sesión". El inicio de sesión en Firebase solo dura una cierta cantidad de tiempo dependiendo (una hora, según me dijeron). Esta publicación ofrecerá algunos conocimientos, firebase signInWithCustomToken roto

1*1aaUCDvnqTloO2wFYuD9 Q

Auth class

1*XofBvXg6sFDrwJLM7csOGw

Auth class

[nextpage title="Desde Firebase"]

La siguiente función, _setUserFromFirebase, se llama cada vez que se inicia sesión solo en Firebase y no en Google. Con eso, el parámetro es de tipo FirebaseUser. La información del perfil de usuario se asigna a las muchas variables estáticas a las que puede acceder fácilmente con los captadores correspondientes de la biblioteca de clases.

1*JqbS3BqsR3rfRVd4HGZnXQ

Auth class

Login en Firebase con Google

La siguiente función te permite iniciar sesión en Firebase con Google. Inicia sesión en Google y luego inicia sesión en Firebase con la credencial de Google suministrada.

Para eso está la función _setFireBaseWithGoogle (). Se encontrará más abajo en el código. Toma la información recuperada del inicio de sesión de "Google" y también la usa para iniciar sesión en Firebase.

1*cszIoD27yLePLz 64EsHlQ

Auth class

Error interno

Al momento de escribir esto, noté que se estaba produciendo un "error interno" en el complemento la "primera vez" para iniciar sesión en Google. Simplemente vuelvo a intentar la biblioteca de clases (en la instrucción catch), y se registra con éxito. Hay algo que me falta aquí ... tal vez alguien pueda contribuir y ayudar.

1*F10JH6lS1 qIvY70PatkgQ

Auth class

[nextpage title="Sign In"]

La siguiente función se utiliza para que el usuario inicie sesión manualmente en su cuenta de Google. Utilizo mucho esta función, y es esta función cuando haces clic en el botón "iniciar sesión" en el ejemplo presentado al comienzo de este artículo.

1*3lLQreu8yvP Rkb0pq64ag

Auth class

Usuario desde Google

La siguiente función toma la información de la cuenta de un inicio de sesión exitoso en Google en forma de un objeto de clase, GoogleSignInAccount. Eso luego se pasa a esta función y proporciona dos valores de token para luego iniciar sesión en Firebase. A las numerosas variables estáticas de la biblioteca de clases, nuevamente, se les asigna la "información de perfil de usuario" fácilmente accesible por sus configuradores correspondientes.

Auth class

[nextpage title="Autenticación de información"]

Una vez más, una vez que el usuario inicia sesión, tiene acceso a un poco de la información del usuario. La biblioteca de clases proporciona dicho acceso con el uso de varios captadores demostrados en la aplicación de ejemplo en la pestaña "Resultados".

1*JWopeC3PwJM SZJk7An1ZQ

1*myeh1YG3DVQ7L2Kg7kIZJw

1*SmQ0c37hDpn8mith2eny5g

_authResults Widget

[nextpage title="Facebook"]

Puede ver que hay un pequeño segmento de código enumerado a continuación utilizando la función FlutterOAuth (). Luego llama a la función, signInWithCredential (), encontrada anteriormente.

1*9DDLfpVdh9LAPR2 Y0l1 w

Auth class

[nextpage title="Twitter"]

En este momento, esta biblioteca de clases no inicia sesión con Twitter. Hay un complemento para eso:  flutter_twitter_login. Sin embargo, por ahora, te invitaré a leer, Flutter+Firebase — Authenticate with Twitter by Etimbuk. Él presenta este complemento, y es este complemento el que proporciona los dos tokens que, a su vez, pasaría a la función a continuación.

1*acLEQnQcuLG VHHkhf7hUw

Auth class

[nextpage title="Desconectar"]

Cerrar sesión es cerrar sesión en el servidor de Google y en el servidor de Firebase. Volviendo a la aplicación, es posible firmar "en silencio" sin que el usuario inicie sesión manualmente nuevamente. Sin embargo, si cierra sesión y luego se desconecta, el usuario deberá iniciar sesión manualmente nuevamente.

1*46ErLh2c WKNMGXe3tymtA

Auth class

SignOut

Es una buena práctica cerrar sesión explícitamente cuando la aplicación está finalizando. La función dispose () llama a la función signOut () que se enumera a continuación. Verá que simplemente llama a la función signOut () del complemento, respectivamente. Tenga en cuenta que no se desconecta, pero la función que sigue sí lo hace.

Auth class

In O Not

Las siguientes dos funciones prueban para ver si está 'conectado'. Una vez más, se llama a la función init () en las últimas dos funciones para asegurarse de que, en este caso, la variable _googleSignIn no sea nula.

1*II5bpRnHpH OEKKnRIdXkA

Auth class

1*EhuAn4CvMUHq3cYDCldW1g

Auth class

1*BCYhvtgoh8YAAv7hbSkwnQ

Auth class

[nextpage title="Setter Info"]

La biblioteca de clases termina con, nuevamente, varios captadores que transmiten la información del perfil del usuario. Por supuesto, se actualizan en las funciones _setUserFromFirebase () o _setFireBaseUserFromGoogle ().

1*xZHWCDKo6uOWu3WCN p1jg

Auth class

Conclusión

Mucha redundancia en esta biblioteca de clases. Eso es lo que la convierte en una biblioteca de clase. Feo por dentro, pero resbaladizo por fuera. Solo unas pocas llamadas y ha terminado de autenticar a los usuarios en su aplicación. Esta biblioteca de clases es solo otra herramienta en el kit de herramientas para hacer la vida un poco más fácil al desarrollar aplicaciones móviles en Flutter, la mejor plataforma para el desarrollo móvil.

Si quieres conocer otros artículos parecidos a Autenticación en Flutter puedes visitar la categoría 📱 Flutter.

Deja una respuesta

Subir

Este sitio web usa cookies para poder brindarte un contenido más personalizado. + Información