Ir a la consola

Autentica mediante proveedores de OAuth y 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, asegúrate de que la variable de configuración authDomain sea similar a my-app.firebaseapp.com. Si se usa un dominio personalizado en lugar del dominio firebaseapp.com aprovisionado por Firebase, entonces se debe usar el dominio personalizado.

  2. Para configurar una app para Android, agrégala a Firebase console. Luego, ingresa los detalles de la app. No necesitas el google-services.json generado.

  3. Para configurar una app para iOS, crea una aplicación para iOS 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. Habilita Firebase Dynamic Links:

    1. En Firebase console, abre la sección Dynamic Links.
    2. Si aún no has aceptado los términos ni has creado un dominio de Dynamic Links, deberás hacerlo ahora.

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

      example.page.link

      Necesitarás este valor cuando configures tu app para iOS o Android a fin de interceptar el vínculo entrante.

  5. Habilita el Acceso con Google en Firebase console:

    1. En Firebase console, abre la sección Auth.
    2. En la pestaña Método de acceso, habilita el método Acceso con Google y haz clic en Guardar.
  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, sustituye my-app.firebaseapp.com con él.

    En la aplicación de Android, se debe 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 de forma correcta 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:

    var provider = new firebase.auth.GoogleAuthProvider();
    
  3. Autentica con Firebase con el objeto del proveedor de Google mediante signInWithRedirect. Ten en cuenta que signInWithPopup no es compatible con Cordova.

    firebase.auth().signInWithRedirect(provider).then(function() {
      return firebase.auth().getRedirectResult();
    }).then(function(result) {
      // This gives you a Google Access Token.
      // You can use it to access the Google API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      // ...
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
    
  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.

    firebase.auth().getRedirectResult().then(function(result) {
      if (result.credential) {
        // This gives you a Google Access Token.
        // You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
    

    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.