Autenticazione tramite provider OAuth con Cordova

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

Configurare Firebase Authentication per Cordova

  1. Aggiungi Firebase al tuo progetto JavaScript. Quando aggiungi lo snippet Firebase, prendi nota della variabile di configurazione authDomain, che dovrebbe avere il seguente aspetto: my-app.firebaseapp.com. Se viene utilizzato un dominio personalizzato insteadfirebaseapp.com del dominio di Firebase di cui è stato eseguito il provisioning, deve essere utilizzato il dominio personalizzato.

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

  3. Per configurare un'app per iOS, crea un'applicazione per iOS e aggiungila alla console Firebase. Ti servirà l'ID bundle iOS da aggiungere in un secondo momento durante l'installazione del plug-in per lo schema URL personalizzato.

  4. Attiva 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 dominio Dynamic Links, fallo ora.

      Se hai già creato un dominio Dynamic Links, prendine nota. Un dominio Dynamic Links è simile al seguente esempio:

      example.page.link

      Questo valore ti servirà quando configuri la tua app per Apple o Android in modo da intercettare il link in arrivo.

  5. Abilita Accedi con Google nella console Firebase:

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

  6. Installa i plug-in richiesti nel 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 file config.xml di Cordova, 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>

    Un esempio di configurazione potrebbe essere il seguente:

    <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 il dominio personalizzato.

    Per le app per Android, deve essere utilizzato singleTask per launchMode.

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

Gestire il flusso di accesso con l'SDK Firebase

  1. Firebase Auth dipende dall'evento deviceReady per determinare correttamente l'ambiente Cordova corrente. Assicurati che l'istanza dell'app Firebase sia inizializzata dopo l'attivazione dell'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 utilizzando l'oggetto provider Google con 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 venga distrutta prima del completamento dell'operazione di accesso, chiama getRedirectResult al caricamento dell'app.

    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 fornitore tramite linkWithRedirect o per eseguire nuovamente l'autenticazione con un fornitore esistente utilizzando reauthenticateWithRedirect.