0부터 시작하는 Django 공부 - Kakao 로그인과 Oauth 2.0

참고 실습 자료 : https://github.com/lijahong/allauth_and_fileupload_example

1. Kakao 로그인 환경 구축

• 1.1 Kakao developer 접속하여 문서 접속

  

  • 문서를 따라가보겠다

• 1.2 OAUTH 2.0

  • OAUTH란? 웹, 앱 서비스에서 제한적으로 권한을 요청해 사용 할 수 있는 키를 발급해주는 것
  • OAUTH 2.0이란? 인증을 위한 개방형 표준 프로토콜이다. 이 프로토콜에서는 Third-Party 프로그램에게 리소스 소유자를 대신하여 리소스 서버에서 제공하는 자원에 대한 접근 권한을 위임하는 방식을 제공한다. 즉, 대부분의 로그인, 개인정보 관리 책임을 서드파티 애플리케이션 (Google, Facebook, Kakao 등)에게 위임할 수 있다
  • 주요 용어

    1. Authentication : 접근 자격이 있는지 검증하는 단계
    2. Authorization : 자원에 접근할 권한 부여. 인가가 완료되면 자원 접근 권한이 담긴 ACCESS TOKEN을 클라이언트에게 부여한다
    3. ACCESS TOKEN : 리소스 서버에게서 리소스 소유자의 보호된 자원을 획득할 때 사용되는 만료 기간이 있는 Token이다
    4. REFRESH TOKEN : Access Token 만료시 이를 갱신하기 위한 용도로 사용하는 Token이다. Refresh Token은 일반적으로 Access Token보다 만료 기간이 길다.

  • 역활

    1. Resource owner : 보호된 자원에 접근할 수 있는 자격을 부여해 주는 사용자로, 클라이언트에게 권한 획득 자격을 부여한다
    2. Client : 실행중인 애플리케이션으로 보호된 자원을 사용하려고 접근 요청 한다
    3. Resource Server : 사용자의 자원을 호스팅해주는 서버
    4. Authorization Server : 권한 서버로 클라이언트의 접근 자격을 확인하고, Token을 부여한다

  • oauth 2.0 protocol에는 4가지 종류가 있는데 이번에는 권한 부여 승인 코드 방식을 사용한다
  • 권한 부여 승인 코드 방식
    

    1. 사용자가 클라이언트를 통해 소셜 로그인을 하려고 하면 인증 서버는 인증 및 동의 요청을 전송하며 클라이언트는 서버에 권한 부여 승인 코드 요청을 보낸다
    2. 사용자가 로그인과 동의을 하여 인증 서버에 전송한다
    3. 인증 서버에서 권한 부여 승인 코드가 redirect_url을 통해 클라이언트에 전송된다
    4. 권한 부여 승인 코드를 통해 인증 서버에 token을 요청한다
    5. 인증 서버가 token을 클라이언트에 전달해준다. token을 받으면 로그인이 완료된다
    6. 클라이언트는 token을 통해 resource server에 사용자에 대한 보호된 자원을 요청한다
    7. server는 클라이언트에게 요청한 자원을 전달해주며, 클라이언트는 사용자에 대한 정보를 받게된다

  • Kakao 소셜 로그인 방식
    

• 1.3 views, url, template 수정 및 생성

  

  • login을 간단하게 구현할 template과 view 함수를 작성한다

• 1.4 Kakao 앱 키 발급

  

  • JS와 REST API를 사용할 것이다

• 1.5 Kakao Js 가져오기

  • Kakao 버튼
    
  • 실행 화면
    
  • Kakao SDK
    
  • 두 JS 모두 html 파일에 넣어준다
    
  • Kakao 웹페이지 초기화
    
  • 아까 발급받은 Kakao Js Key를 넣어준다
    
  • 실행 화면
    

• 1.6 Kakao 로그인 활성화

  

• 1.7 Redirect 받을 주소 설정

  

  • Kakao가 로그인 성공시 redirect 해주는 코드
  • 유저가 로그인을 시도하면 카카오 서버로 가서 로그인을 한다. 이때 로그인 성공시 redirect를 통해 권한 부여 승인 코드가 부여되는데, 이 코드를 클라이언트인 Django에 보내주게 해야한다
  • redirect_url : 권한 서버가 요청에 대한 응답을 보낼 url
    
  • 주소는 Kakao에 등록해야한다
    

• 1.8 동의 항목 설정

  

• 1.9 로그인 수행시 URL, VIEWS 수정

  • URL 추가
    
  • VIEWS 함수 추가
    
  • 로그인 실행
    
  • 인가코드를 받아왔다

2. 로그인 Token

• 2.1 이해하기

  

  • 우리는 지금 로그인을 통해 권한 부여 승인 코드를 Redirect를 통해 받아왔다
  • 이제 권한 부여 승인 코드를 통해 Token을 발급 받고 이 Token을 받으면 로그인이 완료된다

• 2.2 view 수정

  

  • 위 문서를 따라한다
  • 요구하는 parameter 대로 입력해준다

    1. data의 경우, 주어진 grant_type과 app key, redirect url, 인가 코드를 dictionary 형태로 넣어준다
    2. headers의 경우, 주어진 Contents-type을 넣어준다

  • parameter를 주어진 URL로 보내준다
  • 받은 Token
    
  • access_token의 유효시간이 길다면, 이 token은 로컬 컴퓨터에 저장되는데 이걸 이용해서 타인이 사용할 수 있으므로, refresh_token을 이용해 유효시간을 refresh 시킨다. refresh_token은 유효시간을 길게 설정하고, access_token과 다른 곳에 저장한다
  • bearer는 인증 서버에 의해 생성 된 일종의 불투명 한 값으로 OAuth에 대한 토큰이다

3. 사용자 정보 받아오기

• 3.1 token을 다시 전송할 headers 구현

  • token을 다시 전송하여 사용자 정보를 받아온다
    
  • 아래 문서 참조
    
  • 문서에서 주어진대로 따라하면 된다
    
  • views 구현
    
  • headers에 주어진 정보를 담아 requests.get에 headers를 담아 전송하여 json Data를 받아온다
  • 받은 res는 json format이므로 json() 함수를 통해 dictionary 객체를 불러온다

4. 사용자 정보 응용

• 4.1 동의사항 추가

  • 닉네임을 동의사항에 추가했다
    
  • 닉네임이 사용자 정보로 받아온다

• 4.2 닉네임만 출력하기

  

  • 요청한 Json Data는 위 사진과 같이 온다
    
  • JSON 파일에서 kakao_accounts 안의 profile 안에 nickname을 뽑아온다

• 4.3 DB에 password null 허가의 이유

  • social login시 password를 DB에 받아오지 않으므로 NULL을 허용한다

5. All auth 이용해서 회원가입

• Allauth와 Kakao를 연동하여 진행해보겠다

• 5.1 회원가입 과정

  

  • TOKEN을 통해 받아온 정보를 DB와 비교하여 가입되어있으면 로그인, 아니면 회원가입 시킨다

• 5.2 Kakao redirect url 수정

  

  • Allauth 라이브러리를 사용해서 구현할 것이므로 Allauth 라이브러리에 맞게 수정한다
    

• 5.3 관리자 page sites 추가

  • Sites에 저장한 redirect URI를 넣어준다
  • 관리자 페이지에서 사용할 URI 주소들을 입력하는 곳
    

• 5.4 settings.py 추가

  

  • allauth에서 kakao 로그인용 app을 추가해준다
  • 우리는 allauth를 통해 id를 Kakao에 보내주어 인증 코드를 받아야한다. 따라서 sites에 입력한 redirect url을 가져와서 이 url을 통해 인증 코드를 받아오게 한다

• 5.5 관리자 social applications 추가

  • social applications add 해준다
    
  • client id는 rest api 키이다
  • redirect_url도 추가해준다. 이 url를 통해 인증코드를 provider가 받아온다
    

• 5.6 html 추가

  

  • method : 인증방식
  • load socialaccount : 소셜 로그인을 위해 추가해야한다
  • provider_login_url : 관리자 페이지에 등록한 provider의 url, 해당 url을 통해 Allauth의 Kakao 인증 페이지로 넘어간다

    

  • 실행 화면 - allauth
    
  • 실행 화면 - 버튼 구현
    
  • 두 방법 다 continue로 이어진다
    

• 5.7 로그인 실행시

  • 우리는 회원가입하여 USER 정보를 DB에 저장시 EMAIL을 필수로 했으므로, Kakao 로그인 후 EMAIL 인증을 해야한다
    
  • 성공시 DB에 저장되며, 회원정보는 socialapp의 extra_data에 저장된다
    
  • email address에 email도 저장되며 account_user에도 추가된다
    
  • html과 view를 수정하여 profile을 추가해보았다
    
  • 로그인이 완료된다

• 5.8 과정

  • 로그인에서 kakao 실행 - kakao 로그인 - 이메일 인증 - 회원가입 완료 - 다시 로그인시 - 로그인 완료

6. 직접 회원가입 구현

• 6.1 redirect url 추가

  

  • 직접 구현에 사용할 url 추가

• 6.2 views 추가

  • User model에 kakao 정보를 추가해준다
    
  • user email column을 가져와서 해당 user가 존재하면 login, 없으면 user 객체를 만들어 DB에 저장해 회원가입 시킨다
  • first()는 list의 첫 요소를 가져오는 것으로, 만약 kakaoid를 가지고 있는 요소가 있다면 하나밖에 없으므로 사용한다. get으로 하면 계정이 없을 경우 null로 인해 error가 날 수 있으므로, list로 받아와서 null을 받아도 error가 안나게 해준다
    
  • 위에는 django auth에서 인증시 사용하는 백엔드 코드 모음 - django contrib auth의 backends라는 뜻이다
  • 밑에는 allauth에서 인증시 사용하는 백엔드 코드 모음
  • 이 두가지 백엔드가 충돌이 날 수 있으므로
    
  • 인증에 사용할 백엔드를 따로 지정한다
    
  • social login시 password를 DB에 받아오지 않는다
  • 직접 구현이므로 account_user에 저장된다. 또한 password를 받아오지 않기에, password칸은 비어있다
  • allauth social login은 password가 저장된다

• 6.3 login 방식

  • login 요청 - kakao에서 login - kakao login 완료시 login 완료
  • kakao logout을 하지 않으면, 계정을 삭제해도 해당 kakao 계정에 대한 login 상태는 유지된다