Autenticar utilizando proveedores de OAuth con Cordova

Con Firebase JS SDK, puede permitir que sus usuarios de Firebase se autentiquen utilizando cualquier proveedor de OAuth compatible en un entorno Cordova. Puede integrar cualquier proveedor de OAuth compatible utilizando el SDK de Firebase para realizar el flujo de inicio de sesión o realizando el flujo de OAuth manualmente y pasando la credencial de OAuth resultante a Firebase.

Configurar la autenticación de Firebase para Cordova

  1. Agrega Firebase a tu proyecto de JavaScript . Al agregar el fragmento de Firebase, tome nota de la variable de configuración authDomain , que debería verse así my-app.firebaseapp.com . Si se usa un dominio personalizado en lugar del dominio firebaseapp.com aprovisionado por Firebase, se debe usar el dominio personalizado en su lugar.

  2. Para configurar una aplicación de Android, agregue su aplicación de Android a Firebase console e ingrese los detalles de su aplicación. No necesita el google-services.json generado.

  3. Para configurar una aplicación de iOS, cree una aplicación de iOS y agréguela a Firebase console . Necesitará el ID del paquete de iOS para agregarlo más adelante al instalar el complemento del esquema de URL personalizado.

  4. Habilite los enlaces dinámicos de Firebase:

    1. En Firebase console , abre la sección Enlaces dinámicos .

    2. Si aún no ha aceptado los términos de Dynamic Links y no ha creado un dominio de Dynamic Links, hágalo ahora.

      Si ya creaste un dominio de Dynamic Links, toma nota. Un dominio de Dynamic Links normalmente se parece al siguiente ejemplo:

      example.page.link

      Necesitará este valor cuando configure su aplicación Apple o Android para interceptar el enlace entrante.

  5. Habilite el inicio de sesión de Google en Firebase console:

    1. En Firebase console , abre la sección Auth .
    2. En la pestaña Método de inicio de sesión , habilite el método de inicio de sesión de Google y haga clic en Guardar .

  6. Instale los complementos necesarios en su proyecto 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. Agregue la siguiente configuración a su archivo Cordova config.xml , donde AUTH_DOMAIN es el dominio del paso (1) y DYNAMIC_LINK_DOMAIN es el dominio del paso (3c).

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

    Una configuración de ejemplo podría verse así:

    <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 se utiliza un dominio personalizado auth.custom.domain.com , sustitúyalo my-app.firebaseapp.com por ese.

    Para la aplicación de Android, singleTask debe usarse para launchMode .

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

Maneja el flujo de inicio de sesión con el SDK de Firebase

  1. Firebase Auth depende del evento deviceReady para determinar correctamente el entorno actual de Cordova. Asegúrese de que la instancia de la aplicación Firebase se inicialice después de que se active ese evento.

  2. Cree una instancia del objeto proveedor de 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. Autentíquese con Firebase utilizando el objeto de proveedor de Google mediante signInWithRedirect . Tenga en cuenta que signInWithPopup no se admite en 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. Para manejar el caso en el que la actividad de la aplicación se destruye antes de que se complete la operación de inicio de sesión, llame a getRedirectResult cuando se cargue la aplicación.

    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

    Se puede utilizar el mismo mecanismo para vincular un nuevo proveedor mediante linkWithRedirect o para volver a autenticar con un proveedor existente mediante reauthenticateWithRedirect .