Блог

Я работаю над приложением Ionic.
С одной стороны, у меня есть базовая форма аутентификации, в которой люди заполняют свое имя пользователя и пароль. С другой стороны, я хотел бы реализовать аутентификацию с помощью веб-токенов JSON и Node JS.
Рабочий процесс будет таким: как только пользователь заполнит свои учетные данные, они будут отправлены с запросом POST. Если эти учетные данные верны, пользователь может получить доступ к приложению и получит токен доступа в качестве ответа.

Дело в том, что я немного запутался во всех этих концепциях. Я создал форму и отправил информацию с запросом POST. Мне удалось создать несколько API с помощью Node JS, и это нормально. Я также вижу, как создать аутентифицированный веб-сервис (например:https://github.com/jkasun/stack-abuse-express-jwt/blob/master/auth.js ).
Но я конкретно не понимаю связей между формой html и частью проверки авторизации..
Чтобы было понятнее, как можно заставить html-часть и JS-скрипты узла взаимодействовать вместе?

Перед публикацией этого вопроса я провел много исследований и нашел много материала по созданию аутентифицированного API. Но было очень мало советов о том, как заставить его взаимодействовать с клиентской частью (я имею в виду форму), что я и должен сделать.
Если у кого-нибудь есть какие-либо ресурсы (документ, примеры Github ..) по этому поводу, я буду очень признателен. Но я тоже был бы очень рад, если бы кто-нибудь попытался заставить меня понять эти концепции. Я думаю, мне нужно улучшить свои знания обо всем этом, чтобы я мог протестировать некоторые POCS.

Заранее большое спасибо!

Общий поток JWT:

1- Аутентификация с использованием стратегии (вы это сделали)

2- Доставьте accessToken вместе с ответом (вы это сделали)

3- Клиент ДОЛЖЕН хранить этот accessToken (localStorage — лучшее место, а не cookies: они уязвимы для csrf-атак)

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

5- На сервере, принимающем клиентские запросы, вам НЕОБХОДИМО подтвердить этот токен (вы подтверждаете его, проверяя подпись accessToken).

6- Если он авторизован, отлично, если нет, отправьте обратно ошибку HTTP Unauthorized.

Вот моя реализация, использующая accessToken в заголовке passportjs-jwt:

Клиентский код

Для сохранения токена:

 localStorage.setItem('accessToken', myAccessToken);
  

Чтобы отправить его:

 const myAccessToken = localStorage.getItem('accessToken');

{
  headers: {'Authorization', `Bearer ${myAccessToken}`}
}
  

Серверный код

1- Настройка паспорта

 passport.use('jwt', new JwtStrategy({
  jwtFromRequest: jwtPassport.ExtractJwt.fromAuthHeaderAsBearerToken(),
  secretOrKey: myAccessTokenSecret,
  passReqToCallback: true
}, (req, payload, done: (err?, user?) => void): void {
User
  .findOne({where: {id: req.params.id}})
  .then((user: User) => {

    if (!user) {
      return done(new Error(`No user found with id: ${req.params.id}`), null);
    }

    return done(null, user);
  })
  .catch((e: Error) => done(e, null));
}));
  

Обратите внимание на обратный вызов: если ваш обратный вызов вызван, это означает, что passport успешно проверил токен (он действителен). В моем примере я получаю данные пользователя в базе данных, и это пользователь, который будет возвращен и помещен в запрос.пользовательский объект передается моему контроллеру ниже:

2- Наконец, маршрут контроллера (защищенная область):

 .get('/users/:id', passport.authenticate('jwt'), (req, res, next) => {
  // do stuff in protected area.
}
  

И это все. Если вы хотите большей безопасности, проверьте реализацию refreshTokens.

Я использовал passport, потому что нашел это уместным в моем случае, но вы можете написать свой собственный обработчик, используя jsonwebtoken и просто вызывая его функцию «verify».

Вы можете найти документацию по стратегии passport jwt здесь =>http://www.passportjs.org/packages/passport-jwt