JWT (JSON Web Token) Authentication с .NET Core 2.1 и React

JSON Web Token (JWT) е JSON-базиран отворен стандарт (RFC 7519) за създаване на „жетони“, които съдържат определен брой твърдения. Например, един сървър може да генерира жетон, който съдържа твърдението „влязъл като администратор“ и достави тази информация до клиент. В днешната статия нямаме намерение да навлизаме във формални подробности, затова си има Wikipedia. Повече прочететe тук.

Най-важните неща, които трябва да знаем за JWT са:

    • Съдържа определен брой твърдения (например „влязъл като админ“)
    • Генерира се от сървъра и се подписва с частния ключ на едната страна (обикновено на сървъра)
    • Когато потребителят получи този токен, той трябва да го запази локално, за да може по-късно да използва защитените ресурси

И така, за тази имплементация ще използваме .NET Core 2.1 и ReactJS.
За да си създадем примерен проект изпълняваме

dotnet new react -o <project_name>

в инструмента за текстови команди. (Първо се уверете, че .NET Core SDK е инсталиран на вашата машина.)

Генериране на токена

1. Добавяме

app.UseAuthentication()

в метода Configure в Startup.cs. Това добавя инстанция на AuthenticationMiddleware към последователността от действия при обработка на заявки от страна на процеса, което на практика включва възможността за автентикация.

2. В тялото на метода ConfigureServices добавяме

services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)

 

.AddJwtBearer(options =>

 

{

 

options.TokenValidationParameters = new
Microsoft.IdentityModel.Tokens.TokenValidationParameters()

 

{
RequireExpirationTime = true,

 

ValidIssuer = „YOU_ISSUER_VALUE“,

 

ValidateIssuer = true,

 

ValidateAudience = false,

 

ValidateLifetime = true,

 

ValidateIssuerSigningKey = true,

 

IssuerSigningKey = new
SymmetricSecurityKey(Encoding.UTF8.GetBytes(„YOUR_KEY“))

 

};

 

});

Току-що казахме на нашия сървър какво да търси, когато валидира токен, а също така и ключа, с който ще бъде подписан всеки токен.

3. Вече сме готови да добавим нашият Controller метод, който всъщност ще създаде токените. Преди това, обаче, ще допълним

routes.MapRoute(name: "api",template:"api/{controller}/{action}/{id?}");

към извикването на метода UseMvc в Configure метода.

4. Сега нека създадем нов RegistrationController в проекта и да го добавим в login метода.

[HttpPost]
public JsonResult Login([FromBody] LoginParameters login)
{
<Here we should validate the received email and password and

 

proceed if they are valid>
var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(„YOUR_KEY“));
var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
var claims = new[]
{
new Claim(ClaimTypes.Role, „Administrator“),
};
var token = new JwtSecurityToken(„YOUR_ISSUER_VALUE“,
„YOUR_AUDIENCE_VALUE“, claims, expires:
DateTime.Now.AddMinutes(30),signingCredentials: creds);
var tokenString = new JwtSecurityTokenHandler().WriteToken(token);
return new JsonResult(new {token = tokenString });

Тук LoginParameters е клас, който има две полета – Email и Password.

Получаване и запаметяване на токена

Сега нека създадем нашия login формуляр. Първо ще добавя два npm пакета: Material-UI и Axios. Първият представлява много добра библиотека с React контроли, а вторият – Promise-based HTTP клиент. Те в никакъв случай не са задължителни, но аз обичам да ги използвам в моите React проекти.

За да ги инсталирате, отворете командния прозорец и изпълнете

npm install --save @material-ui/core axios

Ще създадем собствен HTTP клиент, който използва Axios библиотеката и нашето цяло приложение ще използва този клиент като bottleneck. На това място ще поставим токена, след като сме го получили.

import axios from 'axios'

 

class httpClient {

 

constructor() {

 

const token = JSON.parse(localStorage.getItem(‘user’) || ‘{}’)[‘token’]

 

const instance = axios.create({

 

baseURL: ‘/’,

 

headers: { ‘Authorization’: `Bearer ${token}` }

 

})

 

this.axiosInstance = instance

 

}

 

get(url){

 

return this.axiosInstance.get(url)

 

.then((resp) => {

 

})

 

.catch((resp) => {

 

if (resp.response !== undefined && resp.response.status == ‘401’) {

 

localStorage.removeItem(‘user’)

 

location.replace(‘/login’)

 

} else {

 

return Promise.reject(resp)

 

}})

 

}

 

post(url, formData) {

 

return this.axiosInstance.post(url, formData)

 

.then((resp) => {

 

})

 

.catch((resp) => {

 

if (resp.response !== undefined && resp.response.status == ‘401’) {

 

localStorage.removeItem(‘user’)

 

location.replace(‘/login’)

 

} else {

 

return Promise.reject(resp)

 

}})

 

}

 

setTokenOnLogin = () => {

 

const token = JSON.parse(localStorage.getItem(‘user’) || ‘{}’)[‘token’]

 

this.axiosInstance.defaults.headers = { ‘Authorization’: `Bearer ${token}` }
}

 

clearTokenOnLogout = () => {

 

localStorage.removeItem(‘user’)

 

this.axiosInstance.defaults.headers = {}

 

}}

 

const instance = new httpClient()

 

export default instance

Остана ни само да set-нем item с ключ ‘user’ и стойност – полученият токен, ако заявката до метода Login е била успешна.

 

a

Към страници ...

a

Повече информация по темата тук:

Можете да намерите повече информация тук: iphos.bg

Най-нови публикации

Tag-Cloud

2-факторна автентикация (1) AI (2) Artificial Intelligence (2) DMS (1) Endpoint решения за сигурност (1) Enterprise Search (3) ESET (2) ESET Gold Partner (2) EU GDPR (3) GDPR (2) Helpdesk софтует (1) IT No-Gos за фирми (1) Machine Learning (2) searchIT (3) Ticketing системи (1) WLAN криптиране (1) WLAN сигурност (1) Абонаментна компютърна поддръжка (2) База данни (1) Бизнес решение за мрежова сигурност (2) Защита от Malware (3) Защита от Ransomware (3) ИТ аутсорсинг (1) ИТ инфраструктура (8) ИТ поддръжка (6) ИТ разходи (2) ИТ сигурност (9) Практически ИТ съвети за компании (1) Практически съвети за фирми (5) Регламент за защита на личните данни (2) Спазване на GDPR (2) двуфакторна автентикация (1) ден на системния администратор (1) защита от зловреден софтуер (2) защита от рансъмуер (1) изкуствен интелект (2) кибератака (1) компютърна поддръжка (4) корпоративна търсачка (4) корпоративно търсене (2) криптиране на данни (1) най-добрата защита от вируси (1) нефукциониращо търсене в Outlook (1) разработка на софтуер (3) система за управление на документи (1)

Искате ли да получите оферта?

Информирайте ни за вашите изисквания, спиделете ни вашите идеи и един от нашите служители ще ви даде първоначална консултация.

След това ще Ви представим груба концепция, както и необвързваща ценова оферта.

Tel: +359 (0)2 44 10 681

E-Mail: office@iphos.bg

7 + 12 =

Компанията

Доказана интернационална компания - за най-добрите ИТ решения. Цялостни услуги в областите Компютърна поддръжка / IT / ITSM, Разработка на софтуер и Уеб приложения. По-бързо, по-компетентно, по-изгодно.

ИТ Инфраструктура

Като системен интегратор, предлагаме цялостни услуги в сферата на администрирането и поддръжката на ИТ инфраструктура. ИТ Мениджмънт / ITSM, базиран на ITIL - компютърна поддръжка, мрежи, сървъри, Linux, Windows, Exchange и др.

Разработка на Софтуер

Изработка на инидивидуализирани софтуерни решения от опитни екипи в България и Австрия. Професионално отношение към клиента и високо качество на услугите. Изработка на десктоп и мобилни приложения, интерфейси, бази данни и др.

Изработка на уеб сайтове

Изработка на уеб сайтове & уеб приложения от най-високо ниво. Максимална разходна ефективност и качество. Уеб решения в областите интранет & екстранет, изработка на уеб сайтове, онлайн магазини & електронна търговия, тарифни калкулатори, SEO & SEM и др.

Iphos IT Solutions

+359 (0)2 44 10 681

 

1618 София, бул. Цар Борис III 168, Ет. 3, Офис 33