1. Configurar
Fazer o download do código-fonte
Neste codelab, você vai começar com uma versão quase completa do app de exemplo Friendly Chat, então 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ê vai trabalhar no restante deste codelab:
$ cd codelab-friendlychat-web/security-start
Agora, instale as dependências para 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 app de exemplo. O diretório security-start é onde você trabalhará com o codelab e não tem algumas partes importantes da implementação da autenticação. Os principais arquivos e recursos em security-start/ e security-solution/ são:
functions/index.jsconté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 app de chat.public/scripts/main.js: onde o código JS do app de chat (src/index.js) é compilado.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 seu 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 vai criar o main.js dentro do diretório public/scripts/.
webpack build
Em seguida, confirme 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 ao seu projeto do Firebase
Se você não tem um projeto do Firebase, crie um novo no Console do Firebase. Anote o ID do projeto escolhido, porque 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 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ê já pode executar o app.
2. Executar os emuladores
Nesta seção, você 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 este 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 à medida que você fizer alterações. Você só precisará atualizar (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 All emulators ready aparecer, o app estará pronto para uso.
3. Como implementar a autenticação multifator (MFA)
A MFA foi parcialmente implementada neste repositório. Você adicionará o código para inscrever um usuário na MFA e depois solicitará um segundo fator aos usuários inscritos.
No editor, abra o arquivo src/index.js e encontre o método startEnrollMultiFactor(). Adicione o seguinte código para configurar o verificador reCAPTCHA que vai evitar abusos por telefone. O verificador reCAPTCHA é definido como invisível e não fica 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 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 registrados na autenticação multifator (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ído. Para conferir como elas funcionam, navegue pelo restante do arquivo.
4. Tentar fazer login com a autenticação multifator (MFA) nos emuladores
Agora, experimente a implementação de MFA. Verifique se os emuladores ainda estão em execução e acesse o app hospedado localmente em localhost:5170. Tente fazer login. Quando for solicitado que você forneça o código MFA, você verá o código MFA em sua janela de terminal.
Como os emuladores são totalmente compatíveis com a autenticação multifator, o ambiente de desenvolvimento pode ser totalmente independente.
Para saber mais sobre a implementação da MFA, consulte nossa documentação de referência.
5. Criar uma função de bloqueio
Alguns aplicativos são destinados somente a um grupo específico de usuários. Nesses casos, você pode criar requisitos personalizados para que os usuários se inscrevam ou façam login no app.
É isso que as funções de bloqueio oferecem: uma maneira de criar requisitos de autenticação personalizados. Elas são funções do Cloud, mas, diferente da maioria das funções, são executadas de forma síncrona quando um usuário tenta se inscrever ou fazer login.
Para criar uma função de bloqueio, abra functions/index.js no seu editor e encontre a função beforecreated comentada.
Substitua-o por este código que permite que apenas usuários com o 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. 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 a conclusão da operação.
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, você pode criar as restrições necessárias em relação à autenticação. Para saber mais, consulte os documentos de referência.
Resumo
Bom trabalho! Você adicionou a autenticação multifator a um app da Web para ajudar os usuários a proteger a conta e criou requisitos personalizados para que os usuários se inscrevam usando funções de bloqueio. Você realmente ganhou um GIF!
