Tuto Flutter.es

Conexión con una cuenta de GitHub en una aplicación Flutter

Avatar de Pedro Cortez
Pedro Cortez

¿Quieres agregar GitHub Auth como método de autenticación en tu aplicación Flutter? En esta guía, te explico cómo implementar este sistema de manera sencilla y cómo gestionar a tus nuevos usuarios.

github auth
Tabla de contenidos
  1. 1. Instalar los paquetes necesarios
  2. 2. Configurar Android e iOS
  3. 3. Agregar GitHub como proveedor de autenticación en Firebase
  4. 4. Implementar la autenticación de GitHub en Flutter

1. Instalar los paquetes necesarios

El primer paso de esta guía es instalar los paquetes necesarios para permitir que un usuario inicie sesión en tu aplicación Flutter con su cuenta de GitHub. Instala los paquetes flutter_appauth y url_launcher en su última versión. Luego, ejecuta el siguiente comando:

flutter pub get

2. Configurar Android e iOS

El segundo paso es configurar los archivos de tu aplicación para que el paquete AppAuth funcione correctamente.

Configuración en Android

Modifica el archivo android/app/build.gradle para agregar los manifestPlaceholders:

android {
  ...
    defaultConfig {
        ...
        manifestPlaceholders += [
                'appAuthRedirectScheme': 'com.tuapp.flutter'
        ]
    }
}

Sustituye com.tuapp.flutter por el nombre real del paquete de tu aplicación, todo en minúsculas.

Asegúrate también de que el archivo AndroidManifest.xml contiene los siguientes elementos:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.tuapp.flutter">

    <!-- Agrega este bloque después de la "activity" -->
    <!-- Actividades de AppAuth -->
    <activity
        android:name="net.openid.appauth.RedirectUriReceiverActivity"
        android:theme="@style/Theme.AppCompat.Translucent.NoTitleBar"
        android:exported="true"
        tools:node="replace">
        <intent-filter>
            <action android:name="android.intent.action.VIEW"/>
            <category android:name="android.intent.category.DEFAULT"/>
            <category android:name="android.intent.category.BROWSABLE"/>
            <data android:scheme="com.tuapp.flutter"
                android:host="auth"/>
        </intent-filter>
    </activity>
</manifest>

Configuración en iOS

Por último, agrega la siguiente configuración en ios/Runner/Info.plist, después de la apertura de la etiqueta <dict>:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.tuapp.flutter</string> <!-- Sustituye por el nombre real del paquete -->
        </array>
    </dict>
</array>

Si ya tienes un bloque CFBundleTypeRole para la autenticación con Google Sign-In, no lo reemplaces. Simplemente, añade este bloque después.

3. Agregar GitHub como proveedor de autenticación en Firebase

El siguiente paso es agregar GitHub Auth como método de inicio de sesión en tu aplicación Flutter.

  1. Ve a la Consola de Firebase.
  2. Accede a Autenticación > Métodos de inicio de sesión.
  3. Activa la opción GitHub y copia la URL que aparece en la parte inferior de la ventana emergente.
  4. Firebase te pedirá dos datos:
    • ID del Cliente
    • Secreto del Cliente

Voici la traduction en espagnol :

Conexión con una cuenta de GitHub en una aplicación Flutter

1. Instalar los paquetes necesarios

El primer paso de esta guía es instalar los paquetes necesarios para permitir que un usuario inicie sesión en tu aplicación Flutter con su cuenta de GitHub. Instala los paquetes flutter_appauth y url_launcher en su última versión. Luego, ejecuta el siguiente comando:

bashCopierModifierflutter pub get

2. Configurar Android e iOS

El segundo paso es configurar los archivos de tu aplicación para que el paquete AppAuth funcione correctamente.

Configuración en Android

Modifica el archivo android/app/build.gradle para agregar los manifestPlaceholders:

gradleCopierModifierandroid {
  ...
    defaultConfig {
        ...
        manifestPlaceholders += [
                'appAuthRedirectScheme': 'com.tuapp.flutter'
        ]
    }
}

Sustituye com.tuapp.flutter por el nombre real del paquete de tu aplicación, todo en minúsculas.

Asegúrate también de que el archivo AndroidManifest.xml contiene los siguientes elementos:

xmlCopierModifier<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.tuapp.flutter">

    <!-- Agrega este bloque después de la "activity" -->
    <!-- Actividades de AppAuth -->
    <activity
        android:name="net.openid.appauth.RedirectUriReceiverActivity"
        android:theme="@style/Theme.AppCompat.Translucent.NoTitleBar"
        android:exported="true"
        tools:node="replace">
        <intent-filter>
            <action android:name="android.intent.action.VIEW"/>
            <category android:name="android.intent.category.DEFAULT"/>
            <category android:name="android.intent.category.BROWSABLE"/>
            <data android:scheme="com.tuapp.flutter"
                android:host="auth"/>
        </intent-filter>
    </activity>
</manifest>

Configuración en iOS

Por último, agrega la siguiente configuración en ios/Runner/Info.plist, después de la apertura de la etiqueta <dict>:

xmlCopierModifier<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.tuapp.flutter</string> <!-- Sustituye por el nombre real del paquete -->
        </array>
    </dict>
</array>

Si ya tienes un bloque CFBundleTypeRole para la autenticación con Google Sign-In, no lo reemplaces. Simplemente, añade este bloque después.

3. Agregar GitHub como proveedor de autenticación en Firebase

El siguiente paso es agregar GitHub Auth como método de inicio de sesión en tu aplicación Flutter.

  1. Ve a la Consola de Firebase.
  2. Accede a Autenticación > Métodos de inicio de sesión.
  3. Activa la opción GitHub y copia la URL que aparece en la parte inferior de la ventana emergente.
  4. Firebase te pedirá dos datos:
    • ID del Cliente
    • Secreto del Cliente

Para obtener estos datos:

  1. Activa el método de autenticación en Firebase.
  2. Visita GitHub Developer y crea una cuenta si aún no tienes una.
  3. Crea una nueva aplicación en GitHub desde esta página: Crear aplicación GitHub.
  4. Rellena la información requerida:
    • Nombre de la aplicación
    • Homepage URL: Puedes poner un nombre genérico, por ejemplo: https://mi-app-flutter.com.
    • Authorization callback URL: Introduce la URL proporcionada por Firebase que copiaste antes.
  5. Una vez creada la aplicación, GitHub te proporcionará un ID de Cliente y un Secreto de Cliente.
  6. Copia ambos valores y pégalos en la configuración de Firebase.

¡Ahora la autenticación con GitHub está lista para funcionar en tu aplicación Flutter!

4. Implementar la autenticación de GitHub en Flutter

El último paso es programar la autenticación dentro de tu aplicación Flutter. Aquí tienes un código base que puedes adaptar según tus necesidades:

class GitHubAuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  // Iniciar sesión con GitHub a través de Firebase Auth
  Future<void> signInWithGitHub(context) async {
    try {
      // Usar GitHub como proveedor OAuth
      final OAuthProvider githubProvider = OAuthProvider("github.com");

      // Autenticación en dispositivos móviles con signInWithProvider()
      final UserCredential userCredential =
          await _auth.signInWithProvider(githubProvider);

      final User? user = userCredential.user;

      if (user != null) {
        if (userCredential.additionalUserInfo!.isNewUser) {
          // Lógica si el usuario es nuevo
        } else {
          // Lógica si el usuario ya existe
        }
        Fluttertoast.showToast(msg: "¡Inicio de sesión exitoso con GitHub!");
        // Navegar a otra pantalla si es necesario
      } else {
        Fluttertoast.showToast(msg: "Error al iniciar sesión");
      }
    } catch (e) {
      print("Error en la autenticación con GitHub: $e");
      Fluttertoast.showToast(msg: "Ha ocurrido un error");
    }
  }
}

Para llamar a esta función, usa:

onPressed: () async {
    await GitHubAuthService().signInWithGitHub();
}

Explicación del código

1. Definición de la clase e inicialización de FirebaseAuth

class GitHubAuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;
}

Esta clase GitHubAuthService se encarga de gestionar la autenticación con GitHub mediante Firebase.

2. Declaración del método signInWithGitHub

Future<void> signInWithGitHub(context) async

Este método es asíncrono (async) y devuelve un Future<void>, lo que significa que ejecutará una operación que puede tardar algún tiempo en completarse (autenticación).

3. Creación del proveedor OAuth de GitHub

final OAuthProvider githubProvider = OAuthProvider("github.com");

Con esto, Firebase Auth sabe que se va a utilizar GitHub como proveedor de autenticación.

4. Autenticación con GitHub en dispositivos móviles

final UserCredential userCredential = await _auth.signInWithProvider(githubProvider);

Aquí, signInWithProvider(githubProvider) permite al usuario iniciar sesión a través de GitHub. Esta función devuelve un objeto UserCredential, que contiene la información del usuario autenticado.

final User? user = userCredential.user;

Si el usuario ha iniciado sesión correctamente, user no será null.

5. Verificación de si el usuario es nuevo o existente

if (user != null) {
  if (userCredential.additionalUserInfo!.isNewUser) {
    // Lógica si el usuario es nuevo
  } else {
    // Lógica si el usuario ya existe
  }
}

Usamos userCredential.additionalUserInfo!.isNewUser para determinar si es la primera vez que este usuario inicia sesión con GitHub.

  • Si isNewUser == true → Es un nuevo usuario.
  • Si isNewUser == false → Es un usuario existente.
Avatar de Pedro Cortez

Pedro Cortez

¡Hola! Me llamo Pierre y me lancé a la aventura de Flutter en octubre de 2023. Tenía una idea para una aplicación móvil, pero no tenía ningún conocimiento de programación y no sabía por dónde empezar. Al investigar, encontré algunos videos que hablaban de Flutter y sus ventajas, y decidí intentarlo. Sin embargo, esta herramienta aún es bastante nueva, y la mayoría de los recursos están en inglés, son de pago o están dirigidos a personas con conocimientos avanzados en programación. Por eso decidí lanzar este blog, para que los francófonos que empiezan desde cero, como yo, puedan quizás encontrar respuestas a sus preguntas.

Pour aller plus loin