제수기 - 제발 수업내용을 기억해라 / 단순수업정리 시리즈

OAuth Login 구현하기

• 구글에 로그인 돼있다면 다른 곳에 로그인 될 수 있게 하는 등의 방식
  

사용자 - web app - google, naver,... 인과 서비스, 리소스 서버를 제공하는 곳 이렇게 있다면 우리가 할 역할은 web-app이다. google에 회원가입이 이미 돼있는 사용자. 본인의 사용자 정보를 web app에서 볼 수 있게 허용을 해주는 것 .

clietn라고 하는 이유는, oauth 상황에서는 web app이 client 역할이다.

google cloud project 환경설정

web app을 구글에서 등록해보자.

1. https://console.cloud.google.com/ 로그인

2. select project - New Project - Project name 입력 - Create

아까 만든 프로젝트 선택한 다음에

(강사님 설명 화면)

클라이언트 선택하고

아이디 비번 받고 jason 파일 다운로드 받기

어플리케이션타입에 승인된 리디렉션 url (OAth) 넣기

이부분임

django-allauth 사용하기

공식문서에서 settings.py, 설치할 app, ...
https://django-allauth.readthedocs.io/en/latest/installation/quickstart.html
클라이언트 아이디, 비번 여기에 대신 적으면 되는 거. 원래는 숨김처리 해야 하는데 그건 나중에 배울 것임.

원래는 view 함수에 쓰고 그랬는데 여기는

마이그레이션

마이그래이션 하면 이렇게 oath 테이블들이 생긴다.

앱 만들고

인덱스 페이지 연결

인덱스에 써놓은 건 oath에 써있던 코드임
비밀번호 변경, 계정 추가 변경 이런 거 싹 다 있어서 이중에서 소셜로그인을 이용하려고 한다.

해서 나오는 화면

구글 로그인을 누르게 되면

여기에 동의하면 클라이언트인 우리 앱이 이 정보를 가져다가 쓸 수 있게 되는 것.

이전에 로그인을 한 적이 없으면 바로 회원가입 후 로그인 처리를 해버린다.

여기에 회원가입된 아이디 정보들이 들어가 있다.

엑스트라 데이터에 실제 제공받은 내용들이 들어가 있다.
엑스트라 데이터를 자세히 보면 이런식이다. 이미지도 여기 있는 걸 볼 수 있다.

oath content screen - sope --... 들어가서 어떤 기능을 얻어올지 살펴볼 수 있다. 스코프 권한이 이미 받아져 있어야 로그인을 대신 해줄 수 있고, 만약 게시글을 대신 올릴거라면 여기서 스코프도 받아서 동의를 받으면 된다.

django-allauth template customizing하기

https://github.com/pennersr/django-allauth에서 template파일 전체 다운로드 및 동일경로로 복사하기

templates/allauth/layouts/base.html파일부터 bootstrap 적용하기

• bast.html
  뼈대가 되는 곳
  

이렇게 구글 이미지를 헤더에 넣을 수 있다.

auth_user 테이블과 socialaccount_socialaccount. 관계가 1:N이다. 그럼 아마도 모델 어딘가 있겠지만 socialaccount_socialaccount에는 포린키가 있을 거고 auth_user 역참조 이름이 set. 여러개니까 set이 담긴 거. 그래서 일단 다 불러와 'all'

이게 원래로 치면 user.social_acc_set.all() 이렇게 해서 조회를 했을텐데 탬플릿에서는 호출코드가 안 먹는다. 그래서 저렇게 호출한 거다. 그래서 불러온 게 참이면 안으로 들어가서

fist.provider에 첫번째꺼의 프로바이더 필드가 구글이니를 물어본 다음에 extra_data 딕셔너리 불러오자.

그러면 외부 url을 참조해서 이렇게 불러냈다는 걸 확인할 수 있다.

google이기 때문에 이게 picture지, 다른 프로바이더면 다른 걸 불러올 수도 있다. 해보면 알거다.

OAuth

구성요소

처리절차

인증처리절차를 시퀀스 다이어그램이라고 한다. uml 중에 동적인 다이어그램.
Regular Web app이 지금 우리다.
user가 사용한다고 누른거고, provider쪽에 우리가 사용자가 로그인하고 싶대 라는 요청을 보낸다. 그러면 provider는 그에 적합한 동의화면과 로그인할거냐는 화면을 직접 제공한다. 아까 본 것 중에 구글이 제공한 화면이다.

그러고나면 바로 사용자 정보를 주지 않는다. 확인절차를 먼저 한다. aturhoriseon code를 우리에게 주고, 그러면 우리가 아까 요청보낸 그 유저가 맞아 라는 걸 우리가 확인해줘야 한다. 6번 과정.

그래서 4번에서 유저의 확인, 우리가 하는 6번의 확인이 있고, 그때도 바로 해주는 게 아니고, 8번에서 엑세스 토큰을 보내준다. 이 액세스 토큰은 유효 시간이 걸려있다. 아주 기간이 짧은 허가증. 그걸 가지고 9번에서 액세스 토큰을 받아서 다시 한번 사용자 정보 달라는 요청을 하고, 10번에서 실제 사용자 정보를 주고, 그래서 db에 저장이 된다.

이 과정을 거쳐야 한다고 하는데 OAth의 프로토콜이다. 대부분의 provider가 이걸 따르고 있다.

tip 만약 accest token 만료됐을 때 다시 갱신하는 리프레쉬 토큰도 같이 보내기도 한다.