Flutter: autenticarse en Google

Requisitos

• Flutter instalado
• Android Studio con plugin para Flutter
• Tener una cuenta de Google

Pasos

1. Crear proyecto Firebase
2. Crear aplicación Flutter
3. Añadir aplicación Android a proyecto Firebase
4. Añadir aplicación iOS a proyecto Firebase
5. Añadir las dependencias al proyecto Flutter
6. Habilitar autenticación de Google en Firebase 
7. Integrar la autenticación en la aplicación Flutter

Crear proyecto Firebase

Entrar en la consola de Firebase (es necesaria una cuenta de Google):

https://console.firebase.google.com/

Pulsar en Agregar proyecto:

En el nombre del proyecto poner, por ejemplo: "FlutterDemo" y después, pulsar en continuar

En el siguiente paso podemos habilitar o desabilitar Google Analytics (no es importante para este ejemplo). Pulsar en Continuar:

Seleccionar la cuenta por defecto para Google Analytics y pulsar en Crear proyecto

Tras unos segundos se crea el proyecto Firebase:

Pulsar en Continuar:

Aparecerá la pantalla principal del proyecto Firebase:

El siguiente paso es crear el proyecto Flutter.

Crear aplicación Flutter

Abrir Android Studio y crear un proyecto Fltutter:

O bien, si ya tenemos abierto Android Studio:

Elegir Flutter App y pulsar Next (comprobar que el directorio del SDK de Flutter es correcto):

Rellenar el nombre del proyecto, directorio, organización y pulsar Finish:

Tras unos segundos, se crea el proyecto Flutter y se abre en Android Studio.

Opcionalmente, podemos ejecutar el proyecto qe hemos creado en el simulador para comprobar que todo está bien:

Ahora tenemos que añadir las aplicaciones Android e iOS al proyecto Firebase. El proceso es diferente para cada sistema operativo.

Añadir aplicación Android al proyecto Firebase

En Android Studio, abrir el fichero <project>/android/app/build.gradle y buscar la cadena "applicationId":

El identificador de la aplicación, com.joseanquiles.google_signin, identifica unívocamente a la aplicación.

En la consola de Firebase, registrar una aplicación Android:

Poner el id de la aplicación, un sobrenombre cualquiera, opcional y pulsar en "Registrar app":

Descargar el fichero google-services.json pulsando el botón:

Copiar el fichero google-services.json al directorio <project>/android/app

En Android Studio abrir el fichero <project>/android/app/build.gradle y buscar la cadena "apply plugin". Añadir la siguiente línea:

apply plugin: 'com.google.gms.google-services'

En Android Studio abrir el fichero <project>/android/build.gradle (NOTA: es distinto del fichero anterior). Añadir la siguiente línea en la sección de dependencias:

classpath 'com.google.gms:google-services:4.3.8'

NOTA: Buscar la versión exacta actualmente en: https://developers.google.com/android/guides/google-services-plugin

Pulsar "Siguiente", de nuevo "Siguiente" y por último, pulsar en "Ir a la consola"

Y con esto, ya tenemos configurada la aplicación Android en el proyecto Firebase.

A continuación haremos el proceso similar para iOS.

Añadir aplicación iOS al proyecto Firebase

Abrir XCode y abrir el proyecto de nuestra aplicación:

Navegar hasta la carpeta ios de nuestro proyecto, seleccionar el fichero Runner.xcodeproj y pulsar Open:

Seleccionar Runner (raíz del árbol de la izquierda), pestaña General y copiar el "Bundle Identifier":

En la consola de Firebase registrar una aplicación iOS.

Pulsar en "Agregar app":

Seleccionar iOS:

Rellenar el id de la aplicación que hemos copiado en XCode, un sobrenombre opcional y pulsar en "Registrar app":

Descargar el fichero GoogleService-Info.plist:

Copiar el fichero descargado a <project>/ios/Runner

Pulsar "Siguiente", "Siguiente", "Siguiente" y "Ir a la consola".

Añadir las dependencias al proyecto Flutter

En Android Studio abrir el fichero <project>/pubspec.yaml y añadir las siguientes dependencias:

firebase_core: ^1.4.0
firebase_auth: ^3.0.1
cloud_firestore: ^2.4.0

NOTA: Buscar la versión exacta actualmente en: https://firebase.flutter.dev/

 

Pulsar en "Pub get" para descargar las dependencias:

Habilitar autenticación de Google en el proyecto Firebase

Ir a la consola de Firebase y entrar en Autenticación:

Pestaña Sign in method:

Pulsar en Google y habilitar. Introducir el correo electrónico de mantenimiento:

Pulsar en Guardar y luego en Listo:

La autenticación por Google aprecerá ahora habilitada:

La aplicación de Android necesita una huella SHA-1 que hemos dejado vacía anteriormente. Abrimos un terminal, vamos al directorio del proyecto Flutter y ejecutamos los siguientes comandos:

cd google_signin
cd android
./gradlew signingReport

La primera vez instala algunas cosas y puede tardar. Nos interesa el resultado final SHA-1:

Copiamos esta cadena tal cual y nos vamos a la consola del proyecto Firebase.

Buscamos la aplicación Android y pulsamos "Agregar huella digital":

Pegamos la huella digital y pulsamos "Guardar":

En la misma pantalla, descargamos el fichero google-services.json y lo copiamos al directorio <project>y /android/app sobreescribiendo el anterior:

El Input Manager de Unity

El Input Manager es el sistema que tenía Unity hasta ahora gestionar la entrada desde diversos dispositivos: teclado, touch, ratón, joystick...

En 2021 Unity ha introducido un nuevo sistema: el Input System, más versátil, soporta nuevos dispositivos, soporta entrada multi-usuario y es más configurable. Sin embargo, el nuevo Input System es más complejo de usar debido fundamentalmente a su versatilidad, y por eso, el Input Manager se sigue y se seguirá usando mucho tiempo como gestor de dispositovs de entrada en Unity.

En este post revisaremos el antiguo Input Manager de Unity, porque creo que en una gran parte de juegos no es necesaria la versatilidad del nuevo Input System.

Cómo maneja Unity la entrada

La pregunta es ¿necesitamos realmente un sistema para gestionar la entrada en Unity? Al fin y al cabo, es posible escuchar y detectar eventos de entrada directamente utilizando la clase Input:

void Update() {

    if (Input.GetKeyDown(KeyCode.Space)) {

         // spacebar pressed

    }

    if (Input.GetMouseButtonDown(0)) {

        // left mouse button pressed

    }

}

Este método funciona correctamente.

El problema es que si queremos cambiar la tecla espacio por otra tecla o bien por un botón del joystick, entonces tendríamos que cambiar todos los scripts donde se utilice esta entrada.

La solución es utilizar un sistema de entrada modular: la entrada que dispara una acción se separa del script que la procesa. De esta forma, se definen acciones, las cuales se asocian a diversas entradas (teclado, ratón, joystick...), y los scripts utilizan estas acciones para manejar el juego. Así, el script, en lugar de mirar una tecla concreta, mira una acción (en otro sitio, la acción se asocia a una o más entradas). Las acciones son algo como: "Fire", "Horizontal", etc

De esta forma, es fácil cambiar o añadir los mecanismos de entrada sin tocar los scripts, ya que basta con cambiar las asociaciones que tiene una acción.

El Input Manager de Unity

El Input Manager es un sistema de gestión de entradas modular. Consta de dos partes:

• Input Manager
• Input Class

La clase Input es la que utilizan los scripts para recoger la entrada: Input

El Input Manager es la ventana de settings de Unity (Edit -> Project settings) donde se asignan botones, teclas y movimientos (los dispositivos reales) a las entradas virtuales (acciones que utilizan los scripts)

Cómo recibir entradas en un script

Los scripts pueden "escuchar" las acciones utilizando los métodos de la clase Input.

Imaginemos un script que permite "disparar" cuando el jugados pulsa la tecla espacio. La forma directa de implementarlo (sin Input Manager) es:

void Update() {

    if (Input.GetKeyDown(KeyCode.Space)) {

        // disparar

    }

}

Esto funciona, pero como hemos visto, tiene algunos inconvenientes.

Con el Input Manager podemos utilizar una acción ya existente, por ejemplo "Fire1" (también podemos crear nuevas acciones), y la asociamos a la tecla de espacio. En el script escucharemos la acción "Fire1".

1. Abrimos Project settings > Input Manager: Aquí tenemos todas las acciones predefinidas: "Horizontal", "Vertical", "Fire1", etc. Podemos añadir nuevas acciones cambiando el Size.
2. Abrimos la acción "Fire1"
3. Cambiamos el Input Type: Key or Mouse Button
4. Cambiamos Positive button a space. Para ver otras posibilidades: Documentación del Input Manager

Ahora, después de configurar el Input Manager, ya podemos escribr un script que escuche eventos de tipo "Fire1" con la clase Input:

void Update() {

    if (Input.GetButtonDown("Fire1")) {

        // disparar

    }

}

NOTA: Usamos GetButtonDown que retorna true en el primer frame que se haya pulsado la tecla espacio (pero no en los demás frames). Sin embargo, GetButton devuelve true en todos los frames que se mantiene la tecla pulsada.

Usando el Input Manager es fácil cambiar la entrada física asociada a una acción sin tener que tocar los scripts que usan esta entrada. Además, también se pueden añadir otras entradas físicas asociadas a la misma acción, soportando así múltiples controles para la misma acción (y sin tener que tocar los scripts).

Múltiples entradas asociadas a la misma acción

Como hemos dicho, se pueden asociar varios dispositivos de entrada a una misma acción del Input Manager. Por ejemplo, "Fire1" tiene asociada la tecla espacio, pero podemos hacer que se dispare "Fire1" por ejemplo al pulsar el botón izquierdo del ratón.

Tenemos que crear una nueva acción. Para esto, cambiamos el Size sumando uno más al Size actual. Abajo aparecerá una acción nueva que tenemos que rellenar. El campo más importante que hay que rellenar es Name, donde pondremos "Fire1", o sea, el mismo nombre que tiene la acción que estamos tratando. Los demás datos son los que definen la entrada física. De esta forma, tenemos una acción "Fire1" asociada a dos entradas físicas distintas.

NOTA: Hay otra posibilidad para que una acción esté asociada a dos entradas físicas distintas: Alt Positive Button. En este campo podemos poner otra entrada distinta que se asociará la acción. Utilizar este campo Alt no es muy correcto y Unity recomienda utilizar estos campos para botones secundarios de un mismo dispositivo.

Uso de Axis en el Input Manager

Hasta ahora hemos visto dispositivos de entrada de tipo On/Off, o sea, que están activados o no. Pero el Input Manager también maneja dispositivos tipo Axis, los cuales nos dan un valor entre -1 y +1. El valor de reposo es 0.

Los dispositivos de tipo Axis se tratan igual que los de tipo On/Off en un script, excepto que el valor retornado está en [-1 .. +1]

void Update() {

    arriba = Input.GetAxis("Vertical")

    giro = Input.GetAxis("Horizontal")

}

En realidad, los dispositivos tipo On/Off retornan también un valor entre 0 y +1, igual que los Axis, pero en este caso normalmente sólo nos interesa chequear si está en reposo (valor 0) o no (valor mayor que 0).