Теперь мы собираемся настроить учетную запись auth0 или нашу аутентификацию для наших конечных точек и провести быстрый обзор нашего файла package.json.
Давайте сначала настроим нашу учетную запись auth0. Перейдите по этой ссылке.
Теперь зарегистрируйтесь, указав свой адрес электронной почты, и укажите адрес электронной почты в качестве имени клиента.
Затем сделайте его личным аккаунтом, пусть он будет разработчиком и превратит свой проект в Just Playing Around.
Теперь вы попадете на панель инструментов, в которой вы создадите новое приложение. Назовите свое приложение mern-ecommerce-app и сделайте его одностраничным приложением.
Начнем с настройки наших переменных в нашем файле .env. Мы перейдем на вкладку настроек. Затем вы скопируете client_id, auth0_domain и client_secret. Затем вставьте его в свой файл .env и назовите переменные REACT_APP_AUTH0_CLIENT_ID, REACT_APP_AUTH0_DOMAIN и REACT_APP_AUTH0_CLIENT_SECRET. ПРИМЕЧАНИЕ. Вам понадобится REACT_APP, чтобы вы могли получить доступ к этим переменным во внешнем интерфейсе.
REACT_APP_AUTH0_CLIENT_ID = <client id> REACT_APP_AUTH0_CLIENT_SECRET = <client secret> REACT_APP_AUTH0_DOMAIN = <auth0 domain>
Также укажите URL-адрес обратного вызова, равный http: // localhost: 3000 / auth / callback. Это позволяет auth0 автоматически возвращать этот URL-адрес в вашем интерфейсе. Следовательно, это устраняет необходимость в вызове axios в вашем интерфейсе. На вкладке настроек. ПРИМЕЧАНИЕ: та же вкладка, на которой мы находимся.
У нас есть переменные для настройки аутентификации. Перейдите в социальные сети и включите те, которые вам нужны. В этом случае нам нужно просто включить github и facebook, так как это самые простые из них для аутентификации.
Отлично, теперь у нас есть наши настройки. Давайте объясним, как наши данные распространяются с помощью Auth0.
- Он перенаправит пользователя в наш домен auth0.
- Затем он перейдет к выбранному пользователем социальному провайдеру.
- Социальный провайдер предоставляет доступ к Auth0
- Auth0 отправляет authorization_code на ваш сервер.
- Сервер отправляет обратно объект с client_id, client_secret, grant_type, redirect_uri и кодом, полученным на шаге 4.
- Auth0 отправляет access_token, который будет использоваться для запроса информации о пользователе.
- Сервер Получает access_token для обмена для получения информации о пользователе.
- Поэтому Auth0 отправляет обратно информацию о пользователе, где она настраивает информацию о пользователе для сеанса и помещает в нашу базу данных.
- Сервер перенаправляет пользователя обратно к клиенту.
- componentDidMount запускает вызов axios для запроса сеанса пользователя с сервера.
- Сервер отправляет информацию обратно клиенту.
Теперь давайте сделаем быстрый обзор того, как у нас настроен package.json. Посмотрите на наше свойство прокси в нашем package.json. У нас есть два прокси: один - это / auth / callback, который является базовым путем для auth0, а / api - это базовый путь для всех наших вызовов api к нашему бэкэнду. Целью является сам прокси с запущенным приложением порта.
"proxy": {
"/auth/callback": {
"target": "http://localhost:5000"
},
"/api": {
"target": "http://localhost:5000"
}
},
Перед настройкой аутентификации измените конечную точку в вашем файле index.js, отвечающую за вход в систему, чтобы она соответствовала прокси-серверу auth0, и сделайте это получением.
//BEFORE
app.post('/api/login', userController.login);
//AFTER
app.get('/auth/callback', userController.login);
Наконец, давайте настроим нашу аутентификацию в нашем приложении. Перейдите в свой файл user_controller в папке server / controllers. Мы получим токен доступа пользователя (шаг 5), отправив вам почтовый запрос в домен auth0 через oauth. Затем передайте объект с необходимыми параметрами, такими как client_id, client_secret, code, grant_type и redirect_uri.
return axios.post(`https://${process.env.REACT_APP_AUTH0_DOMAIN}/oauth/token`, {
client_id: process.env.REACT_APP_AUTH0_CLIENT_ID,
client_secret: process.env.REACT_APP_AUTH0_CLIENT_SECRET,
code: req.query.code,
grant_type: 'authorization_code',
redirect_uri: `http://${req.headers.host}/auth/callback`
}).then(accessTokenResponse => {
//Now Get user info
}).catch(err => console.log('Auth0 Axios Post backend Error------------', err));
Теперь мы получаем наш ответ с нашим токеном доступа, затем мы назначим переменную с именем accessToken для хорошей меры, чтобы назначить ее accessTokenResponse.data.access_token.
const accessToken = accessTokenResponse.data.access_token
Мы вернем вам запрос на получение auth0_domain, используя наш accessToken в качестве параметра запроса. Что вернет наши пользовательские данные. Мы будем использовать .find ({}) для нашей коллекции с этими данными, в первую очередь с идентификатором auth0, чтобы найти идентичного пользователя. Или он пополнит наши пользовательские коллекции в базе данных. В любом случае он назначает userData сеансу, а затем сохраняет сеанс в локальном хранилище перед перенаправлением пользователя домой.
return axios.get(`https://${process.env.REACT_APP_AUTH0_DOMAIN}/userinfo?access_token=${accessToken}`).then(userDataResponse => {
//Destruct the data from from auth0
const { name, nickname, email, picture, sub } = userDataResponse.data;
console.log('user data--------', userDataResponse.data);
// res.status(200).json({message: 'mEssages'})
User.findOne({auth0_id: sub}, (err, user) => {
if(err) console.log('Login Error--------------', err);
//If the user is undefined.
if(!user) {
//Create a new user.
let newUser = new User({
name: name,
email: email,
username: nickname,
profile_picture: picture,
auth0_id: sub
});
//Assign the user to the session.
req.session.user = newUser;
//Save the session
req.session.save();
//Save the newUser instance to mongodb
newUser.save();
}
req.session.user = user;
req.session.save();
res.redirect('/');
})
}).catch(err => console.log('Auth0 get user info Error------------', err));
Заметили что-то не так? В нашей модели нет свойства profile_picture, поэтому перейдите в папку моделей и добавьте в файл user.js изображение профиля с типом данных String. Наша новая модель должна выглядеть так.
const user = new Schema({
//THis is where the user will login
//For Now we will be inserting test data
name: String,
email: String,
username: String,
auth0_id: String,
profile_picture: String
});
Пока мы добавляем свойства к моделям, мы добавим свойство изображения к продукту также в нашем файле product.js. Наша новая модель должна выглядеть так.
//Need an id, name, description, price,
//Id is created by default in mongodb
const product = new Schema({
name: String,
description: String,
price: Number,
picture: String
});
Теперь, когда у нас есть вся наша проверка подлинности. Мы будем обрабатывать все эти данные на переднем плане и добавим в наше приложение пару интересных функций. Auth0 может быть чрезвычайно утомительным и разочаровывающим, поэтому всегда связывайтесь со мной, если у вас возникнут проблемы, и отправляйте мне снимки вашего кода. Вот мой facebook, linkedin или instagram для помощи или комментариев ниже, так что я могу помочь.
Вот мой гитхаб для справки:
Теперь закончим auth0.
Удачного кодирования!
