Как пройти аутентификацию с помощью JWT для вашего сайта

С момента появления разработки веб-приложений через Интернет отправляется много конфиденциальной информации, что делает концепцию аутентификации тем, что каждый веб-разработчик должен понимать и применять в приложении для защиты информации, доверенной приложению пользователем. В этой статье мы рассмотрим средство аутентификации для веб-приложений, известное как аутентификация JWT. По сравнению с другими аутентификация JWT стала фаворитом благодаря своим многочисленным преимуществам для разработчиков.

Прежде чем мы углубимся в программирование, мы определим некоторые ключевые термины и понятия, которые помогут нам понять, как работает аутентификация JWT, после чего мы интегрируем эту форму аутентификации в проект, в котором есть сервер, созданный с помощью Node.js, и интерфейс, созданный с помощью React.js, широко используемого фреймворка (на самом деле, моего личного фаворита) для разработки интерфейса.

Чтобы иметь возможность следовать остальной части статьи, вам необходимо следующее:

  • Знание JavaScript на рабочем уровне
  • Хорошее понимание Node.js и способов его использования при создании сервера.
  • Рабочее понимание создания базы данных.
  • Базовые знания React.js
  • Почтальон и знания о том, как использовать Postman.

Что такое JWT и как это работает?

JWT означает JSON Web Token, открытый стандарт, используемый для обмена информацией о безопасности в виде объекта JSON между клиентом и сервером. Наличие JWT в запросе к серверу от клиента означает, что информация проверена, и ее достоверность установлена, поскольку она снабжена цифровой подписью с использованием секрета, записанного с помощью криптографического алгоритма, чтобы гарантировать, что утверждения не будут изменены после выдается токен. Хотя ни один посредник не может изменить JWT, рекомендуется использовать его в среде HTTPS, поскольку JWT не зашифрован.

Аутентификация JWT — это механизм аутентификации без сохранения состояния, обычно используемый в качестве сеанса без сохранения состояния на стороне клиента. Серверу не нужно полностью полагаться на базу данных для сохранения информации о сеансе. Информация о сеансе хранится на стороне клиента; поэтому поиск в базе данных не требуется для проверки личности запрашивающего пользователя. Это работает следующим образом:

  • Пользователь входит на веб-сайт или в приложение, используя адрес электронной почты/имя пользователя и пароль, чтобы подтвердить свою личность.
  • Сервер подтверждает личность пользователя и отправляет обратно уникальный токен доступа, содержащий ссылку на его личность.
  • Затем клиент включает этот уникальный токен доступа с каждым запросом к серверу, поэтому, если токен доступа неправильный/измененный, клиенту будет отказано в доступе.
  • Для защищенных маршрутов на сервере создается промежуточное ПО проверки подлинности, подтверждающее наличие действительного токена. Сервер может дополнительно использовать удостоверение для реализации более детальных разрешений.

первый

Плюсы и минусы аутентификации JWT

Есть несколько преимуществ:

  • Более компактный: JSON менее подробен, чем XML, поэтому при кодировании JWT меньше токена SAML. Это делает JWT отличным выбором для передачи в средах HTML и HTTP.
  • Более безопасный: JWT могут использовать пару открытого/закрытого ключа в качестве сертификата X.509 для подписи. JWT также может быть симметрично подписан общим секретом с использованием алгоритма HMAC. И хотя токены SAML могут использовать пары открытого и закрытого ключей, такие как JWT, подписание XML с помощью цифровой подписи XML без создания неясных брешей в безопасности очень сложно по сравнению с простотой подписания JSON. Подробнее об алгоритмах подписи JWT читайте здесь .
  • Более распространено: синтаксические анализаторы JSON распространены в большинстве языков программирования, поскольку они напрямую сопоставляются с объектами. И наоборот, XML не имеет естественного сопоставления документа с объектом, что упрощает работу с JWT, чем с утверждениями SAML.
  • Проще обрабатывать: JWT используется в масштабах Интернета. Это означает, что его легче обрабатывать на устройствах пользователей, особенно мобильных.

Однако есть и некоторые недостатки:

  • Если клиент необходимо заблокировать или деактивировать, приложению придется дождаться истечения срока действия токена, чтобы блокировка вступила в силу.
  • Если клиенту необходимо изменить свой пароль, а аутентификация была выполнена заранее, токен, созданный с использованием предыдущего пароля, будет действителен до истечения срока действия.
  • Стандартная реализация не указывает токена «обновления». Поэтому по истечении срока действия клиент должен будет пройти повторную аутентификацию.
  • Невозможно уничтожить токен, не нарушив аспект «без сохранения состояния» токенов JWT: даже если токен удален из браузера, он все еще действителен до истечения срока его действия, поэтому настоящий выход из системы невозможен.

Чтобы справиться с этими проблемами, некоторые библиотеки JWT добавляют уровень выше стандартной спецификации, позволяя использовать механизмы обновления маркеров и некоторые функции, такие как принудительная повторная аутентификация пользователя. Вот несколько рекомендаций для разработчиков JWT.

Что такое структура JWT?

Веб-токен JSON в компактной форме состоит из трех частей, разделенных точками:

  • Заголовок
  • Полезная нагрузка
  • Подпись

Заголовок состоит из двух частей: тип токена и алгоритм подписи. Алгоритм подписи может быть HMAC SHA256 или RSA. Затем этот JSON кодируется Base64Url, чтобы сформировать первую часть JWT. Вот пример заголовка:

{
  "alg" : "HS256",
  "typ": "JWT"
}

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

{
  "iss":" Signin route",
  "name": "janet",
  "sub":"2"
  "admin": true
}

Наконец, подпись используется для проверки того, что сообщение не было изменено, а также для проверки того, что отправителем JWT является тот, за кого он себя выдает. Подпись создается путем получения закодированного заголовка, закодированной полезной нагрузки, секрета и алгоритма, указанного в заголовке, и их кодирования. Например, если вы хотите использовать алгоритм HMAC SHA256, подпись будет создана следующим образом:

HMAC256(
    base64UrlEncode(header) + "." + base64UrlEncode(payload), secret
)

После того, как все это будет сделано, мы получим три строки Base64Url, представляющие три разные части токена JWT, разделенные точками, которые можно легко передать в средах HTML и HTTP. Вот пример из https://token.dev/paseto/ , показывающий заголовок, полезную нагрузку, подпись и наши три строки Base64Url, разделенные точками.

2

Интеграция аутентификации JWT в серверную часть

Node.js — это кроссплатформенная внутренняя среда выполнения JavaScript с открытым исходным кодом, которая выполняет код JavaScript вне веб-браузера. Он был разработан для создания масштабируемых сетевых приложений. Для меня Node.js — это React серверной веб-разработки. Используя Node.js, мы создадим маршруты для входа, регистрации и аутентификации, которые будут получать информацию о пользователе из внешнего интерфейса, при необходимости хешировать пароли, создавать, проверять и аутентифицировать пользователя всякий раз, когда пользователь входит в систему и запрашивать получить доступ к нашему защищенному маршруту.

Наряду с Node.js для этого проекта мы использовали PostgreSQL для создания нашей базы данных; вы можете узнать, как это сделать здесь , Knex.js для построения запросов и bcrypt.js для хеширования наших паролей, чтобы в случае взлома нашей базы данных пароль пользователя не был доступен хакеру.

Создание нашего маршрута регистрации

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

1npm i jsonwebtoken bcrypt knex postgres --save

Затем мы сохраним наш секрет в нашем файле .env;

1REACT_APP_TOKEN= "jwtsecrettutorial"

Мы создадим нашу конечную точку регистрации, которая будет получать информацию о пользователе из внешнего запроса, хэшировать пароль, отправлять информацию в нашу базу данных, создавать наш токен JWT и отвечать на внешний интерфейс нашим токеном JWT;

app.post("/register", (req, res, db, bcrypt, jwt) => {
  const { email, name, password } = req.body;

  if (!email || !name || !password) {
    return res
      .status(400)
      .json(`${console.log(req.body)}incorrect form submission`);
  }

  //Hashing our password with bcrypt
  const hash = bcrypt.hashSync(password);
  db.transaction((trx) => {
    trx
      .insert({
        hash: hash,
        email: email,
      })

      //Inserting our user's info into our login and user table
      .into("login")
      .returning("email")
      .then((loginEmail) => {
        return trx("users").returning("*").insert({
          email: loginEmail[0].email,
          name: name,
          joined: new Date(),
        });
      })
      //creating the JWT token and responding to the front end with our token
      .then((user) => {
        const accessToken = jwt.sign({ email }, process.env.REACT_APP_TOKEN, {
          expiresIn: "3000s",
        });
        res.json({ accessToken });
      });
  })
    .then(trx.commit)
    .catch(trx.rollback);
});

3

Информация о клиенте была отправлена ​​на сервер с помощью Postman на изображении выше. После сохранения информации о клиенте сервер отвечает токеном JWT для последующего запроса.

Создание нашего маршрута входа/входа

Для маршрута входа мы создадим нашу конечную точку для получения информации о пользователе из внешнего запроса, проверим, существует ли пользователь в нашей базе данных, и, если пользователь существует, токен JWT будет создан и отправлен на сторону клиента. ; этот токен будет использоваться для последующего запроса API.

app.post("/signin", (req, res, db, bcrypt, jwt) => {
  const { email, password } = req.body;
  if (!email || !password) {
    return res.status(400).json("incorrect form submission");
  }
  //Getting the user info from the database
  db.select("email", "hash")
    .from("login")
    .where("email", "=", email)
    .then((data) => {
      //comparing the password rech the one in the database using bcrypt
      const isValid = bcrypt.compareSync(password, data[0].hash);
      if (isValid) {
        return db
          .select("*")
          .from("users")
          .where("email", "=", email)
          .then((user) => {
            const accessToken = jwt.sign(
              { email },
              process.env.REACT_APP_TOKEN,
              { expiresIn: "3000s" }
            );
            res.json({ accessToken });
          })
          .catch((err) => res.status(400).json(`${err}wrong credentials`));
      } else {
        res.status(400).json(`${err}wrong credentials`);
      }
    })
    .catch((err) => res.status(400).json(`${err}wrong credentials`));
});

4

На изображении выше информация о клиенте была отправлена ​​на сервер с помощью Postman. После перекрестной проверки и подтверждения информации клиента сервер ответил токеном JWT для последующих запросов.

Создание нашего маршрута аутентификации

Для аутентификации мы создадим промежуточное ПО, которое выполняет аутентификацию всякий раз, когда запрос делается через наш защищенный маршрут. Этот маршрут потребует токен пользователя в заголовке запроса как «x-auth-token» для авторизации. Токен будет получен из заголовка и проверен нашим промежуточным программным обеспечением. Вы можете узнать больше об авторизации HTTP через заголовок запроса здесь . Чтобы создать промежуточное ПО, используйте приведенный ниже код;

require("dotenv").config();
var jwt = require("jsonwebtoken");

module.exports = {
  jwtauth(req, res, next) {
    const token = req.header("x-auth-token");
    if (!token) {
      res.status(401).json("token not found");
    }
    try {
      const user = jwt.verify(token, process.env.REACT_APP_TOKEN);
      req.user = user.email;
      console.log("middleware is working");
      next();
    } catch (error) {
      res.status(401).json("invalid token");
    }
  },
};

Теперь мы можем добавить защищенный маршрут к нашему серверу; запрос к этому маршруту сначала пройдет через наше промежуточное ПО, прежде чем доступ будет предоставлен или запрещен.

const jwtauth = require("./middleware/jwtauth");

app.post("/protected", jwtauth, (req, res) => {
  res.status(200).send("Here's the info you requested ");
});

Если запрос сделан без предоставления токена с использованием «x-access-token» в заголовке, будет возвращено сообщение об ошибке «токен не найден».

5

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

6

На изображении выше запрос отправляется на сервер через Postman с неверным токеном в заголовке, а сервер отвечает сообщением об ошибке, говорящим о недопустимом токене.

Интеграция аутентификации JWT во внешний интерфейс

Для этого вам нужно будет установить Axios в нашем интерфейсе, созданном с помощью React.js, выполнив;

1npm i axios

На нашей странице регистрации/регистрации в нашем React.js мы хотим, чтобы наша клиентская сторона сохраняла JWT, который она получает со стороны сервера после того, как их информация сохраняется в базе данных. Этот токен будет использоваться для последующих запросов к API, поэтому мы добавляем эту функцию в наш код;

onSubmitSignUp = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/register", {
      email: this.state.email,
      password: this.state.password,
      name: this.state.name,
      enteries: this.state.enteries,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

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

onSubmitSignIn = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/signin", {
      email: this.state.email,
      password: this.state.password,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

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

export default function authHeader() {
  const user = JSON.parse(localStorage.getItem("user"));
  if (useraccessToken) {
    return { "x-auth-token": user.accessToken };
  }
}
axios.post("http://localhost:3001/protected", { header: authHeader() });

Сделав все это, мы успешно настроили работающую систему аутентификации, которая работает с нашим node.js (бэкэнд), создает наш токен и отправляет его в наш react.js (интерфейс), который затем сохраняет наш токен. и использует его для последующих запросов к нашему защищенному маршруту.

Вывод

До сих пор мы рассматривали аутентификацию JWT, структуру JWT, что такое аутентификация JWT, как она работает и как добавить ее в наши маршруты node.js на стороне сервера и наше приложение React.js. Вы можете узнать больше о JWT, библиотеках и инструментах, которые упрощают и делают более безопасным использование аутентификации JWT здесь . Я надеюсь, что это руководство было полезным, получайте удовольствие от аутентификации запросов с помощью веб-токенов JSON.

Ссылка: https://blog.openreplay.com/authentication-with-jwt-for-your-website

#jwt #authentication

What is GEEK

Buddha Community

Как пройти аутентификацию с помощью JWT для вашего сайта

Как пройти аутентификацию с помощью JWT для вашего сайта

С момента появления разработки веб-приложений через Интернет отправляется много конфиденциальной информации, что делает концепцию аутентификации тем, что каждый веб-разработчик должен понимать и применять в приложении для защиты информации, доверенной приложению пользователем. В этой статье мы рассмотрим средство аутентификации для веб-приложений, известное как аутентификация JWT. По сравнению с другими аутентификация JWT стала фаворитом благодаря своим многочисленным преимуществам для разработчиков.

Прежде чем мы углубимся в программирование, мы определим некоторые ключевые термины и понятия, которые помогут нам понять, как работает аутентификация JWT, после чего мы интегрируем эту форму аутентификации в проект, в котором есть сервер, созданный с помощью Node.js, и интерфейс, созданный с помощью React.js, широко используемого фреймворка (на самом деле, моего личного фаворита) для разработки интерфейса.

Чтобы иметь возможность следовать остальной части статьи, вам необходимо следующее:

  • Знание JavaScript на рабочем уровне
  • Хорошее понимание Node.js и способов его использования при создании сервера.
  • Рабочее понимание создания базы данных.
  • Базовые знания React.js
  • Почтальон и знания о том, как использовать Postman.

Что такое JWT и как это работает?

JWT означает JSON Web Token, открытый стандарт, используемый для обмена информацией о безопасности в виде объекта JSON между клиентом и сервером. Наличие JWT в запросе к серверу от клиента означает, что информация проверена, и ее достоверность установлена, поскольку она снабжена цифровой подписью с использованием секрета, записанного с помощью криптографического алгоритма, чтобы гарантировать, что утверждения не будут изменены после выдается токен. Хотя ни один посредник не может изменить JWT, рекомендуется использовать его в среде HTTPS, поскольку JWT не зашифрован.

Аутентификация JWT — это механизм аутентификации без сохранения состояния, обычно используемый в качестве сеанса без сохранения состояния на стороне клиента. Серверу не нужно полностью полагаться на базу данных для сохранения информации о сеансе. Информация о сеансе хранится на стороне клиента; поэтому поиск в базе данных не требуется для проверки личности запрашивающего пользователя. Это работает следующим образом:

  • Пользователь входит на веб-сайт или в приложение, используя адрес электронной почты/имя пользователя и пароль, чтобы подтвердить свою личность.
  • Сервер подтверждает личность пользователя и отправляет обратно уникальный токен доступа, содержащий ссылку на его личность.
  • Затем клиент включает этот уникальный токен доступа с каждым запросом к серверу, поэтому, если токен доступа неправильный/измененный, клиенту будет отказано в доступе.
  • Для защищенных маршрутов на сервере создается промежуточное ПО проверки подлинности, подтверждающее наличие действительного токена. Сервер может дополнительно использовать удостоверение для реализации более детальных разрешений.

первый

Плюсы и минусы аутентификации JWT

Есть несколько преимуществ:

  • Более компактный: JSON менее подробен, чем XML, поэтому при кодировании JWT меньше токена SAML. Это делает JWT отличным выбором для передачи в средах HTML и HTTP.
  • Более безопасный: JWT могут использовать пару открытого/закрытого ключа в качестве сертификата X.509 для подписи. JWT также может быть симметрично подписан общим секретом с использованием алгоритма HMAC. И хотя токены SAML могут использовать пары открытого и закрытого ключей, такие как JWT, подписание XML с помощью цифровой подписи XML без создания неясных брешей в безопасности очень сложно по сравнению с простотой подписания JSON. Подробнее об алгоритмах подписи JWT читайте здесь .
  • Более распространено: синтаксические анализаторы JSON распространены в большинстве языков программирования, поскольку они напрямую сопоставляются с объектами. И наоборот, XML не имеет естественного сопоставления документа с объектом, что упрощает работу с JWT, чем с утверждениями SAML.
  • Проще обрабатывать: JWT используется в масштабах Интернета. Это означает, что его легче обрабатывать на устройствах пользователей, особенно мобильных.

Однако есть и некоторые недостатки:

  • Если клиент необходимо заблокировать или деактивировать, приложению придется дождаться истечения срока действия токена, чтобы блокировка вступила в силу.
  • Если клиенту необходимо изменить свой пароль, а аутентификация была выполнена заранее, токен, созданный с использованием предыдущего пароля, будет действителен до истечения срока действия.
  • Стандартная реализация не указывает токена «обновления». Поэтому по истечении срока действия клиент должен будет пройти повторную аутентификацию.
  • Невозможно уничтожить токен, не нарушив аспект «без сохранения состояния» токенов JWT: даже если токен удален из браузера, он все еще действителен до истечения срока его действия, поэтому настоящий выход из системы невозможен.

Чтобы справиться с этими проблемами, некоторые библиотеки JWT добавляют уровень выше стандартной спецификации, позволяя использовать механизмы обновления маркеров и некоторые функции, такие как принудительная повторная аутентификация пользователя. Вот несколько рекомендаций для разработчиков JWT.

Что такое структура JWT?

Веб-токен JSON в компактной форме состоит из трех частей, разделенных точками:

  • Заголовок
  • Полезная нагрузка
  • Подпись

Заголовок состоит из двух частей: тип токена и алгоритм подписи. Алгоритм подписи может быть HMAC SHA256 или RSA. Затем этот JSON кодируется Base64Url, чтобы сформировать первую часть JWT. Вот пример заголовка:

{
  "alg" : "HS256",
  "typ": "JWT"
}

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

{
  "iss":" Signin route",
  "name": "janet",
  "sub":"2"
  "admin": true
}

Наконец, подпись используется для проверки того, что сообщение не было изменено, а также для проверки того, что отправителем JWT является тот, за кого он себя выдает. Подпись создается путем получения закодированного заголовка, закодированной полезной нагрузки, секрета и алгоритма, указанного в заголовке, и их кодирования. Например, если вы хотите использовать алгоритм HMAC SHA256, подпись будет создана следующим образом:

HMAC256(
    base64UrlEncode(header) + "." + base64UrlEncode(payload), secret
)

После того, как все это будет сделано, мы получим три строки Base64Url, представляющие три разные части токена JWT, разделенные точками, которые можно легко передать в средах HTML и HTTP. Вот пример из https://token.dev/paseto/ , показывающий заголовок, полезную нагрузку, подпись и наши три строки Base64Url, разделенные точками.

2

Интеграция аутентификации JWT в серверную часть

Node.js — это кроссплатформенная внутренняя среда выполнения JavaScript с открытым исходным кодом, которая выполняет код JavaScript вне веб-браузера. Он был разработан для создания масштабируемых сетевых приложений. Для меня Node.js — это React серверной веб-разработки. Используя Node.js, мы создадим маршруты для входа, регистрации и аутентификации, которые будут получать информацию о пользователе из внешнего интерфейса, при необходимости хешировать пароли, создавать, проверять и аутентифицировать пользователя всякий раз, когда пользователь входит в систему и запрашивать получить доступ к нашему защищенному маршруту.

Наряду с Node.js для этого проекта мы использовали PostgreSQL для создания нашей базы данных; вы можете узнать, как это сделать здесь , Knex.js для построения запросов и bcrypt.js для хеширования наших паролей, чтобы в случае взлома нашей базы данных пароль пользователя не был доступен хакеру.

Создание нашего маршрута регистрации

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

1npm i jsonwebtoken bcrypt knex postgres --save

Затем мы сохраним наш секрет в нашем файле .env;

1REACT_APP_TOKEN= "jwtsecrettutorial"

Мы создадим нашу конечную точку регистрации, которая будет получать информацию о пользователе из внешнего запроса, хэшировать пароль, отправлять информацию в нашу базу данных, создавать наш токен JWT и отвечать на внешний интерфейс нашим токеном JWT;

app.post("/register", (req, res, db, bcrypt, jwt) => {
  const { email, name, password } = req.body;

  if (!email || !name || !password) {
    return res
      .status(400)
      .json(`${console.log(req.body)}incorrect form submission`);
  }

  //Hashing our password with bcrypt
  const hash = bcrypt.hashSync(password);
  db.transaction((trx) => {
    trx
      .insert({
        hash: hash,
        email: email,
      })

      //Inserting our user's info into our login and user table
      .into("login")
      .returning("email")
      .then((loginEmail) => {
        return trx("users").returning("*").insert({
          email: loginEmail[0].email,
          name: name,
          joined: new Date(),
        });
      })
      //creating the JWT token and responding to the front end with our token
      .then((user) => {
        const accessToken = jwt.sign({ email }, process.env.REACT_APP_TOKEN, {
          expiresIn: "3000s",
        });
        res.json({ accessToken });
      });
  })
    .then(trx.commit)
    .catch(trx.rollback);
});

3

Информация о клиенте была отправлена ​​на сервер с помощью Postman на изображении выше. После сохранения информации о клиенте сервер отвечает токеном JWT для последующего запроса.

Создание нашего маршрута входа/входа

Для маршрута входа мы создадим нашу конечную точку для получения информации о пользователе из внешнего запроса, проверим, существует ли пользователь в нашей базе данных, и, если пользователь существует, токен JWT будет создан и отправлен на сторону клиента. ; этот токен будет использоваться для последующего запроса API.

app.post("/signin", (req, res, db, bcrypt, jwt) => {
  const { email, password } = req.body;
  if (!email || !password) {
    return res.status(400).json("incorrect form submission");
  }
  //Getting the user info from the database
  db.select("email", "hash")
    .from("login")
    .where("email", "=", email)
    .then((data) => {
      //comparing the password rech the one in the database using bcrypt
      const isValid = bcrypt.compareSync(password, data[0].hash);
      if (isValid) {
        return db
          .select("*")
          .from("users")
          .where("email", "=", email)
          .then((user) => {
            const accessToken = jwt.sign(
              { email },
              process.env.REACT_APP_TOKEN,
              { expiresIn: "3000s" }
            );
            res.json({ accessToken });
          })
          .catch((err) => res.status(400).json(`${err}wrong credentials`));
      } else {
        res.status(400).json(`${err}wrong credentials`);
      }
    })
    .catch((err) => res.status(400).json(`${err}wrong credentials`));
});

4

На изображении выше информация о клиенте была отправлена ​​на сервер с помощью Postman. После перекрестной проверки и подтверждения информации клиента сервер ответил токеном JWT для последующих запросов.

Создание нашего маршрута аутентификации

Для аутентификации мы создадим промежуточное ПО, которое выполняет аутентификацию всякий раз, когда запрос делается через наш защищенный маршрут. Этот маршрут потребует токен пользователя в заголовке запроса как «x-auth-token» для авторизации. Токен будет получен из заголовка и проверен нашим промежуточным программным обеспечением. Вы можете узнать больше об авторизации HTTP через заголовок запроса здесь . Чтобы создать промежуточное ПО, используйте приведенный ниже код;

require("dotenv").config();
var jwt = require("jsonwebtoken");

module.exports = {
  jwtauth(req, res, next) {
    const token = req.header("x-auth-token");
    if (!token) {
      res.status(401).json("token not found");
    }
    try {
      const user = jwt.verify(token, process.env.REACT_APP_TOKEN);
      req.user = user.email;
      console.log("middleware is working");
      next();
    } catch (error) {
      res.status(401).json("invalid token");
    }
  },
};

Теперь мы можем добавить защищенный маршрут к нашему серверу; запрос к этому маршруту сначала пройдет через наше промежуточное ПО, прежде чем доступ будет предоставлен или запрещен.

const jwtauth = require("./middleware/jwtauth");

app.post("/protected", jwtauth, (req, res) => {
  res.status(200).send("Here's the info you requested ");
});

Если запрос сделан без предоставления токена с использованием «x-access-token» в заголовке, будет возвращено сообщение об ошибке «токен не найден».

5

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

6

На изображении выше запрос отправляется на сервер через Postman с неверным токеном в заголовке, а сервер отвечает сообщением об ошибке, говорящим о недопустимом токене.

Интеграция аутентификации JWT во внешний интерфейс

Для этого вам нужно будет установить Axios в нашем интерфейсе, созданном с помощью React.js, выполнив;

1npm i axios

На нашей странице регистрации/регистрации в нашем React.js мы хотим, чтобы наша клиентская сторона сохраняла JWT, который она получает со стороны сервера после того, как их информация сохраняется в базе данных. Этот токен будет использоваться для последующих запросов к API, поэтому мы добавляем эту функцию в наш код;

onSubmitSignUp = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/register", {
      email: this.state.email,
      password: this.state.password,
      name: this.state.name,
      enteries: this.state.enteries,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

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

onSubmitSignIn = () => {
  console.log(this.state);
  axios
    .post("http://localhost:3001/signin", {
      email: this.state.email,
      password: this.state.password,
    })

    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      } else {
        console.log("no response");
      }
    });
};

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

export default function authHeader() {
  const user = JSON.parse(localStorage.getItem("user"));
  if (useraccessToken) {
    return { "x-auth-token": user.accessToken };
  }
}
axios.post("http://localhost:3001/protected", { header: authHeader() });

Сделав все это, мы успешно настроили работающую систему аутентификации, которая работает с нашим node.js (бэкэнд), создает наш токен и отправляет его в наш react.js (интерфейс), который затем сохраняет наш токен. и использует его для последующих запросов к нашему защищенному маршруту.

Вывод

До сих пор мы рассматривали аутентификацию JWT, структуру JWT, что такое аутентификация JWT, как она работает и как добавить ее в наши маршруты node.js на стороне сервера и наше приложение React.js. Вы можете узнать больше о JWT, библиотеках и инструментах, которые упрощают и делают более безопасным использование аутентификации JWT здесь . Я надеюсь, что это руководство было полезным, получайте удовольствие от аутентификации запросов с помощью веб-токенов JSON.

Ссылка: https://blog.openreplay.com/authentication-with-jwt-for-your-website

#jwt #authentication

Shayne  Bayer

Shayne Bayer

1591456382

JSON Web Token (JWT) — Create and Use in ASP.NET Core (API Calling)

What is JSON Web Token?

#jwt #jwt-auth #jwt-token #aspnetcore #asp.net core #asp.net (.net)

Как пройти аутентификацию в Laravel 9 с помощью NextJS

В этом разделе мы увидим, как выполнять аутентификацию в Laravel 9 с помощью NextJS. Laravel breeze предоставляет API аутентификации, поэтому настроить API аутентификации Laravel Santum легко. Для внешнего интерфейса NextJS мы будем использовать комплект breeze NextJS.

Настройка API аутентификации Laravel

Создать проект Laravel

composer create-project Laravel/laravel laravel-auth-api  

Настройте файл .env

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

Установите Laravel Breeze

composer require laravel/breeze --dev

Установите команду laravel breeze api, чтобы создать auth api.

php artisan breeze:install api

После установки breeze api вы можете увидеть два URL-адреса файла .env для бэкэнда и внешнего интерфейса. Вы можете изменить URL-адрес в производстве, для локального оставьте его.

.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

запустить проект и выйти из него.

php artisan serve  

Примечание. Откройте два терминала: один для запуска приложения laravel, а второй — для создания проекта nextjs и запуска.

Настройка следующего интерфейса аутентификации js

Вам нужно просто клонировать или скачать репозиторий breeze-next.

Вам нужно клонировать или скачать breeze-next .

Клонировать репозиторий breeze-next

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

git clone https://github.com/laravel/breeze-next.git  

Установите зависимости npm.

npm install

Скопировать файл окружения

cp .env.example .env 

.env

вы можете изменить URL-адрес в производстве.

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

запустить следующий проект js

npm run dev

Следующая страница регистрации js

http://локальный:3000/регистр

следующая страница регистрации авторизации js

Следующая страница входа js

http://локальный:3000/логин

следующая страница авторизации js

Следующая страница панели инструментов js

http://локальный:3000/приборная панель

следующая страница панели инструментов авторизации js

Источник:  https://larainfo.com

#react #nextjs 

Alverta  Crist

Alverta Crist

1596731229

How JSON Web Tokens Work

JSON Web tokens or JWTs are a very popular way to do user authorization in web apps today. JWT has also become very popular in the context of micro services and some of the other developments …

#json-web-token #jwt-auth #javascript #jwt-token #jwt

Rizwan Sharief

1597162106

Understanding the Need for JSON Web Token (JWT)

In this video We will be looking at what is JSON Web Token. In order to understand Authorization we will be taking example of user interaction with Gmail. Consider a scenario where a user wants to access his Gmail inbox page. This will involve user interaction with the Gmail server. For this the user will be sending HTTP requests to Gmail server and in response will expect the response from Gmail Server.

We will be looking at what is JSON Web Token. To understand authorization, we will be taking an example of user interaction with Gmail. Consider a scenario where a user wants to access their inbox page.

#jwt #spring secruity #jwt authentication #spring-boot