Autenticazione utilizzando i provider OAuth con Cordova

Con Firebase JS SDK, puoi consentire ai tuoi utenti Firebase di autenticarsi utilizzando qualsiasi provider OAuth supportato in un ambiente Cordova. Puoi integrare qualsiasi provider OAuth supportato utilizzando l'SDK Firebase per eseguire il flusso di accesso oppure eseguendo manualmente il flusso OAuth e passando le credenziali OAuth risultanti a Firebase.

Configura l'autenticazione Firebase per Cordova

  1. Aggiungi Firebase al tuo progetto JavaScript . Quando aggiungi lo snippet Firebase, prendi nota della variabile di configurazione authDomain , che dovrebbe assomigliare a my-app.firebaseapp.com . Se viene utilizzato un dominio personalizzato anziché il dominio firebaseapp.com fornito da Firebase, è necessario utilizzare invece il dominio personalizzato.

  2. Per configurare un'app Android, aggiungi la tua app Android alla console Firebase e inserisci i dettagli dell'app. Non è necessario il file google-services.json generato.

  3. Per configurare un'app iOS, crea un'applicazione iOS e aggiungila alla console Firebase . Avrai bisogno dell'ID del pacchetto iOS da aggiungere in seguito durante l'installazione del plug-in dello schema URL personalizzato.

  4. Abilita i collegamenti dinamici Firebase:

    1. Nella console Firebase , apri la sezione Collegamenti dinamici .

    2. Se non hai ancora accettato i termini di Dynamic Links e creato un dominio Dynamic Links, fallo ora.

      Se hai già creato un dominio Dynamic Links, prendine nota. Un dominio Dynamic Links in genere assomiglia al seguente esempio:

      example.page.link

      Avrai bisogno di questo valore quando configuri la tua app Apple o Android per intercettare il collegamento in entrata.

  5. Abilita l'accesso a Google nella console Firebase:

    1. Nella console Firebase , apri la sezione Autenticazione .
    2. Nella scheda Metodo di accesso , attiva il metodo di accesso Google e fai clic su Salva .

  6. Installa i plugin richiesti nel tuo progetto 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. Aggiungi la seguente configurazione al tuo file Cordova config.xml , dove AUTH_DOMAIN è il dominio del passaggio (1) e DYNAMIC_LINK_DOMAIN è il dominio del passaggio (3c).

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

    Una configurazione di esempio potrebbe essere simile a:

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

    Se viene utilizzato un dominio personalizzato auth.custom.domain.com , sostituisci my-app.firebaseapp.com con quello.

    Per l'applicazione Android singleTask deve essere utilizzato per launchMode .

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

Gestisci il flusso di accesso con l'SDK Firebase

  1. L'autenticazione Firebase dipende dall'evento deviceReady per determinare correttamente l'attuale ambiente Cordova. Assicurati che l'istanza dell'app Firebase venga inizializzata dopo l'attivazione dell'evento.

  2. Crea un'istanza dell'oggetto provider 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. Autenticarsi con Firebase utilizzando l'oggetto provider Google utilizzando signInWithRedirect . Tieni presente che signInWithPopup non è supportato in 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. Per gestire il caso in cui l'attività dell'app viene eliminata prima del completamento dell'operazione di accesso, chiama getRedirectResult quando viene caricata l'app.

    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

    Lo stesso meccanismo può essere utilizzato per collegare un nuovo provider tramite linkWithRedirect o per autenticarsi nuovamente con un provider esistente utilizzando reauthenticateWithRedirect .