Provjera autentičnosti pomoću Googlea u ASP.NET Core 2.0

Uvod

Ponekad želimo da se naši korisnici prijave koristeći svoje postojeće vjerodajnice iz aplikacija trećih strana, kao što su Facebook, Twitter, Google itd. U ovom ćemo članku ispitati provjeru autentičnosti aplikacije ASP.NET Core pomoću Google računa.

Preduvjeti

Odavde instalirajte .NET Core 2.0.0 ili noviji SDK.
Ovdje instalirajte najnoviju verziju Visual Studija 2017.

Stvorite MVC web aplikaciju

Otvorite Visual Studio i odaberite Datoteka >> Novo >> Projekt. Nakon odabira projekta otvorit će se dijaloški okvir "Novi projekt". Odaberite .NET Core unutar izbornika Visual C # na lijevoj ploči. Zatim odaberite "ASP.NET Core Web Application" iz dostupnih vrsta projekata. Stavite naziv projekta koji s GoogleAuth i pritisnite OK. Pogledajte ovu sliku.

Nakon klika na U redu otvorit će se novi dijaloški okvir u kojem će se tražiti odabir predloška projekta. Možete promatrati dva padajuća izbornika u gornjem lijevom dijelu prozora predloška. Odaberite ".NET Core" i "ASP.NET Core 2.0" s ovih padajućih padajućih padajućih. Zatim odaberite predložak "Web aplikacija (Model-View-Controller)". Kliknite gumb Promijeni autentifikaciju i otvorit će se dijaloški okvir "Promijeni autentifikaciju". Odaberite "Pojedinačni korisnički račun" i kliknite U redu. Sada ponovno kliknite U redu da biste stvorili našu web aplikaciju.

Prije pokretanja aplikacije moramo primijeniti migracije na našu aplikaciju.

Idite na Alati >> Nuget upravitelj paketa >> Konzola upravitelja paketa.

Otvorit će se Konzola upravitelja paketa. Stavite naredbu Update-Database i pritisnite enter. Ovo će ažurirati bazu podataka koristeći prve migracije Entity Framework Code.

Pritisnite F5 za pokretanje aplikacije. Vidjet ćete početnu stranicu, kao što je prikazano u nastavku.

Zabilježite URL iz adresne trake preglednika. U ovom je slučaju URL // localhost: 51792 /. Ovaj nam je URL potreban za konfiguriranje naše aplikacije Google, što ćemo i učiniti u sljedećem odjeljku.

Izradite aplikaciju Google

Moramo stvoriti novu Googleovu aplikaciju na konzoli Google API. Idite na //console.developers.google.com/projectselector/apis/library i prijavite se pomoću svog Google računa. Ako nemate Google račun, morate ga stvoriti. Ne možete nastaviti bez Google računa. Nakon što se prijavite, bit ćete preusmjereni na stranicu Knjižnica API upravitelja, sličnu onoj prikazanoj u nastavku.

Kliknite gumb Stvori za prelazak na stranicu „Novi projekt“ na kojoj trebate stvoriti novi projekt. Polje "Naziv projekta" automatski će se popuniti sa zadanim imenom koje pruža Google. Ako želite, možete to nadjačati vlastitim imenom. Za ovaj ćemo vodič koristiti zadani naziv. Prihvatite uvjete usluge, a zatim kliknite Stvorigumb .

Vaš će projekt biti uspješno kreiran i bit ćete preusmjereni na stranicu API biblioteke sličnu onoj prikazanoj u nastavku.

Potražite Google+ API u traci za pretraživanje i odaberite Google+ API iz rezultata pretraživanja. Pogledajte donju sliku.

Nakon odabira opcije Google+ API, bit ćete preusmjereni na stranicu kao što je prikazano u nastavku, gdje morate kliknuti gumb Omogući .

Nakon toga Google+ API će biti omogućen i bit ćete preusmjereni na početnu stranicu API-ja. Kliknite Stvori vjerodajnicegumb na desnoj strani stranice za konfiguriranje tajni za vaš API.

Vidjet ćete obrazac "Dodajte vjerodajnice svom projektu".

Ovaj obrazac ima tri odjeljka.

Ispunite detalje odjeljaka kako je opisano u nastavku.

Odjeljak 1 - Saznajte kakve vam vjerodajnice trebaju

Koji API koristite? - Google+ API
Odakle ćete pozivati API? - web poslužitelj (na primjer, Node.js, Tomcat)
Kojim ćete podacima pristupiti? - Korisnički podaci

I kliknite gumb Koje vjerodajnice trebam . Bit ćete preusmjereni na odjeljak 2

Odjeljak 2 - Stvaranje ID-a klijenta OAuth 2.0

Ime - zadana vrijednost koju pruža Google.
Ovlašteno JavaScript podrijetlo - ostavite ga praznim.
Ovlašteni URI-ovi za preusmjeravanje - dajte osnovni URL svoje aplikacije uz dodatak / signin-google . Za ovaj tutorial URL će biti // localhost: 51792 / signin-google. Nakon unosa URL-a pritisnite TAB da biste dodali vrijednost.

Nakon toga kliknite gumb Stvori ID klijenta . Bit ćete preusmjereni na odjeljak 3.

Odjeljak 3 - Postavljanje zaslona za suglasnost OAuth 2.0

Adresa e-pošte - s padajućeg izbornika odaberite svoju adresu e-pošte. Ova je vrijednost maskirana na gornjoj slici radi privatnosti.
Naziv proizvoda prikazan korisnicima - Unesite bilo koji naziv proizvoda. Ovdje koristimo “AuthDemo” kao naziv proizvoda.

Napomena : Ne koristite riječ "Google" u nazivu proizvoda. Od vas će se zatražiti pogreška i nećete smjeti stvoriti aplikaciju. To znači da je "GoogleAuthDemo" nevažeće ime.

Kliknite na dalje.

Vjerodajnice su uspješno stvorene. Kliknite Preuzmi da biste preuzeli JSON datoteku na svoj lokalni stroj sa svim tajnama vaših aplikacija, a zatim kliknite Gotovo da biste dovršili postupak.

Otvorite upravo preuzetu datoteku client_id.json i zabilježite polja ClientId i ClientSecret . Te će nam vrijednosti trebati za konfiguriranje Googleove provjere autentičnosti u našoj web aplikaciji.

Konfigurirajte svoju web-aplikaciju za upotrebu Googleove provjere autentičnosti

Vrijednosti polja ClientId i ClientSecret moramo pohraniti u našu aplikaciju. U tu svrhu koristit ćemo alat Secret Manager. Alat Secret Manager projektni je alat koji se može koristiti za spremanje tajni poput lozinke, API ključa itd. Za .NET Core projekt tijekom procesa razvoja. Pomoću alata Secret Manager tajne aplikacija možemo povezati s određenim projektom i podijeliti ih u više projekata.

Još jednom otvorite svoju web aplikaciju i desnom tipkom miša kliknite projekt u Solution Exploreru. Odaberite Manage User Secrets iz kontekstnog izbornika.

Otvorit će se datoteka secrets.json . U njega stavite sljedeći kod:

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

Sada otvorite datoteku Startup.cs i stavite sljedeći kôd u metodu ConfigureServices :

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

U ovom odjeljku koda čitamo ClientId i ClientSecret u svrhu provjere autentičnosti. Pa konačno, Startup.csizgledat će ovako:

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?}"); }); } } }

I time je naša aplikacija spremna.

Demo izvedbe

Pokrenite aplikaciju i kliknite Prijava u gornjem desnom kutu početne stranice.

Bit ćete preusmjereni na // localhost: 51792 / stranicu Account / Login, gdje na desnoj strani stranice možete vidjeti opciju prijave putem Googlea.

Klikom na gumb Google otvorit će se stranica za prijavu na Google. Tamo će se od vas tražiti da popunite svoje vjerodajnice za Google i odobrite aplikaciju Google da koristi vaš Google račun.

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.

You can also find this article at C# Corner.

You can check my other articles on ASP .NET Core here