ساختن یک برنامه با Node ، React ، Okta

مقدمه
برنامه های مدرن وب اغلب یک تجربه شخصی را در اختیار کاربران قرار می دهند که از سایر کاربران متمایز است و در عین حال تمام اطلاعات کاربر را به صورت خصوصی نگه می دارند. برنامه های مدرن وب همچنین تمایل به داشتن یک API سمت سرور مجازی و رابط کاربری سمت مشتری دارند. با توجه به این مسئله ، گاهی اوقات آگاه ساختن هر دو انتها نسبت به کاربرانی که در حال حاضر وارد سیستم شده اند ، می تواند چالش برانگیز باشد.
در این آموزش ، یک Node API تنظیم می کنید که یک رابط کاربری React (UI) را تغذیه می کند و یک ثبت کاربر ایجاد می نماید که اطلاعات کاربر را خصوصی و شخصی نگه می دارد. این کار بدون استفاده از کتابخانه های مدیریت دولتی مانند Redux یا ReduxThunk انجام خواهد شد. درعوض ، برای اهداف این آموزش ، شما می توانید عبارات fetch را به توابع onentDidMount اضافه کنید. همچنین می توانید از Okata برای تأیید اعتبار کاربر استفاده کنید.
پیش نیازها
برای راه‌اندازی اپلیکیشن پایه ، اطمینان حاصل کنید که این ابزارهای اصلی را نصب کرده اید:
⦁ Node (8+)
⦁ npm (5+)
⦁ create-react-app (npm package)
⦁ express-generator (npm package)
همچنین به حساب کاربری توسعه دهنده Okta نیاز خواهید داشت.
برای نصب Node و npm می توانید دستورالعمل سیستم عامل خود را در سایت رسمی Node.js دنبال کنید.
سپس دو بسته npm را با خط فرمان npm نصب کنید:
⦁ $ npm i -g create-react-app express-generator
⦁
اکنون آماده تنظیم ساختار اصلی برنامه هستید.
مرحله 1 – چارچوب بندی برنامه پایه
به پوشه ای که می خواهید برنامه خود را در آن بریزید بروید و یک پوشه جدید برای آن ایجاد کنید:
⦁ $ mkdir MembershipSample
⦁
⦁ $ cd MembershipSample
⦁
⦁ $ express api
⦁
⦁ $ create-react-app client

با این کار دو پوشه در پوشه ی MembershipSample به نام api و client ایجاد می شود ، با یک برنامه Node.js و Express در پوشه api و یک برنامه React basic در پوشه client. ساختار پوشه شما مانند این خواهد بود:
MembershipSample
├── api
└── client

اکنون دو پایانه یا زبانه ترمینال را باز کنید. یکی را به برنامه Express پوشه API و دیگری را به برنامه React پوشه client منتقل کنید.
به طور پیش فرض ، برنامه React و برنامه Node در پورت 3000 اجرا می شوند ، بنابراین باید API را برای اجرا در درگاه متفاوت و سپس پروکسی در برنامه client دریافت کنید.
در پوشه api ، فایل / bin / www را باز کرده و درگاه API را به 3001 تغییر دهید.
/**
* Get port from environment and store in Express.
*/

var port = normalizePort(process.env.PORT || ‘3001’);
app.set(‘port’, port);

سپس پروکسی را برای API در برنامه client تنظیم کنید تا بتوانید همچنان /api/{resource} را فراخوانی کنید و آن را از پورت 3000 به پورت 3001 پروکسی کنید. در فایل client/package.json ، تنظیم پروکسی را بعد از name اضافه کنید :
“name”: “client”,
“proxy”: “http://localhost:3001″

در آخر ، npm install یا yarn install را برای هر زیر پوشه) api و client) اجرا کنید تا اطمینان حاصل شود که متعلقات نصب شده اند.
اکنون می توانید هر دو برنامه را با اجرای npm start یا yarn start در پوشه های مناسب برای API و برنامه مشتری اجرا کنید.
مرحله 2 – افزودن یک برنامه Okta
پس از ثبت نام در Okta ، روی Applications در فهرست بالای صفحه کلیک کنید. سپس بر روی دکمه Add Application کلیک کنید.

سپس به wizard ایجاد برنامه انتقال داده می شوید. دکمه Single-Page App را انتخاب کنید و در پایین روی Next کلیک کنید.

در صفحه بعدی تنظیمات پیش فرض ارائه شده توسط الگوی برنامه تک صفحه ای را مشاهده خواهید کرد. مانند Membership Application ، نام برنامه را به نامی توصیف کننده تر تغییر دهید. همچنین ، URI های پایه و تنظیمات URI تغییر مسیر را عوض کنید تا از پورت 3000 استفاده شود ، زیرا در این قسمت برنامه شما اجرا خواهد شد.

سپس بر روی دکمه Done در پایین کلیک کنید.
پس از ایجاد برنامه ، آن را از فهرست برنامه ها انتخاب کنید و بر روی زبانه عمومی کلیک کنید تا تنظیمات کلی برنامه خود را مشاهده کنید.

در پایین ، یک تنظیمات Client ID را مشاهده خواهید کرد (تنطیمات شما مات نخواهد بود). آن را کپی کنید تا در برنامه React خود استفاده کنید. همچنین به URL سازمانی Okta نیاز خواهید داشت که می توانید در سمت چپ بالای صفحه داشبورد پیدا کنید. چیزی شبیه به https://dev-XXXXXX.oktapreview.com خواهد بود.
مرحله 3 – اضافه کردن تایید هویت به برنامه React
اکنون که برنامه ایجاد شده است ، با اضافه کردن چند وابستگی npm ، اعتبار را با استفاده از Okta اضافه کنید. از پوشه client دستور زیر را اجرا کنید:
⦁ $ npm install ⦁ @okta/okta-auth-js ⦁ @okta/okta-react react-router-dom –save
⦁
یا اگر از مدیر بسته yarn استفاده می کنید:
⦁ $ yarn add ⦁ @okta/okta-auth-js ⦁ @okta/okta-react react-router-dom
⦁
فایلی به نام app.config.js را به پوشه مشتری / src اضافه کنید. محتوای فایل این گونه است:
export default {
url: ‘{yourOktaOrgUrl}’,
issuer: ‘{yourOktaOrgUrl}/oauth2/default’,
redirect_uri: window.location.origin + ‘/implicit/callback’,
client_id: ‘{yourClientID}’
}

سپس فایل index.js را تنظیم کنید تا از React Router و React SDK Okta استفاده کند. پس از اتمام فایل index.js ، اینگونه خواهد بود:
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import { BrowserRouter as Router } from ‘react-router-dom’;
import { Security } from ‘@okta/okta-react’;

import ‘./index.css’;
import config from ‘./app.config’;
import App from ‘./App’;
import registerServiceWorker from ‘./registerServiceWorker’;

function onAuthRequired({ history }) {
history.push(‘/login’);
}

ReactDOM.render(
<Router>
<Security issuer={config.issuer}
client_id={config.client_id}
redirect_uri={config.redirect_uri}
onAuthRequired={onAuthRequired}>
<App />
</Security>
</Router>,
document.getElementById(‘root’)
);
registerServiceWorker();
در پایان، مؤلفه BrowserRouter (با نام مستعار router) را از React Router و مؤلفه Security را از React SDK Okta اضافه خواهید کرد. همچنین فایل app.config.js به صورت config وارد شده است تا بتوانید از مقادیر پیکربندی در properties مورد نیاز مؤلفه security استفاده کنید.
همچنین با وارد کردن مقادیر مشخص شده ، مولفه app را با مولفه router و security احاطه خواهید کرد. روش onAuthRequired به React SDK در Okta می گوید که وقتی شخصی سعی می کند به یک مسیر امن دسترسی پیدا کند و در سیستم log in نشده است ، باید آنها را به صفحه ورود تغییر مسیر دهد.
هر چیز دیگر از دستور create-react-app می آید که قبلاً اجرا کرده اید.
مرحله 4 – اضافه کردن صفحات به برنامه React
قبل از افزودن هرگونه مسیر به برنامه React ، برخی از مؤلفه ها را برای مدیریت مسیرهایی که میخواهید اضافه کنید، ایجاد نمایید.
یک پوشه components را به پوشه client/src اضافه کنید. تمام مولفه های شما در اینجا قرار دارند. سپس برای مولفه های صفحه اصلی خود یک پوشه home ایجاد کنید. در حال حاضر فقط یکی وجود دارد ، اما ممکن است بعداً مولفه های بیشتری برای صفحه اصلی استفاده شوند.
یک فایل HomePage.js با محتویات زیر به پوشه اضافه کنید:
import React from ‘react’;

export default class HomePage extends React.Component{
render(){
return(
<h1>Home Page</h1>
);
}
}

مهمترین نکته ساخت، تبدیل مولفه های HomePage به نوعی کلاس است. اگرچه در حال حاضر فقط حاوی یک برچسب h1 است ، قرار بر این است که یک page باشد ، به این معنی که احتمالاً شامل مولفه های دیگری نیز خواهد بود. بنابراین مهم است که یک مولفه کانتینر باشد.
سپس ، یک فولدر auth را در components ایجاد کنید. اینجاست که کلیه مؤلفه هایی که با تأیید هویت ارتباط دارند ، زندگی می کنند. در آن پوشه ، یک فایل LoginForm.js ایجاد کنید.
اولین نکته ای که باید به آن توجه داشته باشید اینست که شما با استفاده از مؤلفه مرتبه بالاتر withAuth از React SDK Okta برای دربرگیری کل فرم login استفاده می کنید. این امر به مؤلفه ای به نام auth یک ویژگی اضافه می کند و این امکان را برای دسترسی به توابعی مانند isAuthenticated و redirect در آن مؤلفه مرتبه بالاتر فراهم می کند.
کد کامپوننت LoginForm به شرح زیر است:
import React from ‘react’;
import OktaAuth from ‘@okta/okta-auth-js’;
import { withAuth } from ‘@okta/okta-react’;

export default withAuth(class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
sessionToken: null,
error: null,
username: ”,
password: ”
}

this.oktaAuth = new OktaAuth({ url: props.baseUrl });

this.handleSubmit = this.handleSubmit.bind(this);
this.handleUsernameChange = this.handleUsernameChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
}

handleSubmit(e) {
e.preventDefault();
this.oktaAuth.signIn({
username: this.state.username,
password: this.state.password
})
.then(res => this.setState({
sessionToken: res.sessionToken
}))
.catch(err => {
this.setState({error: err.message});
console.log(err.statusCode + ‘ error’, err)
});
}

handleUsernameChange(e) {
this.setState({ username: e.target.value });
}

handlePasswordChange(e) {
this.setState({ password: e.target.value });
}

render() {
if (this.state.sessionToken) {
this.props.auth.redirect({ sessionToken: this.state.sessionToken });
return null;
}

const errorMessage = this.state.error ?
<span className=”error-message”>{this.state.error}</span> :
null;

return (
<form onSubmit={this.handleSubmit}>
{errorMessage}
<div className=”form-element”>
<label>Username:</label>
<input
id=”username” type=”text”
value={this.state.username}
onChange={this.handleUsernameChange} />
</div>

<div className=”form-element”>
<label>Password:</label>
<input
id=”password” type=”password”
value={this.state.password}
onChange={this.handlePasswordChange} />
</div>
<input id=”submit” type=”submit” value=”Submit” />
</form>
);
}
});

نکته دیگر در اینجا ، کتابخانه OktaAuth است که وارد می شود. این کتابخانه اصلی برای انجام کارهایی مانند ثبت نام با استفاده از برنامه Okta است که قبلاً ایجاد کرده اید. آبجکت OktaAuth در constructor ایجاد می شود که خاصیتی از baseUrl به آن منتقل می شود. این نشانی اینترنتی برای صادرکننده است که در فایل app.config.js شما میباشد.
قرار است مؤلفه LoginForm در یک مؤلفه دیگر وجود داشته باشد ، بنابراین شما باید یک فایل LoginPage.js ایجاد کنید تا این مؤلفه را در خود جای دهد. برای دستیابی به عملکرد isAuthenticated دوباره از مؤلفه مرتبه بالاتر withAuth استفاده خواهید کرد. محتوای LoginPage.js به شرح زیر خواهد بود:
import React, { Component } from ‘react’;
import { Redirect } from ‘react-router-dom’;
import LoginForm from ‘./LoginForm’;
import { withAuth } from ‘@okta/okta-react’;

export default withAuth(class Login extends Component {
constructor(props) {
super(props);
this.state = { authenticated: null };
this.checkAuthentication = this.checkAuthentication.bind(this);
this.checkAuthentication();
}

async checkAuthentication() {
const authenticated = await this.props.auth.isAuthenticated();
if (authenticated !== this.state.authenticated) {
this.setState({ authenticated });
}
}

componentDidUpdate() {
this.checkAuthentication();
}

render() {
if (this.state.authenticated === null) return null;
return this.state.authenticated ?
<Redirect to={{ pathname: ‘/profile’ }} /> :
<LoginForm baseUrl={this.props.baseUrl} />;
}
});

اگرچه کمی کمتر از موارد موجود در مؤلفه فرم ورود به سیستم است ، اما هنوز هم بخش های مهمی وجود دارد که می توان به آنها اشاره کرد.
باز هم ، شما از مؤلفه مرتبه بالاتر withAuth استفاده می کنید. این یک موضوع مکرر برای هر مؤلفه ای است که باید از مراحل تأیید اعتبار یا مجوز Okta استفاده کند. در این حالت ، از آن برای به دست آوردن تابع isAuthenticated استفاده می شود. متد checkAuthentication () در constructor و در روش چرخه عمر componentDidUpdate اجرا می شود تا اطمینان حاصل شود که هنگام ایجاد مؤلفه ، بررسی می شود و هر تغییر بعدی دوباره در مؤلفه بررسی می گردد.
وقتی که isAuthenticated وضعیت صحیح (true) را برمیگرداند ، پس از آن در وضعیت کامپوننت تنظیم می شود. سپس با استفاده از روش رندر ، بررسی می شود كه آیا مؤلفه LoginForm را نشان دهد یا به صفحه پروفایل کاربر هدایت شوید ، مؤلفه ای را كه در مرحله بعد ایجاد خواهید كرد.
اکنون مؤلفه ProfilePage.js را در پوشه auth ایجاد کنید. محتوای این مؤلفه عبارتست از:
import React from ‘react’;
import { withAuth } from ‘@okta/okta-react’;

export default withAuth(class ProfilePage extends React.Component {
constructor(props){
super(props);
this.state = { user: null };
this.getCurrentUser = this.getCurrentUser.bind(this);
}

async getCurrentUser(){
this.props.auth.getUser()
.then(user => this.setState({user}));
}

componentDidMount(){
this.getCurrentUser();
}

render() {
if(!this.state.user) return null;
return (
<section className=”user-profile”>
<h1>User Profile</h1>
<div>
<label>Name:</label>
<span>{this.state.user.name}</span>
</div>
</section>

)
}
});

مؤلفه withAuth به شما امکان دسترسی به عملکرد getUser را می دهد. در اینجا ، آن را از کامپوننت DidMount فراخوانی کرده ایم ، که مکانی مشترک برای دریافت داده هایی است که در روش رندر استفاده خواهد شد. تنها مورد عجیبی که ممکن است ببینید اولین خط از روش رندر است که تا زمانی که در واقع یک کاربر از تماس ناهمزمان getUser برگردد چیزی ارائه نمی دهد. هنگامی که کاربر در این وضعیت قرار گرفت ، محتوای پروفایل را ارائه می دهد ، که در این حالت نام فعلی که توسط کاربر وارد شده را نشان می دهد.
در مرحله بعد ، یک مؤلفه ثبت نام اضافه خواهید کرد. این می تواند درست مانند فرم ورود به سیستم انجام شود ، جایی که یک کامپوننت LoginForm وجود دارد که در یک مولفه LoginPage قرار گرفته است. به منظور نشان دادن راه دیگری برای نمایش این موضوع ، یک مولفه RegistrationForm ایجاد خواهید کرد که مولفه اصلی کانتینر باشد.
یک فایل ثبت نام Form.js را در پوشه auth با محتوای زیر ایجاد کنید:
import React from ‘react’;
import OktaAuth from ‘@okta/okta-auth-js’;
import { withAuth } from ‘@okta/okta-react’;

import config from ‘../../app.config’;

export default withAuth(class RegistrationForm extends React.Component{
constructor(props){
super(props);
this.state = {
firstName: ”,
lastName: ”,
email: ”,
password: ”,
sessionToken: null
};
this.oktaAuth = new OktaAuth({ url: config.url });
this.checkAuthentication = this.checkAuthentication.bind(this);
this.checkAuthentication();

this.handleSubmit = this.handleSubmit.bind(this);
this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
this.handleLastNameChange = this.handleLastNameChange.bind(this);
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
}

async checkAuthentication() {
const sessionToken = await this.props.auth.getIdToken();
if (sessionToken) {
this.setState({ sessionToken });
}
}

componentDidUpdate() {
this.checkAuthentication();
}

handleFirstNameChange(e){
this.setState({firstName:e.target.value});
}
handleLastNameChange(e) {
this.setState({ lastName: e.target.value });
}
handleEmailChange(e) {
this.setState({ email: e.target.value });
}
handlePasswordChange(e) {
this.setState({ password: e.target.value });
}

handleSubmit(e){
e.preventDefault();
fetch(‘/api/users’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify(this.state)
}).then(user => {
this.oktaAuth.signIn({
username: this.state.email,
password: this.state.password
})
.then(res => this.setState({
sessionToken: res.sessionToken
}));
})
.catch(err => console.log);
}

render(){
if (this.state.sessionToken) {
this.props.auth.redirect({ sessionToken: this.state.sessionToken });
return null;
}

return(
<form onSubmit={this.handleSubmit}>
<div className=”form-element”>
<label>Email:</label>
<input type=”email” id=”email” value={this.state.email}
onChange={this.handleEmailChange}/>
</div>
<div className=”form-element”>
<label>First Name:</label>
<input type=”text” id=”firstName” value={this.state.firstName}
onChange={this.handleFirstNameChange} />
</div>
<div className=”form-element”>
<label>Last Name:</label>
<input type=”text” id=”lastName” value={this.state.lastName}
onChange={this.handleLastNameChange} />
</div>
<div className=”form-element”>
<label>Password:</label>
<input type=”password” id=”password” value={this.state.password}
onChange={this.handlePasswordChange} />
</div>
<input type=”submit” id=”submit” value=”Register”/>
</form>
);
}

});

این کامپوننت بسیار شبیه به قسمت LogForm است به استثنای اینکه Node API را فراخوانی میکند (که در یک لحظه می سازید) و ثبت نام را انجام می دهد. پس از اتمام ثبت نام توسط Node API ، این مؤلفه کاربر تازه ایجاد شده را وارد می کند و روش ارائه کاربر را (وقتی یک نشانه بخش را در آن وضعیت مشاهده می کند) به صفحه اصلی برنامه هدایت می کند.
همچنین ممکن است متوجه ویژگی sessionToken در وضعیت مؤلفه شوید. این کار با استفاده از تابع handSubmit () به منظور دستیابی به ورود در صورت موفقیت آمیز بودن ثبت نام تنظیم میشود. پس از اتمام login و دریافت یک نشانه ، از روش render() نیز برای انجام تغییر مسیر استفاده می شود.
مرحله 5 – اضافه کردن مسیرها به برنامه React
ابتدا برای مسیرهایی که اضافه خواهید کرد ، یک مولفه ناوبری اضافه کنید. در پوشه client / src / parts ، پوشه ای به نام shared اضافه کنید. این مکان جایی خواهد بود که کلیه مؤلفه هایی که در چندین مکان در برنامه استفاده می شوند قرار خواهند گرفت. در آن پوشه جدید ، فایلی به نام Navigation.js اضافه کنید. فایل حاوی یک مؤلفه پایه با پیوندهایی به تمام صفحات برنامه است.
در مرحله بعد ، کامپوننت ناوبری را با کامپوننت مرتبه بالاتر withAuth همراه کنید. به این ترتیب ، می توانید بررسی کنید که آیا کاربر معتبری وجود دارد و دکمه ورود یا خروج را در زمان مناسب نمایش دهد.
import React from ‘react’;
import { Link } from ‘react-router-dom’;
import { withAuth } from ‘@okta/okta-react’;

export default withAuth(class Navigation extends React.Component {
constructor(props) {
super(props);
this.state = { authenticated: null };
this.checkAuthentication = this.checkAuthentication.bind(this);
this.checkAuthentication();
}

async checkAuthentication() {
const authenticated = await this.props.auth.isAuthenticated();
if (authenticated !== this.state.authenticated) {
this.setState({ authenticated });
}
}

componentDidUpdate() {
this.checkAuthentication();
}

render() {
if (this.state.authenticated === null) return null;
const authNav = this.state.authenticated ?
<ul className=”auth-nav”>
<li><a href=”javascript:void(0)” onClick={this.props.auth.logout}>Logout</a></li>
<li><Link to=”/profile”>Profile</Link></li>
</ul> :
<ul className=”auth-nav”>
<li><a href=”javascript:void(0)” onClick={this.props.auth.login}>Login</a></li>
<li><Link to=”/register”>Register</Link></li>
</ul>;
return (
<nav>
<ul>
<li><Link to=”/”>Home</Link></li>
{authNav}
</ul>
</nav>
)
}
});

اکنون که مولفه هایی قابل دسترسی برای مدیریت همه مسیرها دارید ، مسیرهایی را برای پیشروی با آنها ایجاد کنید. فایل App.js را به روز کنید تا نسخه نهایی به این شکل باشد:
import React, { Component } from ‘react’;
import { Route } from ‘react-router-dom’;
import { SecureRoute, ImplicitCallback } from ‘@okta/okta-react’;

import Navigation from ‘./components/shared/Navigation’;
import HomePage from ‘./components/home/HomePage’;
import RegistrationForm from ‘./components/auth/RegistrationForm’;
import config from ‘./app.config’;
import LoginPage from ‘./components/auth/LoginPage’;
import ProfilePage from ‘./components/auth/ProfilePage’;
import ‘./App.css’;

export default class App extends Component {
render() {
return (
<div className=”App”>
<Navigation />
<main>
<Route path=”/” exact component={HomePage} />
<Route path=”/login” render={() => <LoginPage baseUrl={config.url} />} />
<Route path=”/implicit/callback” component={ImplicitCallback} />
<Route path=”/register” component={RegistrationForm} />
<SecureRoute path=”/profile” component={ProfilePage} />
</main>
</div>
);
}
}

در اینجا چند نکته قابل توجه وجود دارد: واردات مولفه های SecureRoute و ImplicitCallback از React SDK Okta. مؤلفه ImplicitCallback پاسخ برگشتی را از جریان تأیید اعتبار را مدیریت میکند تا اطمینان حاصل شود که یک نقطه پایانی در برنامه React برای گرفتن callback از Okta وجود دارد. مولفه SecureRoute به شما امکان می دهد تا هر مسیری را ایمن کنید و کاربران غیرمجاز را به صفحه login هدایت کنید.
مؤلفه Route از React Router مسیری را طی می کند که کاربر به آن پیمایش کرده و یک مولفه را برای اداره آن مسیر تعیین می کند. مؤلفه SecureRoute قبل از اجازه دسترسی به آن مسیر ، بررسی بیشتری انجام میدهد تا اطمینان حاصل کند که کاربر در سیستم loggedشده است. اگر اینگونه نباشند ، تابع onAuthRequired در index.js برای مجبور کردن کاربر به صفحه ورود فراخوانی می شود.
به مسیر login توجه کنید. به جای تنظیم یک مولفه برای اداره مسیر ، متد render را اجرا می کند که مؤلفه LoginPage را رندر می گیرد و baseUrl را از پیکربندی تنظیم می کند.
مرحله 6 – اضافه کردن نقاط انتهایی API به برنامه Node
Node API ثبت نام را انجام می دهد ، بنابراین برای رسیدگی به آن تماس باید نقطه پایانی را به برنامه Node اضافه کنید. برای این کار ، Okta’s Node SDK را اضافه کنید. از پوشه “api” دستور زیر را اجرا کنید:
⦁ $ npm install ⦁ @okta/okta-sdk-nodejs –save
⦁
سپس فایل user.js را در api/routes تغییر دهید. این فایل به شرح زیر خواهد بود:
const express = require(‘express’);
const router = express.Router();
const oktaClient = require(‘../lib/oktaClient’);

/* Create a new User (register). */
router.post(‘/’, (req, res, next) => {
if (!req.body) return res.sendStatus(400);
const newUser = {
profile: {
firstName: req.body.firstName,
lastName: req.body.lastName,
email: req.body.email,
login: req.body.email
},
credentials: {
password: {
value: req.body.password
}
}
};
oktaClient.createUser(newUser)
.then(user => {
res.status(201);
res.send(user);
})
.catch(err => {
res.status(400);
res.send(err);
})
});

module.exports = router;

بزرگترین چیزهای قابل توجه در اینجا وارد کردن lib/oktaClient (که شما در یک لحظه اضافه خواهید کرد) ، فراخوانی به تابع createUser در oktaClient و شکل دادن آبجکت newUser هستند. شکل دهی آبجکت newUser در مطالب API Okta مطرح شده است.
برنامه Node برای برقراری تماس با برنامه Okta ، به یک نشانه API نیاز دارد. برای ایجاد آن ، به داشبورد توسعه دهنده Okta بروید ، روی گزینه منوی API بروید و روی Tokens کلیک کنید.

از آنجا ، روی Create Token کلیک کنید. یک نام مانند Membership به نشانه ها بدهید و روی Create Token کلیک کنید.

نشانه را برای استفاده بعدی در یک مکان امن کپی کنید.
یک فایل با نام oktaClient.js را در یک پوشه جدید به نام lib در برنامه Node ایجاد کنید. این فایل با استفاده از نشانه API که اخیراً ایجاد کرده اید ، یک آبجکت Client را از SDK Node Okta پیکربندی می کند:
const okta = require(‘@okta/okta-sdk-nodejs’);

const client = new okta.Client({
orgUrl: ‘{yourOktaOrgUrl}’,
token: ‘{yourApiToken}’
});

module.exports = client;

در فایل app.js در ریشه برنامه Node ، فایل را به روز کنید تا مسیر همه تماسها به / api / some_endpoint برسد. بعد از انسداد عبارات app.use ، بخشی را مشاهده خواهید کرد. تنظیم مسیر را طوری تغییر دهید که اینگونه باشد:
app.use(‘/api’, index);
app.use(‘/api/users’, users);

اگر برنامه Node شما هنوز در حال اجرا است ، لازم است برنامه را متوقف کنید (با CTRL + C) و مجدداً آن را اجرا کنید (npm start) تا به روز شود.
اکنون می توانید کاربران را ثبت کنید ، با کاربر تازه ایجاد شده وارد شوید و پروفایل کاربر را برای نمایش در صفحه نمایه وارد کنید.

نتیجه
اکنون یک برنامه ثبت نام کاربر با React ،Node و Okta ایجاد کرده اید. اگر می خواهید در مورد فن آوری های استفاده شده در این مقاله اطلاعات بیشتری کسب کنید ، می توانید مطالب زیر را بررسی کنید:
⦁ Okta’s ⦁ Node SDK
⦁ Okta’s ⦁ React SDK.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade