Autentifikācija, izmantojot Google, ASP.NET Core 2.0

Ievads

Dažreiz mēs vēlamies, lai mūsu lietotāji piesakās, izmantojot esošos akreditācijas datus no trešo pušu lietojumprogrammām, piemēram, Facebook, Twitter, Google un tā tālāk. Šajā rakstā mēs izskatīsim ASP.NET Core lietotnes autentifikāciju, izmantojot Google kontu.

Priekšnoteikumi

  • Šeit instalējiet .NET Core 2.0.0 vai jaunāku SDK.
  • Šeit instalējiet Visual Studio 2017 jaunāko versiju.

Izveidojiet MVC tīmekļa lietojumprogrammu

Atveriet Visual Studio un atlasiet Fails >> Jauns >> Projekts. Pēc projekta izvēles tiks atvērts dialoglodziņš “Jauns projekts”. Kreisajā panelī izvēlnē Visual C # atlasiet .NET Core. Pēc tam no pieejamajiem projektu veidiem atlasiet “ASP.NET Core Web Application”. Ielieciet nosaukumu projicēt s GoogleAuth un nospiediet OK. Skatiet šo attēlu.

Pēc noklikšķināšanas uz Labi tiks atvērts jauns dialoglodziņš ar aicinājumu izvēlēties projekta veidni. Veidnes loga augšējā kreisajā stūrī varat novērot divas nolaižamās izvēlnes. No šīm nolaižamajām izvēlnēm atlasiet “.NET Core” un “ASP.NET Core 2.0”. Pēc tam atlasiet veidni “Web application (Model-View-Controller)”. Noklikšķiniet uz pogas Mainīt autentifikāciju, un tiks atvērts dialoglodziņš “Mainīt autentifikāciju”. Atlasiet “Individual User Account” un noklikšķiniet uz Labi. Tagad vēlreiz noklikšķiniet uz Labi, lai izveidotu mūsu tīmekļa lietotni.

Pirms lietojumprogrammas palaišanas mums ir jāpielieto migrācijas mūsu lietotnei.

Pārejiet uz Rīki >> Nuget Package Manager >> Package Manager Console.

Tas atvērs pakotņu pārvaldnieka konsoli. Ievietojiet komandu Update-Database un nospiediet taustiņu Enter. Tas atjauninās datu bāzi, izmantojot Entity Framework Code First Migrations.

Nospiediet F5, lai palaistu programmu. Jūs redzēsiet mājas lapu, kā parādīts zemāk.

Ievērojiet URL no pārlūka adreses joslas. Šajā gadījumā URL ir // localhost: 51792 /. Šis URL mums ir nepieciešams, lai konfigurētu mūsu Google lietotni, ko mēs darīsim nākamajā sadaļā.

Izveidojiet Google lietotni

Mums ir jāizveido jauna Google lietotne Google API konsolē. Pārejiet uz vietni //console.developers.google.com/projectselector/apis/library un piesakieties, izmantojot savu Google kontu. Ja jums nav Google konta, jums tas ir jāizveido. Bez Google konta nevar turpināt. Kad esat pieteicies, tiksiet novirzīts uz API pārvaldnieka bibliotēkas lapu, līdzīgu tai, kas parādīta zemāk.

Noklikšķiniet uz pogas Izveidot, lai pārietu uz lapu “Jauns projekts”, kur jāizveido jauns projekts. Lauks “Projekta nosaukums” tiks automātiski aizpildīts ar noklusējuma nosaukumu, ko nodrošina Google. Ja vēlaties, varat to ignorēt ar savu pielāgoto vārdu. Šajā apmācībā mēs izmantosim noklusējuma nosaukumu. Pieņemiet pakalpojumu sniegšanas noteikumus un pēc tam noklikšķiniet uz Izveidotpogu .

Jūsu projekts tiks veiksmīgi izveidots, un jūs tiksiet novirzīts uz API bibliotēkas lapu, kas līdzīga tai, kas parādīta zemāk.

Meklēšanas joslā meklējiet Google+ API un meklēšanas rezultātos atlasiet Google+ API. Skatiet zemāk redzamo attēlu.

Pēc Google+ API opcijas izvēles jūs tiksiet novirzīts uz lapu, kā parādīts zemāk, kur jums jānoklikšķina uz pogas Iespējot .

Pēc tam tiks iespējota Google+ API, un jūs tiksiet novirzīts uz API sākumlapu. Noklikšķiniet uz Izveidot akreditācijas datuspogu lapas labajā pusē, lai konfigurētu API noslēpumus.

Tiks parādīta forma “Pievienojiet akreditācijas datus savam projektam”.

Šai veidlapai ir trīs sadaļas.

Aizpildiet sīkāku informāciju par sadaļām, kā aprakstīts zemāk.

1. sadaļa - uzziniet, kādi akreditācijas dati jums ir nepieciešami

  • Kuru API jūs izmantojat? - Google+ API
  • No kurienes jūs zvanīsit API? - Web serveris (piemēram, Node.js, Tomcat)
  • Kādiem datiem piekļūsit? - Lietotāja dati

Un noklikšķiniet uz pogas Kādi akreditācijas dati man ir nepieciešami . Jūs tiksiet novirzīts uz 2. sadaļu

2. sadaļa - OAuth 2.0 klienta ID izveide

  • Nosaukums - noklusējuma vērtība, ko nodrošina Google.
  • Autorizēta JavaScript izcelsme - atstājiet to tukšu.
  • Autorizēti novirzīšanas URI - norādiet savas lietojumprogrammas pamata URL, tam pievienojot / signin-google . Šīs apmācības vietrādis URL būs // localhost: 51792 / signin-google. Pēc URL ievadīšanas nospiediet taustiņu TAB, lai pievienotu vērtību.

Pēc tam noklikšķiniet uz pogas Izveidot klienta ID . Jūs tiksiet novirzīts uz 3. sadaļu.

3. sadaļa - iestatiet OAuth 2.0 piekrišanas ekrānu

  • E-pasta adrese - nolaižamajā izvēlnē atlasiet savu e-pasta adresi. Šī vērtība privātuma labad ir maskēta iepriekš minētajā attēlā.
  • Lietotājiem parādītais produkta nosaukums - ievadiet jebkura produkta nosaukumu. Šeit mēs izmantojam “AuthDemo” kā produkta nosaukumu.

Piezīme . Nelietojiet produkta nosaukumā vārdu “Google”. Jums tiks piedāvāta kļūda, un jums nebūs atļauts izveidot lietotni. Tas nozīmē, ka “GoogleAuthDemo” ir nederīgs nosaukums.

Noklikšķiniet uz turpināt.

Jūsu akreditācijas dati ir veiksmīgi izveidoti. Noklikšķiniet uz Lejupielādēt, lai vietējā datorā lejupielādētu JSON failu ar visiem lietojumprogrammas noslēpumiem, un pēc tam noklikšķiniet uz Gatavs, lai pabeigtu procesu.

Atveriet tikko lejupielādēto client_id.json failu un pierakstiet to ClientId un ClientSecret jomās. Šīs vērtības mums būs nepieciešamas, lai konfigurētu Google autentifikāciju mūsu tīmekļa lietotnē.

Konfigurējiet savu tīmekļa lietotni, lai tā izmantotu Google autentifikāciju

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.

Šo rakstu varat atrast arī vietnē C # Corner.

Citus manus ASP .NET Core rakstus varat pārbaudīt šeit

Skatīt arī

  • Autentifikācija, izmantojot LinkedIn sistēmā ASP.NET Core 2.0
  • Autentifikācija, izmantojot čivināt ASP.NET Core 2.0
  • Autentifikācija, izmantojot Facebook, ASP.NET Core 2.0
  • Sīkdatņu autentifikācija ar ASP.NET Core 2.0
  • ASP.NET Core - divu faktoru autentifikācija, izmantojot Google autentifikatoru

Sākotnēji publicēts vietnē ankitsharmablogs.com