Аутентификация с помощью Google в ASP.NET Core 2.0

1656582388 autentifikacziya s pomoshhyu google v aspnet core 20

автор Анкит Шарма

dY4pQByIXBmTKgRFLgt2QZRsOosg4oxtK43O
Фото Джейсона Блэка на Unsplash

Введение

Иногда мы хотим, чтобы наши пользователи вошли, используя свои учетные данные из сторонних программ, таких как Facebook, Twitter, Google и т.д. В этой статье мы рассмотрим аутентификацию ASP.NET Core с помощью аккаунта Google.

Предпосылки

  • Отсюда установите .NET Core 2.0.0 или более поздней версии SDK.
  • Установите последнюю версию Visual Studio 2017 отсюда.

Создайте веб-приложение MVC

Откройте Visual Studio и выберите Файл >> Новый >> Проект. После выбора проекта откроется диалоговое окно Новый проект. Выберите .NET Core в меню Visual C# на левой панели. Затем выберите ASP.NET Core Web Application из доступных типов проектов. Введите название проект ас GoogleAuth и нажмите OK. Обратитесь к картинке.

bj60EpFTyp-HFWKLB7DmC4wMquHcIloOg-1X

После нажатия кнопки «ОК» откроется новое диалоговое окно с просьбой выбрать шаблон проекта. Вы можете увидеть два нижних меню в верхнем левом углу окна шаблона. Выберите «.NET Core» и «ASP.NET Core 2.0» в раскрывающемся меню. Затем выберите шаблон «Веб-приложение (модель-просмотр-контроллер)». Нажмите кнопку Изменить аутентификацию и откроется диалоговое окно «Изменить аутентификацию». Выберите «Индивидуальная учетная запись пользователя» и нажмите кнопку «ОК». Теперь снова нажмите OK, чтобы создать нашу веб-приложение.

GNw22x0TBogwDhIK2M4IYygdIXX4rLckERlm

Прежде чем запустить программу, нам нужно применить миграции к нашей программе.

Перейти к Инструменты >> Диспетчер пакетов Nuget >> Консоль диспетчера пакетов.

Откроется консоль менеджера пакетов. Положить в Обновление-база данных команду и нажмите Enter. Это обновит базу данных с помощью Entity Framework Code First Migrations.

07TaK6SUF3S202GzqF9Nbq6J3r2e7OQjiSQw

Нажмите F5, чтобы запустить приложение. Вы увидите домашнюю страницу, как показано ниже.

JY4-SU8LbJTlccEjz90WLH0xCij1XKsLDPsk

Обратите внимание на URL-адрес из адресной строки браузера. В этом случае URL-адрес: Нам нужен этот URL-адрес, чтобы настроить наше приложение Google, которое мы сделаем в следующем разделе.

Создайте приложение Google

Нам нужно создать новое приложение Google на консоли Google API. Выделите и войдите в свой аккаунт Google. Если у вас нет аккаунта Google, необходимо создать его. Вы не можете продолжить без аккаунта Google. После того, как вы войдете в систему, вы будете перенаправлены на страницу библиотеки менеджера API, подобную приведенной ниже.

a1xEVPx9r5yvKP6zB6zECOORArngmXpd7Xh9

Нажмите кнопку «Создать», чтобы перейти на страницу «Новый проект», где необходимо создать новый проект. Поле «Имя проекта» будет автоматически заполнено названием по умолчанию, предоставленным Google. Если хотите, вы можете заменить это своим именем. Для этого учебника мы будем использовать имя по умолчанию. Примите условия предоставления услуг, а затем нажмите на Создайте кнопку.

PmA1mwOOv-NpLgOVnpGpcMjpjffw2gqa8ytD

Ваш проект будет успешно создан, и вы будете перенаправлены на страницу библиотеки API, подобную ниже.

ZGibyBmIl89AeIXJ8Z3efwMFaD8IYwxeYZc-

Найдите API Google+ в строке поиска и выберите Google+ API из результатов поиска. Обратитесь к картинке ниже.

hEYfCuIhx4BZ99pCcKSR2ely7wW8dCEzld96

После выбора опции API Google+ вы будете перенаправлены на страницу, как показано ниже, где нужно нажать кнопку Включить кнопку.

Gny-yyUfUwRhCbYngaTgplBh544fkBANWnev

После этого API Google+ будет включен, и вы будете перенаправлены на домашнюю страницу API. Нажмите на Создайте учетные данные кнопку в правой части страницы, чтобы настроить секреты для вашего API.

oEi6OKokWaFdE1s4BuwwNtu3VWBmAEbleUxb

Вы увидите форму «Добавьте учетные данные в свой проект».

bhrrKkJfLUUk8Elx6Zb85zyFy-jeTrNXN7Rq

Эта форма имеет три раздела.

Заполните детали разделов, как описано ниже.

Глава 1 – Узнайте, какие учетные данные вам нужны

  • Какой API вы используете? — API Google+
  • Откуда вы будете звонить в API? — Веб-сервер (например, Node.js, Tomcat)
  • К каким данным вы будете получать доступ? — Данные пользователя

И нажмите на Какие учетные данные мне нужны кнопку. Вы будете перенаправлены в раздел 2

jqgmfBYceZPa9-tRIgnVRex3vkhRhsqYC3ZF

Раздел 2 — Создайте идентификатор клиента OAuth 2.0

  • Название — значение по умолчанию, предоставленное Google.
  • Авторизованные источники JavaScript – оставьте поле пустым.
  • Авторизованные URI перенаправления — предоставите базовый URL-адрес вашего приложения /signin-google прилагается к нему. Для этого учебник URL будет выглядеть. После ввода URL нажмите TAB для добавления значения.

После этого нажмите на Создайте идентификатор клиента кнопку. Вы будете перенаправлены в раздел 3.

lexZ2KQD32HEh0doFARzIfxu5kXgGGwEiRhz
  • Адрес электронной почты — выберите свой адрес электронной почты из раскрывающегося меню. Это значение замаскировано на рисунке выше для конфиденциальности.
  • Название продукта, показанное пользователям — введите любое имя продукта. Здесь мы используем AuthDemo как название продукта.

Примечание: не используйте слово Google в названии продукта. Вам будет предложено сообщение об ошибке, и вам не будет позволено создать приложение. Это означает, что GoogleAuthDemo является недействительным именем.

Щелкните продолжить.

IumxI-6hzLont2cozVITaaQweJVhKtxP4yRD

Ваши учетные данные успешно созданы. Нажмите Загрузить чтобы загрузить файл JSON на локальную машину со всеми секретами программы, затем щелкните Готово чтобы завершить процесс.

Откройте только что загруженную client_id.json файл и запишите ClientId и ClientSecret поля. Эти значения нам понадобятся, чтобы настроить аутентификацию Google в нашем веб-приложении.

Настройте веб-приложение на использование аутентификации Google

Нам нужно сохранить значение полей ClientId и ClientSecret в нашем приложении. Для этого мы будем использовать инструмент Secret Manager. Инструмент Secret Manager — это инструмент проекта, который можно использовать для хранения секретов, таких как пароль, ключ API и т.д., для проекта .NET Core при разработке. С помощью инструмента Менеджер секретов мы можем связывать секреты программы с конкретным проектом и делиться ими между несколькими проектами.

Откройте веб-приложение еще раз и щелкните правой кнопкой мыши проект в Solution Explorer. Выберите Управляйте секретами пользователя из контекстного меню.

YooMRhsrDBiWW3UV4C1oZoT5NnsWBpcDZi2R

А secrets.json файл откроется. Вставьте в него следующий код:

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

Теперь откройте Startup.cs файл и вставьте следующий код в файл ConfigureServices метод:

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

В этом разделе мы читаем ClientId и ClientSecret с целью аутентификации. Итак, наконец, Startup.cs будет выглядеть так:

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

И к этому наша программа готова.

Демонстрация выполнения

Запустите приложение и нажмите Войти в правом верхнем углу домашней страницы.

23zs7ahiIW7wMaRAB5d-UeoCU1AXrgI6b0gN

Вы будете перенаправлены на страницу, где вы увидите опцию входа с помощью Google в правой части страницы.

Pez9fV-RzqpnMBb4hxL0ZFAW83df481uVutu

Нажав на Google кнопка переведет вас на страницу входа в Google. Там вам будет предложено ввести свои аккаунты Google и разрешить программе Google использовать вашу аккаунт Google.

После успешной аутентификации Google будет перенаправлен на страницу регистрации в вашем приложении, где вам нужно будет ввести идентификатор электронной почты, чтобы пометить свою учетную запись. Идентификатор Gmail, используемый для входа, уже будет заполнен в поле Email id. Если вы хотите использовать другой почтовый идентификатор, можно изменить его здесь.

IKLOYBbeGQG-wi1ll5YPFgIVfBaT31iFLDr9

Нажмите зарегистрироваться, вы снова будете перенаправлены на домашнюю страницу. Но на этот раз вы также можете увидеть, что ваш зарегистрированный электронный адрес находится в верхнем правом углу.

rUdpYiZfpO5I-2M7P0qwoZ3Bq2zHwpkUcplV

Вывод

Мы успешно создали и настроили программу Google+ и использовали ее для проверки подлинности нашей программы ASP.NET Core.

Вы можете получить исходный код из GitHub.

Обратите внимание, что secrets.json файл содержит фиктивные значения. Прежде чем выполнять ее, необходимо заменить значение ключами приложения Google.

Вы также можете найти статью на C# Corner.

Вы можете просмотреть мои другие статьи о ASP .NET Core здесь

Смотрите также

Первоначально опубликовано на ankitsharmablogs.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *