Провера аутентичности помоћу Гоогле-а у АСП.НЕТ Цоре 2.0

Увод

Понекад желимо да се наши корисници пријаве помоћу постојећих акредитива из независних апликација, као што су Фацебоок, Твиттер, Гоогле итд. У овом чланку ћемо испитати потврду идентитета апликације АСП.НЕТ Цоре помоћу Гоогле налога.

Предуслови

  • Одавде инсталирајте .НЕТ Цоре 2.0.0 или новији СДК.
  • Инсталирајте најновију верзију Висуал Студио 2017 одавде.

Направите МВЦ веб апликацију

Отворите Висуал Студио и изаберите Филе >> Нев >> Пројецт. Након одабира пројекта, отвориће се дијалог „Нови пројекат“. Изаберите .НЕТ Цоре унутар менија Висуал Ц # на левој табли. Затим одаберите „АСП.НЕТ Цоре Веб Апплицатион“ из доступних типова пројеката. Ставите назив пројекта који с ГооглеАутх и притисните ОК. Погледајте ову слику.

Након што кликнете на ОК, отвориће се нови дијалог у којем ће се тражити да одаберете предложак пројекта. Можете да видите два падајућа менија у горњем левом углу прозора шаблона. Изаберите „.НЕТ Цоре“ и „АСП.НЕТ Цоре 2.0“ из ових падајућих менија. Затим одаберите образац „Веб апликација (Модел-Виев-Цонтроллер)“. Кликните на дугме Промени потврду идентитета и отвориће се дијалошки оквир „Промени потврду идентитета“. Изаберите „Индивидуал Усер Аццоунт“ и кликните ОК. Сада поново кликните ОК да бисте креирали нашу веб апликацију.

Пре покретања апликације, морамо применити миграције на нашу апликацију.

Идите на Алатке >> Нугет Пацкаге Манагер >> Конзола Манагер Пацкаге.

Отвориће конзолу Управљача пакетима. Ставите команду Упдате-Датабасе и притисните ентер. Ово ће ажурирати базу података користећи прве миграције Ентити Фрамеворк Цоде.

Притисните Ф5 да бисте покренули апликацију. Видећете почетну страницу, као што је приказано доле.

Забележите УРЛ са траке за адресу прегледача. У овом случају, УРЛ је // лоцалхост: 51792 /. Овај УРЛ нам је потребан за конфигурисање апликације Гоогле, што ћемо и учинити у следећем одељку.

Направите апликацију Гоогле

Морамо да креирамо нову Гоогле апликацију на Гоогле АПИ конзоли. Идите на //цонсоле.девелоперс.гоогле.цом/пројецтселецтор/апис/либрари и пријавите се помоћу Гоогле налога. Ако немате Гоогле налог, треба да га отворите. Не можете да наставите без Гоогле налога. Након што се пријавите, бићете преусмерени на страницу библиотеке АПИ Манагер, сличну оној приказаној у наставку.

Кликните на дугме Креирај да бисте се преселили на страницу „Нови пројекат“ на којој треба да креирате нови пројекат. Поље „Назив пројекта“ аутоматски ће се попунити са подразумеваним именом које пружа Гоогле. Ако желите, можете то заменити својим сопственим именом. За овај водич користићемо подразумевано име. Прихватите услове услуге, а затим кликните на Цреатедугме .

Ваш пројекат ће бити успешно направљен и бићете преусмерени на страницу АПИ библиотеке сличну оној приказаној у наставку.

Потражите Гоогле+ АПИ на траци за претрагу и изаберите Гоогле+ АПИ из резултата претраге. Погледајте доњу слику.

Након одабира опције Гоогле+ АПИ, бићете преусмерени на страницу као што је приказано у наставку, где треба да кликнете на дугме Омогући .

После овога, Гоогле+ АПИ ће бити омогућен и бићете преусмерени на почетну страницу АПИ-ја. Кликните на Цреате цредентиалсдугме на десној страни странице да бисте конфигурисали тајне за свој АПИ.

Видећете образац „Додајте акредитиве свом пројекту“.

Овај образац има три одељка.

Попуните детаље одељака како је описано у наставку.

Одељак 1 - Откријте какву врсту акредитива требате

  • Који АПИ користите? - Гоогле+ АПИ
  • Одакле ћете позивати АПИ? - веб сервер (на пример, Ноде.јс, Томцат)
  • Којим ћете подацима приступити? - Кориснички подаци

И кликните на дугме Шта ми требају акредитиви . Бићете преусмерени на одељак 2

Одељак 2 - Креирајте ИД клијента ОАутх 2.0

  • Име - Подразумевана вредност коју пружа Гоогле.
  • Овлашћено ЈаваСцрипт порекло - оставите га празним.
  • Овлашћени УРИ за преусмеравање - дајте основни УРЛ апликације са / сигнин-гоогле који јој је додан. За овај водич, УРЛ ће бити // лоцалхост: 51792 / сигнин-гоогле. Након уноса УРЛ-а притисните ТАБ да бисте додали вредност.

Након тога, кликните на дугме Цреате цлиент ИД . Бићете преусмерени на одељак 3.

Одељак 3 - Постављање екрана за сагласност за ОАутх 2.0

  • Адреса е-поште - Изаберите своју адресу е-поште из падајућег менија. Ова вредност је маскирана на горњој слици ради приватности.
  • Назив производа приказан корисницима - Унесите било који назив производа. Овде користимо „АутхДемо“ као назив производа.

Напомена : Не користите реч „Гоогле“ у називу производа. Затражиће се грешка и неће вам бити дозвољено да креирате апликацију. То значи да је „ГооглеАутхДемо“ неважеће име.

Кликните на даље.

Ваши акредитиви су успешно направљени. Кликните на Преузми да бисте на свој локални рачунар преузели ЈСОН датотеку са свим тајнама апликација, а затим кликните на Готово да бисте довршили поступак.

Отворите управо преузету датотеку цлиент_ид.јсон и забележите поља ЦлиентИд и ЦлиентСецрет . Ове вредности ће нам бити потребне за конфигурисање Гоогле аутентификације у нашој веб апликацији.

Конфигуришите своју веб апликацију да користи Гоогле потврду идентитета

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.

Овај чланак можете пронаћи и на Ц # Цорнер.

Остале моје чланке о АСП .НЕТ Цоре можете погледати овде

Такође видети

  • Провера аутентичности помоћу ЛинкедИн-а у АСП.НЕТ Цоре 2.0
  • Провера идентитета помоћу Твиттера у АСП.НЕТ Цоре 2.0
  • Провера идентитета помоћу Фацебоока у АСП.НЕТ Цоре 2.0
  • Провера аутентичности колачића помоћу АСП.НЕТ Цоре 2.0
  • АСП.НЕТ Цоре - двофакторска аутентификација помоћу Гоогле Аутхентицатор-а

Првобитно објављено на анкитсхармаблогс.цом