Recursos avançados de autenticação

1. Configurar

Fazer o download do código-fonte

Neste codelab, você vai começar com uma versão do app de exemplo Friendly Chat que está quase concluída. Portanto, a primeira coisa que você precisa fazer é clonar o código-fonte:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

Em seguida, acesse o diretório security-start, onde você vai trabalhar pelo restante deste codelab:

$ cd codelab-friendlychat-web/security-start

Agora instale as dependências para executar o código. Se você estiver com uma conexão de Internet mais lenta, isso pode levar um ou dois minutos:

$ npm install && (cd functions && npm install)

Conheça este repositório

O diretório security-solution/ contém o código completo do app de exemplo. O diretório security-start é onde você trabalhará com o codelab. Algumas partes importantes da implementação da autenticação estão ausentes. Os principais arquivos e recursos em security-start/ e security-solution/ são:

• functions/index.js contém o código do Cloud Functions, e é nele que você vai escrever funções de bloqueio de autenticação.
• public/: contém os arquivos estáticos para seu app de chat.
• public/scripts/main.js: onde o código JS do app de chat (src/index.js) é compilado para
• src/firebase-config.js: contém o objeto de configuração do Firebase usado para inicializar o app de chat.
• src/index.js: código JS do app de chat

Instalar a CLI do Firebase

O Pacote de emuladores faz parte da CLI (interface de linha de comando) do Firebase, que pode ser instalada na sua máquina com o seguinte comando:

$ npm install -g firebase-tools@latest

Crie o JavaScript com o webpack, que criará o main.js dentro do diretório public/scripts/.

webpack build

Em seguida, verifique se você tem a versão mais recente da CLI. Este codelab funciona com a versão 11.14 ou mais recente.

$ firebase --version
11.14.2

Conectar-se ao seu projeto do Firebase

Se você não tiver um projeto do Firebase, crie um novo projeto no Console do Firebase. Anote o ID do projeto que escolher. Você precisará dele mais tarde.

Agora você precisa conectar esse código ao seu projeto do Firebase. Primeiro, execute o seguinte comando para fazer login na CLI do Firebase:

$ firebase login

Em seguida, execute o comando a seguir para criar um alias de projeto. Substitua $YOUR_PROJECT_ID pelo ID do projeto do Firebase.

$ firebase use $YOUR_PROJECT_ID

Agora você já pode executar o app.

2. Executar os emuladores

Nesta seção, você vai executar o app localmente. Isso significa que é hora de inicializar o Pacote de emuladores.

Iniciar os emuladores

No diretório de origem do codelab, execute o seguinte comando para iniciar os emuladores:

$ firebase emulators:start

Isso disponibilizará seu aplicativo em http://127.0.0.1:5170 e recriará continuamente seu código-fonte conforme você faz alterações. Você só precisa fazer a atualização forçada (ctrl-shift-r) localmente no seu navegador para ver as alterações.

O resultado deve ser parecido com este:

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  hosting[demo-example]: Serving hosting files from: ./public
✔  hosting[demo-example]: Local server: http://127.0.0.1:5170
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "[...]" for Cloud Functions...
✔  functions: Loaded functions definitions from source: beforecreated.
✔  functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated).
i  Running script: npm start
 
> security@1.0.0 start
> webpack --watch --progress
[...]
webpack 5.50.0 compiled with 1 warning in 990 ms

Quando a mensagem Todos os emuladores prontos aparecer, o app estará pronto para uso.

3. Implementação da autenticação multifator (MFA)

A MFA foi parcialmente implementada neste repositório. Adicione o código para inscrever um usuário na MFA e solicitar um segundo fator para os usuários inscritos.

OBSERVAÇÃO: estes são os principais métodos usados para implementar a MFA:

• getMultiFactorResolver(): recebe um objeto MultiFactorResolver que é usado para facilitar o login do usuário quando ele precisa fornecer um segundo fator
• verifyPhoneNumber(): envia uma mensagem de verificação ao smartphone do usuário para inscrição na MFA e login
• resolveSignIn(): usada para concluir o login depois de o usuário informar o código de verificação enviado a ele
• enroll(): usado para concluir a inscrição na MFA depois que o usuário fornecer o código de verificação enviado a ele

No editor, abra o arquivo src/index.js e encontre o método startEnrollMultiFactor(). Adicione o código a seguir para configurar o verificador reCAPTCHA que vai impedir o abuso do smartphone. Esse verificador é definido como invisível e não aparece para os usuários:

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

Em seguida, encontre o método finishEnrollMultiFactor() e adicione o código abaixo para registrar o segundo fator:

// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
  // Ask user for the verification code. Then:
  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
 
  // Complete enrollment.
  await multiFactor(getAuth().currentUser)
    .enroll(multiFactorAssertion)
    .catch(function (error) {
      alert(`Error finishing second factor enrollment. ${error}`);
      throw error;
    });
  verificationId = null;
}

Em seguida, encontre a função signIn e adicione o fluxo de controle abaixo, que solicita que os usuários inscritos na MFA insiram o segundo fator:

async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider)
    .then(function (userCredential) {
      // User successfully signed in and is not enrolled with a second factor.
    })
    .catch(function (error) {
      if (error.code == "auth/multi-factor-auth-required") {
        multiFactorResolver = getMultiFactorResolver(getAuth(), error);
        displaySecondFactor(multiFactorResolver.hints);
      } else {
        alert(`Error signing in user. ${error}`);
      }
    });
}

O restante da implementação, incluindo as funções invocadas aqui, já está concluída. Para ver como eles funcionam, navegue pelo restante do arquivo.

4. Tente fazer login com a autenticação multifator (MFA) nos emuladores

Agora teste a implementação da autenticação multifator (MFA). Confira se os emuladores ainda estão em execução e acesse o app hospedado localmente em localhost:5170. Tente fazer login e, quando for solicitado a fornecer o código de MFA, você o verá na janela do terminal.

Como os emuladores oferecem suporte total à autenticação multifator, seu ambiente de desenvolvimento pode ser totalmente autônomo.

Para saber mais sobre a implementação da MFA, consulte nossos documentos de referência.

5. Criar uma função de bloqueio

Alguns aplicativos devem ser usados apenas por um grupo específico de usuários. Nesses casos, convém criar requisitos personalizados para que um usuário se inscreva ou faça login no seu app.

É isso que as funções de bloqueio oferecem: uma forma de criar requisitos de autenticação personalizados. Elas são funções do Cloud, mas, diferente da maioria das funções, elas são executadas de forma síncrona quando um usuário tenta se inscrever ou fazer login.

OBSERVAÇÃO: uma função de bloqueio pode aceitar um usuário sem alterações, aceitar e alterar um usuário, o que é útil para aplicar declarações personalizadas ou negar o usuário.

Há dois eventos que podem acionar uma função de bloqueio:

• Eventos beforeUserCreated: acionados antes da criação de uma conta de usuário, podem ser usados para especificar os requisitos para que os usuários criem uma conta
• Eventos beforeUserSignedIn: acionados antes de um usuário fazer login, podem ser usados para especificar os requisitos de login dos usuários

Para criar uma função de bloqueio, abra functions/index.js no editor e encontre a função beforecreated comentada.

Substitua-o por este código que permite que apenas usuários com um domínio de example.com criem uma conta:

exports.beforecreated = beforeUserCreated((event) => {
  const user = event.data;
  // Only users of a specific domain can sign up.
  if (!user.email || !user.email.endsWith("@example.com")) {
    throw new HttpsError("invalid-argument", "Unauthorized email");
  }
});

6. Testar a função de bloqueio nos emuladores

Para testar a função de bloqueio, verifique se os emuladores estão em execução e, no app da Web em localhost:5170, saia.

Em seguida, tente criar uma conta com um endereço de e-mail que não termine em example.com. A função de bloqueio vai impedir que a operação seja bem-sucedida.

Agora, tente novamente com um endereço de e-mail que termine em example.com. A conta será criada.

Com as funções de bloqueio, é possível criar as restrições necessárias relacionadas à autenticação. Para saber mais, consulte os documentos de referência.

Resumo

Muito bem! Você adicionou a autenticação multifator a um app da Web para ajudar os usuários a proteger as contas e criou requisitos personalizados para que os usuários se inscrevam usando funções de bloqueio. Você ganhou um gif!