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