Autenticazione tramite provider OAuth con Cordova

Con l'SDK Firebase JS, puoi consentire agli utenti Firebase di eseguire l'autenticazione utilizzando qualsiasi provider OAuth supportato in un ambiente Cordova. Puoi integrare a qualsiasi provider OAuth supportato utilizzando l'SDK Firebase per eseguire di accesso o eseguendo il flusso OAuth manualmente e trasmettendo la credenziale OAuth risultante in Firebase.

Configura Firebase Authentication per Cordova

  1. Aggiungi Firebase al tuo progetto JavaScript. Quando aggiungi il parametro snippet Firebase, prendi nota della variabile di configurazione authDomain, che dovrebbe avere il seguente formato: my-app.firebaseapp.com. Se viene utilizzato un dominio personalizzato anziché il dominio firebaseapp.com di cui è stato eseguito il provisioning di Firebase, il cluster al suo posto.

  2. Per configurare un'app per Android, aggiungila alla console Firebase e inserisci i dettagli dell'app. Non è necessario generare google-services.json.

  3. Per configurare un'app per iOS, crea un'applicazione iOS e aggiungila al Console Firebase. Avrai bisogno dell'ID pacchetto iOS da aggiungere in un secondo momento, installando il plug-in dello schema URL personalizzato.

  4. Abilita Firebase Dynamic Links:

    1. Nella console Firebase, apri la sezione Dynamic Links.

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

      Se hai già creato un dominio Dynamic Links, prendine nota. Dynamic Links dominio è generalmente simile all'esempio seguente:

      example.page.link

      Questo valore ti servirà quando configuri l'app Apple o Android per per intercettare il link in entrata.

  5. Attiva Accedi con Google nella console Firebase:

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

  6. Installa i plug-in 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 config.xml di Cordova, dove AUTH_DOMAIN è il dominio del passaggio (1), mentre DYNAMIC_LINK_DOMAIN è il 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>

    Ecco un esempio di configurazione:

    <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, sostituiscilo my-app.firebaseapp.com con questo.

    Per l'applicazione Android è necessario utilizzare singleTask per launchMode.

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

Gestire il flusso di accesso con l'SDK Firebase

  1. L'autenticazione Firebase dipende dall'evento deviceReady per determinare correttamente l'attuale ambiente della Cordova. Assicurati che l'istanza dell'app Firebase viene inizializzato dopo l'attivazione di quell'evento.

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

    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

    Lo stesso meccanismo può essere utilizzato per collegare un nuovo provider linkWithRedirect o rieseguire l'autenticazione con un provider esistente utilizzando reauthenticateWithRedirect.