Pengesahan Menggunakan Google Dalam ASP.NET Core 2.0

Pengenalan

Kadang-kadang, kami mahu pengguna kami log masuk menggunakan bukti kelayakan mereka yang ada dari aplikasi pihak ketiga, seperti Facebook, Twitter, Google dan sebagainya. Dalam artikel ini, kita akan melihat pengesahan aplikasi Core ASP.NET menggunakan akaun Google.

Prasyarat

  • Pasang .NET Core 2.0.0 atau ke atas SDK dari sini.
  • Pasang versi terbaru Visual Studio 2017 dari sini.

Buat Aplikasi Web MVC

Buka Visual Studio dan pilih Fail >> Baru >> Projek. Setelah memilih projek, dialog "Projek Baru" akan terbuka. Pilih .NET Core di dalam menu Visual C # dari panel kiri. Kemudian, pilih "Aplikasi Web Teras ASP.NET" dari jenis projek yang tersedia. Meletakkan nama projek s GoogleAuth dan tekan OK. Rujuk gambar ini.

Setelah mengklik OK, dialog baru akan terbuka meminta anda memilih templat projek. Anda dapat melihat dua menu lungsur di kiri atas tetingkap templat. Pilih ".NET Core" dan "ASP.NET Core 2.0" dari dropdown ini. Kemudian, pilih templat "Aplikasi Web (Model-View-Controller)". Klik pada butang Change Authentication, dan kotak dialog "Change Authentication" akan terbuka. Pilih "Akaun Pengguna Individu" dan klik OK. Sekarang, klik OK sekali lagi untuk membuat aplikasi web kami.

Sebelum menjalankan aplikasi, kita perlu menerapkan migrasi ke aplikasi kita.

Navigasi ke Alat >> Nuget Package Manager >> Package Manager Console.

Ia akan membuka Konsol Pengurus Pakej. Masukkan arahan Update-Database dan tekan enter. Ini akan mengemas kini pangkalan data menggunakan Entity Framework Code First Migrations.

Tekan F5 untuk menjalankan aplikasi. Anda akan melihat halaman utama, seperti gambar di bawah.

Perhatikan URL dari bar alamat penyemak imbas. Dalam kes ini, URL adalah // localhost: 51792 /. Kami memerlukan URL ini untuk mengkonfigurasi aplikasi Google kami, yang akan kami lakukan di bahagian seterusnya.

Buat aplikasi Google

Kita perlu membuat aplikasi Google baru di konsol API Google. Navigasi ke //console.developers.google.com/projectselector/apis/library dan log masuk menggunakan akaun Google anda. Sekiranya anda tidak mempunyai akaun Google, anda perlu membuatnya. Anda tidak boleh meneruskan tanpa akaun Google. Setelah log masuk, anda akan diarahkan ke halaman Perpustakaan Pengurus API, sama seperti yang ditunjukkan di bawah.

Klik pada butang Buat untuk berpindah ke halaman "Projek Baru" di mana anda perlu membuat projek baru. Medan "Nama projek" akan diisi secara automatik dengan nama lalai yang disediakan oleh Google. Sekiranya anda mahu, anda boleh menukarnya dengan nama tersendiri anda Untuk tutorial ini, kami akan menggunakan nama lalai. Terima syarat perkhidmatan dan kemudian klik Buatbutang .

Projek anda akan berjaya dibuat dan anda akan diarahkan ke halaman Perpustakaan API yang serupa dengan yang ditunjukkan di bawah.

Cari API Google+ di bar carian dan pilih API Google+ dari hasil carian. Rujuk gambar di bawah.

Setelah memilih pilihan Google+ API, Anda akan diarahkan ke halaman seperti yang ditunjukkan di bawah, di mana anda perlu mengklik butang Enable .

Selepas ini, Google+ API akan diaktifkan dan anda akan diarahkan ke halaman utama API. Klik pada Buat kelayakanbutang di sebelah kanan halaman untuk mengkonfigurasi rahsia untuk API anda.

Anda akan melihat borang "Tambahkan kelayakan ke projek anda".

Bentuk ini mempunyai tiga bahagian.

Isi perincian bahagian seperti yang dinyatakan di bawah.

Bahagian 1 - Ketahui jenis kelayakan yang anda perlukan

  • API mana yang anda gunakan? - API Google+
  • Dari mana anda memanggil API? - Pelayan web (contohnya, Node.js, Tomcat)
  • Data apa yang akan anda akses? - Data pengguna

Dan klik pada butang Apa kelayakan yang saya perlukan . Anda akan diarahkan ke bahagian 2

Bahagian 2 - Buat ID klien OAuth 2.0

  • Nama - Nilai lalai yang diberikan oleh Google.
  • Asal JavaScript yang dibenarkan - Biarkan kosong.
  • URI pengalihan yang dibenarkan - Berikan URL asas aplikasi anda dengan / signin-google yang dilampirkan kepadanya. Untuk tutorial ini, URL akan menjadi // localhost: 51792 / signin-google. Setelah memasukkan URL, tekan TAB untuk menambah nilai.

Selepas ini, klik pada butang Buat ID pelanggan . Anda akan diarahkan ke bahagian 3.

Bahagian 3 - Siapkan skrin persetujuan OAuth 2.0

  • Alamat e-mel - Pilih alamat e-mel anda dari menu lungsur. Nilai ini disembunyikan pada gambar di atas untuk privasi.
  • Nama produk ditunjukkan kepada pengguna - Masukkan sebarang nama produk. Di sini kita menggunakan "AuthDemo" sebagai nama Produk.

Catatan : Jangan gunakan kata "Google" dalam nama produk anda. Anda akan diminta menerima ralat dan anda tidak akan dibenarkan membuat aplikasi. Ini bermaksud "GoogleAuthDemo" adalah nama yang tidak sah.

Klik teruskan.

Kelayakan anda berjaya dibuat. Klik Muat turun untuk memuat turun fail JSON ke mesin tempatan anda dengan semua rahsia aplikasi anda, dan kemudian klik Selesai untuk menyelesaikan prosesnya.

Buka hanya turun client_id.json fail dan membuat nota daripada ClientId dan ClientSecret bidang. Kami memerlukan nilai-nilai ini untuk mengkonfigurasi pengesahan Google di aplikasi web kami.

Konfigurasikan Aplikasi Web anda untuk menggunakan pengesahan Google

Kita perlu menyimpan nilai medan ClientId dan ClientSecret dalam aplikasi kita. Kami akan menggunakan alat Pengurus Rahsia untuk tujuan ini. Alat Pengurus Rahsia adalah alat projek yang boleh digunakan untuk menyimpan rahsia seperti kata laluan, Kunci API, dan lain-lain untuk projek Teras .NET semasa proses pembangunan. Dengan alat Pengurus Rahsia, kita dapat mengaitkan rahsia aplikasi dengan projek tertentu dan dapat membagikannya di beberapa projek.

Buka aplikasi web anda sekali lagi dan Klik kanan projek di Solution Explorer. Pilih Urus Rahsia Pengguna dari menu konteks.

A secrets.json fail akan terbuka. Masukkan kod berikut di dalamnya:

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

Sekarang buka fail Startup.cs dan masukkan kod berikut ke dalam kaedah ConfigureServices :

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

Di bahagian kod ini, kami membaca ClientId dan ClientSecret untuk tujuan pengesahan. Jadi akhirnya, Startup.csakan kelihatan seperti ini:

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

Dan dengan ini, aplikasi kami sudah siap.

Demo Pelaksanaan

Lancarkan aplikasi dan klik Login di sudut kanan atas halaman utama.

Anda akan diarahkan ke // localhost: 51792 / Account / halaman Login, di mana anda dapat melihat pilihan untuk login menggunakan Google di sebelah kanan halaman.

Mengklik pada butang Google akan membawa anda ke halaman log masuk Google. Di sana, anda akan diminta untuk mengisi kelayakan Google anda dan memberi kebenaran kepada aplikasi Google untuk menggunakan akaun Google anda.

Setelah pengesahan berjaya dari Google, anda akan diarahkan ke halaman pendaftaran di dalam aplikasi anda di mana anda perlu mengisi id e-mel untuk ditandakan dengan akaun anda. Id Gmail yang telah anda gunakan untuk log masuk akan diisi di medan id E-mel. Sekiranya anda ingin menggunakan id mel lain, anda boleh menukarnya di sini.

Klik daftar, anda akan diarahkan ke laman utama sekali lagi. Tetapi kali ini anda juga dapat melihat bahawa e-mel berdaftar anda berada di sudut kanan atas.

Kesimpulannya

Kami berjaya membuat dan mengkonfigurasi aplikasi Google+ dan menggunakannya untuk mengesahkan aplikasi Teras ASP.NET kami.

Anda boleh mendapatkan kod sumber dari GitHub.

Harap maklum bahawa fail secret.json mengandungi nilai palsu. Anda perlu mengganti nilai dengan kunci aplikasi Google anda sebelum melaksanakannya.

You can also find this article at C# Corner.

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

See Also

  • Authentication Using LinkedIn In ASP.NET Core 2.0
  • Authentication Using Twitter In ASP.NET Core 2.0
  • Authentication Using Facebook In ASP.NET Core 2.0
  • Cookie Authentication With ASP.NET Core 2.0
  • ASP.NET Core — Two Factor Authentication Using Google Authenticator

Originally published at ankitsharmablogs.com