Godkendelse ved hjælp af Google i ASP.NET Core 2.0

Introduktion

Nogle gange ønsker vi, at vores brugere skal logge ind ved hjælp af deres eksisterende legitimationsoplysninger fra tredjepartsapplikationer, såsom Facebook, Twitter, Google osv. I denne artikel skal vi undersøge godkendelse af en ASP.NET Core-app ved hjælp af en Google-konto.

Forudsætninger

  • Installer .NET Core 2.0.0 eller derover SDK herfra.
  • Installer den nyeste version af Visual Studio 2017 herfra.

Opret MVC-webapplikation

Åbn Visual Studio, og vælg Filer >> Nyt >> Projekt. Efter valg af projektet åbnes en dialogboks "Nyt projekt". Vælg .NET Core inde i Visual C # -menuen fra venstre panel. Vælg derefter “ASP.NET Core Web Application” blandt de tilgængelige projekttyper. Sæt navnet på projektet til GoogleAuth, og tryk på OK. Se dette billede.

Når du har klikket på OK, åbnes en ny dialog, der beder dig om at vælge projektskabelonen. Du kan observere to rullemenuer øverst til venstre i skabelonvinduet. Vælg ".NET Core" og "ASP.NET Core 2.0" fra disse rullelister. Vælg derefter skabelonen "Webapplikation (Model-View-Controller)". Klik på knappen Skift godkendelse, og dialogboksen “Skift godkendelse” åbnes. Vælg “Individuel brugerkonto”, og klik på OK. Klik nu på OK igen for at oprette vores webapp.

Før vi kører applikationen, skal vi anvende overførsler til vores app.

Naviger til Værktøjer >> Nuget Package Manager >> Package Manager-konsol.

Det åbner Package Manager-konsollen. Sæt kommandoen Update-Database og tryk enter. Dette opdaterer databasen ved hjælp af Entity Framework Code First Migrations.

Tryk på F5 for at køre applikationen. Du vil se en hjemmeside som vist nedenfor.

Bemærk URL'en fra browserens adresselinje. I dette tilfælde er URL'en // localhost: 51792 /. Vi har brug for denne URL for at konfigurere vores Google-app, hvilket vi skal gøre i næste afsnit.

Opret Google-appen

Vi er nødt til at oprette en ny Google-app på Google API-konsollen. Naviger til //console.developers.google.com/projectselector/apis/library og log ind med din Google-konto. Hvis du ikke har en Google-konto, skal du oprette en. Du kan ikke fortsætte uden en Google-konto. Når du er logget ind, bliver du omdirigeret til siden API Manager Library, svarende til den, der er vist nedenfor.

Klik på knappen Opret for at flytte til siden "Nyt projekt", hvor du har brug for at oprette et nyt projekt. Feltet "Projektnavn" udfyldes automatisk med et standardnavn, der leveres af Google. Hvis du vil, kan du tilsidesætte det med dit eget brugerdefinerede navn. Til denne vejledning bruger vi standardnavnet. Accepter servicevilkårene, og klik derefter på Opretknappen .

Dit projekt oprettes med succes, og du vil blive omdirigeret til siden API-bibliotek svarende til den nedenfor.

Søg efter Google+ API i søgefeltet, og vælg Google+ API fra søgeresultaterne. Se nedenstående billede.

Når du har valgt Google+ API-indstillingen, omdirigeres du til en side som vist nedenfor, hvor du skal klikke på knappen Aktivér .

Herefter aktiveres Google+ API, og du omdirigeres til API-startsiden. Klik på Opret legitimationsoplysningerknappen til højre på siden for at konfigurere hemmelighederne til din API.

Du får vist formularen "Tilføj legitimationsoplysninger til dit projekt".

Denne formular har tre sektioner.

Udfyld detaljerne i afsnittene som beskrevet nedenfor.

Afsnit 1 - Find ud af, hvilken type legitimationsoplysninger du har brug for

  • Hvilket API bruger du? - Google+ API
  • Hvor vil du ringe til API'en fra? - Webserver (for eksempel Node.js, Tomcat)
  • Hvilke data vil du få adgang til? - Brugerdata

Og klik på knappen Hvilke legitimationsoplysninger har jeg brug for . Du bliver omdirigeret til sektion 2

Afsnit 2 - Opret et OAuth 2.0-klient-id

  • Navn - Standardværdien fra Google.
  • Autoriserede JavaScript-oprindelser - Lad det være tomt.
  • Autoriserede omdirigerings-URI'er - Giv basis-URL til din applikation med / signin-google vedhæftet den. I denne vejledning vil URL'en være // localhost: 51792 / signin-google. Efter indtastning af URL'en skal du trykke på TAB for at tilføje værdien.

Klik derefter på knappen Opret klient-ID . Du omdirigeres til sektion 3.

Afsnit 3 - Opret OAuth 2.0-samtykke-skærmen

  • E-mail-adresse - Vælg din e-mail-adresse i rullemenuen. Denne værdi maskeres i ovenstående billede for privatlivets fred.
  • Produktnavn vist for brugere - Indtast ethvert produktnavn. Her bruger vi “AuthDemo” som produktnavnet.

Bemærk : Brug ikke ordet “Google” i dit produktnavn. Du bliver bedt om en fejl, og du får ikke lov til at oprette appen. Dette betyder "GoogleAuthDemo" er et ugyldigt navn.

Klik på Fortsæt.

Dine legitimationsoplysninger er oprettet med succes. Klik på Download for at downloade en JSON-fil til din lokale maskine med alle dine applikationshemmeligheder, og klik derefter på Udført for at fuldføre processen.

Åbn den lige downloadede client_id.json- fil, og noter felterne ClientId og ClientSecret . Vi har brug for disse værdier for at konfigurere Google-godkendelse i vores webapp.

Konfigurer din webapp til at bruge Google-godkendelse

We need to store the ClientId and ClientSecret field values in our application. We will use the Secret Manager tool for this purpose. The Secret Manager tool is a project tool that can be used to store secrets such as password, API Key, etc. for a .NET Core project during the development process. With the Secret Manager tool, we can associate app secrets with a specific project and can share them across multiple projects.

Open your web application once again and Right-click the project in Solution Explorer. Select Manage User Secrets from the context menu.

A secrets.json file will open. Put the following code in it:

{ "Authentication:Google:ClientId": "Your Google ClientId here", "Authentication:Google:ClientSecret": "Your Google ClientSecret here" }

Now open the Startup.cs file and put the following code into the ConfigureServices method:

services.AddAuthentication().AddGoogle(googleOptions => { googleOptions.ClientId = Configuration["Authentication:Google:ClientId"]; googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"]; });

In this code section, we are reading ClientId and ClientSecret for authentication purposes. So finally, Startup.cswill look like this:

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Identity; using Microsoft.EntityFrameworkCore; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using GoogleAuth.Data; using GoogleAuth.Models; using GoogleAuth.Services; namespace GoogleAuth { public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.AddDbContext(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"))); services.AddIdentity() .AddEntityFrameworkStores() .AddDefaultTokenProviders(); services.AddAuthentication().AddGoogle(googleOptions => { googleOptions.ClientId = Configuration["Authentication:Google:ClientId"]; googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"]; }); // Add application services. services.AddTransient(); services.AddMvc(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseBrowserLink(); app.UseDeveloperExceptionPage(); app.UseDatabaseErrorPage(); } else { app.UseExceptionHandler("/Home/Error"); } app.UseStaticFiles(); app.UseAuthentication(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); } } }

And with this, our application is ready.

Execution Demo

Launch the application and click Login on the top right corner of the home page.

You will be redirected to //localhost:51792/Account/Login page, where you can see the option to login using Google on the right side of the page.

Clicking on the Google button will take you to the Google login page. There, you will be asked to fill in your Google credentials and authorize the Google app to use your Google account.

After successful authentication from Google, you will be redirected to a registration page inside your application where you need to fill in an email id to tag with your account. The Gmail id that you have used to login will already be populated in the Email id field. If you want to use another mail id, you can change it here.

Click register, you will be redirected to the home page again. But this time you can also see that your registered email is on the top right corner.

Conclusion

We have successfully created and configured a Google+ app and used it to authenticate our ASP.NET Core application.

You can get the source code from GitHub.

Please note that the secrets.json file contains dummy values. You’ll need to replace the values with the keys of your Google app before executing it.

Du kan også finde denne artikel på C # Corner.

Du kan tjekke mine andre artikler om ASP .NET Core her

Se også

  • Godkendelse ved hjælp af LinkedIn i ASP.NET Core 2.0
  • Godkendelse ved hjælp af Twitter i ASP.NET Core 2.0
  • Godkendelse ved hjælp af Facebook i ASP.NET Core 2.0
  • Cookie-godkendelse med ASP.NET Core 2.0
  • ASP.NET Core - tofaktorautentificering ved hjælp af Google Authenticator

Oprindeligt offentliggjort på ankitsharmablogs.com