Регистрация пользователей с помощью Node, React и Okta

 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 вещь, которую стоит отметить, это OktaAuth библиотека OktaAuth . Это базовая библиотека для таких вещей, как вход в приложение Okta, которое вы создали ранее. Вы заметите, что в конструкторе создается объект baseUrl передается свойство baseUrl . Это URL-адрес издателя, который находится в вашем файле app.config.js . Компонент LoginForm должен содержаться в другом компоненте, поэтому вам нужно будет создать файл LoginPage.js содержащий этот компонент. Вы снова будете использовать withAuth высшего порядка withAuth , чтобы получить доступ к функции isAuthenticated . Содержимое 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 высшего порядка withAuth . Это будет повторяющаяся тема для каждого компонента, который должен использовать процесс аутентификации или авторизации Okta. В этом случае он в основном используется для получения функции isAuthenticated . Метод checkAuthentication() выполняется в конструкторе и в методе жизненного цикла componentDidUpdate чтобы гарантировать, что при создании компонента он проверяется, и каждое последующее изменение компонента проверяется снова.

Когда isAuthenticated возвращает true, он устанавливается в состояние компонента. Затем он проверяется в методе рендеринга, чтобы решить, показывать LoginForm компонент 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 компонент withAuth предоставляет вам доступ к функции getUser . Здесь он вызывается из componentDidMount который является обычным местом для извлечения данных, которые будут использоваться в методе render . Единственная странная вещь, которую вы можете увидеть — это первая строка метода render которая ничего не render , пока на самом деле пользователь не вернется из асинхронного вызова getUser . Когда пользователь находится в состоянии, он отображает содержимое профиля, которое в данном случае просто отображает имя пользователя, вошедшего в систему.

Далее вы добавите компонент регистрации. Это можно сделать так же, как форму входа в систему, где есть компонент LoginForm который содержится в компоненте LoginPage . Чтобы продемонстрировать другой способ отображения этого, вы просто создадите компонент RegistrationForm который будет основным компонентом контейнера. Создайте файл RegistrationForm.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> ); } }); 

Этот компонент очень похож на компонент LoginForm за исключением того, что он вызывает Node API (который вы LoginForm через мгновение), который будет обрабатывать регистрацию. После завершения регистрации с помощью Node API компонент регистрирует вновь созданного пользователя, а метод рендеринга (когда он видит токен сеанса в состоянии) перенаправляет пользователя на домашнюю страницу приложения.

Вы также можете заметить свойство sessionToken в состоянии компонента. Это устанавливается handleSubmit() с целью обработки входа в систему, если регистрация прошла успешно. Затем он также используется методом render() для перенаправления после завершения входа в систему и получения токена.

Добавить маршруты в приложение React

Сначала добавьте компонент навигации для маршрутов, которые вы будете добавлять. В папке client/src/components добавьте папку с именем 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 из Reta SDK от Okta. Компонент ImplicitCallback обрабатывает обратный вызов из потока аутентификации, чтобы обеспечить наличие конечной точки в приложении React для перехвата обратного вызова из Okta. Компонент SecureRoute позволяет защитить любой маршрут и перенаправить неаутентифицированных пользователей на страницу входа.

 npm install @okta/okta-sdk-nodejs --save 

 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; 

 const okta = require('@okta/okta-sdk-nodejs'); const client = new okta.Client({ orgUrl: '{yourOktaDomain}', token: '{yourApiToken}' }); module.exports = client; 

 app.use('/api', index); app.use('/api/users', users);