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

1656582262 autentifikacziya s pomoshhyu twitter v aspnet core 20

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

1EzC6bQArUsCO1BMTTnEDJeEY4c0AEb9F7sz
Фото Уильяма Айвена на Unsplash

Введение

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

Предпосылки

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

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

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

cq-CFz1g6xYXEsBVwGl0TAeFcTop50eW8-J9

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

XTWNNIJlmrRbktYzfCqgKubRHB0CRDH298Z-

Прежде чем запустить программу, нам нужно применить миграции к нашей программе. Перейти к Инструменты >> Диспетчер пакетов NuGet >> Консоль диспетчера пакетов.

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

oXXyV-TDBUPTbFPH0J8tgKm0qqlVqLuJivpK

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

ZD8J4FfPJlG7f7y3AYurYUWQ1H2i4KFu4SSC

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

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

Прежде чем мы начнем создавать наше приложение ASP.NET Core 2.0, нам нужно создать и настроить приложение Twitter, чтобы мы могли использовать его для аутентификации нашего приложения.

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

DhLIHOx6mS78mT2H-PsVCz5l7lDLfIiaZ8hc

Он покажет все ваши настроенные приложения Twitter. Поскольку я уже настроил приложение Twitter, оно отображается. Если вы создаете его в первый раз, он ничего не покажет. Нажмите кнопку «Создать новое приложение» в правом верхнем углу. Он откроет форму и попросит заполнить данные для создания новой программы.

o6WpTlQrLxwkuJFormFZzQKCIDGJF56B4yZ6

Вы можете заполнить форму, указав детали, как указано ниже.

  • Имя
    Дайте любое название по вашему выбору. Но он должен быть универсальным. Это означает, что никто не должен использовать это имя раньше для создания приложения Twitter. Это работает так же, как идентификатор электронной почты. Два человека не могут иметь одинаковый идентификатор электронной почты. Я использую имя «DemoTwitterAuth» для этого учебника. Если вы используете уже существующее название, вы получите сообщение об ошибке.Клиентская программа не прошла проверку: <ваше введене ім’я> уже принятоr Имя».
  • Описание
    Дайте соответствующую характеристику.
  • Веб-сайт
    Предоставьте URL своего общедоступного веб-сайта. Но для этой демонстрационной цели мы будем использовать фиктивный URL-адрес http://demopage.com.

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

Примите соглашение разработчика, поставив флажок и нажмите кнопку «Создать программу Twitter». Вы будете перенаправлены на вашу только что созданную страницу приложения Twitter, и вы также увидите сообщение об успехе, как показано на рисунке ниже.

YnVKPlP1oLmzvsIMT-SxN0qNaV823gRGQUAN

Перейдите на вкладку «Ключи и токены доступа» и запишите значения полей «Ключ потребителя» (Ключ API) и Секрет потребителя (Секрет API). Мы будем использовать эти значения в ASP.NET Core.

На этом изображении поля замаскированы в целях безопасности.

iTBe1Ka428jg0MbRF0sLIfVu5ZWCXll8QOx8

Наше приложение Twitter было успешно создано.

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

Нам нужно сохранить значения полей Consumer Key (API Key) и Consumer Secret (API Secret) в нашем приложении. Для этого мы будем использовать инструмент Secret Manager.

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

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

o1hmnNs6pwY1RQAW3dxtkxfEKL0T1KuDV5bY

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

{  
    "Authentication:Twitter:ConsumerKey": "Your Consumer Key here",  
    "Authentication:Twitter:ConsumerSecret": "Your Consumer Secret here"  
}

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

services.AddAuthentication().AddTwitter(twitterOptions => {  
    twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerKey"];  
    twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];  
});

В этом разделе мы читаем ConsumerKey и ConsumerSecret с целью аутентификации. Итак, наконец, 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 DemoTwitterAuth.Data;  
using DemoTwitterAuth.Models;  
using DemoTwitterAuth.Services;  
namespace DemoTwitterAuth {  
    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().AddTwitter(twitterOptions => {  
                twitterOptions.ConsumerKey = Configuration["Authentication:Twitter:ConsumerKey"];  
                twitterOptions.ConsumerSecret = Configuration["Authentication:Twitter:ConsumerSecret"];  
            });  
            // 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?}");  
            });  
        }  
    }  
}

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

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

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

aHMNgaRPh0NMXgIW4s2mrJtJk5vKqVV8XJ0H

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

eZDBIjX9Pk8wsz60GqbiWDROIR13orQOBnjB

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

WEHZKMOVfDrG3IoFe-LRxKRJSjetvTM3nQpN

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

Bzg-YBfpHwWEkhTZMElngLxQQNo7K382MyWs

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

i1ajB6q3LxCN4Sl8MA511219WG1bgB5SsPpW

Вывод

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

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

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

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

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

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

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

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

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