Connexion avec un compte Github sur une application Flutter

1. Installer les packages nécessaires

La première étape de ce guide, va être d’installer les packages dont vous aurez besoin pour laisser un utilisateur se connecter à votre application Flutter avec son compte Github. Installez donc flutter_appauth et url_launcher dans leur dernière version. Puis lancez la commande :

flutter pub get

2. Configurer Android et iOS

La deuxième étape va être de configurer vos fichiers d’application, pour que le package AppAuth puisse fonctionner.

Configuration Android

Modifiez le fichier android/app/build.gradle pour ajouter le manifestPlaceholders :

android {

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

Vous pouvez remplacer com.votreapp.flutter par le vrai nom de package de votre application, avec tous les caractères en minuscule.

Assurez-vous également que AndroidManifest.xml contient les éléments suivants :

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" //Ajouter cette ligne au tag manifest
    package="com.votreapp.flutter">


//Ajoutez ce bloc à la suite de votre "activity"
<!-- AppAuth Activities -->
        <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.votreapp.flutter" //Remplacez par votre vrai nom de package 
                        android:host="auth"/>
                </intent-filter>
        </activity>

Configuration iOS

Pour finir, ajoutez la configuration suivante dans ios/Runner/Info.plist, après l’ouverture du tag <dict> :

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.votreapp.flutter</string>n //Remplacez par votre vrai nom de package 
        </array>
    </dict>
</array>

Si vous avez déjà un bloc CFBundleTypeRole pour la connexion avec Google Sign In, ne le remplacez pas et ajoutez simplement ce bloc à la suite.

3. Ajouter GitHub comme fournisseur d’authentification sur Firebase

La prochaine étape est d’ajouter Github Auth comme méthode de connexion de votre application Flutter. Pour cela :

Rendez-vous sur Firebase Console
Accédez à Authentification > Méthodes de connexion
Ajoutez GitHub et copiez l’URL qui est fourni en bas de la fenêtre contextuelle. Deux informations vous sont demandées :
- l’ID Client.
- Le Secret Client.

Pour les obtenir, vous allez devoir vous rendre sur Github developer et vous créer un compte si vous n’en avez pas déjà un. Puis, rendez-vous sur cette page pour créer une nouvelle application Github.

Remplissez les informations demandées

Nom de l’application.
Homepage URL : https://mon-app-flutter.fr (Vous pouvez founir un nom générique).
Authorization callback URL : URL fournie par Firebase que vous avez copié.

Une fois l’application créée, vous aurez accès à un tableau de bord, sur lequel se touvent l’ID Client et le Secret Client. Il ne vous reste plus qu’à les ajouter dans Firebase et à activer la méthode de connexion.

Github Auth est désormais prêt à fonctionner sur votre application Flutter.

4. Implémenter l’authentification GitHub dans Flutter

La dernière étape de ce guide est de mettre en place le système de connexion dans votre application Flutter. Je vous ai fourni un code très simple, que vous pouvez adapter selon vos besoins :

class GitHubAuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;

  // Connexion avec GitHub via Firebase Auth
  Future<void> signInWithGitHub(context) async {
    try {
      // Utiliser GitHub comme fournisseur OAuth
      final OAuthProvider githubProvider = OAuthProvider("github.com");

      // Connexion sur mobile avec signInWithProvider()
      final UserCredential userCredential =
          await _auth.signInWithProvider(githubProvider);

      final User? user = userCredential.user;

      if (user != null) {
        if (userCredential.additionalUserInfo!.isNewUser) {
          //Logique si l'utilisateur est nouveau
      } else {
        //Logique si l'utilisateur n'est pas nouveau
      }
        Fluttertoast.showToast(msg: "Connexion réussie avec GitHub !");
        // Naviguer vers une autre page si nécessaire
      } else {
        Fluttertoast.showToast(msg: "Erreur lors de la connexion");
      }
    } catch (e) {
      print("Erreur lors de la connexion avec GitHub : $e");
      Fluttertoast.showToast(msg: "Une erreur est survenue");
    }
  }
}

Vous n’avez ensuite plus qu’à appeler cette fonction avec :

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

Explication du code

1. Définition de la classe et initialisation de FirebaseAuth

class GitHubAuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;

Cette classe GitHubAuthService sert à gérer l’authentification avec GitHub via Firebase.
On instancie Firebase Authentication en créant une variable _auth qui permettra d’accéder aux fonctionnalités d’authentification.

2. Déclaration de la méthode signInWithGitHub

Future<void> signInWithGitHub(context) async

Cette méthode est asynchrone (async) et retourne un Future<void>, ce qui signifie qu’elle effectue une opération qui peut prendre du temps (authentification).

3. Création du fournisseur OAuth GitHub

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

On crée un fournisseur GitHub pour l’authentification avec Firebase en utilisant OAuthProvider("github.com").Firebase Auth sait ainsi qu’on veut utiliser GitHub comme fournisseur d’authentification.

4. Connexion avec GitHub sur mobile

// Connexion sur mobile avec signInWithProvider()
final UserCredential userCredential = await _auth.signInWithProvider(githubProvider);

signInWithProvider(githubProvider) permet à l’utilisateur de se connecter via GitHub. Cette méthode retourne un objet UserCredential, qui contient des informations sur l’utilisateur connecté.

final User? user = userCredential.user;

On récupère l’utilisateur (User? user) depuis l’objet userCredential. Si l’utilisateur s’est connecté avec succès, cette variable ne sera pas null.

      if (user != null) {
        if (userCredential.additionalUserInfo!.isNewUser) {
          //Logique si l'utilisateur est nouveau
        } else {
          //Logique si l'utilisateur n'est pas nouveau
        }

On vérifie si user n’est pas null (c’est-à-dire si l’authentification a réussi).userCredential.additionalUserInfo!.isNewUser permet de savoir si c’est la première fois que cet utilisateur se connecte avec GitHub.

Si isNewUser == true → C’est un nouvel utilisateur.
Sinon → C’est un utilisateur existant.