Adicione facilmente login ao seu aplicativo da Web com FirebaseUI

FirebaseUI é uma biblioteca criada com base no SDK do Firebase Authentication que fornece fluxos de IU integrados para uso em seu aplicativo. FirebaseUI oferece os seguintes benefícios:

  • Vários provedores - fluxos de login para e-mail/senha, link de e-mail, autenticação de telefone, login do Google, Facebook, Twitter e GitHub.
  • Vinculação de contas - fluxos para vincular com segurança contas de usuários entre provedores de identidade.
  • Personalização - substitua os estilos CSS do FirebaseUI para atender aos requisitos do seu aplicativo. Além disso, como o FirebaseUI é de código aberto, você pode bifurcar o projeto e personalizá-lo exatamente de acordo com suas necessidades.
  • Inscrição com um toque e login automático - integração automática com inscrição com um toque para login rápido em vários dispositivos.
  • UI localizada – internacionalização para mais de 40 idiomas .
  • Atualizando usuários anônimos - capacidade de atualizar usuários anônimos por meio de login/inscrição. Para obter mais informações, visite a seção Atualizando usuários anônimos .

Antes de você começar

  1. Adicione o Firebase Authentication ao seu aplicativo da Web , garantindo que você esteja usando a versão 9 compatível (recomendada) ou o SDK mais antigo (veja a barra lateral acima).

  2. Inclua FirebaseUI por meio de uma das seguintes opções:

    1. CDN

      Inclua o seguinte script e arquivo CSS na tag <head> da sua página, abaixo do snippet de inicialização do 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 o FirebaseUI e suas dependências via npm usando o seguinte comando:

      $ npm install firebaseui --save

      require os seguintes módulos em seus arquivos de origem:

      var firebase = require('firebase');
var firebaseui = require('firebaseui');

    3. Componente Bower

      Instale o FirebaseUI e suas dependências via Bower usando o seguinte comando:

      $ bower install firebaseui --save

      Inclua os arquivos necessários em seu HTML, se o seu servidor HTTP servir os arquivos 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

Depois de importar o SDK, inicialize a IU de autenticação.

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

Configurar métodos de login

Antes de usar o Firebase para fazer login de usuários, você deve ativar e configurar os métodos de login que deseja oferecer suporte.

Endereço de e-mail e senha

  1. No console do Firebase , abra a seção Autenticação e habilite a autenticação por e-mail e senha.

  2. Adicione o ID do provedor de e-mail à lista de FirebaseUI signInOptions .

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  3. Opcional : O EmailAuthProvider pode ser configurado para exigir que o usuário insira um nome de exibição (o padrão é true ).

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});

  1. No console do Firebase , abra a seção Autenticação . Na guia Método de login , habilite o provedor de e-mail/senha . Observe que o login por e-mail/senha deve estar habilitado para usar o login por link de e-mail.

  2. Na mesma seção, habilite o método de login do link de e-mail (login sem senha) e clique em Salvar .

  3. Adicione o ID do provedor de e-mail à lista de FirebaseUI signInOptions junto com o link de e-mail 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. Ao renderizar a interface do usuário de login condicionalmente (relevante para aplicativos de página única), use ui.isPendingRedirect() para detectar se a URL corresponde a um link de login com email e se a interface do usuário precisa ser renderizada para concluir o login.

    // 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 : o EmailAuthProvider para login de link de e-mail pode ser configurado para permitir ou impedir que o usuário conclua o login entre dispositivos.

    Um retorno de chamada emailLinkSignIn opcional pode ser definido para retornar a configuração firebase.auth.ActionCodeSettings a ser usada ao enviar o link. Isso fornece a capacidade de especificar como o link pode ser tratado, link dinâmico personalizado, estado adicional no link direto, etc. Quando não fornecido, o URL atual é usado e um fluxo somente da web é acionado.

    O login do link de e-mail no FirebaseUI-web é compatível com FirebaseUI-Android e FirebaseUI-iOS , onde um usuário que inicia o fluxo no FirebaseUI-Android pode abrir o link e concluir o login com o FirebaseUI-web. O mesmo se aplica ao fluxo oposto.

    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'
          }
        };
      }
    }
  ]
});

Provedores OAuth (Google, Facebook, Twitter e GitHub)

  1. No console do Firebase , abra a seção Autenticação e ative o login do provedor OAuth especificado. Certifique-se de que o ID e o segredo do cliente OAuth correspondentes também estejam especificados.

  2. Também na seção Autenticação , certifique-se de que o domínio onde sua página de login será renderizada também seja adicionado à lista de domínios autorizados.

  3. Adicione o ID do provedor OAuth à lista de FirebaseUI signInOptions .

    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 escopos customizados ou parâmetros OAuth customizados por provedor, você pode passar um objeto em vez de apenas o valor do provedor:

    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 telefone

  1. No console do Firebase , abra a seção Autenticação e ative o login por número de telefone.

  2. Certifique-se de que o domínio onde sua página de login será renderizada também seja adicionado à lista de domínios autorizados.

  3. Adicione o ID do provedor de número de telefone à lista de FirebaseUI signInOptions .

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. Opcional : o PhoneAuthProvider pode ser configurado com parâmetros reCAPTCHA personalizados, independentemente de o reCAPTCHA estar visível ou invisível (o padrão é normal). Consulte a documentação da API reCAPTCHA para obter mais detalhes.

    O país padrão a ser selecionado na entrada do número de telefone também pode ser definido. Consulte a lista de códigos de países suportados para obter a lista completa de códigos. Se não for especificado, a entrada do número de telefone será padronizada para os Estados Unidos (+1).

    As seguintes opções são atualmente suportadas.

    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'
    }
  ]
});

Entrar

Para iniciar o fluxo de login do FirebaseUI, inicialize a instância do FirebaseUI passando a instância Auth subjacente.

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

Defina o elemento HTML onde o widget de login do FirebaseUI será renderizado.

<!-- 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 a configuração do FirebaseUI (provedores suportados e personalizações de IU, bem como retornos de chamada bem-sucedidos, 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 fim, renderize a interface FirebaseUI Auth:

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

Atualizando usuários anônimos

Habilitando atualização de usuário anônimo

Quando um usuário anônimo entra ou se inscreve com uma conta permanente, você quer ter certeza de que o usuário pode continuar com o que estava fazendo antes de se inscrever. Para fazer isso, basta definir autoUpgradeAnonymousUsers como true ao configurar a IU de login (esta opção está desabilitada por padrão).

Lidando com conflitos de mesclagem de atualização de usuários anônimos

Há casos em que um usuário, inicialmente conectado anonimamente, tenta atualizar para um usuário existente do Firebase. Como um usuário existente não pode ser vinculado a outro usuário existente, o FirebaseUI acionará o retorno de chamada signInFailure com um código de erro firebaseui/anonymous-upgrade-merge-conflict quando o acima ocorrer. O objeto de erro também conterá a credencial permanente. A entrada com a credencial permanente deve ser acionada no retorno de chamada para concluir a entrada. Antes que o login possa ser concluído por meio de auth.signInWithCredential(error.credential) , você deve salvar os dados do usuário anônimo e excluí-lo. Então, após a conclusão do login, copie os dados de volta para o usuário não anônimo. Um exemplo abaixo ilustra como esse fluxo funcionaria.

// 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 passos

  • Para obter mais informações sobre como usar e personalizar o FirebaseUI, visite o README .
  • Se você encontrar um problema no FirebaseUI e quiser relatá-lo, use o rastreador de problemas do GitHub .