인증 흐름 이해

인증 흐름이란 무엇입니까?

인증 흐름은 사용자의 신원을 확인하고 애플리케이션의 특정 부분에 대한 액세스를 관리하는 프로세스입니다. 웹 앱(예: 소셜 미디어 사이트)으로 작업할 때 여기에는 사용자가 자신이 누구인지 확인(로그인)한 다음 특정 기능에 대한 액세스 권한을 부여하는 작업이 포함됩니다.

React에서는 어떻게 작동하나요?

React에서 사용자 인증을 처리하려는 경우 일반적으로 무거운 작업을 처리하는 백엔드 서버와 상호작용합니다. 일반적인 작동 방식은 다음과 같습니다.

1. 등록 및 로그인 엔드포인트

• 등록 엔드포인트: 신규 사용자가 가입하면 세부 정보(예: 사용자 이름, 이메일, 비밀번호)가 서버로 전송됩니다. 그런 다음 서버는 이들을 위한 계정을 생성합니다.
• 로그인 엔드포인트: 기존 사용자가 로그인하면 사용자 이름과 비밀번호가 서버로 전송됩니다. 서버는 이러한 세부 정보가 올바른지 확인합니다.

2. 토큰: 액세스 토큰 및 갱신 토큰

로그인이 성공하면 서버는 두 가지 중요한 토큰을 다시 보냅니다.

• 액세스 토큰:

  • 이는 사용자가 앱의 특정 기능에 액세스할 수 있는 단기 패스와 같습니다. 일반적으로 수명이 짧습니다(이 경우 5분).
  • 사용자가 요청(예: 프로필 보기 또는 게시물 게시)을 할 때마다 이 토큰이 서버로 전송되어 로그인되었음을 증명합니다.

• 토큰 새로 고침:

  • 액세스 토큰이 만료될 때 사용되는 백업 패스와 같습니다. 더욱 오래가네요.
  • 액세스 토큰이 만료되면(5분 후) 사용자가 다시 로그인하도록 하는 대신 앱에서 새로 고침 토큰을 사용하여 새 액세스 토큰을 얻을 수 있습니다.

3. 브라우저에 토큰 저장

사용자가 로그인하여 이러한 토큰을 받으면 앱은 이를 사용자 기기의 어딘가에 저장해야 합니다. localStorage가 필요한 곳은 다음과 같습니다.

• localStorage: 이는 사용자 브라우저에 데이터(예: 토큰)를 저장할 수 있는 웹 브라우저의 기능입니다.
  • setItem() 메서드: 데이터를 저장하는 데 사용됩니다. 예를 들어, localStorage.setItem('accessToken', tokenValue)와 같은 것을 사용하여 액세스 토큰과 새로 고침 토큰을 저장합니다.
  • getItem() 메소드: 저장된 데이터를 검색하는 데 사용됩니다. 예를 들어, localStorage.getItem('accessToken')과 같은 것을 사용하여 저장된 액세스 토큰을 얻습니다.

4. 액세스 토큰으로 요청하기

사용자가 서버 상호작용이 필요한 작업(예: 상태 게시 또는 메시지 보기)을 수행할 때마다 앱은 인증 헤더에 첨부된 액세스 토큰을 사용하여 서버에 요청을 보냅니다. 이는 사용자가 로그인되어 작업을 수행할 수 있음을 서버에 알려줍니다.

5. 만료된 토큰 처리

• 액세스 토큰 만료: 서버가 401 오류로 응답하면 액세스 토큰이 만료되었음을 의미합니다. 그런 다음 앱은 새로 고침 토큰을 사용하여 새 액세스 토큰을 요청합니다.

• 새로 고침 토큰 만료: 새로 고침 토큰도 만료된 경우(오랜 시간이 지난 후 발생할 수 있음) 서버는 다시 401 오류로 응답합니다. 이 시점에서 앱은 사용자를 로그인 페이지로 리디렉션하고 새로운 토큰을 받으려면 다시 로그인하도록 요청합니다.

6. 실패한 요청 재전송

앱이 새로 고침 토큰을 사용하여 새 액세스 토큰을 받으면 만료된 토큰으로 인해 실패한 원래 요청을 다시 보냅니다. 이렇게 하면 사용자가 방해를 받지 않습니다.

요약

• 인증 흐름: 이는 앱이 귀하를 확인하고 기능에 대한 액세스를 제공하는 방법입니다.
• 액세스 토큰: 앱의 리소스에 액세스하기 위한 단기 키입니다. 빨리 만료됩니다.
• 갱신 토큰: 기존 액세스 토큰이 만료될 때 새 액세스 토큰을 얻기 위한 장기 백업 키입니다.
• localStorage: 사용자 기기에 이러한 토큰을 저장하는 브라우저의 방식입니다.
• 인증 헤더: 서버에 대한 요청에 액세스 토큰이 포함되는 위치
• 401 오류: 토큰이 만료되었으며 앱이 조치를 취해야 함을 알리는 신호입니다(토큰을 새로 고치거나 사용자에게 다시 로그인하도록 요청).

이 흐름을 통해 사용자는 항상 자격 증명을 다시 입력할 필요 없이 로그인 상태를 유지하고 앱을 안전하게 사용할 수 있습니다.

위 내용은 인증 흐름 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!