인증 인가 #1

jihyun·2021년 9월 11일
1

backend

목록 보기
10/13
post-thumbnail

인증

사용자의 identification을 확인하는 절차

HTTP STATELESS
각각의 HTTP 통신은 독립적이라 과거의 통신 내용을 알지 못한다.
-> 로그인에 성공한 후에는 access token이라고 하는 암호화된 유저 정보를 첨부해서 request를 보낸다.

JWT (JSON Web Tokens)

access token을 생성하는 방식중 가장 널리 사용된다.
유저 정보를 담은 JSON 데이터를 암호화 해서 클라이언트와 서버간에 주고 받는다.

// 로그인

POST /auth HTTP/1.1
Host: localhost:5000
Content-Type: application/json

{
    "username": "jhk",
    "password": "1234"
}
//access token

HTTP/1.1 200 OK
Content-Type: application/json

{
    "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGl0eSI6MSwiaWF0IjoxNDQ0OTE3NjQwLCJuYmYiOjE0NDQ5MTc2NDAsImV4cCI6MTQ0NDkxNzk0MH0.KPmI6WSjRjlpzecPvs3q_T3cJQvAgJvaQAPtk1abC_E"
}
//복호화
{
  user_id : 1 
}

인가

유저가 요청하는 request를 실행할 수 있는 권한이 있는 사용자인가를 확인하는 절차

  1. Authentication 절차를 통해 access token을 생성한다. 
  2. request에 access token을 첨부해서 보낸다.
  3. 서버에서는 유저가 보낸 access token을 복호화 한다.
  4. 복호화된 데이터를 통해 user id를 얻는다.
  5. user id를 사용해서 database에서 해당 유저의 권한(permission)을 확인하다.
  6. 유저가 충분한 권한을 가지고 있으면 해당 요청을 처리한다.
  7. 유저가 권한을 가지고 있지 않으면 Unauthorized Response(401) 혹은 다른 에러 코드를 보낸다.

리액트에서

  1. 사용자가 입력하는 동안 state에 아이디, 비밀번호를 계속 저장한다.
  2. 로그인(회원가입) 버튼을 눌렀을 때 요청을 서버에 보낸다. -> fetch 실행
fetch('api주소', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    email: "example@wecode.com",
    password: "1q2w3e4r",
  })
})
.then(response=>response.json())
.then(result=>console.log(result))
  1. state에 저장된 값을 fetch를 사용해 body에 담아 서버에 보낸다.
    #POST method? 새로운 리소스를 생성(create)할 때 사용된다.
  2. 서버로부터 response를 받아 로그인(회원가입) 성공여부 확인한다.

2개의 댓글

comment-user-thumbnail
2021년 9월 11일

젼님 화이팅❤️

1개의 답글