Узнайте, как добавить функции входа и регистрации на свой веб-сайт с помощью любой платформы за 7 простых шагов.

Вот что вам понадобится:

  • GET- и POST-запросы
  • форма взаимодействия
  • хэширование и соление паролей
  • интеграция с базой данных
  • сессии

Если вы знаете, что делаете, и в выбранной вами среде есть несколько библиотек для этих вещей, процесс должен быть довольно простым. Вот как приложение будет выглядеть на блок-схеме:

1. Настройте основные маршруты и формы

Вам понадобятся как минимум эти 2 маршрута:

  • /логин (GET и POST)
  • /регистр (GET и POST)

Конечно, названия маршрутов не имеют значения, но именно так я буду называть их в этом уроке.

Теперь давайте настроим формы. Вот как может выглядеть ваша форма /login в HTML:

<form action="/login" method="POST">
<input autocomplete="off" name="username" placeholder="Username"/>
<input autocomplete="off" name="password" placeholder="Password" type="password"/>
<input value="Login" type="submit" />
</form>

Наиболее важными здесь являются action и method формы, а также фактические input. Вы уже должны знать, что это делает, если нет, я рекомендую изучить какой-нибудь HTML или интерфейсный фреймворк на ваш выбор.

Ваша форма /register должна выглядеть аналогично, за исключением того, что /login следует заменить на /register, и вы можете захотеть получить адрес электронной почты пользователя или подтвердить его пароль. Для этого вам нужно добавить 2 поля ввода.

После того, как основной шаблон сделан, переходите к шагу 2.

2. Используйте взаимодействие с формой, чтобы получить информацию от пользователя

Обычно это очень просто.

В большинстве фреймворков, если вы используете HTML, вам нужно добавить свойство name к вводу формы. Во фреймворке вам нужно будет сделать что-то вроде: var x = req.body.x;, где x — это свойство name, которое вы ранее установили в своем HTML-файле.

После того, как вы получили информацию от пользователя, перейдите к шагу 3.

3. Хэш и соль пароля от пользовательского ввода

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

Если вы используете язык с модулем bcrypt, используйте его. Вот библиотека Python, а вот Node.js. Если такая опция недоступна, поищите другие модули хеширования для выбранного вами языка. Эта статья должна объяснять, какой алгоритм хэширования вам следует выбрать.

Вот как может выглядеть функция хеширования в Node.js с модулем bcrypt:

const hash = bcrypt.hashSync(myPlaintextPassword, saltRounds);
// Store hash in your password DB.

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

4. Вставьте хэш и другую информацию о пользователе в базу данных по вашему выбору.

Конечно, первый шаг — найти драйвер базы данных для предпочитаемой вами базы данных и фреймворка. После того, как вы это сделаете, вам нужно создать таблицу (или ее эквивалент). Информация, которую вы храните, может отличаться, но вот что вам обязательно понадобится:

  • id
  • имя пользователя
  • хэш

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

После того, как вы это сделаете, создайте оператор, который будет вставлять хэш и другие пользовательские данные в базу данных. Если вы используете SQL, фактический оператор будет выглядеть примерно так: INSERT INTO users (username, email, hash) VALUES (?, ?, ?) (я использую AUTOINCREMENT на своих id, поэтому мне не нужно вставлять их вручную)

Теперь основные функции регистрации выполнены, вы можете перейти к шагу 5, если хотите, чтобы пользователь вошел в систему после регистрации, если нет, пропустите его.

5. Вставьте идентификатор пользователя в сеанс

Первым шагом является получение идентификатора пользователя. Если вы сгенерировали его на стороне приложения, это должно быть очень просто, если вы сгенерировали его в базе данных, вы можете использовать пользовательский ввод для имени пользователя, которое у вас уже есть, чтобы выбрать идентификатор из базы данных. Оператор SQL для этого будет выглядеть примерно так: SELECT id FROM users WHERE username=?

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

Теперь давайте перейдем к /login и к шагу 6.

6. Сверить ввод пользователя с хэшем в базе данных (логин)

Во-первых, получите ввод пользователя, как показано на шаге 2. После того, как вы это сделаете, выберите хэш из базы данных с помощью драйвера базы данных. Оператор SQL для этого будет выглядеть примерно так: SELECT hash FROM users WHERE username=? После того, как вы его выбрали, проверьте введенные пользователем данные по хэшу. В Node.js это можно сделать так, если вы используете модуль bcrypt:

const match = bcrypt.compareSync(userInput, hashFromDb);
if (match) doSomething();

Синтаксис для вашей платформы может отличаться, но основной синтаксис должен быть похожим.

Если ввод пользователя правильно сверяется с хэшем, переходите к шагу 7, если нет, перенаправляйте его на страницу с ошибкой или дайте ему предупреждение.

7. Установите идентификатор пользователя в сеансе

Это должно быть довольно просто, просто посмотрите на шаг 5.

Поздравляем!

Теперь у вас есть рабочие функции входа и регистрации на вашем сайте! Конечно, вы можете добавить дополнительные функции, например, страницу профиля или возможность изменить имя пользователя/пароль.

Если вы хотите увидеть несколько примеров того, как это будет выглядеть в коде, вы можете посмотреть мои репозитории на GitHub: flask_login_register и nodejs_login_register.