• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 18/02/2022

Améliorez votre système d’authentification avec les réseaux sociaux

De plus en plus d'applications mobiles proposent une authentification via les réseaux sociaux, dans le but de faciliter et rendre plus rapide la phase d'inscription. Nous allons donc voir tout de suite comment ajouter les moyens d'authentification par Google et Facebook.

Ajoutez l'authentification par Google

De la même façon que pour l'authentification par email, vous devez activer l'authentification par Google depuis l'interface web de Firebase :

Vous devriez avoir le champ "Nom public du projet" déjà rempli. Il vous restera à sélectionner l'adresse email d'assistance associée au projet, qui correspondra à l'adresse avec laquelle vous avez créer votre compte Firebase. 

Cliquez sur "Enregistrer" et vous aurez activé la connexion via Google ! 

Nous allons ensuite rajouter, dans notre activité MainActivity, le fournisseur Google comme nouveau moyen d'authentification via le builder servant à afficher l'activité de connexion/inscription auto-générée par FirebaseUI :

public class MainActivity extends BaseActivity<ActivityMainBinding> {

    ...

  private void startSignInActivity(){

        // Choose authentication providers
        List<AuthUI.IdpConfig> providers = Arrays.asList(
                        new AuthUI.IdpConfig.GoogleBuilder().build(),
                        new AuthUI.IdpConfig.EmailBuilder().build());
                        
        ...
    }

    ...

}

Lancez maintenant votre application, et tentez de vous inscrire avec un compte Google.

Du fait que vous disposez maintenant de deux moyens d'authentification (email et Google), vous devriez voir apparaitre un écran supplémentaire quand vous appuyez sur le bouton "Connexion" :

Ecran de connexion
Ecran de connexion

Une fois inscrit, une nouvelle ligne doit apparaître, correspondant au compte de l'utilisateur fraîchement créé depuis l'interface web de Firebase

Ajoutez l'authentification par Facebook

Maintenant que l'authentification par Google fonctionne, passons à l'authentification par Facebook.

Etape 1 : Créez un compte Facebook Developer pour ajouter votre application

Rendez-vous sur Facebook Developers, créez-vous un compte développeur, puis ajoutez une nouvelle application.

Vous allez devoir choisir le type de votre application. Dans notre cas, il s'agit du type "Consumer" qui correspond à une application pour le public.

Vous aurez ensuite à choisir le nom de votre application ainsi qu'un email de contact.

Vous pourrez également ajouter un Business Manager account, mais ce n'est pas nécessaire pour ce que nous souhaitons faire avec notre application. 

Cliquez sur "Create app" pour finaliser la création de votre application.

Une popup vous demandera de confirmer votre mot de passer afin de créer votre application.

Etape 2 : Ajoutez le produit Facebook Login

Une fois votre application créée, vous allez ajouter un "produit" à celle-ci. Cliquez sur le produit "Facebook Login" puis sur "Set up". Enfin, choisissez Android.

Un assistant va ensuite vous guider pour configurer cette connexion, notamment pour installer le SDK de Facebook dans votre application Android. Pour cela, modifiez les fichiers build.gradle de votre application Android comme ceci.

Extrait de build.gradle (au niveau du projet) :

buildscript {
    
    repositories {
        ...
        mavenCentral()
    }
   ...
}

Extrait de build.gradle (au niveau de l'application) :

dependencies {
    ...
    implementation 'com.facebook.android:facebook-android-sdk:5.13.0'

}

Puis, synchronisez votre application afin d'installer tout ce beau monde.

Ensuite, il faut donner quelques informations supplémentaires vis-à-vis de votre application Android : le nom de votre package et votre activity principale.

Etape 3 Facebook

Cliquez sur le bouton "Save". Une fois fait, vous devriez avoir une popup vous indiquant que votre application n'est pas présente sur les stores. C'est normal, cliquez simplement sur "Use this package name".

Facebook vous demande ensuite de renseigner la clé de hachage de votre application Android en utilisant l'utilitaire keytool. N'oubliez pas, le mot de passe de votre keystore de débogage est : android.

Commande pour Mac :

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Commande pour Windows :

keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64

Une fois la clé de hachage récupérée, renseignez-la dans le champ proposé par Facebook à cet effet.

Et c'est tout pour cet assistant, passez l'ensemble des autres étapes qui ne nous serviront pas dans notre cas.

Nous allons ensuite modifier le fichier strings.xml en ajoutant des identifiants utilisés par la suite par le SDK Facebook et FirebaseUI.

Extrait de strings.xml :

<resources xmlns:tools="http://schemas.android.com/tools">
    ...
    <string name="facebook_application_id">205701438038321</string>
    <string name="fb_login_protocol_scheme">fb205701438038321</string>
</resources>

Il vous faudra ici renseigner l'identifiant de votre application Facebook (Identifiant de l'app), disponible dans les paramètres de celle-ci. La deuxième propriété correspond à ce même identifiant précédé par les caractères "fb". 

Bon, une bonne chose de faite !

Etape 3 : Activez l'authentification via Facebook

Passons maintenant à l'activation du moyen d'authentification Facebook via l'interface web de Firebase.

Procédez à l'activation du moyen d'authentification par Facebook et renseignez les informations que vous pouvez retrouver dans les paramètres de votre application Facebook.

Pensez également à récupérer l'URI de redirection OAuth de Firebase afin de l'ajouter aux paramètres de Facebook. Pensez aussi à activer l'option "Connexion à partir des appareils".

Etape 4 : Procédez aux derniers réglages

Rendez-vous dans les paramètres de votre application Facebook afin de renseigner une URL de "Politique de Confidentialité" ainsi qu'une "Catégorie", obligatoire pour le bon fonctionnement de Facebook Login.

Et voilà ! Je vous avais prévenu, la procédure est un peu longue mais c'est aussi ça être développeur, on s'adapte !

Extrait de MainActivity.java :

public class MainActivity extends BaseActivity<ActivityMainBinding> {

    ...

    // Launch Sign-In Activity
    private void startSignInActivity(){

        // Choose authentication providers
        List<AuthUI.IdpConfig> providers = Arrays.asList(
                        new AuthUI.IdpConfig.GoogleBuilder().build(),
                        new AuthUI.IdpConfig.FacebookBuilder().build(),
                        new AuthUI.IdpConfig.EmailBuilder().build());
                        
        ...
    }

    ...
}

C'est exactement la même chose que ce que vous avez réalisé précédemment avec l'authentification par email et par Google.

Lancez maintenant votre application Android et testez l'inscription via un compte Facebook.

Inscription via un compte Facebook
Inscription via un compte Facebook

Une fois inscrit, vous devriez apercevoir le compte de l'utilisateur fraîchement créé depuis l'interface web de Firebase

En résumé

  • Vous pouvez ajouter l'authentification via divers services depuis l'interface web de Firebase.

  • La procédure pour l'ajout de l'authentification via Facebook est un peu plus longue que les autres.

Exemple de certificat de réussite
Exemple de certificat de réussite