카테고리 없음

5.21 <kakao ID로 login> 해보기

문앵 2021. 5. 21. 10:59

KAKAO 로그인 연동 해보기. 우선 알아야 할 개념

Autherication(인증), Authorization(허가), 

Oauth(서버와 클라이언트간의 통신 규칙. 쉽게 생각하면 post값으로 key를 하나 정해놓고 그걸로 연결을 하는 것.)

 

우리가 클라이언트에서 요청을 하려면 먼저 카카오에서 API키를 받아와야 합니다. 

특정 사이트에서 회원가입을 하고 정보를 받아오면 되는데 구글에 "카카오톡 개발자 콘솔"을 검색하면 나옵니다.

 

Kakao Developers - 카카오

0. 접속-로그인.
1. 어플리케이션 추가하기 (앱이름- 테스터 용이므로 아무거나 추가추가/ 사업자명도 마찬가지)
2. 방금 생성한 어플리케이션을 눌러서 들어간다.
앱키 - rest api키 (따로 메모해주기)
3. 제품설정 - 카카오 로그인- 활성화상태 : on으로 바꿔주기
4. Redirect URI : 설정해주기 (http://localhost:3000/auth/kakao/callback) 이것도 따로 메모
(카카오가 로그인이 완료가 되었을 때 우리한테 던저주는 url이라는 뜻)
5. 카카오 로그인- 보안 - client secret key 메모

 

이제 서버를 세팅해줍니다.

express와 nunjucks까지만 일단 세팅을 해줍니다. 넌적스가 있으므로 send가 아닌 render로 
index 페이지를 넘겨줍니다. index에는 일단 간단하게 login과 회원정보 정도면 링크를 걸어둡니다.

그다음 미리 빼뒀던 키 정보들을 넣어줘야 합니다.
const kakao = {
clientID : '~'
clientSecret : '~'
redirectUri : 'http://~'
} -> 그냥 가져다 쓰기 편하려고 객체에다가 담아둔 것입니다. 이거 자체로 효력은 x

이제 카카오 로그인 url 링크를 만들어줍니다.
(우리 서버를 한번 거치도록) a href = "/auth/kakao" 해주고 ,
서버에서는 app.get으로 ('/auth/kakao',) 이렇게 받아줍니다.
여기서 const kakaoAuthURL = '' 만들어주고 
이걸 redirect(kakaoAuthURL); 해줍니다.(redirect 내용으로 url이 바뀔겁니다.) 
kakaoAuthURL='https://kauth.kakao.com/oauth/authorize'

이 url만 치면 되는게 아니라 아까 받아놓은 키값을 삽입을 해줘야합니다.
쿼리스트링으로 get 값에 담아서 보내줘야합니다.
?=client_id=${kakao.clientID}&redirect_uri=${kakao.redirectUri}&response type=code

반응형