Снимка от Markus Spiske на Unsplash

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

Удостоверяване на потребителите на базата на роли

„Удостоверяване на потребителите въз основа на роли“ е механизъм, който предоставя достъп до различни части на приложение или система въз основа на ролята на потребителя. Ролята е набор от разрешения или привилегии, които определят действията на потребителя в системата. Например, клиентска роля в приложение за електронна търговия може да позволи на потребителите да разглеждат и купуват продукти. За разлика от това, администраторска роля може да им позволи да управляват продукти, поръчки и клиентски акаунти.

Удостоверяването на потребителите на базата на роли съществува от дълго време и се използва широко в приложения на корпоративно ниво, правителствени системи и финансови институции. Той помага на организациите да поддържат строг контрол на достъпа, да предотвратяват нарушения на данните и да защитават чувствителна информация от неоторизиран достъп. Ето някои ключови предимства от използването на базирано на роли потребителско удостоверяване:

Подробен контрол на достъпа

Удостоверяването, базирано на роли, позволява на организациите да дефинират различни нива на достъп за различни роли, като гарантира, че потребителите имат достъп само до частите на системата, които са им необходими, за да изпълняват служебните си задължения.

Подобрена сигурност

Организациите могат да намалят риска от пробиви на данни и други заплахи за сигурността, като ограничат достъпа до чувствителни данни и функции. Удостоверяването на базата на роли също позволява по-добър контрол върху потребителските акаунти и гарантира, че само оторизирани потребители имат достъп до системата.

Повишена ефективност

С автентификация, базирана на роли, потребителите не трябва да запомнят множество идентификационни данни за вход за различни системни части. Това рационализира процеса на влизане и спестява време на потребителите и ИТ екипите.

Лесно управление

Удостоверяването на базата на роли улеснява ИТ администраторите да управляват потребителски акаунти, разрешения и нива на достъп. Те могат лесно да добавят, премахват или променят роли, ако е необходимо, без да правят промени в отделни потребителски акаунти.

Внедряване на ролеви контрол на достъпа за удостоверяване на потребители в NodeJS приложения

С нарастването на броя на потребителите и ролите на приложението управлението на техния достъп може да стане тромаво и податливо на грешки. Внедряването на ролеви контрол на достъпа (RBAC) предоставя по-добър и по-мащабируем подход за контролиране на достъпа до ресурси в приложение. Този урок ще създаде основно NodeJS приложение с React и ще демонстрира как да внедрите RBAC с помощта на Frontegg.

Frontegg е цялостна платформа за SaaS компании за изграждане и управление на приложения с множество клиенти с корпоративен клас функции за сигурност и съответствие. Една от функциите на Frontegg е RBAC, която ви позволява да дефинирате и управлявате роли и разрешения за вашите потребители.

Настройвам

Предпоставки

За да следвате този урок, трябва да имате следното:

  • Node.js и npm са инсталирани на вашата машина
  • Акаунт на Frontegg
  • Основни познания за React и Node.js

Frontegg акаунт

Можете да се регистрирате за безплатен акаунт на уебсайта на Frontegg. Създайте нов акаунт, започнете проект, изберете страница за вход, която искате, и я публикувайте в dev. Това ще ви отведе до тази страница:

Това ще покаже вашите SAAS модули като страниците за регистрация и влизане, портала за администратори и други. Можете да ги проектирате както искате.

Има и бързи ръководства за това как да интегрирате Frontegg с вашето приложение. Първо ще интегрираме адаптивното поле за вход на Frontegg с нашето приложение. След това ще разгледаме портала за администриране за администратори. И накрая, ще използваме базирано на роли потребителско удостоверяване, за да защитим определени маршрути в нашето приложение.

Копирайте своя клиентски идентификатор и API ключ и ги запазете в отделен файл за по-късна употреба. Ще ги намерите в „Настройки“ във вашия проект.

Създайте приложение React за Frontend

Създайте главна папка, RBAC_Node_Frontegg. Въведете следната команда във вашия терминал:

mkdir RBAC_Node_Frontegg
cd RBAC_Node_Frontegg

Сега създайте папка с име frontend в основната папка и я въведете:

mkdir frontend
cd frontend

Започнете да създавате вашето приложение React за интерфейс, като напишете следното:

npx create-react-app python-code-nemesis-app

Влезте в директорията python-code-nemesis-app и въведете тази команда:

cd python-code-nemesis-app

След това изпълнете тази команда в терминала, за да инсталирате библиотеката Frontegg React.JS:

npm install @frontegg/react react-router-dom/client

Във файла index.js добавете следния код. Заменете вашия поддомейн и клиентски идентификатор в кода.

import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import App from ‘./App’;
import ‘./index.css’;
import { FronteggProvider } from ‘@frontegg/react’;
const contextOptions = {
 baseUrl: ‘https://[YOUR_SUBDOMAIN].frontegg.com',
 clientId: ‘[YOUR-CLIENT-ID]’
};
const authOptions = {
// keepSessionAlive: true // Uncomment this in order to maintain the session alive
};
// For react 18:
const root = ReactDOM.createRoot(document.getElementById(“root”));
root.render(
 <FronteggProvider
 contextOptions={contextOptions}
 hostedLoginBox={true}
 authOptions={authOptions}
 >
 <App />
 </FronteggProvider>
);

Горният код е приложение на React, което използва компонента FronteggProvider от библиотеката @frontegg/react за предоставяне на услуги за удостоверяване и оторизация. Ето разбивка на това, което прави кодът:

  1. Той импортира необходимите зависимости, включително React, ReactDOM, компонента app и компонента FronteggProvider от библиотеката @frontegg/react.
  2. Той дефинира contextOptions и authOptions обект. Тези обекти съдържат опции за конфигурация за компонента FronteggProvider. contextOptions определя base URL и client ID за Frontegg, докато authOptions позволява на потребителя да поддържа сесията активна.
  3. Създайте root с помощта на ReactDOM.createRoot() (за React 18). Това създава нов основен елемент в DOM, където ще бъде изобразено приложението.
  4. Изобразете компонента FronteggProvider като компонент от най-високо ниво в основния елемент. Това обвива компонента на приложението с услуги за удостоверяване и оторизация, предоставени от Frontegg.
  5. hostedLoginBox prop е зададено на true, което означава, че Frontegg ще покаже хоствано поле за вход, когато потребителят трябва да се удостовери.

Като цяло този код предоставя лесен начин за интегриране на услугите за удостоверяване и оторизация на Frontegg в приложение на React. След това под „хоствана конфигурация за влизане“ добавете http://localhost:3000/oauth/callback като разрешен URL адрес за пренасочване.

Във файла app.js добавете следния код:

import ‘./App.css’;
// import { useEffect } from ‘react’;
import { useAuth, useLoginWithRedirect, ContextHolder } from “@frontegg/react”;
function App() {
 const { user, isAuthenticated } = useAuth();
 const loginWithRedirect = useLoginWithRedirect();
 useEffect(() => {
 if (!isAuthenticated) {
 loginWithRedirect();
 }
 }, [isAuthenticated, loginWithRedirect]);
 const logout = () => {
 const baseUrl = ContextHolder.getContext().baseUrl;
 window.location.href = `${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location}`;
 };
 return (
 <div className=”App”>
 { isAuthenticated ? (
 <div>
 <div>
 <img src={user?.profilePictureUrl} alt={user?.name}/>
 </div>
 <div>
 <span>Logged in as: {user?.name}</span>
 </div>
 <div>
 <button onClick={() => alert(user.accessToken)}>What is my access token?</button>
 </div>
 <div>
 <button onClick={() => logout()}>Click to logout</button>
 </div>
 </div>
 ) : (
 <div>
 <button onClick={() => loginWithRedirect()}>Click me to login</button>
 </div>
 )}
 </div>
 );
}
export default App;

Горният код е компонент на React, наречен App, който използва кукичките useAuth и useLoginWithRedirect на Frontegg за прилагане на удостоверяване и оторизация в приложение на React. Ето разбивка на това, което прави кодът:

  1. Той импортира необходимите зависимости, включително useAuth, useLoginWithRedirect и ContextHolder от библиотеката @frontegg/react.
  2. Той дефинира компонента App, който се изобразява условно въз основа на това дали потребителят е удостоверен.
  3. Куката useAuth се използва за получаване на текущия потребител и статус на удостоверяване. Ако потребителят не е удостоверен, куката useLoginWithRedirect се използва за пренасочване на потребителя към страницата за вход.
  4. Ако потребителят е удостоверен, компонентът показва снимката на потребителския профил, името и токена за достъп. Той също така предоставя бутон за излизане, който изпраща потребителя към крайната точка за излизане на Frontegg и изчиства сесията на потребителя.
  5. Ако потребителят не е удостоверен, компонентът показва бутон за влизане, който извиква куката useLoginWithRedirect при щракване.

Този код предоставя основно изпълнение на удостоверяване и оторизация с помощта на куките и компонентите на Frontegg. Той също така демонстрира как да използвате ContextHolder, за да получите основния URL адрес за Frontegg API и как да пренасочите потребителя към крайната точка за излизане от Frontegg.

Стартирайте приложението React с тази команда в терминала:

npm run start

Щракнете върху бутона „Щракнете върху мен, за да вляза“. Това ще ви отведе до потребителския екран, ако имейл адресът и паролата ви са правилни.

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

Отидете до конзолата на Frontegg и публикувайте приложението си в dev. Ще създадем двама потребители: Dev с роля само за четене и PythonCodeNemesis с роли само за четене и администратор. Можете да направите това, като следвате инструкциите в портала на Frontegg.

Кликнете върху бутона „Добавяне на нов“, за да добавите нов потребител:

След като добавите потребителя, можете да видите новия потребител в списъка с потребители, последното посещение и ролите и статуса. Чакащо състояние означава, че потвърждаването на имейла все още не е извършено. В такъв случай отидете на своя имейл адрес и щракнете върху връзката, за да създадете парола за потребителя. Можете да добавите изображение и да редактирате потребителски данни с трите бутона вдясно.

Бекенд с Express в Node

След като нашите потребители са добавени, ние ще създадем приложение с Express в Node.js. Създайте бекенд на папка в главната директория RBAC_Frontegg и инициализирайте пакет на възел:

mkdir backend
cd backend
npm init -y

Създайте файл backend_app.js и добавете следния код:

const express = require(“express”);
const { withAuthentication } = require(“@frontegg/client”);
const bodyParser = require(“body-parser”);
const cookieParser = require(“cookie-parser”);
const app = express();
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const cors = require(“cors”);
app.use(cors());
const port = 13000;
// Set up a route to handle user authorization using Frontegg’s withAuthentication middleware
app.get(
 “/dashboard”,
 withAuthentication({ roles: [“ReadOnly”, “Admin”] }),
 (req, res) => {
 console.log(“Frontegg context:”, req.frontegg);
 const { email, roles } = req.frontegg.user;
 const fegg = req.frontegg.user;
 console.log(email, roles);
 res.send(`the user email is ${email} and they have roles ${roles}`);
 }
);
app.get(
 “/prioritypage”,
 withAuthentication({ roles: [“Admin”] }),
 (req, res) => {
 console.log(“Frontegg context:”, req.frontegg);
 const { email, roles } = req.frontegg.user;
 const fegg = req.frontegg.user;
 console.log(email, roles);
 res.send(`the user email is ${email} and they have roles ${roles}`);
 }
);
// Set up a route to handle admin authorization using Frontegg’s withAuthentication middleware
app.get(
 “/admin”,
 withAuthentication({ roles: [“Admin”], permissions: [“read”] }),
 (req, res) => {
 res.send(“Welcome, Admin!”);
 }
);
// Start the server
app.listen(port, () => {
 console.log(`Server listening at http://localhost:${port}`);
});

Горният код е прост експресен сървър, който използва @frontegg/client мидълуер за обработка на потребителско удостоверяване и оторизация. Ето разбивка на това, което прави кодът:

  1. Той импортира необходимите зависимости, включително експресни, с удостоверяване от @frontegg/client, body-parser, cookie-parser и cors.
  2. Той създава приложение Express и настройва междинен софтуер за cookie-parser, body-parser и cors.
  3. Той определя порт за слушане.
  4. Той настройва три маршрута за обработка на потребителско удостоверяване и оторизация с помощта на withAuthentication междинния софтуер от @frontegg/client.
  5. Първите два маршрута (/dashboard и /prioritypage) проверяват дали потребителят е удостоверен и има подходящите роли, като използват параметъра roles на междинния софтуер withAuthentication. Ако потребителят е упълномощен, маршрутът изпраща съобщение до клиента с имейла и ролите на потребителя. Можете да видите това на уеб конзолата. Щракнете с десния бутон върху уеб страницата, отидете на инспекция и изберете конзолата. Ще можете да видите всякакви съобщения, отпечатани там.
  6. Третият маршрут (/admin) проверява дали потребителят е удостоверен, има ли роля „Администратор“ и дали има разрешение за „четене“, използвайки параметрите за роли и разрешения на междинния софтуер withAuthentication. Ако потребителят е оторизиран, маршрутът изпраща съобщение до клиента, приветстващо администратора.
  7. Стартирайте сървъра и слушайте на определения порт.

Кодът backend_app.js осигурява базово удостоверяване на потребителя и внедряване на оторизация с помощта на междинния софтуер withAuthentication на Frontegg с Express. Той демонстрира как да използвате параметрите на ролите и разрешенията на междинния софтуер, за да контролирате достъпа до конкретни маршрути въз основа на ролите и разрешенията на потребителя.

Експортирайте Frontegg client ID и api key:

export FRONTEGG_CLIENT_ID=<ENTER CLIENT ID>
export FRONTEGG_API_KEY=<ENTER FRONTEGG API KEY>

Стартирайте приложението Express с:

npx nodemon backend_app.js

Nodemon е горещо презареждане за приложението Express. То презарежда приложението всеки път, когато запазите файла си. Инсталирайте nodemon с:

npm install nodemon — save-dev

Ако нямате nodemon, можете също да стартирате приложението с:

node backend_app.js

Добавете компоненти към приложението React

Добавихме маршрутите, но се нуждаем от нещо в предния край за показване. Нека създадем някои React компоненти за това. Създайте компонент на папка във вашата папка python-code-nemesis-app в директорията на интерфейса. Създайте файл dashboard.js и добавете следния код:

import React from “react”;
const Dashboard = () => {
 return (
 <div>
 <h1>Dashboard</h1>
 <p>This page is read only dashboard!</p>
 </div>
 );
};
export default Dashboard;
The above code defines a React functional component named Dashboard. When this component is rendered, it returns a div element containing a h1 element with the text “Dashboard” and a p element with the text “This page is read only dashboard!”. Next, create a prioritypage.js file in your components folder and insert the following code:
import React from “react”;
const PriorityPage = () => {
 return (
 <div>
 <h1>PriorityPage</h1>
 <p>This page is the Priority Page with restricted role access!</p>
 </div>
 );
};
export default PriorityPage;

Даденият код дефинира функционален компонент на React с име PriorityPage. Когато този компонент се визуализира, той връща елемент div, съдържащ елемент h1 с текст „PriorityPage“и елемент p с текст „Тази страница е страницата с приоритет с ограничен достъп за роли!“. Сега, след като сте дефинирали компонентите, нека импортираме тези компоненти в приложението react:

import Dashboard from “./components/Dashboard”;
import PriorityPage from “./components/PriorityPage”;

Освен това актуализирайте импортиранията, за да добавите axios и да импортирате useEffect:

import { useEffect, useState } from “react”;
import axios from “axios”;

Добавете необходимите импортирания от Frontegg:

import { useAuth, useLoginWithRedirect, ContextHolder } from “@frontegg/react”;

Добавете два бутона:

  • hitDashboard— За да покажете компонента на таблото за управление от крайната точка на /dashboard URL.
  • hitPriorityPage — За показване на компонента на приоритетната страница от крайната точка на /prioritypage URL.

Кодът по-долу е за достигане на крайната точка /dashboard:

const hitDashboard = () => {
 const url = “http://localhost:13000/dashboard";
 const res = axios
 .get(url, {
 headers: {
 Authorization: `Bearer ${user.accessToken}`,
 },
 })
 .then((response) => {
 console.log(`Response received as ${response}`);
 setRes(response.data);
 console.log(response.status);
 if (response.status / 100 != 2) {
 setErr(true);
 } else {
 setErr(false);
 }
 })
 .catch((err) => {
 console.log(err);
 });
 };

Кодът по-долу трябва да достигне крайната точка /prioritypage:

const hitPriorityPage = () => {
 const url1 = “http://localhost:13000/prioritypage";
 const res1 = axios
 .get(url1, {
 headers: {
 Authorization: `Bearer ${user.accessToken}`,
 },
 })
 .then((response) => {
 console.log(response.status);
 setRes1(response.data);
 })
 .catch((err) => {
 console.log(err);
 });
 };

Добавете тези два бутона към страницата за вход, като добавите следния код в App.js:

<button onClick={hitDashboard}>Hit Dashboard</button>
<button onClick={hitPriorityPage}>Hit Priority Page</button>

Добавете следните функции в данните за вход, за да покажете таблото за управление и страницата с приоритет въз основа на това дали крайната точка е достигната успешно и е върнат някакъв резултат:

<div>{res && !error && <Dashboard />}</div>
<div>{res1 && <PriorityPage />}</div>

Перфектно! Можете да стартирате приложението, като въведете следния код във вашия терминал:

npm start

Сега сте готови да тествате вашето приложение. Отидете до http://localhost:3000/. Кликнете върху бутона „Щракнете тук, за да влезете“. Изскача страницата за регистрация или вход. Влезте като един от вашите създадени потребители: dev. Въведете имейл ID и парола.

Можете също да се регистрирате от тук. Щракването върху връзката „Регистрация“ отвежда потребителя до тази страница, за да въведе имейл, име и парола за нов акаунт. Ролите обаче могат да се добавят само от вас във вашия портал Frontegg.

След като сте влезли като потребителски разработчик с достъп само за четене, ще можете да видите този екран, който означава, че потребителят разработчик е удостоверен:

Сега щракнете върху бутона „Hit Dashboard“, за да видите дали се вижда.

Перфектно! Можете да видите тази страница на таблото, ако сте дали на потребителя dev правилната роля, т.е. само за четене. Опитайте да кликнете върху „Hit Priority Page“. Това няма да покаже нищо. Ще бъде регистрирана грешка в раздела мрежа на тази страница, която също ще бъде видима на терминала, където сте изпълнили приложението за бекенд на вашия възел. Ще се каже, че потребителят има неадекватен достъп. Това означава, че ролите, присвоени на потребителя, не са достатъчни, за да види тази страница. Перфектно! Това означава, че ролевият контрол на достъпа на Frontegg работи за крайната точка на таблото. След това нека тестваме потребителя PythonCodeNemesis с роли на администратор и само за четене.

Излезте, като щракнете върху бутона Изход в менюто на страничната лента. Влезте като потребител PythonCodeNemesis. След като можете да видите страницата за вход, щракнете върху бутона „Hit Dashboard“.

Страницата табло за управление трябва да изскочи, тъй като сме дали ролеви достъп само за четене на крайната точка на табло за управление. Страхотен! След това щракнете върху бутона „Страница с приоритет на посещение“.

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

Целият код за този проект е достъпен на GitHub.



GitHub - PythonCodeNemesis/Role_Based_Access_Control_Frontegg
Това хранилище съдържа примерна реализация на Role Based Access Control (RBAC) с помощта на Frontegg, пълен…github.com



Ние успешно внедрихме функцията за контрол на достъпа, базиран на роли, във вашето приложение Node.js с помощта на Frontegg. С тази функция можем да контролираме кои потребители имат достъп до специфични функции и функционалности в приложението, осигурявайки по-сигурно и персонализирано потребителско изживяване.

Заключение

В този урок видяхме как да внедрим базиран на роли контрол на достъпа за потребителско удостоверяване в приложения Node.js с помощта на Frontegg. Създадохме преден край с React и заден край с Node. След това интегрирахме Frontegg и с двете, за да реализираме безпроблемно влизане.

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

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