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

Avec le SDK JS Firebase, vous pouvez permettre à vos utilisateurs Firebase de s'authentifier à l'aide de n'importe quelle un fournisseur OAuth compatible avec un environnement Cordova. Vous pouvez intégrer n'importe quel fournisseur OAuth compatible, soit en utilisant le SDK Firebase pour effectuer la de connexion, soit en exécutant le flux OAuth manuellement et en transmettant les identifiants OAuth obtenus à Firebase.

Configurer Firebase Authentication pour Cordova

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

  2. Pour configurer une application Android, ajoutez-la à la console Firebase et saisissez les informations la concernant. Il n'est pas nécessaire que les champs générés google-services.json

  3. Pour configurer une application iOS, créez-en une et ajoutez-la au Console Firebase. Vous aurez besoin de l'ID du bundle iOS pour l'ajouter plus tard lorsque installer 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éé un Dynamic Links domaine, faites-le maintenant.

      Si vous avez déjà créé un domaine Dynamic Links, prenez-en note. Dynamic Links de domaine 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 intercepte 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 de connexion Google et 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 au fichier config.xml Cordova, où AUTH_DOMAIN est le domaine de l'étape (1) et DYNAMIC_LINK_DOMAIN est le 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 my-app.firebaseapp.com.

    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 pour déterminer l'environnement actuel de Cordoue. Assurez-vous que l'instance d'application Firebase est initialisé 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 de fournisseur Google à l'aide de signInWithRedirect Notez que signInWithPopup est non disponible à Cordoue.

    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 connexion opération terminée, appelez getRedirectResult lorsque votre application 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 vous réauthentifier auprès d'un fournisseur existant avec reauthenticateWithRedirect.