Autentica mediante proveedores de OAuth con Cordova

Con el SDK de Firebase JS, puedes permitir que los usuarios de Firebase se autentiquen con cualquier proveedor de OAuth compatible en un entorno de Cordova. Para integrar cualquier proveedor de OAuth compatible, puedes usar el SDK de Firebase para ejecutar el flujo de acceso o ejecutar el flujo de OAuth de forma manual y pasar la credencial de OAuth resultante a Firebase.

Configura Firebase Authentication para Cordova

  1. Agrega Firebase al proyecto de JavaScript. Cuando agregues el fragmento de Firebase, toma nota de la variable de configuración authDomain, que debe ser similar a 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. Si deseas configurar una app para Android, agrégala a Firebase console y, luego, ingresa los detalles. No necesitas el google-services.json generado.

  3. Si deseas configurar una app para iOS, créala y agrégala a Firebase console. Necesitarás el ID del paquete de iOS para agregarlo una vez que instales el complemento del esquema de URL personalizada.

  4. Para habilitar Firebase Dynamic Links, sigue estos pasos:

    1. En Firebase console , abre la sección Dynamic Links.

    2. Si aún no aceptaste los términos de Dynamic Links ni creaste un dominio de Dynamic Links, hazlo ahora.

      Si ya creaste un dominio de Dynamic Links, anótalo. Los dominios de Dynamic Links suelen ser como el siguiente ejemplo:

      example.page.link

      Necesitarás este valor cuando configures la app para Apple o Android para interceptar el vínculo entrante.

  5. Habilita el Acceso con Google en la consola de Firebase:

    1. En Firebase console , abre la sección Auth.
    2. En la pestaña Sign-in method, habilita el método Acceso con Google y haz clic en Save.

  6. Instala los complementos necesarios en el proyecto de 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. Agrega la siguiente configuración a tu archivo config.xml de Cordova, en la que 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>

    Un ejemplo de configuración podría ser como el siguiente:

    <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 usa un dominio personalizado auth.custom.domain.com, reemplaza my-app.firebaseapp.com con él.

    Si se trata de una aplicación para Android, debes usar singleTask para launchMode.

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

Maneja el flujo de acceso con el SDK de Firebase

  1. Firebase Auth depende del evento deviceReady para determinar correctamente el entorno de Cordova actual. Asegúrate de que la instancia de app de Firebase se haya inicializado después de que se active el evento.

  2. Crea una instancia del objeto del proveedor de 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. Autentica con Firebase a través del objeto del proveedor de Google con signInWithRedirect. Ten en cuenta que signInWithPopup no es compatible con 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. Para manejar el caso en el que se destruye la actividad de la app antes de que se complete la operación de acceso, llama a getRedirectResult cuando se cargue la 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

    Puedes usar el mismo mecanismo para vincular a un proveedor nuevo mediante linkWithRedirect o para volver a autenticar con un proveedor existente a través de reauthenticateWithRedirect.