오늘의 한 일
- 최종 프로젝트 - 프론트엔드 연결(JS), 소셜 로그인 관련
프론트엔드 연결
이전 유화 프로젝트때 했던 자바스크립트 방식으로 각 페이지에 CRUD 설정을 보내고 받아온 json형태의 response를 원하는대로 조리해서 띄우는 것은 동일했다.
이제 요청을 보내고 받은 데이터를 이용하는건 자연스러워졌는데 역시나 html쪽 css의 문제가.. 데코가 제일어려워
소셜 로그인 관련
소셜 로그인 마지막에 받아오는 access_token과 refresh_token을 우리가 사용하는 방식으로 어떻게 로그인에 사용할 수 있을까 고민하다가 강민철 튜터님께 상의를 드렸다.
우리가 지금 사용하고 있는 로그인 형식은 simpleJWT를 이용하는 백엔드 주소에 자바스크립트로 이메일과 비밀번호로 post 요청을 보내면 response로 access_token, refresh_token, payload가 돌아오게 되고, 이를 로컬스토리지에 저장해두고
각 로그인이 필요한 페이지마다 이 토큰이 있는지를 판단하는 형식으로 로그인을 구현해놨다.
로그아웃시에는 로컬스토리지의 각 아이템들을 삭제하는 형식.
그래서 콜백함수가 돌아왔을때 이를 자바스크립트를 이용해 같은 방식으로 로그인하는 방식을 고민하던 도중에 장고템플릿을 이용하는게 어떨까 하는 의견이 들어와서 구상해보았다
콜백 views.py
..
accept_json = accept.json()
accept_json.pop('user', None)
return JsonResponse(accept_json)원래는 이렇게 끝나서 마지막으로 돌아오는 결과물이
이랬는데, 이 데이터를 가지고 장고템플릿을 활용한다고 가정한다면
..
# 연습중
access_token = accept_json['access_token']
refresh_token = accept_json['refresh_token']
print(f'액세스 토큰은 {access_token}, 리프레시 토큰은 {refresh_token}')
return render('user/callback.html', {'access_token':access_token, 'refresh_token':refresh_token}) # 대충 이런 방식이겠죠?이런 식으로 액세스토큰과 리프레시토큰의 정보를 담아서 장고템플릿으로 보낸 뒤에
callback.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span id="access">
{{access}}
</span>
<span id="refresh">
{{refresh}}
</span>
</body>
<script>
access = document.getElementById("access").value
refresh = document.getElementById("refresh").value
localStorage.setItem("access", access);
localStorage.setItem("refresh", refresh);
window.location.replace("127.0.0.1:5500/templates/index.html")
</script>
</html>받아온 데이터를 어딘가에 띄우고
이후에 자바스크립트로 각 값을 로컬스토리지에 저장해서 index.html로 보내는 방법
아마 될것같긴 한데 장고템플릿쪽을 다시 봐야하나.. 아니면 소셜로그인에 대한 강의도 한번 할 예정이라고 하는데 그거까지 보고 진행해도 될듯?