API 활용하기

API란 뭘까?

윽. 보기만 해도 정신이 혼미해진다.

 

간단히 이해하자면... 우리가 만든 웹 서비스에 필요한 기능들 중 널리 쓰이는 녀석들을 쉽게 가져다 쓸 수록 한 것!

 

오늘은 그 중에서도 카카오 맵과 카카오 소셜 로그인을 이용할 예정.

---

1. 카카오 디벨로퍼 가입 및 애플리케이션 만들기

https://developers.kakao.com/

Kakao Developers

카카오 계정이 있다면 누구나 Kakao Developer가 될 수 있다. 만세!

 

별 다른 회원가입 없이 존재하는 카카오 계정으로 로그인 후 약관에 동의하면...

가입 성공! 메뉴의 내 애플리케이션에 들어가보자.

 

쨘. 앱 이름과 사업자명을 아무거나 입력!

 

왼쪽 메뉴바의 플랫폼에서 해당 앱과 우리의 웹페이지를 연결해줘야 한다.

현재 우리는 개발 환경이니 사이트 도메인에 http://127.0.0.1:8000 을 지정!

 

2. Kakao Map API 이용하기

친절한 카카오의 Kakao Map 문서를 따라가 보자!

https://apis.map.kakao.com/web/guide/

 

AppKey라는게 필요하다는데... 요놈은 어디에?

방금 만든 앱의 앱 키 항목에 들어가 보니 있다.

카카오 맵을 위해 필요한 키는 JavaScript 키니 복사해주자.

 

이렇게 하면 된다는데... 요게 대체 무슨 뜻?

 

index.html

쨘! 카카오 맵을 띄우고 싶은 페이지의 head 태그 속에 위의 코드를 입력하면 된다!

이때 발급받은 APP KEY 어쩌고 하는 부분에 앱 키를 넣어주면 된다.

 

시키는 대로 지도에 해당할 div도 body 태그 내에 만들어줬다.

 

어쩌고 저쩌고... 읽어본 후 하란대로 코드를 입력(복사붙여넣기)해주면!

 

index.html

이런 형태가 될 테고...

http://127.0.0.1:8000/

요렇게 지도가 뜨는 걸 확인할 수 있다. 와우!

 

중심 좌표, 마커, 길 찾기 등등등의 수많은 커스텀을 적용하고 싶다면!?

 

https://apis.map.kakao.com/web/sample/

이제는 공식 문서가 두렵지 않다!

 

3. 소셜 로그인

정체도 모르는 웹 사이트에 회원가입을 하는 건... 사실 굉장한 용기가 필요한 일이다.

따라서 대부분의 사이트들이 사용하는 소셜 로그인 기능!

 

Django에서는 allauth란 라이브러리를 통해 이를 손쉽게 구현할 수 있다.

 

https://django-allauth.readthedocs.io/en/latest/installation.html#django

Installation — django-allauth 0.43.0 documentation

역시나 공식 문서를 따라가면 손쉽다!

 

1. allauth 설치

설치하면 된다!

악!

에러 코드를 잘 읽어보니...

pip를 업그레이드하란다! pip install --upgrade pip 입력 후 다시 설치!

 

성공적인 것 같은 문구가 뜨면 성공이다(?) (의심되면 pip list로 설치가 되었는지 확인)

 

settings.py

설치했으면 INSTALLED_APPS에 allauth 관련 앱들을 등록해주자(역시 공식 문서를 참고!)

 

settings.py

역시 공식 문서대로 settings를 작성!

밑에 있는 LOGIN_REDIRECT_URL은 로그인 성공 시 작동될 URL! → 지금은 첫 페이지(/)로 지정해주자.

 

urls.py

로그인, 로그아웃, 회원가입 등등등... 을 담당할 url들이 있을 텐데...

친절한 allauth 측에서 이를 다 구현해줬다! 우리는 이를 불러와서 사용만 해주면 된다.

따라서 include를 통해 allauth.urls와 연동!

 

신나게 migrate 후 superuser를 생성해 admin 페이지에 들어가 보면...

와! SOCIAL ACCOUNTS라는 테이블이 생겼다!

Socail applications를 Add 해보면...

 

쨘. 소셜 로그인을 제공할 Provider는 Kakao로,

name은 아무꺼나,

Client id는 애플리케이션의 REAT API 앱 키로,

Secret key는 카카오 소셜 로그인에서는 사용하지 않으므로... none으로!

마지막으로 우리의 example.com을 등록해주면(SITE_ID=1을 통해 이게 가능해진 것) 끝!

index.html

기능 구현은 끝났으니, 이를 템플릿에 보여줘야 할 터!

 

문서 최상위에 {% load socialaccount %}를 불러와 allauth의 socialaccount를 이용!

href의 경로로 불러온 socialaccount의 provider_login_url을 이용, 그중에서도 우리는 kakao를 이용하게끔!

 

runserver후 생성된 버튼을 누르면...

 

띠용. 하지만 무서울 게 없다!

 

공식 문서는 굉장히 친절하므로..! 

 

아까 만든 앱의 카카오 로그인 탭에서 활성화해주자!

 

그런데 밑에 내려보니... Redirect URL을 필수로 설정하란다. 얘는 또 뭐람?

 

https://django-allauth.readthedocs.io/en/latest/providers.html

역시 두려울 게 없다! allauth의 공식 문서에 나와있으므로!

 

시키는 대로 이렇게 지정해주자. 신난다!

 

이제 다시 index.html로 돌아와 로그인 버튼을 눌러보면...

악! Kakao_account KeyError!

일반적으로 KeyError는 필수적인 key를 입력하지 않았거나, 지정되지 않은 Key를 제공했을 때 발생할 테다.

밑을 쭉쭉 읽어보니... Email 어쩌고에 밑줄이 그여 있다.

 

아하! 생각해보니... 유저의 정보를 받아와야 가입이 될 텐데, 이를 지정해준 적이 없다!

 

따라서 우리가 만든 앱의 동의 항목 탭에서 프로필 정보를 필수 동의로 바꿔준다!

이제 이용자의 프로필 정보를 받아와, 우리 사이트의 User 정보로 사용할 수 있을 테다. 야호!

 

http://127.0.0.1:8000/

이제 우리의 앱에 유저 정보를 입력해야만 가입이 승인된다!

 

드디어 카카오 계정으로 우리 사이트의 User가 될 수 있다! 신나는구만.