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

Автор оригинала: FreeCodeCamp Community Member.

Анькит Шарма

Вступление

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

Предпосылки

Установите .NET. Core 2.0.0 или выше SDK из здесь Отказ
Установите последнюю версию Visual Studio 2017 от здесь Отказ

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

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

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

Назовите проект Linkdinauth и нажмите ОК.

После нажатия на OK новый диалог откроется просьбой выбрать шаблон проекта. Вы можете увидеть два раскрывающихся меню в левом верхнем углу окна шаблона. Выберите “.NET. CORE “и” ASP.NET CORE 2.0 “от этих раскрывающихся.

Затем выберите «Веб-приложение (Model-View-Controller)».

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

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

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

Перейдите к инструментам >> Nuget Package Manager >> Консоль менеджера пакетов.

Он откроет консоль менеджера пакетов. Поставить в Обновление-база данных Команда и нажмите ввод. Это обновит базу данных с использованием первых миграций Antity Framework.

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

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

Перейдите к https://www.linkedin.com/developer/apps и войдите в систему, используя свою учетную запись LinkedIn. Если у вас нет учетной записи LinkedIn, вам нужно создать один, так как вы не можете действовать без одного.

Как только вы вошли в систему, вы будете перенаправлены на Мои приложения Страница похожа на то, что показано ниже.

Нажмите на Создать приложение Кнопка для навигации к Создать новое приложение страница. Здесь вам нужно заполнить детали для создания нового приложения LinkedIn.

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

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

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

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

Деловая электронная почта: дайте ваше письмо я d. Если вы не хотите предоставлять свой личный идентификатор электронной почты, вы также можете использовать любой фиктивный идентификатор электронной почты, такой как xyz@gmail.com.
Деловой телефон: Укажите свой контактный номер. Для этого учебника я использую фирмальный номер телефона 123456789.

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

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

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

Настройте вашу WPP WPP для использования аутентификации LinkedIn

Мы будем использовать третьей партии Nuget Package Aspnet. Безопасность. ОАУТ. LinkedIn Для реализации аутентификации LinkedIn в нашем веб-приложении. Откройте Nuget Package Manager (Инструменты >> Nuget Package Manager >> Консоль менеджера пакетов) и поставить в следующую команду. Нажмите Enter, чтобы установить его.

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

Этот пакет Nuget поддерживается Aspnet-Aspnet. Вы можете узнать больше об этом пакете здесь Отказ

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

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

А 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);        }    };});

В этом разделе «код» мы читаем ID клиента и Секрет клиента Значения из 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(options =>                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));              services.AddIdentity()                .AddEntityFrameworkStores()                .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();              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: 52676/аккаунт/логин , где вы можете увидеть возможность войти в систему, используя LinkedIn на правой стороне страницы.

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

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

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

Заключение

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

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

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

Вы также можете найти эту статью на C # угол Отказ

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

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

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