Carregando Post...

Autenticação usando o Facebook no ASP.NET Core 2.0

Introdução

Às vezes, queremos que os usuários façam login usando suas credenciais existentes de aplicativos de terceiros, como Facebook, Twitter, Google etc., em nosso aplicativo. Neste artigo, vamos examinar a autenticação do aplicativo ASP.NET Core usando uma conta do Facebook.

Pré-requisitos

  • Instale o .NET Core 2.0.0 ou acima do SDK a partir  daqui .
  • Instale a versão mais recente do Visual Studio 2017 Community Edition a partir  daqui

Criar aplicativo da web do MVC

  • Abra o Visual Studio e selecione File >> New >> Project.
  •  Depois de selecionar o projeto, uma caixa de diálogo “Novo projeto” será aberta.
  • Selecione .NET Core dentro do menu Visual C # no painel esquerdo. Em seguida, selecione “ASP.NET Core Web Application” dos tipos de projeto disponíveis.
  • Coloque o nome do projeto como  FacebookAuth  e pressione OK.

  • Depois de clicar em OK, uma nova caixa de diálogo será aberta pedindo para selecionar o modelo do projeto. Você pode observar dois menus suspensos no canto superior esquerdo da janela do modelo.
  • Selecione “.NET Core” e “ASP.NET Core 2.0” desses menus suspensos.
  • Em seguida, selecione o modelo “Aplicativo da Web (Model-View-Controller)”.
  • Clique no botão Change Authentication, uma caixa de diálogo Change Authentication será aberta.
  • Selecione “Conta de usuário individual” e clique em OK.
  • Agora, clique em OK novamente para criar nosso aplicativo da web.

Antes de executar o aplicativo, precisamos aplicar migrações ao nosso aplicativo. Navegue para Ferramentas >> Gerenciador de Pacotes NuGet >> Console do Gerenciador de Pacotes. 
Ele abrirá o Console do Gerenciador de Pacotes. Coloque o   comando Update-Database e pressione Enter. Isso atualizará o banco de dados usando Primeiras Migrações do Código da Estrutura de Entidade.

Pressione F5 para executar o aplicativo. Você pode ver uma página inicial, como mostrado abaixo.

Observe o URL na barra de endereços do navegador. Nesse caso, a URL é  http: // localhost: 54575 /Precisamos desse URL para configurar nosso aplicativo do Facebook, o qual faremos em nossa próxima seção.

Criar aplicativo do Facebook

  • Navegue até  https://developers.facebook.com/apps/  e faça login usando sua conta do Facebook.
  • Se você não tem uma conta no Facebook, você precisa criar uma. Você não pode continuar sem uma conta do Facebook.
  • Depois de ter logado, você será redirecionado para uma página semelhante à mostrada abaixo.

Clique no   botão Criar um novo aplicativo no canto superior direito. Ele abrirá um  formulário  Criar um novo ID de aplicativo semelhante ao mostrado abaixo.

Aqui, você precisa fornecer os detalhes em dois campos
  • Nome de exibição: - Dê um nome apropriado.

Nota importante : - Não use a palavra “Facebook” no nome de exibição. Você receberá um erro (consulte a imagem abaixo).

  • E-mail de contato: - Dê seu ID de e-mail. Se você não quiser fornecer seu ID de e-mail pessoal, também poderá usar qualquer ID de e-mail falso, como  xyz@gmail.com.

Lembre-se de que ambos os campos desse formulário são necessários, portanto, é necessário fornecer valores apropriados para todos eles. Depois de ter fornecido todos os detalhes, clique no botão  Criar ID do aplicativo  . Se não houver erro no formulário, seu aplicativo do Facebook será criado com sucesso e você será redirecionado para o painel do aplicativo, conforme mostrado na imagem abaixo. Aqui você pode ver uma lista de produtos que você pode adicionar ao seu aplicativo. Clique em  Configurar  no  cartão de login do  Facebook . Consulte a imagem abaixo.

 

Um assistente QuickStart será lançado pedindo para você selecionar a plataforma para o aplicativo. Pule este assistente e clique em  Facebook Login> Configurações  no menu de navegação à esquerda.

 

Isso levará você para a página Configurações do OAuth do cliente. No   campo URIs de redirecionamento do OAuth válido, insira o URL base de seu aplicativo com  / signin-facebook anexado a ele. Para este tutorial, a URL será  http: // localhost: 54575 / signin-facebook . Clique em  Salvar alterações . Consulte a imagem abaixo.

Agora clique em  Configurações> Básico  no menu de navegação. Você verá os valores de ID do aplicativo e Segredos do aplicativo para o aplicativo do Facebook que acabamos de criar. Clique no botão mostrar dentro do campo secreto do aplicativo para ver o valor. Anote os dois valores, pois precisaremos deles para configurar a autenticação do Facebook em nosso aplicativo da web.

Configurar o aplicativo da Web para usar a autenticação do Facebook

Precisamos armazenar os valores do campo App ID e App Secret em nosso aplicativo. Nós usaremos a ferramenta Gerenciador secreto para essa finalidade. A ferramenta Gerenciador secreto é uma ferramenta de projeto que pode ser usada para armazenar segredos, como senha, chave de API, etc., para um   projeto .NET Core durante o processo de desenvolvimento. Com a ferramenta Gerenciador secreto, podemos associar segredos de aplicativos a um projeto específico e compartilhá-los em vários projetos.

Abra nosso aplicativo da web novamente e clique com o botão direito do mouse no projeto no Solution Explorer e selecione Manage User Secrets no menu de contexto.

 
Um   arquivo secrets.json será aberto. Coloque o seguinte código nele.

 
  1. {
  2. "Authentication:Facebook:AppId": "Your AppId here",
  3. "Authentication:Facebook:AppSecret": "Your AppSecret here"
  4. }

Agora abra o   arquivo Startup.cs e coloque o seguinte código no método ConfigureServices.

  1. services.AddAuthentication().AddFacebook(facebookOptions =>
  2. {
  3. facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];
  4. facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
  5. });

Nesta seção de códigos, estamos lendo o ID do aplicativo e o Segredo do aplicativo do   arquivo secrets.json para fins de autenticação.

Então, finalmente, o  Startup.cs  ficará assim.

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Threading.Tasks;
  5. using Microsoft.AspNetCore.Builder;
  6. using Microsoft.AspNetCore.Identity;
  7. using Microsoft.EntityFrameworkCore;
  8. using Microsoft.AspNetCore.Hosting;
  9. using Microsoft.Extensions.Configuration;
  10. using Microsoft.Extensions.DependencyInjection;
  11. using FacebookAuth.Data;
  12. using FacebookAuth.Models;
  13. using FacebookAuth.Services;
  14. namespace FacebookAuth
  15. {
  16. public class Startup
  17. {
  18. public Startup(IConfiguration configuration)
  19. {
  20. Configuration = configuration;
  21. }
  22. public IConfiguration Configuration { get; }
  23. // This method gets called by the runtime. Use this method to add services to the container.
  24. public void ConfigureServices(IServiceCollection services)
  25. {
  26. services.AddDbContext<ApplicationDbContext>(options =>
  27. options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
  28. services.AddIdentity<ApplicationUser, IdentityRole>()
  29. .AddEntityFrameworkStores<ApplicationDbContext>()
  30. .AddDefaultTokenProviders();
  31. services.AddAuthentication().AddFacebook(facebookOptions =>
  32. {
  33. facebookOptions.AppId = Configuration["Authentication:Facebook:AppId"];
  34. facebookOptions.AppSecret = Configuration["Authentication:Facebook:AppSecret"];
  35. });
  36. // Add application services.
  37. services.AddTransient<IEmailSender, EmailSender>();
  38. services.AddMvc();
  39. }
  40. // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
  41. public void Configure(IApplicationBuilder app, IHostingEnvironment env)
  42. {
  43. if (env.IsDevelopment())
  44. {
  45. app.UseBrowserLink();
  46. app.UseDeveloperExceptionPage();
  47. app.UseDatabaseErrorPage();
  48. }
  49. else
  50. {
  51. app.UseExceptionHandler("/Home/Error");
  52. }
  53. app.UseStaticFiles();
  54. app.UseAuthentication();
  55. app.UseMvc(routes =>
  56. {
  57. routes.MapRoute(
  58. name: "default",
  59. template: "{controller=Home}/{action=Index}/{id?}");
  60. });
  61. }
  62. }
  63. }

E com isso, nosso aplicativo está pronto.

Demonstração de Execução

Inicie o aplicativo e clique em Login no canto superior direito da página inicial.

 

Você será redirecionado para a página  http: // localhost: 54575 / Account / Login  , onde você pode ver a opção de login usando o Facebook no lado direito da página.

 

 

Ao clicar no    botão Facebook , você será levado à página de autorização do Facebook, onde será solicitado que você preencha suas credenciais do Facebook e autorize o aplicativo do Facebook a usar sua conta do Facebook.

 

 

Coloque suas credenciais do Facebook e clique no   botão Login . Agora você verá uma página de confirmação, conforme mostrado abaixo. Clique no   botão Continuar como <nome> .

 

O aplicativo levará alguns instantes para autenticar sua conta do Facebook e após a autenticação bem-sucedida com o Facebook, você será redirecionado para uma página de registro dentro de nosso aplicativo, onde você precisa preencher um ID de e-mail para marcar com sua conta. O ID de email que você usou para acessar o Facebook será preenchido no campo ID do email. Se você quiser usar outro ID de e-mail, você poderá alterá-lo.

Clique em registrar, você será redirecionado para a página inicial novamente, mas desta vez você também pode ver o seu e-mail cadastrado no canto superior direito.

Comentários

Deixe um Comentário

Posts Recentes

24/Outubro/2018

Jogos

19/Setembro/2018

CRUD com ASP.NET Core MVC...

18/Setembro/2018

Autenticação usando o...


Onde estamos ? clique no mapaFechar Mapa

Entre em Contato

Escreva para nós, vamos trocar algumas ideias!

Telefone

(24) 9219-6805

24992196805

Email

heitorhog@outlook.com

Localização

Rua Professor João de Deus, 908,Quarteirão Brasileiro Petrópolis RJ