Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)
В первой части этой серии учебников вы увидели, как реализовать функцию входа в систему. В этой части вы узнаете, как реализовать функцию регистрации и изменить функцию входа в систему, чтобы проверять реальных пользователей в MongoDB.
Начинаем
Давайте начнем с клонирования исходного кода из первой части учебника.
git clone https://github.com/royagasthyan/ReactBlogApp-SignIn
После клонирования каталога перейдите в каталог проекта и установим необходимые зависимости.
cd ReactBlogApp-SignIn npm install
Запустите сервер Node.js, и у вас будет приложение, запущенное по адресу http://localhost:7777/index.html#/.
Настройка бэкенда
Для этого приложения вы будете использовать MongoDB в качестве бэкенда. Следуйте инструкциям в официальной документации MongoDB, чтобы установить MongoDB на Ubuntu. После установки MongoDB вам понадобится коннектор для подключения к MongoDB в Node.js. Установите драйвер MongoDB Node.js с помощью Node Package Manager (или npm):
npm install mongodb
После установки драйвера вы сможете подключить драйвер в приложении.
Создайте файл user.js, в котором вы будете хранить информацию, связанную с пользователем. Внутри файла user.js требуются зависимости от клиента MongoDB.
var MongoClient = require('mongodb').MongoClient;
Вы будете использовать библиотеку с именем assert для проверки возвращенного ответа. Добавим assert в файл user.js.
var assert = require('assert');
Давайте назовем нашу базу данных Blog в MongoDB, поэтому наш URL-адрес базы данных будет выглядеть так:
var url = 'mongodb://localhost:27017/Blog';
Внутри файла user.js создайте и экспортируйте функцию с именем signup.
module.exports = {
signup: function(){
// Code will be here
}
}
Используя клиент MongoDB, попробуйте подключиться к базе данных. После подключения вы выведете соответствующее сообщение в терминале.
module.exports = {
signup: function(name, email, password){
MongoClient.connect(url, function(err, db) {
console.log('connected')
});
}
}
Настройка события регистрации
После того, как вы настроите бэкенд с MongoDB, давайте реализуем событие регистрации. Внутри страницы main.jsx включите событие изменения в поле ввода имени, электронной почты и пароля в классе signup.
handleNameChange(e){
this.setState({name:e.target.value})
}
handleEmailChange(e){
this.setState({email:e.target.value})
}
handlePasswordChange(e){
this.setState({password:e.target.value})
}
Свяжите вышеуказанные изменения событий в конструкторе класса.
constructor(props) {
super(props);
this.handleNameChange = this.handleNameChange.bind(this);
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
}
Определите переменные состояния внутри конструктора класса signup.
this.state = {
name:'',
email:'',
password:''
};
Определите метод регистрации внутри класса signup. Внутри метода регистрации, используя библиотеку axios, сделайте вызов метода post методу signup в файле user.js.
signUp(){
axios.post('/signup', {
name: this.state.name,
email: this.state.email,
password: this.state.password
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
Внутри функции signup в файле user.js вы будете реализовывать вставку в базу данных.
Добавьте обработчик запроса /signup в файл app.js, как показано, чтобы обработать событие click-up click. Внутри функции обработчика запроса /signup выполните вызов метода user.signup.
app.post('/signup', function (req, res) {
user.signup('','','')
console.log(res);
})
Подключим файл user.js в файле app.js.
var user = require('./user')
Сохраните указанные выше изменения и перезапустите сервер. Откройте в своем браузере страницу http://localhost:7777/index.html#/signup, и у вас должна быть страница регистрации. Нажмите кнопку «Sign Up», и у вас будет выведено в терминале сообщение connected.
Сохраняем данные пользователя в MongoDB
Чтобы сохранить данные пользователя в базе данных Blog, вы создадите коллекцию user. Внутри этой коллекции вы будете хранить все данные пользователя, такие как имя, адрес электронной почты и пароль. MongoClient.connect возвращает параметр db, с помощью которого вы можете вставить запись в коллекцию user.
Вы будете использовать метод insertOne для вставки отдельной записи в коллекцию пользователей. Измените код в методе регистрации в user.js, как показано ниже:
db.collection('user').insertOne( {
"name": name,
"email": email,
"password": password
},function(err, result){
assert.equal(err, null);
console.log("Saved the user sign up details.");
});
Вот полный код user.js:
var MongoClient = require('mongodb').MongoClient;
var assert = require('assert');
var url = 'mongodb://localhost:27017/Blog';
module.exports = {
signup: function(name, email, password){
MongoClient.connect(url, function(err, db) {
db.collection('user').insertOne( {
"name": name,
"email": email,
"password": password
},function(err, result){
assert.equal(err, null);
console.log("Saved the user sign up details.");
});
});
}
}
Измените обработчик запроса /signup в файле app.js, чтобы передать имя, адрес электронной почты и пароль методу signup в файле user.js.
app.post('/signup', function (req, res) {
var name=req.body.name;
var email=req.body.email;
var password=req.body.password;
if(name && email && password){
user.signup(name, email, password)
}
else{
res.send('Failure');
}
})
Сохраните указанные выше изменения и перезапустите сервер. Откройте в своем браузере http://localhost:7777/index.html#/signup. Заполните регистрационные данные пользователя и нажмите кнопку регистрации. У вас будет Saved the user sign up details. cообщение в терминале сервера. Войдите в оболочку MongoDB и проверьте коллекцию user в базе данных Blog. Чтобы найти информацию о пользователе, введите следующую команду в оболочке MongoDB:
db.user.find()
Вышеуказанная команда отобразит данные пользователя в формате JSON.
{
"name": "roy",
"email": "royagasthyan@gmail.com",
"password": "test",
"_id": ObjectId("58f622f50cb9b32905f1cb4b")
}
Внедрение проверки входа в систему
В первой части учебника вы жестко закодировали проверку входа пользователя, поскольку регистрация пользователя не была реализована. Давайте изменим жестко закодированную проверку входа и рассмотрим базу данных MongoDB для действительных входных данных пользователя.
Создайте функцию под названием validateSignIn в файле user.js.
validateSignIn: function(username, password,callback){
}
Внутри функции validateSignIn с помощью клиента MongoDB вы подключаетесь к базе данных Blog и запрашиваете таблицу user для пользователя с указанным именем пользователя и паролем. Вы будете использовать метод findOne для запроса к коллекции user.
db.collection('user').findOne( { email : username ,password: password },function(err, result){
});
Проверьте возвращенный результат на null, если запись не найдена.
if(result==null){
callback(false)
}
else{
callback(true)
}
Как видно из приведенного выше кода, если запись не найдена, в обратном вызове возвращается false. Если запись найдена, в обратном вызове возвращается значение true.
Вот полный метод validateSignIn:
validateSignIn: function(username, password,callback){
MongoClient.connect(url, function(err, db){
db.collection('user').findOne( { email : username ,password: password
},function(err, result){
if(result==null){
callback(false)
}
else{
callback(true)
}
});
});
}
В методе /signin в файле app.js вы вызовете метод validateSignIn. В функции обратного вызова вы будете проверять ответ. Если значение true, то оно будет указывать на действительный вход, иначе будет недопустимый вход. Вот как это выглядит:
app.post('/signin', function (req, res) {
var user_name=req.body.email;
var password=req.body.password;
user.validateSignIn(user_name,password,function(result){
if(result){
res.send('Success')
}
else{
res.send('Wrong username password')
}
});
Сохраните указанные выше изменения и перезапустите сервер. Откройте в своем браузере http://localhost:7777/index.html#/. Введите действительное имя пользователя и пароль, и у вас будет успешное сообщение, зарегистрированное в консоли браузера. При вводе неверного имени пользователя и пароля сервер отобразит сообщение об ошибке.
Подведем итоги
В этой части учебника вы узнали, как реализовать процесс регистрации пользователей. Вы видели, как создать представление регистрации и передать данные из пользовательского интерфейса React в Node.js, а затем сохранить их в MongoDB. Вы также изменили функцию входа в систему, чтобы проверить действительный вход пользователя в базе данных MongoDB.
В следующей части учебника вы будете использовать функции добавления сообщений и отображения страницы.
Исходный код этого учебника доступен в GitHub.
Сообщите нам свои мысли или любые предложения в комментариях ниже.
