Neste artigo, mostrarei como usar o recurso Two Factor Authentication da Identity em uma aplicação ASP .NET Core MVC. Veremos como usar o recurso Two Factor Authentication em uma aplicação ASP .NET Core 2.0 MVC.
Eu já introduzi os conceitos básicos do Identity neste artigo: ASP .NET Core – Introdução ao Identity – Macoratti.net.
Se você está chegando agora e não sabe o que é Identity, sugiro que leia o artigo introdutório.
Recursos usados:
Criando o projeto no VS 2017
Abra o VS 2017 Community e crie um novo projeto ASP .NET Core usando o template Empty.
- Create New Project;
- Visual C# -> Web -> ASP .NET Core Web Application;
- Informe o nome AspCoreTwoFactor;
- Selecione o template Web Application (Model-View-Controller), marque ASP .NET Core 2.0, e clique em Change Authentication, selecionando a seguir, a opção: Individual User Accounts:
Confirme as opções clicando em OK para criar o projeto.
Ao final, teremos o projeto criado com a seguinte estrutura:
Controllers
HomeController – Controladores para Home, About, Contact.
AccountController – Controladores para Login, Register, ForgotPassword, etc.
ManageController – Controladores para Alterar Senha, gerenciar perfil, para incluir two-factor authentication, etc.
Data
Classe ApplicationDBContext com diferentes scripts de migração para criar as tabelas do banco de dados
Extensions
Classes para confirmação do e-mail, reset password, etc.
Models
Account (Login, Register, etc).
Manage (ChangePassword, EnableAuthentication, etc).
ApplicationUser.
ErrorViewModel.
Services
Serviço para enviar e-mail.
Views
Views para Account, Manage, Home, About, Contact, etc.
Startup.cs – arquivo de inicialização da aplicação.
O recurso Identity está habilitado para o aplicativo chamando app.UseAuthentication() no método Configure da classe Startup. Isso adiciona uma autenticação baseada em cookie ao pipeline de solicitação.
Executando a aplicação iremos obter a página inicial com os links para registrar um usuário e fazer o login:
Ao registrar um usuário na primeira vez, você vai obter uma página com a mensagem de erro conforme mostrada a seguir. Basta clicar no botão Apply Migrations e dar um Refresh na página:
A página será recarregada e exibirá o e-mail do usuário registrado e o link para fazer o log out:
Se você chegou até aqui e não conhece o Identity, acesse o artigo indicado no início para ver uma explicação do que aconteceu.
A partir daqui, vamos continuar focando na habilitação do recurso Two Factor Authentication.
Usando o recurso Two Factor Authentication
O recurso Two-factor authentication ou autenticação em duas etapas (também conhecida como 2FA) é uma tecnologia patenteada em 1984 que proporciona a identificação de usuários por meio da combinação de dois componentes diferentes.
Esses componentes podem ser algo que o usuário conhece, algo que o usuário possui ou algo que é inseparável do usuário. Um exemplo é o saque em caixa eletrônico. Apenas a combinação correta do cartão bancário (algo que o utilizador possui) e um PIN (número de identificação pessoal, ou seja, algo que o utilizador conhece) permite que a transação seja realizada. (Wikipédia)
Assim, com a verificação em duas etapas, além de informar o nome de usuário e a senha, é preciso utilizar informações adicionais para obter o acesso ao serviço, como na utilização de códigos em dispositivos móveis por SMS ou geradores de acesso pelo aplicativo, como é o caso do Facebook.
A ASP .NET Identity já traz praticamente tudo pronto e permite configurar e habilitar o uso desse recurso em aplicações ASP .NET Core.
Na página da aplicação, após ter registrado o usuário, ao clicar no nome do usuário exibido na página você será direcionado para a seguinte tela:
A seguir, clique no link Two-factor authentication para ir para a seguinte página:
Agora você vai clicar no botão “Add authenticator app” e isso vai chamar o método EnableAuthenticator(Get) do controlador ManageController que vai chamar internamente o método GenerateQrCodeUri:
private string GenerateQrCodeUri(string email, string unformattedKey) { return string.Format( AuthenicatorUriFormat, _urlEncoder.Encode("AspCoreTwoFactor"), _urlEncoder.Encode(email), unformattedKey); }
O método GenerateQrCodeUri, que vemos acima vai gerar o código que será incluindo no autenticador da aplicação conforme mostrado a seguir. Lembrando que a geração do QR Code não está habilitada por padrão.
Será gerado um código de verificação que você deve informar em Verification Code na página.
Quando você clica no botão Verify, o método EnableAuthenticator do controlador ManageController será chamado e por sua vez, chamará internamente o método VerifyTwoFactorTokenAsync, que irá verificar o token contra o token que está armazenado em seu nome de usuário quando você baixou o aplicativo do autenticador.
Veremos agora como habilitar a geração do QR Code nesta página e habilitar o recurso.
Habilitando a geração do QRCode
Para habilitar a geração do QR Code na página, vamos usar a biblioteca javascript qrcode.js que pode ser obtida no link abaixo:
Faça o download da biblioteca qrcode.js e a copie para a pasta wwwroot\lib do projeto.
A seguir, abra a view EnableAuthenticator.cshtml na pasta Views/Manage/ do projeto e na seção de scripts da página inclua o código:
@section Scripts { @await Html.PartialAsync("_ValidationScriptsPartial") <script type="text/javascript" src="~/lib/qrcode.js"></script> <script type="text/javascript"> new QRCode(document.getElementById("qrCode"), { text: "@Html.Raw(Model.AuthenticatorUri)", width: 150, height: 150 }); </script> }
Execute novamente o projeto e repita a operação para habilitar o two-factor authentication.
Agora amos obter a página com o QR Code gerado:
Pronto! Agora é só alegria, basta escanear o QR Code.