Primeiras aulas do curso ASP.NET Identity parte 3: Autorização, autenticação externa com redes sociais

ASP.NET Identity parte 3: Autorização, autenticação externa com redes sociais

Conhecendo os mecanismos de autenticação externa - Introdução

Bem vindo a essa terceira parte do nosso curso de ASP.NET Identity e aqui vamos ver uns recursos muito interessantes, como por exemplo, nosso usuário, quando ele vai se registrar, às vezes ele não quer preencher todo esse formulário com todas essas coisas e sabe o que é comum? Autenticação externa.

Vamos aprender como funciona a autenticação externa e vamos implementar a autenticação externa usando o Google, mas vamos aprender que esse mecanismo é o mesmo tanto para o Google, quanto para o Twitter, quanto para uma conta Microsoft. Vamos aprender como isso funciona, é da mesma forma que os grandes aplicativos que usamos também funcionam. Vamos ver como funciona isso.

Vamos implementar também roles, funções de acesso por meio de roles, como elas funcionam no ASP.NET Identity, como devemos implementar isso e ainda vamos passar por mais classes importantes desse framework, como RoleStore, o RoleManager e também o relacionamento deles com o nosso banco de dados. Aguardo você para essa terceira parte e vamos lá.

Conhecendo os mecanismos de autenticação externa - Autenticacao externa com o Google

Nós como desenvolvedores tomamos muito cuidado para armazenar esse usuário e essa senha no nosso banco de dados, não apenas no ponto de vista que a nossa tabela de usuários não guarda uma senha bruta, mas também porque precisamos dar a habilidade do usuário, o usuário que de fato é dono de uma conta, ele recuperar sua senha.

E para isso, geramos aquele token e enviamos por e-mail e para enviar para o e-mail, temos que ter certeza que aquele e-mail é, de fato, o e-mail desse usuário. Então confirmamos o e-mail do nosso usuário.

Mas, como desenvolvedores, assumimos muitas responsabilidades para fazer esse tipo de trabalho e como usuário, ganhamos mais um formulário para preencher, mais um site para nós colocarmos o nosso e-mail, mais um site para nós termos uma senha diferente e lembrarmos que senha foi essa. Então como usuário, não é uma experiência tão boa e como desenvolvedor, nós temos muitas responsabilidades.

Vamos imaginar um cenário em que e-mail e senha não fossem necessários, um cenário em que o usuário simplesmente entrasse no fórum, um cenário em que o usuário, ele usasse a aplicação e não precisasse se preocupar em mais um formulário para preencher, mais uma senha para lembrar.

Isso existe atualmente e eu trago um exemplo muito interessante para nós analisarmos aqui, que é o próprio portal da Alura, no portal da Alura, eu clico em Login e eu posso fazer login por meio do meu e-mail e da minha senha, mas eu tenho a opção também de fazer login pelo Facebook e eu posso clicar aqui, quando eu clico aqui no Facebook, no caso, eu não estou logado por isso ele pediu meu usuário e minha senha.

Estamos dando a responsabilidade de autenticar o usuário para o Facebook, então é o Facebook que tem a responsabilidade de guardar essas senhas, é o Facebook que tem a responsabilidade de proteger seus servidores contra ataques de pessoas que querem descobrir essas senhas, é o Facebook que se preocupa em como o usuário vai recuperar sua senha e podemos trazer esse mecanismo para o nosso fórum.

Então o usuário, ao invés dele preencher mais um formulário e lembrar de mais uma senha e nós, como desenvolvedores, nós nos preocuparmos em confirmar esse e-mail, podemos pedir para o Facebook, como autenticador externo, para ele simplesmente responder para nós se o usuário é quem ele diz que ele é e o usuário dizendo quem ele é, é quando o usuário fazer o login no Facebook.

Aqui eu estou trazendo como exemplo a Alura, a Alura usa o Facebook, mas é o mesmo padrão, é o mesmo sistema, tanto para o Facebook, tanto para a conta Google, para a conta na Microsoft, para o Twitter, funcionam de forma muitíssimo semelhantes.

Vamos trazer isso para o Fórum ByteBank? Eu não vou usar o Facebook, nós já estamos usando o Gmail para fazer o envio de e-mail e a minha própria conta, para eu fazer login aqui no fórum, também é do Gmail. Então vamos fazer essa configuração no Google, mas os conceitos que usaremos para criar isso no Google, ele também se aplica ao Facebook, ao Twitter e a outras redes sociais que permitem esse tipo de autenticação.

Isso é tão valioso, que encontramos sistemas, aplicações, que nem permitem que você faça o cadastro sem ter uma conta em uma rede social, por exemplo, o Instagram, você sempre faz pelo Facebook, dada os benefícios que temos usando autenticadores externos.

Eu falei que eu ia fazer no Google, então vamos entrar no site do Google, mas é um site diferente, é um site de desenvolvedor, então eu vou digitar “console.developers.google.com”, esse cadastro, precisamos configurar a nossa aplicação no Google, isso não é uma configuração que fazemos apenas na nossa aplicação, precisamos dizer para o Google que nós vamos usar ele como autenticador externo.

Aqui eu vou fazer login usando guilherme.costa.bytebank, mas é apenas uma coincidência esse e-mail ser o usuário do fórum, esse e-mail, ele não precisa ter nenhuma ligação com a nossa aplicação, eu vou digitar a minha senha.

Estamos entrando no portal de desenvolvedor do Google e a interface do Google pede que nós criamos um projeto, eu vou criar um projeto, esse projeto é o projeto do ByteBank, do Fórum ByteBank, então o nome que eu vou dar é “bytebank-forum”, eu vou dar um zoom para vocês enxergarem melhor e eu vou clicar em Criar.

Projeto criado. Aqui na verdade, ele está criando e eu recebi uma notificação que ele foi criado com sucesso. Estamos aqui, eu voltei para a home da console do desenvolvedor do Google e aqui no canto superior esquerdo, eu tenho essa opção Selecionar Um Projeto, eu vou selecionar o projeto que acabamos de criar, o bytebank-forum.

Selecionei o bytebank-forum. Não há APIs ou serviços ativados, o que é um serviço ativado? Como é o Google, temos uma gama de serviços que podemos usar, temos o Google Maps, temos a pesquisa no Google inclusive, temos o Google Plus, que é a rede social do Google.

E para nós autenticarmos a nossa aplicação usando o autenticador externo, vamos usar o Google Plus, que é a rede social do Google, então o nosso usuário tendo uma conta Google, ele já consegue autenticar por lá.

Então vamos lá, eu vou clicar em Ativar APIs E Serviços e aqui no campo de busca, eu vou digitar “google+” que é o Google Plus, eu tenho aqui Google+ API, eu vou clicar aqui e eu tenho a opção de Ativar, então eu tenho um projeto que é o bytebank-forum, esse projeto do bytebank-forum não vai fazer o uso do Google Maps, não vai fazer uso do sistema de busca, vai fazer o uso somente do Google Plus.

Aqui ele está carregando, carregou e nós criamos o nosso projeto e nós estamos fazendo uso dessa API do Google Plus e para o nosso sistema entrar em contato com o Google, vamos criar também um usuário e uma senha para ele, então eu vou clicar aqui Criar Credenciais.

Cliquei em Criar Credenciais e vamos lá, Qual API Você Usa? Google Plus API, eu vou manter essa opção, De Onde Você Chamará a API? Vamos chamar a API a partir de um servidor da web, a nossa aplicação é uma aplicação web, é um portal web que o usuário acessa pelo navegador. Que Dados Você Acessará? Nós só precisamos dos dados do usuário, nós só precisamos autenticar o nosso usuário, é essa opção que eu vou marcar.

Eu vou clicar nesse botão Preciso De Quais Credenciais? e aqui vamos criar nossas credenciais, o nome eu vou usar “ClienteWEB” e precisamos definir qual é a url do nosso serviço, da nossa aplicação, aqui no caso, como estamos desenvolvendo no Visual Studio, é o localhost, então “http://localhost” e a nossa aplicação, ela tem uma porta que precisamos explicitar aqui.

Para verificar essa porta, eu vou entrar no Gmail e vamos ver um dos e-mails que recebemos do fórum, é a porta 50360, então “http://localhost:50360”.

Agora, URI De Redirecionamento Autorizado, vamos ver isso com mais detalhes, mas é qual a página que o nosso usuário vai ser redirecionado depois que ele autenticar no Google, então vou clicar aqui para adicionar uma, eu coloquei 50360 e como convenção, eu vou usar a url “signin-google”, usei essa url aqui e eu vou clicar em Criar Id Do Cliente.

Estou criando o ID do cliente, eu vou definir o e-mail do desenvolvedor, sou eu e aqui o nome do produto, o que é que vai aparecer na tela do Google quando usuário for autenticar, então na página do Google, vai aparecer o Fórum ByteBank, então “Fórum ByteBank”, vou clicar em Continuar.

Agora temos essa opção Faça O Download, finalmente, das nossas credenciais, eu vou clicar em Fazer o Download, o download aconteceu, eu tenho aqui embaixo no navegador e vamos abrir esse arquivo, cliquei em Abrir e é um JSON, está minificado, está com essa sintaxe difícil de ler, para simplificar a leitura, selecionei tudo, copiei, eu vou digitar aqui no Google, “json beautifier”.

Aqui eu colei esse JSON nesse formato ilegível, eu vou clicar em Processar e olha só, temos o mesmo JSON só que, em um formato legível.

Agora eu vou colar aqui, só para nós conseguirmos ler, eu vou aumentar um pouquinho a tela aqui e agora conseguimos ver o que é esse JSON de autenticação que o Google criou para nós, temos o nosso client_id. Esse client_id, ele existe tanto para o Google, quando para o Facebook, quanto para outros portais que funcionam como autenticadores externos. E temos esse código esquisito aqui.

Temos o id do nosso projeto, temos outras propriedades, outras informações relacionadas ao Google, mas o que é importante para esse tipo de autenticação, é o client_id e é o client_secret. O client_id, ele atua como usuário da nossa aplicação, o usuário da aplicação, não o usuário que entra no fórum, é o usuário da nossa aplicação no fórum. E temos esse código esquisito aqui.

E temos também o client_secret, que é a senha da nossa aplicação, é a senha do nosso fórum para usar esse serviço. Eu preciso guardar eles, então eu vou copiar, copiei e aqui no Visual Studio, no nosso Web.config, eu vou criar duas chaves, então copiei essa do e-mail, eu vou chamar de “google” e o nome vai ser “client_id”, copiei o client_id, colei aqui.

Eu vou criar mais uma chave, que vai ser a “client_secret” e o client_secret é a senha da nossa aplicação perante esse projeto no Google, copiei e eu vou colar aqui.

Então, criamos o nosso projeto no Google, configuramos o Google para usar o Google Plus, para autenticar na nossa aplicação, configuramos o localhost 50360, que é a url do Fórum ByteBank, o Google gerou um client_id e um client_secret que precisamos guardar muito bem, afinal esse daqui é o usuário do Fórum ByteBank e essa daqui é a senha para o nosso fórum ter acesso a esses recursos do projeto do Google. Agora, vamos programar para nós darmos essa opção para o usuário logar com o Google.

Conhecendo os mecanismos de autenticação externa - Fluxo de autenticacao e Owin

Antes de codar de fato, é importante que entendamos o que está acontecendo aqui, nesse processo de eu acessar minha aplicação e autenticar e no processo quando colocamos um terceiro agente, que é o autenticador externo.

Então, como comparação, eu trago a autenticação normal, o nosso usuário e a nossa aplicação aqui à direita. O usuário, ele tenta acessar uma página restrita, como por exemplo, a página para ele criar um tópico, ele não está autenticado, então o servidor retorna o erro 401 dizendo que o acesso é negado.

Após isso, o usuário acessa a página de login, dá as suas credenciais e a aplicação vai verificar as suas credenciais, vai ver se, de fato, o usuário é quem ele diz que é e se tudo ocorrer certo, ele vai devolver um cookie, um cookie de autenticação e a partir de então, todas as requisições são feitas com esse cookie de autenticação. Conhecemos esse cookie, usamos esse cookie no pipeline do Owin na nossa aplicação.

Agora, como funciona quando temos autenticação externa? Continuamos tendo usuário, continuamos tendo nosso fórum e poderíamos ter o Facebook, poderíamos ter o Twitter ou até uma conta na Microsoft, mas como podemos ter qualquer tipo de serviço, eu estou representando como um ícone de um servidor, esse daqui é o autenticador externo.

Então, o fluxo, ele muda um pouco, o usuário, ele tenta fazer login no Fórum ByteBank, então ele vai acessar o nosso fórum, ele vai ter o login, ele vai clicar lá no botão fazer login com o nosso autenticador externo.

A resposta da nossa aplicação é um redirecionamento, então vamos redirecionar o usuário, na verdade, para o nosso provedor externo. Sendo redirecionado para o provedor externo, vamos passar algumas informações para esse provedor externo indicando qual aplicação que nós somos.

E conseguimos passar isso por meio de parâmetros na url que enviamos para o autenticador externo, esses parâmetros vão conter, por exemplo, qual é o nosso client_id, o provedor externo sabendo qual é o client_id, ele consegue identificar qual é a nossa aplicação e ele vai montar a tela, vai escrever bytebank-forum, no caso do Google e vai ter uma página personalizada.

O usuário, ele vai autenticar no provedor externo, ele vai enviar suas credenciais e o autenticador externo, ele redireciona o usuário para a nossa aplicação, e o cookie? E o cookie de autenticação? O provedor externo, ele não pode mandar um cookie de autenticação para o nosso usuário porque o cookie, ele só pertence a um domínio.

Então, como exemplo, o Facebook, se o Facebook, ele cria um cookie para o usuário, esse cookie, ele vai existir apenas no domínio facebok.com, então não faz sentido porque do domínio do fórum, nós não temos acesso aos cookies do usuário no domínio do Facebook, ou no domínio do Google, ou do Twitter.

Então, o autenticador, ele redireciona o usuário, redireciona para onde? Para aquela url que configuramos no autenticador externo, no caso do Google, cadastramos localhost:50360/signin-google, essa é a url que o nosso usuário vai ser redirecionado, mas ele vai ser redirecionado com alguns argumentos.

Um desses argumentos é o token de autenticação, então o navegador do nosso usuário vai redirecionar o usuário de volta para o nosso fórum e essa url, vai trazer consigo o token que o autenticador externo criou.

Nossa aplicação vai verificar se o token é válido, vai verificar se, de fato, aquele usuário foi autenticado e quando ele confirmar que isso aconteceu, é nesse momento que ele devolve o cookie de autenticação para o nosso usuário e o nosso usuário, a partir de então, faz todas as requisições com esse cookie.

Então percebemos que é um protocolo, vamos ter que gerar uma url especial específica para o autenticador externo. O autenticador externo, ele vai retornar para a nossa aplicação, trazendo esse token e vai ser uma url que vamos precisar criar e vamos precisar tratar, então é bastante coisinha aqui, mas nós não precisamos, necessariamente, escrever esse código porque existe um pacote do Owin que podemos instalar na nossa aplicação.

Estou de volta aqui no Visual Studio, eu vou abrir o Package Manager e vamos instalar então, esse pacote do Owin que ele vai nos ajudar com esse trabalho de autenticar externamente com o Google, “Install-Package Microsoft.Owin.Security.Google” atualmente a versão mais nova é a “3.1.0”, eu vou dar um Enter para instalar esse pacote na nossa aplicação.

O pacote foi instalado aqui na aplicação, e agora que instalamos esse pacote do Owin, vamos configurar ele. Falamos de Owin, então nós vamos para o Startup.cs, vamos fechar essa janela.

Logo no final, dizemos que a nossa aplicação vai usar um cookie de autenticação e o cookie de autenticação, é o cookie de ApplicationCookie, conhecemos esse cookie, é aquele cookie quando temos a responsabilidade de confirmar o usuário e a senha.

Mas agora estamos gerando um cookie diferente, que é o cookie de signin de login externo, então vamos configurá-lo também, “builder.UseCookieAuthentication” e aqui eu posso passar qual é o cookie que vamos usar, então “new CookieAuthenticationOptions”, “AuthenticationType = DefaultAutheticationTypes”.

E aqui nós não vamos repetir o ApplicationCookie, aqui vamos usar o “ExternalCookie” porque é um cookie que geramos a partir de um autenticador externo, então nós já fizemos a primeira configuração no Owin.

E agora que instalamos o pacote do Google, vamos fazer o uso dele, então “builder.UseGoogleAuthentication” e como argumento para o GoogleAuthentication, eu vou usar essa classe GoogleOAuth2AuthenticationOptions, então “new GoogleOAuth2AuthenticationOptions”, vou usar a diretiva using e vamos preencher as propriedades dessa classe de opções.

Precisamos definir o “ClientId”. O ClientId está no nosso Web.config, então “ConfigurationManager.AppSettings” e aqui vamos colocar a chave do que nós criamos no Web.config, que foi o google:client_id, copiei e colei, aqui vamos definir também o “ClientSecret”, “ConfigurationManager.AppSettings”, eu vou copiar e colar esse trecho, é o “client_secret”.

Outra propriedade que podemos definir aqui é o título desse autenticador, qual é o título que vamos usar para inserir esse tipo de autenticação, estamos falando do Google, então “Caption = “Google””.

Agora que nós criamos essa configuração, nós definimos que o tipo de autenticação também pode ocorrer por cookies externos, precisamos alterar a nossa aplicação para dar essa opção para o usuário no momento de se registrar e no momento de fazer login. Vamos fazer essas alterações.

Sobre o curso ASP.NET Identity parte 3: Autorização, autenticação externa com redes sociais

O curso ASP.NET Identity parte 3: Autorização, autenticação externa com redes sociais possui 139 minutos de vídeos, em um total de 38 atividades. Gostou? Conheça nossos outros cursos de .NET em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda .NET acessando integralmente esse e outros cursos, comece hoje!

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana