Как аутентифицировать пользователей с помощью LinkedIn в ASP.NET Core 2.0

1656583581 kak autentificzirovat polzovatelej s pomoshhyu linkedin v aspnet core 20

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

wKIXELf9SrSUZuY9B-xD7k6I-HprrlpBmdhB
Источник изображения

Введение

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

Предпосылки

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

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

Откройте Visual Studio и выберите Файл >> Новый >> Проект. После выбора проекта откроется диалоговое окно Новый проект.

Выберите .NET Core в меню Visual C# на левой панели. Затем выберите ASP.NET Core Web Application из доступных типов проектов.

Назовите проект LinkdinAuth и нажмите OK.

E79vbhBT7QoeX-w-PTjHfS3zfY9-p4X1-lRr

После нажатия ОК откроется новое диалоговое окно с просьбой выбрать шаблон проекта. Вы можете увидеть два нижних меню в верхнем левом углу окна шаблона. Выберите «.NET Core» и «ASP.NET Core 2.0» в раскрывающемся меню.

Затем выберите шаблон «Веб-приложение (модель-просмотр-контроллер)».

Нажмите кнопку Изменить аутентификацию и откроется диалоговое окно «Изменить аутентификацию».

Выберите «Индивидуальная учетная запись пользователя» и нажмите кнопку «ОК». Теперь снова нажмите OK, чтобы создать нашу веб-приложение.

na6nloJuhfcQn5O87p4zcnDujh1cWqbeRpqZ

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

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

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

bmvIJTMzQbQAF0BViIyn44zHO3vXV15-XtF9

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

ySQg5QFxS2mDs0B1w7-t-2xft57vk3KKmFYN

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

Выделите аккаунт LinkedIn и войдите в него. Если у вас нет учетной записи LinkedIn, вам нужно ее создать, поскольку без нее вы не можете продолжить.

После того, как вы войдете в систему, вы будете перенаправлены на страницу Мои программы страницу, похожую на приведенную ниже.

0NTuW8X48p50EU4R9ID8jBNMAEMMqaV5VSKE

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

  • Название компании: — Дайте соответствующее название. Здесь мы используем название Демокомпания.
  • Название программы: — это название программы LinkedIn. Дайте правильное имя по вашему выбору.

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

  • Описание приложения: дайте правильное описание своей программы.
  • Логотип программы: вам нужно скачать логотип для вашего приложения. Если у вас нет логотипа, просто загрузите любое изображение. Пожалуйста, предоставьте изображение логотипа программы в формате PNG или JPEG. Изображение должно быть квадратным размером не менее 80 x 80 пикселей и не более 5 МБ.
  • Использование программы: выберите подходящее значение из раскрывающегося меню.
  • URL-адрес веб-сайта: Укажите URL-адрес своего общедоступного веб-сайта. Для этого учебника мы будем использовать фиктивный URL-адрес http://demopage.com.

Примечание. Если вы используете формат URL www.demopage.comвы получите ошибку «Пожалуйста, введите a действительный URL-адрес». Всегда используйте формат URL, например http://demopage.com.

  • Электронная почта: укажите свой идентификатор электронной почты. Если вы не хотите предоставлять личный идентификатор электронной почты, вы также можете использовать любой фиктивный идентификатор электронной почты, например xyz@gmail.com
  • Служебный телефон: укажите контактный номер. Для этого учебника я использую номер телефона 123456789.
nrsaGLAUcu30hYK9cbm21yxF9Y6rzZs-3guA

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

Вот вы видите Идентификатор клиента и Секрет клиента поля в разделе Ключи аутентификации. Обратите внимание на эти значения, поскольку они понадобятся нам для настройки аутентификации LinkedIn в нашем веб-приложении.

В поле Авторизованные URL-адреса перенаправления введите базовый URL-адрес программы /signin-linkedin прилагается к нему. Для этого учебника будет URL-адрес http://localhost:52676/signin-linkedin. После ввода URL нажмите кнопку Добавить рядом с ней кнопку, чтобы добавить значение. Обратитесь к картинке ниже:

M3IGu7qbkUcgohdAXfi4zVvV-irPJIgJoR8u

Настройте свой web wpp на использование аутентификации LinkedIn

Мы будем использовать пакет Nuget третьей стороны AspNet.Security.OAuth.LinkedIn чтобы применить аутентификацию LinkedIn в нашем веб-приложении. Откройте диспетчер пакетов NuGet (Инструменты >> Диспетчер пакетов NuGet >> Консоль диспетчера пакетов) и введите следующую команду. Нажмите Enter, чтобы установить его.

Install-Package AspNet.Security.OAuth.LinkedIn -Version 2.0.0-rc2-final

Этот пакет NuGet поддерживается с помощью aspnet-contrib. Подробнее об этом пакете можно прочитать здесь.

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

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

qBERap-JaDEhvoaoYUwbzoUmBbaJFryXHuTh

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

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

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

services.AddAuthentication().AddLinkedIn(options =>{    options.ClientId = Configuration["Authentication:LinkedIn:ClientId"];    options.ClientSecret = Configuration["Authentication:LinkedIn:ClientSecret"];    options.Events= new OAuthEvents()    {        OnRemoteFailure = loginFailureHandler =>        {            var authProperties = options.StateDataFormat.Unprotect(loginFailureHandler.Request.Query["state"]);            loginFailureHandler.Response.Redirect("/Account/login");            loginFailureHandler.HandleResponse();            return Task.FromResult(0);        }    };});

В этом разделе кода мы читаем Идентификатор клиента и Секрет клиента значение из secrets.json файл для аутентификации. В этом разделе мы также обрабатываем событие «OnRemoteFailure». Итак, если пользователь откажет в доступе к своему аккаунту LinkedIn, он будет перенаправлен обратно на страницу входа.

Итак, наконец, 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 LinkdinAuth.Data;using LinkdinAuth.Models;using LinkdinAuth.Services;using Microsoft.AspNetCore.Http;using Microsoft.AspNetCore.Authentication.OAuth;  namespace LinkdinAuth{    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().AddLinkedIn(options =>            {                options.ClientId = Configuration["Authentication:LinkedIn:ClientId"];                options.ClientSecret = Configuration["Authentication:LinkedIn:ClientSecret"];                  options.Events= new OAuthEvents()                {                    OnRemoteFailure = loginFailureHandler =>                    {                        var authProperties = options.StateDataFormat.Unprotect(loginFailureHandler.Request.Query["state"]);                        loginFailureHandler.Response.Redirect("/Account/login");                        loginFailureHandler.HandleResponse();                        return Task.FromResult(0);                    }                };              });               // 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?}");            });        }    }}

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

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

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

vbFttzcLv92wHLH2-ygU4mR0VYpyf5GXYrQM

Вы будете перенаправлены на http://localhost:52676/Account/Loginгде вы можете увидеть опцию входа с помощью LinkedIn в правой части страницы.

Y0xfdJTNoKlRGBHQ80NlU4xEyx6pEMNXpCEK

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

pGsM2ZoAeJnvHXM5RFiD1ZaT5ChhAWZQ-aEa

Введите свои учетные данные LinkedIn и нажмите Разрешить доступ кнопку. Приложению понадобится несколько минут, чтобы аутентифицировать вашу учетную запись LinkedIn. После успешной аутентификации с помощью LinkedIn вы будете перенаправлены на страницу регистрации в вашем приложении, где вам нужно будет ввести идентификатор электронной почты, чтобы пометить свою учетную запись.

Lc6AxdswuS0k0rYbuqniUlMPlfNe2FHG2cYy

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

gu9vHE9TEehppVZdX3DljEjonZx62Ycy7Uzq

Вывод

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

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

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

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

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

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

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

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

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