Authentifier à l'aide de fournisseurs OAuth avec Cordova

Avec le SDK Firebase JS, vous pouvez permettre à vos utilisateurs Firebase de s'authentifier à l'aide de n'importe quel fournisseur OAuth pris en charge dans un environnement Cordova. Vous pouvez intégrer n'importe quel fournisseur OAuth pris en charge soit en utilisant le SDK Firebase pour effectuer le flux de connexion, soit en exécutant le flux OAuth manuellement et en transmettant les informations d'identification OAuth résultantes à Firebase.

Configurer l'authentification Firebase pour Cordova

  1. Ajoutez Firebase à votre projet JavaScript . Lors de l'ajout de l'extrait Firebase, prenez note de la variable de configuration authDomain , qui devrait ressembler à my-app.firebaseapp.com . Si un domaine personnalisé est utilisé à la place du domaine firebaseapp.com provisionné par Firebase, le domaine personnalisé doit être utilisé à la place.

  2. Pour configurer une application Android, ajoutez votre application Android à la console Firebase et saisissez les détails de votre application. Vous n'avez pas besoin du google-services.json généré.

  3. Pour configurer une application iOS, créez une application iOS et ajoutez-la à la console Firebase . Vous aurez besoin de l'ID du bundle iOS à ajouter plus tard lors de l'installation du plugin de schéma d'URL personnalisé.

  4. Activer les liens dynamiques Firebase :

    1. Dans la console Firebase , ouvrez la section Liens dynamiques .

    2. Si vous n'avez pas encore accepté les conditions Dynamic Links et créé un domaine Dynamic Links, faites-le maintenant.

      Si vous avez déjà créé un domaine Dynamic Links, prenez-en note. Un domaine Dynamic Links ressemble généralement à l’exemple suivant :

      example.page.link

      Vous aurez besoin de cette valeur lorsque vous configurerez votre application Apple ou Android pour intercepter le lien entrant.

  5. Activez Google Sign-In dans la console Firebase :

    1. Dans la console Firebase , ouvrez la section Auth .
    2. Dans l'onglet Méthode de connexion , activez la méthode de connexion Google et cliquez sur Enregistrer .

  6. Installez les plugins requis dans votre projet Cordova.

    # Plugin to pass application build info (app name, ID, etc) to the OAuth widget.
cordova plugin add cordova-plugin-buildinfo --save
# Plugin to handle Universal Links (Android app link redirects)
cordova plugin add cordova-universal-links-plugin-fix --save
# Plugin to handle opening secure browser views on iOS/Android mobile devices
cordova plugin add cordova-plugin-browsertab --save
# Plugin to handle opening a browser view in older versions of iOS and Android
cordova plugin add cordova-plugin-inappbrowser --save
# Plugin to handle deep linking through Custom Scheme for iOS
# Substitute *com.firebase.cordova* with the iOS bundle ID of your app.
cordova plugin add cordova-plugin-customurlscheme --variable \
    URL_SCHEME=com.firebase.cordova --save

  7. Ajoutez la configuration suivante à votre fichier Cordova config.xml , où AUTH_DOMAIN est le domaine de l'étape (1) et DYNAMIC_LINK_DOMAIN est le domaine de l'étape (3c).

    <universal-links>
    <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
    <host name="AUTH_DOMAIN" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

    Un exemple de configuration pourrait ressembler à :

    <universal-links>
    <host name="example.page.link" scheme="https" />
    <host name="example-app.firebaseapp.com" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

    Si un domaine personnalisé auth.custom.domain.com est utilisé, remplacez my-app.firebaseapp.com par celui-ci.

    Pour l'application Android, singleTask doit être utilisé pour launchMode .

    <preference name="AndroidLaunchMode" value="singleTask" />

Gérer le flux de connexion avec le SDK Firebase

  1. Firebase Auth dépend de l'événement deviceReady afin de déterminer correctement l'environnement Cordova actuel. Assurez-vous que l'instance de l'application Firebase est initialisée après le déclenchement de cet événement.

  2. Créez une instance de l'objet fournisseur Google :

    Web modular API

    import { GoogleAuthProvider } from "firebase/auth/cordova";

const provider = new GoogleAuthProvider();
    auth_create_google_provider.js

    Web namespaced API

    var provider = new firebase.auth.GoogleAuthProvider();
    cordova.js

  3. Authentifiez-vous auprès de Firebase à l'aide de l'objet fournisseur Google à l'aide de signInWithRedirect . Notez que signInWithPopup n'est pas pris en charge dans Cordova.

    Web modular API

    import { getAuth, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

const auth = getAuth();
signInWithRedirect(auth, new GoogleAuthProvider())
  .then(() => {
    return getRedirectResult(auth);
  })
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);

    // This gives you a Google Access Token.
    // You can use it to access the Google API.
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });
    auth_cordova_sign_in_redirect.js

    Web namespaced API

    firebase.auth().signInWithRedirect(provider).then(() => {
  return firebase.auth().getRedirectResult();
}).then((result) => {
  /** @type {firebase.auth.OAuthCredential} */
  var credential = result.credential;

  // This gives you a Google Access Token.
  // You can use it to access the Google API.
  var token = credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
});
    cordova.js

  4. Pour gérer le cas où l’activité de l’application est détruite avant la fin de l’opération de connexion, appelez getRedirectResult lors du chargement de votre application.

    Web modular API

    import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);
    if (credential) {        
      // This gives you a Google Access Token.
      // You can use it to access the Google API.
      const token = credential.accessToken;
      // The signed-in user info.
      const user = result.user;
      // ...
    }
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });
    auth_cordova_redirect_result.js

    Web namespaced API

    firebase.auth().getRedirectResult().then((result) => {
  if (result.credential) {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a Google Access Token.
    // You can use it to access the Google API.
    var token = credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    // ...
  }
}).catch((error) => {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
});
    cordova.js

    Le même mécanisme peut être utilisé pour lier un nouveau fournisseur via linkWithRedirect ou pour se réauthentifier auprès d'un fournisseur existant à l'aide reauthenticateWithRedirect .