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

Вступление

Иногда мы хотим, чтобы наши пользователи входили в систему, используя свои существующие учетные данные из сторонних приложений, таких как 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» из доступных типов проектов. Введите название проекта как GoogleAuth и нажмите ОК. Обратитесь к этому изображению.

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

Перед запуском приложения нам нужно применить миграции к нашему приложению.

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

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

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

Обратите внимание на URL-адрес в адресной строке браузера. В данном случае это URL http: // localhost: 51792 /. Этот URL-адрес нужен нам для настройки нашего приложения Google, что мы и сделаем в следующем разделе.

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

Нам нужно создать новое приложение Google в консоли Google API. Перейдите к https://console.developers.google.com/projectselector/apis/library и войдите в систему, используя свою учетную запись Google. Если у вас нет учетной записи Google, вам необходимо ее создать. Вы не можете продолжить без учетной записи Google. После входа в систему вы будете перенаправлены на страницу библиотеки API Manager, аналогичную показанной ниже.

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

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

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

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

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

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

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

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

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

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

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

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

Имя - значение по умолчанию, предоставленное Google.
Авторизованные источники JavaScript - оставьте поле пустым.
URI авторизованного перенаправления - укажите базовый URL-адрес вашего приложения с добавлением к нему / signin-google. В этом руководстве URL-адрес будет http: // localhost: 51792 / signin-google. После ввода URL-адреса нажмите TAB, чтобы добавить значение.

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

Раздел 3. Настройка экрана согласия OAuth 2.0

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

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

Нажмите "Продолжить".

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

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

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

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

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

Откроется файл 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?}");  
            });  
        }  
    }  
}

На этом наше приложение готово.

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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