API 실습 정리

프론트와 백엔드로 이루어진 팀원들끼리 직접 만든 사이트에서 로그인 기능을 구현하는 실습을 진행했다. 이 실습으로 인해 각자의 역할과 위치에 대해 알게됐고, 공부에 재미가 붙기 시작했다.

프론트

fetcher = () => {
        fetch('http://10.58.1.200:8000/account/sign-in', {
        method: 'POST',
        headers: { 'Content-type' : 'application/json'},
        body: JSON.stringify({
        'email' : this.state.id,
        'password' : this.state.pw
        })
    })
    .then(response => {
        return response.json();
    })
    .then(response => {
        if (response.token) {
            localStorage.setItem('wtw-token', response.token);
        }
    })
    }

백

class Login(View):
    def post(self, request):
        data = json.loads(request.body)
        try:
            if Account.objects.filter(email = data['email']).exists():
                user = Account.objects.get(email = data['email'])
                if bcrypt.checkpw(data['password'].encode('utf-8'), user.password.encode('utf-8')):
                    
                    token = jwt.encode({'email' : user.email}, 'wecode', algorithm='HS256').decode('utf-8')
                    return JsonResponse({'token' : token}, status=200)   #토큰
                
                return JsonResponse({'message' : "Wrong password"}, status=401)
            
            return JsonResponse({'message' : "Wrong information"}, status=401)
        
        except KeyError:
            
            return JsonResponse({'message' : "INVALID_KEYS"}, status=404)

1. 백엔드 팀원의 아이피주소를 입력하고, POST방식으로 헤더에 전송할 data의 형식(content-type)을 입력하고, 바디에 이메일과 패스워드를 json형식으로 변환해(stringify) 전송한다.
2. post 형식으로 전송된 데이터를 로그인 API에서 분석한다 데이터베이스에 일치하는 이메일 주소가 있으면 사용자가 입력한 비밀번호를 bcrypt로 암호화 해서 암호화해서 저장된 비밀번호와 비교하는 과정을 거친다.
3. 로그인에 성공하면 회원에게 토큰이 발행되고 이를 로컬스토리지에 저장한다. 그래서 회원 권한이 있어야 하는 페이지에 접속할 때 마다 발행된 토큰으로 회원인지 아닌지를 판별하고 사이트에 접속하게 된다.

thanks to
블로그 작성에 도움을 주신 팀원분들과 심형민님께 감사드립니다