S'authentifier à l'aide de fournisseurs OAuth avec Cordova

Avec le SDK Firebase JS, vous pouvez autoriser vos utilisateurs Firebase à s'authentifier à l'aide de n'importe quel fournisseur OAuth compatible dans un environnement Cordova. Vous pouvez intégrer n'importe quel fournisseur OAuth compatible en utilisant le SDK Firebase pour effectuer le flux de connexion ou en effectuant manuellement le flux OAuth et en transmettant les identifiants OAuth obtenus à Firebase.

Configurer Firebase Authentication pour Cordova

  1. Ajoutez Firebase à votre projet JavaScript. Lorsque vous ajoutez l'extrait Firebase, notez la variable de configuration authDomain, qui doit ressembler à my-app.firebaseapp.com. Si un domaine personnalisé est utilisé au lieu du domaine firebaseapp.com provisionné par Firebase, le domaine personnalisé doit être utilisé à la place.

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

  3. Pour configurer une application iOS, créez-en une et ajoutez-la à la console Firebase. Vous aurez besoin de l'ID de bundle iOS pour l'ajouter plus tard lorsque vous installerez le plug-in de schéma d'URL personnalisé.

  4. Activez Firebase Dynamic Links:

    1. Dans la console Firebase, ouvrez la section Dynamic Links.

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

      Si vous avez déjà créé un domaine Dynamic Links, notez-le. Un domaine Dynamic Links se présente généralement comme suit:

      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 Authentification.
    2. Dans l'onglet Mode de connexion, activez la méthode Connexion à Google, puis cliquez sur Enregistrer.

  6. Installez les plug-ins 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 config.xml Cordova, où AUTH_DOMAIN correspond au domaine de l'étape 1 et DYNAMIC_LINK_DOMAIN au 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>

    Voici un exemple de configuration:

    <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-le par my-app.firebaseapp.com.

    Pour les applications 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 pour 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 de fournisseur Google :

    Web

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

const provider = new GoogleAuthProvider();
    auth_create_google_provider.js

    Web

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

  3. Authentifiez-vous avec Firebase à l'aide de l'objet du fournisseur Google à l'aide de signInWithRedirect. Notez que signInWithPopup n'est pas compatible avec Cordova.

    Web

    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

    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 lorsque votre application se charge.

    Web

    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

    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 associer un nouveau fournisseur via linkWithRedirect ou pour réauthentifier un fournisseur existant à l'aide de reauthenticateWithRedirect.