이번 세션에서는 API 를 활용하는 방법에 대해 배웠다.
이를 구체적으로 사용하기 전에 우선 API 가 무엇인지, 어떤 개념인지 알아보자.
대~충 얘기하자면 내 페이지에 다른 프로그램을 끌어와서 이용하는 것이다. 예를 들면 카카오맵을 내 페이지에 띄워서 이용하게 하는 것이나 내 페이지에 소셜 로그인 기능을 넣는 것이나 .. 등등이 있다.
오늘은 어떤 API 를 활용해 볼 것이냐~
1. 카카오맵 띄우기
2. 카카오 social login 기능
두 가지를 구현해보자.
우선 새로운 복습 폴더에 API 폴더를 생성 후 가상 환경, 장고 설치 등등 기본적인 것을 세팅하고 templates까지 생성하고 시작하자.
1. 카카오맵 띄우기
카카오맵을 우리 웹페이지에 띄운다는 것은 카카오맵의 데이터를 활용한다는 의미이다. 카카오맵의 데이터를 활용하기 위해
카카오 디벨로퍼 페이지에 들어간다
여기 들어가서 간단히 회원가입을 한 후, 로그인하여 위의 메뉴 중 '내 애플리케이션'에 들어간다.
내 애플리케이션에 들어가서 애플리케이션을 하나 추가한다.
우리는 우리가 만드는 웹 페이지와 카카오가 제공하는 데이터를 연결시켜주어야 한다. (그래야 카카오의 데이터를 성공적으로 우리 페이지에 구현할 수 있기 때문)
연결시켜주기 위해 왼쪽 메뉴 중 '플랫폼'에 들어가자.
우리는 웹페이지를 다루고 있기 때문에 'Web 플랫폼 등록'을 클릭!
사이트 도메인에다가 우리의 웹 페이지 url 주소를 입력한다. (비록 로컬 호스트일지라도 ..)
우리의 페이지와 카카오 데이터를 연결해주었기 때문에 이제 우리는 카카오맵을 일련의 과정을 통해 띄우기 위한 준비가 끝났다.
이제 어떻게 해야 하나?
API의 특징을 데이터를 제공하는 측에 정리가 잘 되어있는 게 특징이다. 그렇기에 그 설명을 잘 보고 따라하기만 하면 된다.
이 정보를 얻기 위해 구글에 '카카오맵 api'를 검색하자.
우리는 Web을 다루기 때문에 Web을 클릭!
들어가서 왼쪽 메뉴의 'Guide'를 클릭하면 !
우리가 카카오맵 api를 활용하기 위해 어떻게 하면 되는지 가이드라인이 잘 나와있다 ! 이를 따라 차근차근 따라가보자.
(사실 카카오 디벨로퍼 페이지에 들어가기 전 이를 먼저 확인하는 것이 순서상 맞다)
그리고 이 밑에 보면
이렇게 카카오맵을 띄우기 위해 어떤 코드를 입력하면 되는지 친절하게 설명이 되어 있다. 이를 따라서 해보자!
우리가 입력해야 하는 전체 코드 중에서 중간에 '발급받은 APP KEY를 넣으시면 됩니다.' 라는 한글이 써져있는 부분이 있다.
여기에
카카오 디벨로퍼 페이지의 '앱 키'에 있는 JavaScript 키를 복사 후 붙여넣으면 된다.
와우! 이렇게 손 쉽게 카카오맵의 API를 활용하여 우리 페이지에 카카오맵을 띄우는 데에 성공했다.
아까 얘기했듯 API는 이를 제공하는 측의 페이지에 상세히 나와있기 때문에 그 설명을 차근차근 따라가다 보면 우리가 구현하고자 하는 기능을 손쉽게 구현할 수 있다.
+) 카카오맵 다양하게 커스텀하기
카카오맵 api 페이지의 왼쪽 메뉴 'Sample' 항목에서는 우리의 맵을 다양하게 커스터마이징(?)할 수 있으니 참고하도록!
2. 카카오 Social Login --> allauth
우리가 낯선 페이지에 회원가입하여 로그인을 한다는 것은 생각보다 귀찮을 일일 수도 있고, 개인 정보에 대한 불안함이 느껴질 수도 있는 일이다. 그래서 대다수의 페이지에서는 Social Login 기능을 이용하여 유저들을 로그인하게 한다.
이 social login 기능을 사용하기 위해서는 Django 라이브러리의 allauth 기능을 활용한다.
이 또한 Django 설명서에 잘 적혀있다 ! 구글에 'django allauth'를 검색한다.
저기 적힌 대로 차근차근 해보자. 우선은 django-allauth를 설치하라고 한다
django-allauth를 설치해주고 그 다음 절차인 settings.py로 가자.
하이라이트된 부분은 우리 settings.py에 없는 코드이므로 복사해서 붙여넣어준다.
새로 생성한 코드들은 맨 밑에다가 작성해주었다.
추가로 둘 코드를 비교해서 우리 settings.py 에 없는 코드들을 작성해준다.
추가로 이 두가지 코드를 작성해주면서 마무리해준다.
맨 밑의 코드는 로그인에 성공하면 기본 페이지로 redirect해준다는 의미를 가진 코드이다.
그 다음 urls.py로 가서 위의 코드들을 입력해준다.
원래라면 로그인, 회원가입, 로그아웃 등을 담당하는 코드와 url 등이 있을 텐데 이는 친절하게 allauth의 라이브러리에 존재한다!
allauth의 urls 파일과 연동한다는 의미의 include를 잘 느껴보자
마지막으로
migrate를 해주면 되는데, 우리는 makemigrations를 안했기 때문에 이것부터 해준다.
자, 이제 우리 웹 페이지의 admin 사이트로 가서 확인해보자. (그 전에 superuser부터 생성해주자.)
여기 보면 우리가 생성해주지 않았던 항목들이 존재한다 social accounts에 !
여기서 'Social applications'에 'Add'를 눌러서 기능을 추가해주자(?)
Provider 는 Kakao
Name 은 아무거나
Client id 는 카카오 디벨로퍼의 '앱 키'에 있는 REST API 키
Secret key 는 none
으로 설정한다! 하고 밑에 있는 SAVE 키 클릭!
SAVE를 클릭하면 이렇게 소셜 (로그인) 기능이 등록되었다.
이를 우리 웹 페이지에 구현해보자. 그러기 위해 index.html 로 고고
a 태그를 활용하여 카카오로 로그인하는 url을 걸어주는데,
provider_login_url 'kakao' 라고 입력해준다.
그 전에 !!! 우리가 빼먹은 것이 한 가지 있다.
index.html 맨 위에 {% load socialaccount %} 코드를 입력해주어야 한다.
문서 최상위에 socialaccount 를 불러와 allauth 의 socialaccount 기능을 사용한다고 말해주고
밑의 a 태그를 통해 그 중에서도 kakao가 제공하는 로그인을 이용한다고 적어준다!
그렇게 하고 나서 웹페이지로 들어가고 로그인하기를 클릭하면 !
에러가 뜬다 .. 뜨는데 ..! 뭔지 잘 보자 에러 코드가 있다. 이 또한 카카오 디벨로퍼 페이지를 통해 잘 따라가보면 풀리니까 안심~
해결방안을 클릭해서 우리의 에러 코드에 따른 해결방안이 무엇인지 보자
로그인 기능을 활성화시키러 가자!
자 이제 되겠지? 다시 로그인을 클릭해보자.
또 에러가 뜬다. 안심해라 또 카카오가 하라고 하는대로 따라가면 되니까
Redirect URI를 등록하러 가자 ! 근데 얘가 뭐지 ..?
이게 뭔지는 allauth 공식문서에 잘 나와있다! 확인하러 가자
아~ 저 callback URL을 Redirect URI로 등록해줘야 하는구만
등록하러 가자~
이렇게 해주고 다시 로그인 창으로 가서 로그인을 눌러보면 !
또 에러가 뜬다 .
ㅋㅋㅋ
이게 뭐 때문에 생기는 에러냐면
일반적으로 KeyError는 필수적인 key를 입력하지 않았거나, 지정되지 않은 Key를 제공했을 때 발생하는 에러이다.
이게 왜 문제가 되냐면
user가 로그인하려면 user의 정보를 받아와야 가입이 될텐데 이 정보를 얻는 데에 동의를 해야한다고 한다.
그래서 카카오 디벨로퍼로 가서
'동의항목'에서 개인정보 동의에 관한 것을 설정 해준다.
이렇게 몇 개를 설정해주고 다시 로그인을 클릭해주면 !
index.html로 되돌아왔다! 로그인이 잘 된 건가 ? 확인해보기 위해 admin 페이지로 들어간다.
'강욱'이라는 내 이름이 로그인 되어 있는 걸 확인할 수 있다 !
추가로 index.html에 로그인되어있는지 확인시켜주기 위해 이름을 나타내는 코드를 입력하자.
이렇게 우리의 페이지에 카카오로 로그인을 할 수 있게 되었다 !
끝!
'Web > django & python' 카테고리의 다른 글
| [Django] Form으로 checkbox의 value 전달을 위한 submit : button vs input (0) | 2021.09.03 |
|---|---|
| Django - 클래스형 뷰 CBV (Class-Based View) (0) | 2021.07.09 |
| CRUD - Read (0) | 2021.05.19 |
| Model 실습 (0) | 2021.05.18 |
| Django 3 : BLOG 만들기 (MVT, ORM, CRUD 등등) (0) | 2021.05.11 |