Авторизация React и Rails с нуля с использованием JWT, часть I
Предпосылки:
Реакт установлен
Рельсы установлены
Начиная:
Мы начнем с создания нашего бэкенда Rails, создав модель пользователя, контроллер, миграцию, а также открыв необходимые маршруты. Для этого обязательно подключитесь к auth_backend, нашему проекту rails. Чтобы сделать это очень легко и сразу, мы просто запустим:
Это создаст все перечисленное выше, но прежде чем мы начнем, нам нужно будет сделать еще несколько вещей. Во-первых, мы добавим JWT в наш файл gem, запустив:
После открытия Gemfile вы увидите, что он был добавлен. Внутри Gemfile вам также нужно будет раскомментировать bcrypt и rack-cors. Это гарантирует, что наш пользователь сможет иметь безопасный пароль и даст вам возможность ссылаться на перекрестное происхождение. Пожалуйста, обратите внимание, что не все файлы Gemfile будут поставляться с заглушками, в этом случае перейдите к следующему разделу. Вам также необходимо убедиться, что ваш источник и ресурс установлены на все, для краткости *. Ваш файл cors.rb в config/initializers должен выглядеть так:
Если ваш Gemfile не содержит стоек-коров, нам нужно будет выполнить небольшую дополнительную настройку. Сначала вам нужно будет добавить рэковые коры в ваш Gemfile. Для этого мы просто запустим:
Если вы хотите перепроверить правильность добавления рэка-cors, вы можете проверить свой Gemfile. Все новые добавленные драгоценные камни будут внизу.
После этого нам нужно будет зайти в нашу папку конфигурации и открыть наш application.rb. Вы захотите добавить следующий код в свой класс приложения rails. Я лично поместил его прямо под классом Application ‹ Rails:: Application, но не стесняйтесь экспериментировать с размещением внутри класса, если это необходимо. Для этого нам потребуется добавить следующий код:
Убедитесь, что он находится в вашем внутреннем модуле.
Последним шагом в этом процессе является переход к нашему application_controller.rb, который будет расположен в наших папках app/controller. Вы должны просто увидеть пустой класс, но нам нужно будет добавить следующую строку кода, чтобы предотвратить проблему с токеном rails.
После внесения изменений, необходимых для добавления этих новых зависимостей, мы установим эти недавно добавленные драгоценные камни, а также запустим нашу миграцию на рельсы. Для этого нам просто нужно запустить в наших терминалах:
потом
Последнее, что нам сейчас нужно сделать без нашего бэкэнда, — это убедиться, что у нашего пользователя будет безопасный пароль. Все это обрабатывается гемом bcrypt, но нам нужно добавить одну строку кода. В папке приложения прокрутите вниз до папки моделей и откройте свои пользовательские модели. Все, что вам нужно будет добавить, это has_secure_password. Это должно выглядеть так:
Я настоятельно рекомендую открыть две вкладки на вашем терминале, это позволит нам запускать как наш внутренний сервер (Rails), так и наш внешний сервер (React). Если вы похожи на меня и любите программировать в VScode или использовать терминал ConEmu, не волнуйтесь.
В VScode в вашем терминале вы можете «разделить» свой терминал, просто нажав кнопку между новой кнопкой терминала, +, и кнопкой уничтожения терминала, корзиной. Это позволит вам иметь оба терминала доступными для любой отладки. С ConEmu это намного проще, вам просто нужно создать еще одну вкладку в этом каталоге.
Копию этой котловой плиты можно найти здесь.
После разделения ваших терминалов один в каталоге вашего auth_backend, а другой ваш auth_frontend. В соответствующих терминалах запустите:
И
Обратите внимание, что вы всегда должны запускать свой внутренний сервер перед внешним интерфейсом, поскольку по умолчанию rails будет использовать localhost: 3000. React также захочет это сделать, но адаптируется для запуска на локальном хосте: 3001, если используется предыдущий порт.
Как только наши внутренние и внешние серверы будут запущены и запущены, мы можем посетить каждый из них соответственно по адресам http://localhost:3000 и http://localhost:3001. Теперь, когда у нас запущены внешний и внутренний серверы, нам пока не нужно о них беспокоиться.
Посмотрев на нашу страницу внешнего интерфейса, мы видим эту прекрасную автоматически сгенерированную страницу шоу реакции. Как говорится, нам нужно будет отредактировать наш App.js, который находится в нашей папке src в нашем каталоге auth_frontend. В этом примере мы не будем использовать хуки, а вместо этого будем использовать классовые и функциональные компоненты.
Первым шагом, который нам нужно сделать, будет превращение приложения в класс. Для этого мы должны не забыть импортировать компонент из реакции и отобразить наш возврат. Кроме того, мы также удалим все html-элементы в приложении div, а также импорт логотипа, поскольку они нам не понадобятся. Мы также сделаем ставку на установку состояния пользователя в пустой объект прямо сейчас.
Ваш код должен выглядеть так:
Теперь, когда у нас есть чистый холст, мы можем приступить к созданию формы регистрации. Во-первых, нам нужно создать новую папку в нашей папке src с именем component. Внутри этой папки мы создадим файл с именем SignUp.js, который будет содержать, как вы уже догадались, нашу регистрационную форму. После создания мы также превратим его в компонент класса. Ваш код должен выглядеть так:
Теперь нам понадобится несколько входных данных для нашего пользователя, и мы только что создали их для рельсов. Нам нужно будет создать ввод для всего, что нужно пользователю, например, имя пользователя, пароль, имя и фамилию. В нашей форме мы создадим наши метки и входные данные для каждого из них. Мы также добавим дополнительный вход в качестве кнопки отправки. Ваш код должен выглядеть так:
Обратите внимание, что я использовал тип password для ввода пароля. Это замаскирует или скроет значение, отображаемое на экране.
Поскольку мы используем контролируемую форму, нам нужно будет добавить состояние и эти реквизиты для каждого сделанного нами ввода. Особенно важно, чтобы ваши имена ключей состояния напрямую совпадали с вашими входными именами, иначе вы столкнетесь с некоторыми проблемами в будущем. Не менее важно, чтобы наши входные значения были установлены в состояние. Для этого мы установим значение наших входов в this.state.the имя входов. Ваша заполненная форма на данный момент должна выглядеть так:
Теперь мы создадим функцию с именем handleChange, которая, как вы уже догадались, будет обрабатывать наше событие изменения, которое мы поместим на каждый из наших входов. Мы могли бы установить состояние каждого входа по отдельности, но мой хороший друг, единственный и неповторимый Дэймон Чиверс, научил меня способу объединения четырех отдельных функций в одну, и именно здесь важность установки совпадающих имен становится очевидной. играть в.
Мы начнем с нашей функции handleChange, приняв событие в качестве аргумента. Мы настроим наш ключ так, чтобы он принимал имя цели события, и нашим значением будет значение цели события. Ваша функция должна выглядеть так:
Чтобы понять смысл этой функции, мы разберем ее немного дальше. Ключом для установки состояния является имя наших входов, которое точно совпадает с реквизитами состояния. Из-за этого мы теперь можем повторно использовать эту функцию для каждого из наших входов благодаря нашей динамической схеме сопоставления имен.
Теперь нам нужно добавить событие изменения ко всем нашим текстовым вводам, чтобы наша новая функция действительно могла работать. Каждый ввод должен иметь дополнение onChange как таковое:
Теперь, когда у нас есть все наши функции, кажется, что наша главная проблема заключается в том, чтобы они отображались на странице, поскольку она должна была быть пустой после того, как вы ранее удалили в App.js. Теперь это может показаться очевидным, но нам нужно будет импортировать нашу регистрационную форму в наш App.js и поместить наш новый компонент SignUp в наш div. Ваш App.js должен выглядеть так:
После обновления ваша веб-страница должна показать чрезвычайно простую и уродливую форму регистрации, но не волнуйтесь, я предоставлю вам некоторые CSS, чтобы помочь с чем. Сначала мы перейдем к нашему файлу App.css, удалим все и начнем с нуля. Поскольку наша регистрационная форма является частью нашего приложения, мы можем стилизовать ее непосредственно из App.css. Пожалуйста, убедитесь, что ваш файл css соответствует для достижения наилучших результатов:
Теперь, когда у нас есть что-то, что выглядит наполовину прилично, давайте перейдем к тому, чтобы наша форма действительно что-то делала, придала ей некоторую функциональность. Для этого мы вернемся к нашему SignUp.js и добавим событие отправки в нашу форму, чтобы мы могли что-то сделать с этим состоянием. Например, установив его на значение нашего фактического пользователя... В нашем событии on submit мы захотим поместить handleSubmit, который будет еще одной функцией, которую мы создадим. Ваше дополнение формы должно выглядеть так:
Прямо под нашей функцией handleChange мы построим нашу функцию handleSubmit, чтобы фиксировать состояние нашей регистрационной формы. Мы будем создавать настоящую функцию внутри нашего App.js, поэтому давайте быстро переключимся на нее и создадим анонимную функцию с именем signUp. В этой функции мы будем устанавливать состояние нашего пользователя, а также сохранять этого пользователя в нашем бэкэнде, но сначала давайте на самом деле добавим некоторые дополнения к нашему бэкенду.
Чтобы запустить эту функцию регистрации, нам нужно будет внести следующие дополнения в наш бэкэнд в нашем пользовательском контроллере. Сначала мы определим метод индекса, это не обязательно, но это хороший способ просмотреть информацию о вашем бэкэнде. Затем нам нужно будет определить наш метод создания, который фактически позволит нам создать нашего пользователя. И, наконец, мы создадим частный метод, который будет хранить параметры нашего пользователя. Хотя это можно было бы определить в вашем методе создания, он добавляет дополнительный уровень безопасности. Ваш код должен выглядеть так после внесения изменений.
Теперь, наконец, пришло время связать все это вместе в красивый, аккуратный бант. Вернемся к нашему внешнему интерфейсу, к нашей функции signUp в App.js. Мы будем делать выборку в наш сервер, в частности, где находятся наши пользователи. Это также место, куда вы можете перейти, чтобы проверить, какие пользователи в настоящее время есть в вашей базе данных, http://localhost:3000/users. Наша базовая выборка будет содержать метод post с обычными заголовками и телом, которое должно содержать именно то, что ожидает серверная часть. Это ключ, потому что, если ваш ключ и значение не совпадают, вы получите сообщение об ошибке.
Внимательно следите за тем, что является JavaScript, а что Ruby. Этого можно легко добиться, сохраняя ruby в змейке_case и JavaScript в camelCase. Самое главное, в конце нашей выборки нам нужно будет проанализировать наш ответ, а затем установить состояние нашего пользователя. Чтобы выполнить все это, ваша функция signUp должна выглядеть так:
Теперь, когда наша функция signUp завершена, мы сделаем небольшой условный рендеринг с помощью токарной операции, которая покажет простую страницу приветствия, если наш пользователь находится в состоянии. Если нет, то нам будет представлена форма регистрации, чтобы мы могли попасть на эту страницу. Мы также будем передавать нашу функцию SignUp нашему компоненту формы SignUp, чтобы мы могли вызвать его для завершения нашей формы. Вам нужно будет поместить следующий код между вашим div на App.js:
Теперь, когда у нас есть доступ к нашей функции signUp в нашем SignUp.js, мы завершим нашу функцию handleSubmit. Он должен будет принять событие так же, как и наша функция handleChange. Нам также нужно будет предотвратить значение по умолчанию, чтобы форма не отправлялась автоматически, так как по умолчанию это отправка. Передав нашу функцию signUp в качестве реквизита в наш handleSubmit, мы можем затем вызвать ее, чтобы установить состояние пользователя из наших параметров. Ваш код отправки дескриптора должен выглядеть следующим образом:
Поздравляем, вы сделали это! Если вы правильно выполнили все шаги, вы сможете зарегистрироваться, и тогда вас поприветствует ваша целевая страница. Чтобы еще раз убедиться, что ваш пользователь действительно попал в серверную часть, вы можете снова перейти на http://localhost:3000/users, где вы сможете просмотреть всех пользователей, которые подписались на ваше приложение.
Если вы хотите посмотреть готовое репо для части I, вы можете найти его здесь.
Если вам понравилась часть I этого пошагового руководства, пожалуйста, присоединяйтесь ко мне во второй части, где мы узнаем, как аутентифицировать наших новых пользователей здесь!!!
