Recursos avançados de autenticação

1. Configurar

Obtenha o código-fonte

Neste codelab, você começa com uma versão do aplicativo de amostra Friendly Chat que está quase completa. 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, vá para o diretório security-start , onde você trabalhará no restante deste codelab:

$ cd codelab-friendlychat-web/security-start

Agora, instale as dependências para poder executar o código. Se você estiver em 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 aplicativo de amostra. O diretório security-start é onde você trabalhará no codelab e faltam algumas partes importantes da implementação de autenticação. 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 é onde você escreverá funções de bloqueio de autenticação.
• public/ - contém os arquivos estáticos do seu aplicativo de bate-papo
• public/scripts/main.js - onde o código JS do seu aplicativo de bate-papo ( src/index.js ) é compilado
• src/firebase-config.js – contém o objeto de configuração do Firebase usado para inicializar seu aplicativo de bate-papo
• src/index.js - código JS do seu aplicativo de bate-papo

Obtenha a CLI do Firebase

O Emulator Suite faz parte da Firebase CLI (interface de linha de comando), que pode ser instalada em sua máquina com o seguinte comando:

$ npm install -g firebase-tools@latest

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

webpack build

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

$ firebase --version
11.14.2

Conecte-se ao seu projeto do Firebase

Se você não tiver um projeto do Firebase, no console do Firebase , crie um novo projeto do Firebase. Anote o ID do projeto escolhido, pois você precisará dele mais tarde.

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

$ firebase login

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

$ firebase use $YOUR_PROJECT_ID

Agora você está pronto para executar o aplicativo!

2. Execute os emuladores

Nesta seção, você executará o aplicativo localmente. Isso significa que é hora de inicializar o Emulator Suite.

Inicie os emuladores

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

$ firebase emulators:start

Isso servirá seu aplicativo em http://127.0.0.1:5170 e reconstruirá continuamente seu código-fonte conforme você faz alterações. Você só precisará atualizar (ctrl-shift-r) localmente em seu navegador para ver suas alterações.

Você deverá ver alguma saída como esta:

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

Depois de ver a mensagem Todos os emuladores prontos , o aplicativo estará pronto para uso.

3. Implementação da AMF

A MFA foi parcialmente implementada neste repo. Você adicionará o código para primeiro inscrever um usuário na MFA e depois solicitar aos usuários inscritos na MFA um segundo fator.

NOTA: Estes são os métodos principais que você usará para implementar o MFA:

• getMultiFactorResolver() : obtém 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 para o telefone do usuário para inscrição e login no MFA
• resolveSignIn() : usado para concluir o login depois que o usuário forneceu o código de verificação enviado a ele
• enroll() : usado para concluir a inscrição no MFA depois que o usuário forneceu o código de verificação enviado a ele

Em seu editor, abra o arquivo src/index.js e encontre o método startEnrollMultiFactor() . Adicione o seguinte código para configurar o verificador reCAPTCHA que evitará abusos telefônicos (o verificador reCAPTCHA está definido como invisível e não ficará visível 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 seguinte para inscrever 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 seguinte fluxo de controle que solicita aos usuários inscritos no MFA que insiram seu 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 resto da implementação, incluindo as funções invocadas aqui, já está completa. Para ver como eles funcionam, navegue pelo restante do arquivo.

4. Experimente fazer login com MFA nos emuladores

Agora experimente a implementação do MFA! Certifique-se de que seus emuladores ainda estejam em execução e visite o aplicativo hospedado localmente em localhost:5170 . Tente fazer login e, quando for solicitado a fornecer o código MFA, você verá o código MFA na janela do terminal.

Como os emuladores oferecem suporte total ao Multi-Factor Auth, seu ambiente de desenvolvimento pode ser totalmente independente.

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

5. Crie uma função de bloqueio

Alguns aplicativos devem ser usados ​​apenas por um grupo específico de usuários. Nesses casos, você deseja criar requisitos personalizados para que um usuário se inscreva ou faça login no seu aplicativo.

É isso que as funções de bloqueio fornecem: uma maneira de criar requisitos de autenticação personalizados. Eles são Cloud Functions, mas, diferentemente da maioria das funções, são executados de forma síncrona quando um usuário tenta se inscrever ou fazer login.

NOTA: 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.

Existem 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 requisitos para os usuários criarem uma conta
• Eventos beforeUserSignedIn : acionados antes de um usuário entrar – podem ser usados ​​para especificar requisitos para os usuários fazerem login

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

Substitua-o por este código que permite que apenas usuários com domínio 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. Experimente a função de bloqueio nos emuladores

Para experimentar a função de bloqueio, certifique-se de que seus emuladores estejam em execução e, no aplicativo 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 impedirá o sucesso da operação.

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

Com funções de bloqueio, você pode criar quaisquer restrições necessárias em relação à autenticação. Para saber mais, consulte os documentos de referência .

Recapitular

Bom trabalho! Você adicionou a autenticação multifator a um aplicativo da web para ajudar os usuários a manter suas contas seguras e, em seguida, criou requisitos personalizados para os usuários se inscreverem usando funções de bloqueio. Você definitivamente ganhou um gif!