Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Agregue fácilmente el inicio de sesión a su aplicación web con FirebaseUI

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

FirebaseUI es una biblioteca construida sobre el SDK de autenticación de Firebase que proporciona flujos de IU directos para usar en su aplicación. FirebaseUI proporciona los siguientes beneficios:

  • Múltiples proveedores : flujos de inicio de sesión para correo electrónico/contraseña, enlace de correo electrónico, autenticación telefónica, inicio de sesión de Google, Facebook, Twitter y GitHub.
  • Vinculación de cuentas : flujos para vincular de forma segura cuentas de usuario entre proveedores de identidad.
  • Personalización : reemplaza los estilos CSS de FirebaseUI para que coincidan con los requisitos de tu aplicación. Además, debido a que FirebaseUI es de código abierto, puede bifurcar el proyecto y personalizarlo exactamente según sus necesidades.
  • Registro con un solo toque e inicio de sesión automático: integración automática con el registro con un solo toque para un inicio de sesión rápido entre dispositivos.
  • Interfaz de usuario localizada : internacionalización para más de 40 idiomas .
  • Actualización de usuarios anónimos : capacidad de actualizar usuarios anónimos a través del inicio de sesión/registro. Para obtener más información, visite la sección Actualización de usuarios anónimos .

Antes de que empieces

  1. Agregue Firebase Authentication a su aplicación web , asegurándose de que está usando la compatibilidad v9 (recomendado) o un SDK anterior (vea la barra lateral arriba).

  2. Incluya FirebaseUI a través de una de las siguientes opciones:

    1. CDN

      Incluya la siguiente secuencia de comandos y el archivo CSS en la etiqueta <head> de su página, debajo del fragmento de código de inicialización de Firebase Console:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
      <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
      
    2. Módulo npm

      Instale FirebaseUI y sus dependencias a través de npm con el siguiente comando:

      $ npm install firebaseui --save
      

      require los siguientes módulos dentro de sus archivos fuente:

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
    3. Componente de glorieta

      Instale FirebaseUI y sus dependencias a través de Bower con el siguiente comando:

      $ bower install firebaseui --save
      

      Incluya los archivos requeridos en su HTML, si su servidor HTTP sirve los archivos dentro de bower_components/ :

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
      <link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />
      

Inicializar FirebaseUI

Después de importar el SDK, inicialice la interfaz de usuario de autenticación.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Configurar métodos de inicio de sesión

Antes de que pueda usar Firebase para iniciar sesión en los usuarios, debe habilitar y configurar los métodos de inicio de sesión que desea admitir.

Dirección de correo electrónico y contraseña

  1. En Firebase console , abra la sección Autenticación y habilite la autenticación por correo electrónico y contraseña.

  2. Agrega el ID del proveedor de correo electrónico a la lista de signInOptions de FirebaseUI.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  3. Opcional : EmailAuthProvider se puede configurar para solicitar al usuario que ingrese un nombre para mostrar (el valor predeterminado es true ).

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          requireDisplayName: false
        }
      ]
    });
    
  1. En Firebase console , abra la sección Autenticación . En la pestaña Método de inicio de sesión , habilite el proveedor de correo electrónico/contraseña . Tenga en cuenta que el inicio de sesión con correo electrónico/contraseña debe estar habilitado para usar el inicio de sesión con enlace de correo electrónico.

  2. En la misma sección, habilite el método de inicio de sesión con enlace de correo electrónico (inicio de sesión sin contraseña) y haga clic en Guardar .

  3. Agregue el ID del proveedor de correo electrónico a la lista de signInOptions de FirebaseUI junto con el vínculo de correo electrónico signInMethod .

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
        }
      ],
      // Other config options...
    });
    
  4. Al representar la IU de inicio de sesión de forma condicional (relevante para aplicaciones de una sola página), use ui.isPendingRedirect() para detectar si la URL corresponde a un inicio de sesión con enlace de correo electrónico y la IU debe procesarse para completar el inicio de sesión.

    // Is there an email link sign-in?
    if (ui.isPendingRedirect()) {
      ui.start('#firebaseui-auth-container', uiConfig);
    }
    // This can also be done via:
    if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
      ui.start('#firebaseui-auth-container', uiConfig);
    }
    
  5. Opcional : el EmailAuthProvider para el inicio de sesión con enlace de correo electrónico se puede configurar para permitir o bloquear al usuario para que no complete el inicio de sesión entre dispositivos.

    Se puede definir una devolución de llamada opcional emailLinkSignIn para devolver la configuración de firebase.auth.ActionCodeSettings para usar al enviar el enlace. Esto brinda la capacidad de especificar cómo se puede manejar el enlace, enlace dinámico personalizado, estado adicional en el enlace profundo, etc. Cuando no se proporciona, se usa la URL actual y se activa un flujo solo web.

    El inicio de sesión con enlace de correo electrónico en FirebaseUI-web es compatible con FirebaseUI-Android y FirebaseUI-iOS, donde un usuario que inicia el flujo desde FirebaseUI-Android puede abrir el enlace y completar el inicio de sesión con FirebaseUI-web. Lo mismo es cierto para el flujo opuesto.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
          // Allow the user the ability to complete sign-in cross device,
          // including the mobile apps specified in the ActionCodeSettings
          // object below.
          forceSameDevice: false,
          // Used to define the optional firebase.auth.ActionCodeSettings if
          // additional state needs to be passed along request and whether to open
          // the link in a mobile app if it is installed.
          emailLinkSignIn: function() {
            return {
              // Additional state showPromo=1234 can be retrieved from URL on
              // sign-in completion in signInSuccess callback by checking
              // window.location.href.
              url: 'https://www.example.com/completeSignIn?showPromo=1234',
              // Custom FDL domain.
              dynamicLinkDomain: 'example.page.link',
              // Always true for email link sign-in.
              handleCodeInApp: true,
              // Whether to handle link in iOS app if installed.
              iOS: {
                bundleId: 'com.example.ios'
              },
              // Whether to handle link in Android app if opened in an Android
              // device.
              android: {
                packageName: 'com.example.android',
                installApp: true,
                minimumVersion: '12'
              }
            };
          }
        }
      ]
    });
    

Proveedores de OAuth (Google, Facebook, Twitter y GitHub)

  1. En Firebase console , abra la sección Autenticación y habilite el inicio de sesión del proveedor de OAuth especificado. Asegúrese de que también se especifican el ID y el secreto de cliente de OAuth correspondientes.

  2. También en la sección Autenticación , asegúrese de que el dominio donde se mostrará su página de inicio de sesión también se agregue a la lista de dominios autorizados.

  3. Agrega el ID del proveedor de OAuth a la lista de signInOptions de FirebaseUI.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        // List of OAuth providers supported.
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        firebase.auth.GithubAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. Opcional : para especificar ámbitos personalizados o parámetros de OAuth personalizados por proveedor, puede pasar un objeto en lugar de solo el valor del proveedor:

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          scopes: [
            'https://www.googleapis.com/auth/contacts.readonly'
          ],
          customParameters: {
            // Forces account selection even when one account
            // is available.
            prompt: 'select_account'
          }
        },
        {
          provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          scopes: [
            'public_profile',
            'email',
            'user_likes',
            'user_friends'
          ],
          customParameters: {
            // Forces password re-entry.
            auth_type: 'reauthenticate'
          }
        },
        firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
        firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
      ]
    });
    

Número de teléfono

  1. En Firebase console , abra la sección Autenticación y habilite el inicio de sesión con número de teléfono.

  2. Asegúrese de que el dominio donde se mostrará su página de inicio de sesión también se agregue a la lista de dominios autorizados.

  3. Agrega el ID del proveedor del número de teléfono a la lista de signInOptions de FirebaseUI.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. Opcional : PhoneAuthProvider se puede configurar con parámetros de reCAPTCHA personalizados, ya sea que reCAPTCHA sea visible o invisible (el valor predeterminado es normal). Consulte los documentos de la API de reCAPTCHA para obtener más detalles.

    También se puede configurar el país predeterminado para seleccionar en la entrada del número de teléfono. Consulte la lista de códigos de países admitidos para ver la lista completa de códigos. Si no se especifica, la entrada del número de teléfono se establecerá de forma predeterminada en los Estados Unidos (+1).

    Actualmente se admiten las siguientes opciones.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
          recaptchaParameters: {
            type: 'image', // 'audio'
            size: 'normal', // 'invisible' or 'compact'
            badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
          },
          defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
          // For prefilling the national number, set defaultNationNumber.
          // This will only be observed if only phone Auth provider is used since
          // for multiple providers, the NASCAR screen will always render first
          // with a 'sign in with phone number' button.
          defaultNationalNumber: '1234567890',
          // You can also pass the full phone number string instead of the
          // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
          // the first country ID that matches the country code will be used to
          // populate the country selector. So for countries that share the same
          // country code, the selected country may not be the expected one.
          // In that case, pass the 'defaultCountry' instead to ensure the exact
          // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
          // will always have higher priority than 'loginHint' which will be ignored
          // in their favor. In this case, the default country will be 'GB' even
          // though 'loginHint' specified the country code as '+1'.
          loginHint: '+11234567890'
        }
      ]
    });
    

Iniciar sesión

Para iniciar el flujo de inicio de sesión de FirebaseUI, inicialice la instancia de FirebaseUI pasando la instancia de Auth subyacente.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Defina el elemento HTML donde se representará el widget de inicio de sesión de FirebaseUI.

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

Especifique la configuración de FirebaseUI (proveedores admitidos y personalizaciones de UI, así como devoluciones de llamada exitosas, etc.).

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

Por último, renderiza la interfaz de autenticación de FirebaseUI:

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

Actualización de usuarios anónimos

Habilitación de la actualización de usuario anónimo

Cuando un usuario anónimo inicia sesión o se registra con una cuenta permanente, desea asegurarse de que el usuario pueda continuar con lo que estaba haciendo antes de registrarse. Para hacerlo, simplemente establezca autoUpgradeAnonymousUsers en true cuando configure la interfaz de usuario de inicio de sesión (esta opción está deshabilitada de forma predeterminada).

Manejo de conflictos de combinación de actualizaciones de usuarios anónimos

Hay casos en los que un usuario, que inicialmente inició sesión de forma anónima, intenta actualizarse a un usuario de Firebase existente. Dado que un usuario existente no se puede vincular a otro usuario existente, FirebaseUI activará la devolución de llamada signInFailure con un código de error firebaseui/anonymous-upgrade-merge-conflict cuando ocurra lo anterior. El objeto de error también contendrá la credencial permanente. El inicio de sesión con la credencial permanente debe activarse en la devolución de llamada para completar el inicio de sesión. Antes de poder completar el inicio de sesión a través auth.signInWithCredential(error.credential) , debe guardar los datos del usuario anónimo y eliminar el usuario anónimo. Luego, después de completar el inicio de sesión, copie los datos nuevamente al usuario no anónimo. Un ejemplo a continuación ilustra cómo funcionaría este flujo.

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

Próximos pasos

  • Para obtener más información sobre el uso y la personalización de FirebaseUI, visite el LÉAME .
  • Si encuentra un problema en FirebaseUI y desea informarlo, use el rastreador de problemas de GitHub .