Добавление аутентификации в Express JS с использованием Auth0

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

Эта статья представляет собой краткое руководство по настройке экспресс-приложения js со сторонней проверкой подлинности (Auth0) за десять минут.

Давайте начнем с инициализации node js приложения с нуля, перейдите в нужный каталог и создайте папку для этого проекта, откройте папку в терминале и запустите npm init -y, чтобы быстро настроить новый npm пакет, запустите npm install express dotenv express-openid-connect из того же каталога.

Мы будем использовать эти три пакета на протяжении всего проекта, express конечно, вы должны быть знакомы с используемой нами веб-платформой Node, dotenv — это пакет, который поможет нам загружать переменные окружения из .env файла (мы будем хранить наш секретный подробности в файле .env) и, наконец, express-openid-connect — это пакет, который мы будем использовать для реализации аутентификации для нашего приложения.

Создайте файл, запустив touch app.js на терминале в том же каталоге, где мы будем писать наш код, откройте app.js в предпочитаемом вами редакторе и введите следующий шаблон, чтобы запустить приложение.

const express = require(‘express’); //import express module
require(‘dotenv’).config() //configure the dotenv package
const app = express() //initialise express
app.get(‘/’, (req, res) => {
  res.send(‘Hello World from auth0’)
})
const PORT = process.env.PORT || 3000 //set a constant variable for our port
app.listen(PORT, () => {
  console.log(`app listening on port ${PORT}`)
});

Приведенный выше фрагмент кода просто устанавливает наше экспресс-приложение более или менее как шаблон, и если вы запустите это приложение на терминале, запустив node app.js, вы должны увидеть Hello World от auth0 в своем браузере по адресу http://localhost:3000/. ».

Теперь, когда приложение запущено, мы должны настроить нашу учетную запись auth0, посетить https://auth0.com/ в своем браузере и создать новую бесплатную учетную запись, перейти на вкладку приложения и создать новое приложение, дать ему имя. по вашему выбору и выберите обычное веб-приложение, как показано на изображениях ниже.

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

Прокрутите вниз в настройках и найдите вкладку URI приложений, введите http://localhost:3000/login в поле URI входа в приложения, это означает, что ваш маршрут входа — это указанный выше адрес, если пользователь посещает этот маршрут, он перенаправит их на auth0 войдите для аутентификации, прежде чем пользователь сможет получить доступ к вашему веб-приложению.

Заполните http://localhost:3000/callback в URL-адресе разрешенного обратного вызова, это означает, что после аутентификации пользователя auth0 перенаправит пользователя на этот маршрут на вашем веб-сайте, поэтому вы можете просто заполнить это поле любой страницей, которую вы хотите. пользователь, чтобы увидеть после входа в систему.

Заполните http://localhost:3000/logout в URI разрешенного выхода, пользователь может просто выйти из системы, нажав запрос на получение на этом маршруте.

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

После успешного завершения вышеуказанной настройки мы можем вернуться к нашему app.js, чтобы сделать все остальное.

Создайте файл с именем .env в папке приложения для хранения переменных среды. Помните, я говорил вам скопировать некоторую информацию (Домен и Идентификатор клиента) на странице настроек auth0. .

Скопируйте приведенный ниже текст и вставьте его в файл .env.

ISSUER_BASE_URL=https://YOUR_DOMAIN
CLIENT_ID=YOUR_CLIENT_ID
BASE_URL=https://YOUR_APPLICATION_ROOT_URL
SECRET=LONG_RANDOM_VALUE

Значение ISSUE_BASE_URL должно быть значением домена, которое вы скопировали из настроек приложения auth0.

Значение для CLIENT_ID должно быть идентификатором клиента из настройки вашего приложения auth0.

Значение BASE_URL должно быть http://localhost:3000/, что является корневым маршрутом вашего домена.

Значение SECRET может быть любым, длинным словом или предложением, но избегайте пробела

Все переменные в .env file не являются вашей обычной строкой javascript, поэтому не должны начинаться или заканчиваться кавычками ('')

Мы закончили с переменными среды, поэтому вернитесь к app .js и добавьте этот код сразу после const app = express().

const { auth } = require(‘express-openid-connect’); 
app.use(
   auth({
   issuerBaseURL: process.env.ISSUER_BASE_URL,
   baseURL:process.env.BASE_URL,
   clientID:process.env.CLIENT_ID,
   secret: process.env.SECRET,
   idpLogout: true,
  })
);

{ auth } предоставляется нам пакетом express-openid-connect, который мы установили при запуске нашего экспресс-приложения, и в основном тем, что мы будем использовать для настройки нашей аутентификации с помощью auth0, process.env, который мы неоднократно использовали в приведенном выше коде, предназначен для сбора наших переменных из файла .env и его импорта. в out app.js для использования аутентификацией (express-openid-connect) для целей идентификации, то есть для связи этого express app с приложением auth0, которое мы создали ранее.

На этом мы закончили с необходимыми настройками, нам просто нужно проверить наши конечные точки, но есть еще одна вещь, которую нам нужно сделать, чтобы завершить.

Если вы попытаетесь посетить http://localhost:3000/, вам будет предложено войти в систему через auth0, произошло то, что по умолчанию auth0 защитил все маршруты, т. е. вы должны пройти аутентификацию / войти в систему, прежде чем вы сможете просматривать любой ресурс. что вы, возможно, не хотите быть таким. Обычно должен быть какой-то маршрут, по которому любой пользователь может пройти без аутентификации, поэтому, чтобы изменить этот параметр, добавьте auth0Logout: true и authRequired: false в параметр auth. auth0Logout: true — инициировать выход из приложения по умолчанию, а authRequired: false — удалить аутентификацию на всех маршрутах по умолчанию, после чего мы можем защитить любой маршрут, который мы хотим защитить. См. код ниже;

const express = require(‘express’);
require(‘dotenv’).config()
const { auth, requiresAuth } = require(‘express-openid-connect’);
const app = express()
app.use(
   auth({
   issuerBaseURL: process.env.ISSUER_BASE_URL,
   baseURL:process.env.BASE_URL,
   clientID:process.env.CLIENT_ID,
   secret: process.env.SECRET,
   idpLogout: true,
   auth0Logout: true,
   authRequired: false
  })
);
app.get(‘/’, (req, res) => {
   res.send(req.oidc.isAuthenticated ? ‘Logged In’ : ‘Logged Out’)
})
app.get(‘/callback’, requiresAuth(), (req, res) => {
   res.send(JSON.stringify(req.oidc.user))
})

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
   console.log(`app listening on port ${PORT}`)
})

Если вы посетите http://localhost:3000/, вы сможете просматривать страницу, даже если вы не вошли в систему, но отображаемое сообщение будет динамическим, если вы вошли в систему, вы увидите Вошел в систему. и если вы вышли из системы, вы увидите Вошел в систему.

Если вы посетите http://localhost:3000/callback, вы сможете увидеть ресурс на этом маршруте только в том случае, если вы вошли в систему, в противном случае вам будет предложено сделать это службой аутентификации auth0. Попробуйте поиграть с приложением, зарегистрируйте несколько учетных записей, войдите в каждую из них и посмотрите, как auth0 помогает нам упростить аутентификацию.

Заключение

В этом руководстве мы можем покрыть аутентификацию с помощью auth0, что просто происходит за капотом, так это то, что когда пользователь нажимает маршрут входа в систему нашего приложения, пользователь перенаправляется на auth0 для аутентификации, и если auth0 находит пользователя подлинным, пользователь перенаправляется вернуться к URL-адресу обратного вызова для доступа к ресурсам нашего приложения.

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

Спасибо.