TIL. 최종프로젝트(4) 장고 개발 단계에서 HTTPS 올리기

[오늘 한일]

• 소셜 로그인 작성 보조
• 퀴즈풀이 프론트 연결

팀 진행

• 소셜 로그인 마무리
• DB postgresql로 변경
• 웹소켓 백엔드-프론트 연결 기본형 작성
• 퀴즈풀이 프론트 연결

 

[오늘 논의한 내용]

• 아침 회의 : 진척 사항 보고, 검토
• 기술 멘토링
  • 실시간 겨루기 : 상대찾기> 무작위 매칭과 특정사용자 매칭. 고민해볼것.
  • 실시간 겨루기 : 매칭후 아무것도 안하는사람. 타임아웃 설정 고려해볼것.
  • 퀴즈 무작위 제공 : orderby()+?로 무작위정렬, 랜덤모듈 샘플. 비교해서 좋은것사용.
  • 웹소켓 : 기획 전에 우선 적용해봐야 수월할것
  • 퀴즈 크롤링 : 서버에서는 크롤링 실행하지 않고 덤프데이터 로드데이터 활용이 좋겠다.
• 저녁 회의 : 주간 마무리
  • 소셜 로그인 마무리
  • DB postgreSQL로 변경
  • 웹소켓 백엔드, 프론트엔드에 연결 (토대)
  • 퀴즈풀이 프론트 연결
  • 다음 주 일정 논의
    • 팀원 다같이 웹소켓 공부
    • django channels를 활용해 실시간 겨루기 기능 구현

 

 

 

[오늘 배운점]

DRF

<구글 소셜 로그인>

소셜 로그인은 약간의 난항을 겪었다.

담당하신 팀원분께서는 allouth라는 모듈로,

우리가 기획했던 google, kakao, naver를 처리하도록 작성하셨다.

 

한가지 모듈로 각기다른 소셜 로그인이 처리되어서 

일관적이여서 좋다고 생각한다.

구글 소셜로그인이 잘 처리되지 않아서 어려움이 있었다.

 

한편, 나는 구글 가이드를 참고해서 소셜로그인을 작성해봤다.

내가 작성한 예제도 잘동작한다.

내 예제를 팀원분께 공유드려 작성에 도움을 드렸다.

https://developers.google.com/identity/protocols/oauth2/web-server?hl=ko

웹 서버 애플리케이션용 OAuth 2.0 사용  |  Authorization  |  Google for Developers

 

위의 예제대로 테스트를 해보려면 장고가 https로 동작될 필요가 있다.

(예제가 애초에 flask전용 예제다. 장고에서 해보려면 일부분 수정이 필요하다.)

google-auth-oauthlib 라이브러리에 Flow라는 모듈을 활용하는데, 구글 연동 로그인의 일괄 과정을 지원해준다.

 

Flow모듈은 먼저, authorization url을 추출해준다.

해당 url로 구글 로그인 확인 페이지에 접근하고 확인을 할 시,

리디렉션 uri로 온갖 파라미터와 함께 반환해준다.

Flow가 가진 fetch_token 메소드를 동작할때, 이 반환된 리디렉션 url을 입력받는다.

이때 이 리디렉션 url이 http라면 토큰 반환을 안해준다.

(fetch_token은 response인 code를 이용해 token을 반환하는 동작을 한다)

 

 

그리고 위의 예제는 response를 코드로 고정했는데,

Flow모듈 자체가 response type을 변경할 구석이 없다.

이전 프로젝트처럼 이부분을 token으로 하면 토큰을 바로 받아온다.

code인 경우는 code를 이용해 token을 반환하는 동작이 필요하다.

이때는 또 특정한 접근 주소가 있다.

 

이 토큰은 simple JWT의 토큰과는 역할과 내용이 다르다.

그래서 이단계에서 로그인이 되었다고 볼순 없고,

이 토큰은 user info를 받아오는데 사용한다.

user info에 정보를 이용해 장고 유저를 생성 혹은 지정하고,

회원 생성이나 로그인을 처리해주게 된다.

 

한편, 이 userinfo 같은 접근할 대상 데이터가 scope라는 항목에 명시되게 된다.

이 scope는 인증요청 할때 url과 돌아온 url에서 값이 같아야 한다.

그래야 fetch token을 잘 통과한다 (여기서 여러 검사가 이뤄진다)

scope가 서로 다르다면,

장고에러> Scope has changed from "~~" to "~~" 를 만나게 된다.

이때는 반환된 url scope를 참고해서

인증 url을 생성하는 단계를 수정해주는게 좋다.

 

scope작성에 대해서는 https://github.com/requests/requests-oauthlib/issues/387 를 참고했다.

 

---

<장고 개발 단계에서 HTTPS 올리기>

장고는 개발 단계에서 python manage.py runserver로 웹서버 실행을 테스트 해볼수 있다.

이때 웹서버는 장고 전용 포트와 http, localhost로 실행된다.

즉, http://127.0.0.1:8000로 테스트 환경에 접근할수 있다.

 

보통은 문제가 없지만,

위 구글 로그인처럼 HTTPS로 테스트를 해봐야 한다면,

임시적으로 HTTPS로 서버를 올릴수 있다.

 

https://qwlake.github.io/django/2020/07/01/apply-https-on-django-server-with-nginx/ 참고한 자료

 

방법은 참고한 블로그에 잘 나와있다.

요약하자면,

 

1. 임시 SSL파일을 만들다. manage.py와 같은 위치(프로젝트폴더)에 둔다.

2. django-sslserver 모듈을 설치하고

3. settings.py의 installed app에 sslserver서버를 추가한다.

4. python manage.py runsslserver --certificate django.crt --key django.key로 실행한다.

 

 

결론, 이렇게 하면 임시적으로 https 서버를 올릴수 있다.

한편 브라우저에서는 HTTPS지만 제대로 보호되지 않은 사이트라고 표시된다.