인증 & 인가 [로그인, 회원가입]

인증(Authentication)

인증은

유저의 아이디와 비번이 맞는지 확인하는 절차이다.

로그인 절차로

• 아이디 비번 생성
• 아이디 비번 암호화해서 DB 저장
• 유저 로그인
• DB의 정보와 비교
• 일치하면 성공 access token 클라이언트에게 전송
• 한번 로그인 성공이후에는 access token을 이용해 매번 로그인 하지 않는다.

JWT (json web tokens)

• 로그인 성공한 후에 access token이라고 하는 함호화된 유저 정보를 request로 보낸다.
• 유저의 access token을 서버에서 복호화해서 해당 유저의 정보를 얻을 수 있다.
• acess token을 생성하는 방법중에서 가장 널리 사용되는 기술이 바로 JWT이다.

인가(Authorization)

인가는

유저가 요청하는 request를 실행할 수 있는 권한이 있는

유저인가 확인하는 절차이다.

할 수 있는 행동을 제한하는 역할을 하기도 한다.

절차

• 유저 정보를 확인할 수 있는 정보가 들어있는 access token을 생성한다.
• 유저가 request 보낼 때 access token을 첨부해서 보낸다.
• 서버에서는 유저가 보낸 access token 을 복호화 한다.
• 복호화된 데이터를 통해 user id를 얻는다.
• User id를 이용해 DB에서 유저의 권한을 확인한다.
• 충분한 권한을 가지고 있으면 해당 요청을 처리한다.
• 권한이 없다면 401 혹은 다른 에러를 보낸다.

실습

{
  "proxy": "http://12.34.567.899:8000"  //package.json 파일안에 이렇게 작성해주면 
} 

‘http://12.34.567.899:8000/users/signup’ 으로 작성하지 않아도 된다.

‘/users/signup’ 작성해도 동일하다.

// 서버 연결 회원가입
  const handleSignUp = () => {
    fetch('/users/signup', {     
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',  //header 작성
      },
      body: JSON.stringify({    //body 부분을 string으로 변환
        email: id,
        password: pw,
      }),
    })
      .then(response => response.json())  //정상적으로 통신하면 
      .then(result => { 
        if (result.message === 'EXISTING_USER') {
          alert('이미 존재하는 아이디 입니다.');   //결과가 아니라고 반환이 오면
          clearInput();
        } else {
          alert('축하합니다! 회원가입 성공!!!');  //맞으면
          clearInput();
        }
      });
  };

  // 서버 연결 로그인
  const handleLogin = () => {
    fetch('/users/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: id,
        password: pw,
      }),
    })
      .then(response => response.json())
      .then(result => {
        console.log(result);
        //통신오류
        if (result.message === 'client input invalid') {
          alert(
            ' 아이디(로그인 전용 아이디) 또는 비밀번호를 잘못 입력했습니다. \n 입력하신 내용을 다시 확인해주세요. '
          );
          clearInput();
        }
        //성공시 url이동
        else {
          goToList();
        }
      });
  };

acess token을 받아오는 것도 확인할 수 있고 서버에서 전송해주는 정보를 console로 찍어봤다.