de Ankit Sharma

Autentificare utilizând Google în ASP.NET Core 2.0

Introducere

Uneori, dorim ca utilizatorii noștri să se conecteze folosind acreditările lor existente din aplicații terțe, cum ar fi Facebook, Twitter, Google și așa mai departe. În acest articol, vom analiza autentificarea unei aplicații ASP.NET Core folosind un cont Google.

Condiții prealabile

• Instalați .NET Core 2.0.0 sau o versiune superioară SDK de la aici.
• Instalați cea mai recentă versiune a Visual Studio 2017 de la aici.

Creați o aplicație web MVC

Deschideți Visual Studio și selectați Fișier >> Nou >> Proiect. După selectarea proiectului, se va deschide un dialog „Proiect nou”. Selectați .NET Core din meniul Visual C # din panoul din stânga. Apoi, selectați „ASP.NET Core Web Application” din tipurile de proiecte disponibile. Puneți numele proiect as GoogleAuth și apăsați OK. Consultați această imagine.

După ce faceți clic pe OK, se va deschide un nou dialog care vă solicită să selectați șablonul de proiect. Puteți observa două meniuri derulante în partea stângă sus a ferestrei șablon. Selectați „.NET Core” și „ASP.NET Core 2.0” din aceste meniuri derulante. Apoi, selectați șablonul „Aplicație web (Model-View-Controller)”. Faceți clic pe butonul Modificare autentificare și se va deschide o casetă de dialog „Modificare autentificare”. Selectați „Cont de utilizator individual” și faceți clic pe OK. Acum, faceți clic din nou pe OK pentru a crea aplicația noastră web.

Înainte de a rula aplicația, trebuie să aplicăm migrări aplicației noastre.

Navigați la Instrumente >> Nuget Package Manager >> Package Manager Console.

Se va deschide consola Manager de pachete. Puneți în Actualizează baza de date comanda și apăsați Enter. Aceasta va actualiza baza de date folosind Entity Framework Code First Migrations.

Apăsați F5 pentru a rula aplicația. Veți vedea o pagină de pornire, așa cum se arată mai jos.

Rețineți adresa URL din bara de adrese a browserului. În acest caz, adresa URL este http: // localhost: 51792 /. Avem nevoie de această adresă URL pentru a configura aplicația Google, ceea ce vom face în secțiunea următoare.

Creați aplicația Google

Trebuie să creăm o nouă aplicație Google pe consola Google API. Navigheaza catre https://console.developers.google.com/projectselector/apis/library și conectați-vă folosind contul dvs. Google. Dacă nu aveți un cont Google, trebuie să creați unul. Nu puteți continua fără un cont Google. Odată ce v-ați conectat, veți fi redirecționat către pagina API Manager Library, similar cu cea prezentată mai jos.

Faceți clic pe butonul Creare pentru a vă deplasa la pagina „Proiect nou” unde trebuie să creați un proiect nou. Câmpul „Nume proiect” va fi completat automat cu un nume prestabilit furnizat de Google. Dacă doriți, îl puteți suprascrie cu propriul nume personalizat. Pentru acest tutorial, vom folosi numele implicit. Acceptați termenii și condițiile și faceți clic pe Crea buton.

Proiectul dvs. va fi creat cu succes și veți fi redirecționat către pagina de bibliotecă API similară cu cea prezentată mai jos.

Căutați API-ul Google+ în bara de căutare și selectați API-ul Google+ din rezultatele căutării. Consultați imaginea de mai jos.

După ce selectați opțiunea Google+ API, veți fi redirecționat către o pagină așa cum se arată mai jos, unde trebuie să faceți clic pe Permite buton.

După aceasta, API-ul Google+ va fi activat și veți fi redirecționat către pagina principală API. Click pe Creați acreditări din partea dreaptă a paginii pentru a configura secretele API-ului dvs.

Veți vedea un formular „Adăugați acreditări la proiectul dvs.”.

Acest formular are trei secțiuni.

Completați detaliile secțiunilor descrise mai jos.

Secțiunea 1 – Aflați ce fel de acreditări aveți nevoie

• Ce API folosiți? – API-ul Google+
• De unde veți apela la API? – Server web (de exemplu, Node.js, Tomcat)
• La ce date veți accesa? – Datele utilizatorului

Și faceți clic pe De ce acreditări am nevoie buton. Veți fi redirecționat către secțiunea 2

Secțiunea 2 – Creați un ID client OAuth 2.0

• Nume – Valoarea prestabilită furnizată de Google.
• Origini JavaScript autorizate – Lăsați-l necompletat.
• URI de redirecționare autorizate – Oferiți adresa URL de bază a aplicației dvs. cu / conectare-google anexat la acesta. Pentru acest tutorial, adresa URL va fi http: // localhost: 51792 / signin-google. După introducerea adresei URL, apăsați TAB pentru a adăuga valoarea.

După aceasta, faceți clic pe Creați ID-ul clientului buton. Veți fi redirecționat către secțiunea 3.

Secțiunea 3 – Configurați ecranul de consimțământ OAuth 2.0

• Adresă de e-mail – Selectați adresa de e-mail din meniul derulant. Această valoare este mascată în imaginea de mai sus pentru confidențialitate.
• Numele produsului afișat utilizatorilor – Introduceți orice nume de produs. Aici folosim „AuthDemo” ca nume de produs.

Notă: Nu utilizați cuvântul „Google” în numele produsului. Vi se va solicita o eroare și nu vi se va permite să creați aplicația. Aceasta înseamnă că „GoogleAuthDemo” este un nume nevalid.

Faceți clic pe continuare.

Acreditările dvs. au fost create cu succes. Clic Descarca pentru a descărca un fișier JSON pe computerul dvs. local cu toate secretele aplicației dvs., apoi faceți clic pe Terminat pentru a finaliza procesul.

Deschideți doar descărcarea client_id.json înregistrați și notați fișierul ClientId și ClientSecret câmpuri. Vom avea nevoie de aceste valori pentru a configura autentificarea Google în aplicația noastră web.

Configurați-vă aplicația web pentru a utiliza autentificarea Google

Trebuie să stocăm valorile câmpului ClientId și ClientSecret în aplicația noastră. În acest scop vom folosi instrumentul Secret Manager. Instrumentul Secret Manager este un instrument de proiect care poate fi utilizat pentru a stoca secrete precum parolă, cheie API etc. pentru un proiect .NET Core în timpul procesului de dezvoltare. Cu instrumentul Secret Manager, putem asocia secretele aplicațiilor cu un anumit proiect și le putem partaja în mai multe proiecte.

Deschideți din nou aplicația web și faceți clic dreapta pe proiect în Solution Explorer. Selectați Gestionați secretele utilizatorului din meniul contextual.

A secrete.json fișierul se va deschide. Introduceți următorul cod:

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

Acum deschideți fișierul Startup.cs fișierul și puneți următorul cod în fișierul ConfigureServices metodă:

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

În această secțiune de cod, citim ClientId și ClientSecret în scopuri de autentificare. Deci, în sfârșit, Startup.cs va arăta astfel:

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<ApplicationDbContext>(options =>  
                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));  
  
            services.AddIdentity<ApplicationUser, IdentityRole>()  
                .AddEntityFrameworkStores<ApplicationDbContext>()  
                .AddDefaultTokenProviders();  
  
            services.AddAuthentication().AddGoogle(googleOptions =>  
            {  
                googleOptions.ClientId = Configuration["Authentication:Google:ClientId"];  
                googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"];  
            });  
  
            // Add application services.  
            services.AddTransient<IEmailSender, EmailSender>();  
  
            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 cu aceasta, aplicația noastră este gata.

Demo de execuție

Lansați aplicația și faceți clic pe Conectare în colțul din dreapta sus al paginii de pornire.

Veți fi redirecționat către http: // localhost: 51792 / Cont / Login pagina, unde puteți vedea opțiunea de conectare utilizând Google în partea dreaptă a paginii.

Dând clic pe Google butonul vă va duce la pagina de autentificare Google. Acolo, vi se va cere să completați acreditările dvs. Google și să autorizați aplicația Google să utilizeze contul dvs. Google.

După autentificarea cu succes de la Google, veți fi redirecționat către o pagină de înregistrare din aplicația dvs., unde trebuie să completați un ID de e-mail pentru a eticheta cu contul dvs. ID-ul Gmail pe care l-ați folosit pentru a vă conecta va fi deja completat în câmpul ID e-mail. Dacă doriți să utilizați un alt id de e-mail, îl puteți schimba aici.

Faceți clic pe înregistrare, veți fi redirecționat din nou la pagina principală. De data aceasta, de asemenea, puteți vedea că e-mailul dvs. înregistrat se află în colțul din dreapta sus.

Concluzie

Am creat și configurat cu succes o aplicație Google+ și am folosit-o pentru a autentifica aplicația noastră ASP.NET Core.

Puteți obține codul sursă de la GitHub.

Vă rugăm să rețineți că secrete.json fișierul conține valori fictive. Va trebui să înlocuiți valorile cu tastele aplicației dvs. Google înainte de a o executa.

Puteți găsi și acest articol la C # Corner.

Puteți verifica celelalte articole ale mele despre ASP .NET Core aici

Vezi si

• Autentificare utilizând LinkedIn în ASP.NET Core 2.0
• Autentificare utilizând Twitter în ASP.NET Core 2.0
• Autentificare utilizând Facebook în ASP.NET Core 2.0
• Autentificarea cookie-urilor cu ASP.NET Core 2.0
• ASP.NET Core – Autentificare în doi factori utilizând Google Authenticator

Publicat inițial la ankitsharmablogs.com