Рубрики
Без рубрики

Аутентификация Приложения React С Помощью Stormpath

React – это потрясающая библиотека, которая помогает разбить сложный пользовательский интерфейс на простые и многоразовые компоненты, которые… С пометкой react, новички, java.

React – это потрясающая библиотека, которая помогает разбить сложный пользовательский интерфейс на простые и многоразовые компоненты, которые можно скомпоновать вместе. Я покажу вам, как создать приложение react с нуля, используя SDK Stormpath React для добавления функций регистрации, входа в систему и просмотра профиля.

Давайте начнем!

Сначала вам нужно будет создать учетную запись и приложение Stormpath , что вы можете сделать здесь: https://api.stormpath.com/register

Этапы, которые мы собираемся охватить:-

  • Установите React + Express.js Стек приложений
  • Настройте реакцию + Express.js Проект
  • Главная страница
  • Индексная страница
  • Страница входа в систему
  • Страница регистрации
  • Страница профиля
  • Маршрут домой
  • Выход из системы
  • Состояние пользователя в компонентах
  • Импорт Компонентов
  • Запустите проект
  • Завершая

Установите React + Express.js Стек приложений

В этом уроке мы будем использовать ES6 и JSX писать как можно меньше кода, а также Stormpath React SDK для пользовательских функций.

Вот краткое описание того, что мы будем использовать:-

  • React – Позволяет нам создавать простые, но мощные пользовательские интерфейсы.
  • ReactRouter – Организует навигацию по URL-адресам в нашем приложении React.
  • ES6 – Следующая версия JavaScript. Позволяет нам писать реальные классы JavaScript.
  • JSX – Позволяет нам размещать HTML в JavaScript без объединения строк.
  • Stormpath – Позволяет нам хранить и аутентифицировать пользователей без необходимости создавать для этого собственный сервер.
  • Stormpath React SDK – Интегрирует Stormpath в наше приложение React с минимальными усилиями.
  • Экспресс – Позволяет нам обслуживать наши файлы HTML и JavaScript.
    • Express Stormpath – Позволяет нам обслуживать API Stormpath через Express.
  • Webpack – Позволяет нам упаковывать все наши файлы JavaScript в один пакет.
  • Babel – Позволяет нам перенести ваши ES6 и JSX в ES5.
  • Начальная загрузка – Потому что мы хотим, чтобы все было красиво.

Настройте реакцию + Express.js Проект

Создайте каталог, в котором будет находиться ваш проект

   $ mkdir my-react-app
   $ cd my-react-app
   $ npm init --yes

Установите Express и модуль Stormpath для Express:

  $ npm install --save express express-stormpath body-paser

Далее мы создадим сервер для размещения нашего приложения. Создать новый файл server.js и вставьте код ниже:

const express = require('express');
const stormpath = require('express-stormpath');

const app = express();

app.use(stormpath.init(app, {
   web: {
      produces: ['application/json']
   }
}));

app.on('stormpath.ready', function(){
   app.listen(3000, 'localhost', function(err){
      if(err){
         return console.error(err)
      }
      console.log('Listening at http://localhost:3000')
   });
});

Хорошо, теперь мы можем продолжить и подключить это к приложению Stormpath, создав новый файл stormpath.yml со следующим кодом в нем. Обратите внимание, что вам нужно заменить эти значения в нем своими собственными.

   client:
      apikey:
         id: YOUR_API_KEY_ID
         secret: YOUR_API_KEY_SECRET
   application:
      href: https://api.stormpath.com/v1/applications/XXXX <-- YOUR APP HREF

Попробуйте запустить сервер, запустив $ node server.js . Если все настроено правильно, вы увидите:-

Listening at http://localhost:3000

Отлично, поднимите большой палец вверх за это. Вы заработали себе значок за то, что успешно настроили свой сервер для связи с Stormpath и предоставили API REST для вашего React.

Настройка веб-пакета

Двигаясь дальше быстро, завершите работу сервера, чтобы мы могли установить пакет Webpack. Как мы уже упоминали выше, Webpack будет упаковывать все наши клиентские скрипты. Скоро нам понадобится эта организация!

$ npm install --save webpack
$ npm install --save-dev webpack-dev-middleware

Мы настроим Webpack, создав новый файл с именем webpack.config.js вставив код ниже:

const path = require('path');
const path = require('webpack');

module.exports = {
   entry: [
      './src/app'
],
devtool: 'eval-source-map',
output: {
   path: __dirname,
   filename: 'app.js',
   publicPath: '/js/'
},
module: {
   loaders: []
 }
};

Итак, давайте проанализируем этот код:- Что делает этот код, так это то, что он будет выглядеть в нашем /src/ каталог (мы его создадим) и упакуем все сценарии и их зависимости в этот каталог как один модуль. Затем используйте файл /src//src/ и его экспорт в качестве экспорта этого модуля. Затем, наконец, когда он сгенерирует этот пакет модулей, он будет обслуживать его через Express под /js/app.js конечная точка.

Для того, чтобы Express мог обслуживать файлы webpack, мы должны открыть server.js и добавьте эти строки в начало его:

   const webpack = require('webpack');
   const config = require('./webpack.config');

Затем сразу после строки const(); добавить:

const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
   noInfo: true,
   publicPath: config.output.publicPath
}));

Опять же, это позволит Webpack перехватывать запросы и обслуживать наши упакованные /js/app.js файл.

Настройка Babel

Поскольку мы будем использовать ES6 и JSX, нам необходимо перенести эти файлы в ES5 (для обратной совместимости с несовременными браузерами). Вавилон делает это. Он принимает файлы ES6/JSX в качестве входных данных и преобразует их в ES5.

Итак, как обычно, мы собираемся установить пакет Babel

   $ npm install --save babel-core babel-runtime babel-loader babel-plugin-react-transform \
  babel-preset-es2015 babel-preset-react babel-preset-stage-0

Далее, как и в случае с Webpack, мы собираемся настроить babel. Создаем новый файл .babelrc и добавляем этот код:-

{
   "presets": ["stage-0", "es2015", "react"]
}

Наконец, мы отредактируем webpack.config.js для того, чтобы Babel мог работать с нашим веб-пакетом. Мы добавим запись в модуль .погрузчики массив:

   module: {
      loaders: [{
         test: /<.js$/,
         loaders: ['babel'],
         include: path.join(__dirname, 'src')
}]
}

Index.html и Начальная загрузка

Прежде чем глубоко погрузиться в React и промокнуть, мы создадим страницу входа для нашего приложения. Эта страница проинструктирует браузер о том, что он должен загрузить, прежде чем мы инициализируем React и наше приложение.

Начните с создания нового каталога сборка , внутри него создайте файл index.html . Наш сервер будет хранить все наши статические файлы из этой папки.

   $ mkdir build
   $ cd build
   $ touch index.html

Внутри index.html , вставьте это:

Если вы используете код Visual Studio в качестве редактора, вы можете установить расширение Шаблон HTML5 для простого создания сценария.

Двигаясь дальше, в папке build создайте новый каталог css и загрузите в него файлы начальной загрузки.

$ mkdir css
$ cd css
$ curl -O https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
$ cd ../.. # return to /my-react-app

Хорошо, для того, чтобы ваш браузер мог получить доступ к этим файлам, нам нужно настроить их так, чтобы они обслуживались через Express. Откройся server.js и в верхней части файла добавьте:

const path = require('path');

Под строкой app.use(stormpath.init(приложение, ...)); добавить:

app.get('/css/bootstrap.min.css', function(req, res) {
   res.sendFile(path.join(__dirname, 'build/css/bootstrap.min.css'));
})

app.get('*', function(req,res) {
   res.sendFile(path.join(__dirname, 'build/index.html'));
});

Так , Как Работает React?

Теперь у нас есть скелет для нашего приложения, далее мы сосредоточимся на создании нашего приложения React. Но перед этим давайте попробуем понять React.

Компоненты

В React все построено на компонентах. Думайте о компоненте как об элементе DOM, например, Панель навигации, заголовок, форма входа в систему … и т.д. Компонент – это в основном то, что отображает узел DOM. Простой компонент React выглядит следующим образом:-

class FirstComponent extends React.Component {
   render(){
      return 
First Component

   }
 }

Чтобы отобразить этот компонент на странице, вам необходимо импортировать react, а затем вызвать его:

ReactDOM.render(
   ,
   document.getElementById('first-component')
);

И React будет отображать компонент для этого элемента.

Конечно, в компоненте React есть и другие функции, такие как состояние. Вот пример компонента счетчика, который начинает отсчет при добавлении в DOM и останавливается при удалении.

class Counter extends React.Component {
   state = {
      current: 0
   }

   constructor(){
      super();
      this.intervalId = null;
   }

   updateCounter(){
      this.setState({current: this.state.current + 1})
   }

   componentWillMount(){
      this.setState({ counter: this.props.from || 0 });
      this.intervalId = 
      setInterval(this.updateCounter.bind(this), 1000);
   }
   componentWillUnmount(){
      clearInterval(this.intervalId);
   }
   render(){
      return { this.state.current }
   }
}

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

Элемент this.props представляет собой набор всех свойств (входных данных), переданных компоненту. Свойства компонента можно задать, как показано ниже:

Переменные JSX

Переменные можно легко интерполировать в ваш JSX DOM, используя { имя переменной }, например, как показано ниже:

   render(){
      let myVariable = 123;
      return { myVariable }
   }

JSX и зарезервированные идентификаторы JavaScript

Поскольку JS – это JavaScript, есть некоторые предостережения, которые вам необходимо знать при работе с React. т.е. при настройке свойств компонента ReactDOM вы не можете использовать ни для , ни класса , поскольку они считаются зарезервированными идентификаторами JavaScript. Чтобы обойти эту проблему, React поставляется с htmlДля и имя класса , которое вы должны использовать вместо этого.

Чтобы проиллюстрировать проблему, это не сработает:

Но это будет:

Виртуальный ДОМ

Вместо того, чтобы работать непосредственно с DOM, в React все компоненты хранятся в их собственном виртуальном DOM. Вы можете думать о виртуальном DOM как о реализации DOM в JavaScript (потому что так оно и есть на самом деле). Затем этот виртуальный DOM сопоставляется с реальным элементом DOM. Поэтому, когда вы визуализируете свой компонент React, React посмотрит вывод DOM из компонента, сравнит его с его представлением в виртуальном DOM, а затем сгенерирует исправление для реального DOM.

Это означает, что вам больше никогда не придется думать о ручном управлении элементами DOM. Все, что вам нужно сделать, это сообщить React, как вы хотите, чтобы выглядел ваш компонент, и он позаботится о преобразовании DOM необходимыми способами (с минимальными усилиями).

Установка зависимостей React

Теперь, когда мы познакомились с React, мы начнем с установки некоторых зависимостей React:

   $ npm install --save react react-dom react-router react-stormpath react-document-title history

Прежде чем мы начнем кодировать, нам нужно место для размещения наших файлов React, поэтому создайте новый каталог с именем src , а затем используйте его в качестве рабочего каталога.

   $ mkdir src
   $ cd src

Теперь давайте начнем с точки входа в наше приложение. Это будет место, где мы настроим наше приложение React и его маршрутизацию. Поэтому создайте новый файл с именем app.js и введите этот код:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, IndexRoute, Route, browserHistory } from 'react-router';

ReactDOM.render(
  
  ,
  document.getElementById('app-container')
);

Итак, теперь у нас есть основа для нашего приложения. Давайте продолжим и импортируем SDK Stormpath и некоторые вещи, которые нам понадобятся в нем. На вершине вашего app.js файл, добавьте инструкцию по импорту:

   import ReactStormpath, { Router, HomeRoute, LoginRoute, AuthenticatedRoute } from 'react-stormpath';

Как вы можете видеть в Как вы можете видеть в теперь есть два конфликтующих Маршрутизатор импорт. Начиная с Пути реакции. Маршрутизатор расширяется от маршрутизатора React. Маршрутизатор нам это больше не понадобится. Так что продолжайте и удалите импорт маршрутизатора из react-маршрутизатора

Теперь мы инициализируем SDK Stormpath. Добавьте следующую строку прямо над ReactDOM.render() .

   ReactStormpath.init()

Это было легко! Теперь мы готовы приступить к созданию наших страниц во второй части этого урока.

Оригинал: “https://dev.to/clintdev/authenticate-react-app-with-stormpath-3l1j”

Читайте ещё по теме: