Тастыктоо процеси кандай өтөт?

Пайдаланушыны аутентификациялау процесі фронтенд-қосымшасында жалпы түрде келесі қадамдардан тұрады:

1. Деректерді сұрау: Пайдаланушы сайт немесе қосымшадағы формаға логин мен пароль енгізеді.
2. Деректерді серверге жіберу: Фронтенд бұл деректерді HTTP сұрауы арқылы (әдетте POST) аутентификацияның арнайы соңғы нүктесіне жібереді. Деректер JSON немесе FormData форматында болуы мүмкін.
3. Деректерді серверде тексеру: Бэкенд деректерді алады, олардың бар-жоғын өзінің дерекқорында тексереді (мысалы, логин бар ма және енгізілген парольдің хэші дерекқордағы хэшке сәйкес келе ме).
4. Токен/сессияны құру: Егер деректер дұрыс болса, сервер бірегей аутентификация маркерін құрады. Бұл болуы мүмкін:
   • Сессия ID: Сервер сессия құрып, оны пайдаланушымен байланыстырады, клиентке сессия идентификаторын жібереді (мысалы, HttpOnly белгісі бар кук арқылы).
   • Токен (мысалы, JWT): Сервер пайдаланушы туралы ақпарат пен оның құқықтарын қамтитын токенді құрады, оны өзінің құпия кілтімен қол қояды. Бұл токен клиентке жіберіледі.
5. Токен/сессияны клиентке жіберу: Сервер фронтендке аутентификация маркерін жібереді:
   • Егер сессия ID қолданылса, ол әдетте Set-Cookie арқылы беріледі.
   • Егер токен қолданылса, ол жауаптың денесінде (JSON) немесе Authorization тақырыбында (Bearer <токен>) берілуі мүмкін.
6. Маркерді сақтау: Фронтенд маркерді алады және келесі сұраулар үшін сақтайды:
   • Сессия ID браузердегі кукта сақталады (автоматты түрде)
   • Токен localStorage, sessionStorage немесе кукта сақталуы мүмкін (HttpOnly белгісімен — XSS-тан қорғау үшін). Қауіпсіздік үшін HttpOnly кукта сақтау ұсынылады.
7. Қауіпсіз сұрауларда маркерді пайдалану: Қалған сұрауларда фронтенд сақталған маркерді жібереді:
   • Браузер автоматты түрде сессия кукін жібереді.
   • Токен үшін фронтенд оны Authorization тақырыбына қосуы керек.
8. Маркерыді серверде тексеру: Әр сұрауда сервер маркерді алады және оның заңдылығын тексереді (мысалы, мерзімі, қолтаңбасы, сессияның бар-жоғын).
9. Рұқсат беру: Егер маркер жарамды болса, сервер оны байланысты пайдаланушыны анықтайды және оның ресурстарға қол жеткізу құқықтарын тексереді.
10. Сұрауды орындау: Егер пайдаланушы аутентификацияланған және рұқсат етілген болса, сервер сұрауды орындайды және жауап береді. Әйтпесе, қате хабарын жібереді (401 Unauthorized немесе 403 Forbidden).

Аутентификация схемалары әртүрлі болуы мүмкін (сессиялар, JWT, OAuth2, OpenID Connect және т.б.), бірақ негізгі қадамдар ұқсас.

Мысал — fetch API және токен қолдану арқылы деректерді серверге жіберу:

// Пайдаланушы деректері
const userData = {
  username: 'user123',
  password: 'securepassword'
};

// Деректерді серверге жіберу
fetch('/api/login', { // аутентификация соңғы нүктесі
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error('Login failed');
  }
  return response.json(); // сервер токенмен қайтаруы күтілуде
})
.then(data => {
  const authToken = data.token; // жауаптан токенді алу
  localStorage.setItem('authToken', authToken); // токенді сақтау
  console.log('Login successful, token saved.');
  // Қолданушыны қорғаулы бетке бағыттау
})
.catch(error => {
  console.error('Authentication error:', error);
  // Қате туралы хабар көрсету
});

// Қорғалған сұрау токенмен
const token = localStorage.getItem('authToken');
if (token) {
  fetch('/api/protected-resource', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}` // токенді Authorization тақырыбына қосу
    }
  })
  .then(response => {
    if (!response.ok) {
      if (response.status === 401) {
        console.log('Token expired or invalid. Redirecting to login.');
        localStorage.removeItem('authToken');
        // window.location.href = '/login';
      }
      throw new Error('Failed to fetch protected resource');
    }
    return response.json();
  })
  .then(data => {
    console.log('Protected data:', data);
  })
  .catch(error => {
    console.error('Error fetching protected resource:', error);
  });
} else {
  console.log('No auth token found. Redirecting to login.');
  // window.location.href = '/login';
}

Қауіпсіздікке қатысты маңызды аспектілер:

• Барлық деректерді HTTPS арқылы жіберу
• Маркерлерді қауіпсіз сақтау
• Қысқа мерзімді токендерді пайдалану
• Серверде деректерді тексеру