0. 들어가기
-. 카카오 인증을 통한 로그인 기능 만들기. 1차
-. i) 카카오 디벨로퍼에 앱 등록하기 ii) 카카오 계정번호 가져오기 두가지 공부
1. 카카오 디벨로퍼에 앱 등록하기.
-. 카카오 인증을 쓰려면, 내 앱을 디벨로퍼에 등록한 후, 앱 키를 받아오는 것이 선행되어야 한다. 여러 블로그들에서 설명되어 있으니까 간단하게..
1) 카카오 콘솔/앱 페이지에서 애플리케이션 추가하기
2) 추가된 애플리케이션을 클릭하면 바로 앱 키를 볼 수 있다.
3) 로그인 확인 요청 시 정보를 전달해 줄 (redirect) url을 설정한다.
-. 카카오 로그인 탭을 누르면 아래 창이 나온다. 여기에 카카오에서 보내주는 정보를 받을 url을 입력한다.
2. 웹페이지에 카카오 로그인 기능 넣기
-. 카카오 로그인 순서는 대략 이렇게 된다.
1) 카카오 로그인 창 띄우기
-. 카카오 로그인 버튼을 만드는 것은 공식 제공되는 리소스를 사용하면 된다. 나는 카카오 버튼을 누르면 getOAuthToken이라는 자바스크립트 함수를 실행하게 만들어 놨다.
<p align="center">
<a id="custom-login-btn" href="javascript:getOAuthToken('login', ['account_email','profile']);">
<img
src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
width="222"
/>
</a>
</p>
-. 버튼을 클릭하여 getOAuthToken 함수를 실행하게 되면, 우리가 흔히 보는 카카오 로그인 페이지를 새 창으로 띄우면서 원본 페이지는 joininfo 페이지로 리다이렉트 하게 만들어 놨다.
function getOAuthToken(mode, scope_list) {
if (mode === undefined) {
mode = 'login';
}
if (scope_list === undefined) {
scope_list = null;
}
oauthMode = mode;
var url = 'https://kauth.kakao.com/oauth/authorize?' +
'client_id=7e36ffe10676354a779c7e1283632514&' + //앱 키
'redirect_uri=https://www.stocksidekick.xyz/account/kakao_oauth&' + //카카오 서버 -> 내 서버로 정보 보낼 페이지
'response_type=code'; //서버에서 받을 키 값
if (Array.isArray(scope_list)) {
url += '&scope=' + scope_list.join(',');
} else if (typeof scope_list === 'string' || scope_list instanceof String) {
url += '&scope=' + scope_list;
}
//카카오 로그인 페이지 띄우기 (새 창)
var win = window.open(url, "KakaoAccountLogin", "width=600,height=450,resizable=yes,scrollbars=yes");
//로그인 페이지 닫힌 후 메인 페이지는 joininfo url로 이동.
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
alert("asdf");
window.location.href="/account/joininfo";
}
}, 500);
}
※ 카카오 로그인에는 '선택' 권한과 '필수' 권한이 있는데, 난 우선 전부 선택권한으로 설정했다.
2) 서버에서 정보 받기
-. 웹에서 로그인 처리는 javascript로, 이후 작업은 REST API를 이용한다. 난 파이썬으로 간략하게 만들었다.
(1) 카카오 인증코드 수신
-. 유저가 카카오 인증 동의를 하면 카카오 서버에서는 개인 서버 (redirect url)로 get 방식으로 인증 코드를 보내준다. 서버에서는 간단하게 get 방식으로 code를 따올 수 있다.
code = str(request.args.get('code'))
(2) 카카오 서버에 유저 정보 요청
-. 위에서 받은 code를 서버에 post 방식으로 보내주면 그에 대한 응답을 해준다. 난 getKakaoInfo 라는 함수를 별도로 만들어서 작업했다.
#getKakaoInfo() 앞부분
### 로그인 토큰 가져오기
headers = {'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'}
DATA = {'client_id': REST_API_KEY,
'redirect_uri': REDIRECT_URI,
'code': code,
'grant_type': "authorization_code"
}
url = TARGET_URL + "oauth/token"
res = requests.post(url=url, data=DATA, headers=headers)
dum_json = json.loads(res.text.encode('utf-8'))
import pprint
pprint.pprint(dum_json)
--출력--
{'access_token': '---------',
'expires_in': 21599, //access_token 유효시간
'refresh_token': '---------',
'refresh_token_expires_in': 5183999, //refresh_token 유효시간
'scope': 'account_email profile',
'token_type': 'bearer'}
-. access_token은 서버에서 유저의 정보를 가져올 수 있는 권한, refresh_token은 refresh_token을 갱신할 수 있는 권한을 준다. access_token은 6시간 / refresh_token은 60일의 유효기간을 가진다. (refresh_token은 유효기한을 계산하기 위해 날짜로 변환할 예정.)
-. acceess_token을 이용해 서버에서 유저 정보 (id)를 가져온다.
#getKakaoInfo() 뒷부분
headers = {'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
'Authorization': 'Bearer {ACCESS_TOKEN}'.format(ACCESS_TOKEN=userAccount['kakao_access_token'])}
url = "https://kapi.kakao.com/v1/user/access_token_info"
res = requests.get(url=url, headers=headers)
res = json.loads(res.text.encode('utf-8'))
if 'code' in res:
if res['code'] == -401:
if "invalid" in res['msg']:
print("invalid token")
return -1
else:
from logging.handlers import RotatingFileHandler
else:
pass
userAccount['kakao_id'] = res['id']
-. 여기까지 작업 결과는 아래와 같다.
res = account_module.getKakaoInfo(code)
import pprint
pprint.pprint(res)
--출력--
{'kakao_access_token': '---------',
'kakao_id': 1677401446,
'kakao_refresh_token': '---------',
'kakao_refresh_token_expires_in': datetime.datetime(2021, 5, 28, 0, 5, 22, 655341),
'scope': 'account_email profile'}
'Web' 카테고리의 다른 글
[vue.js + Flask + dynamodb] 게시판 만들기 (1) - 글 작성/출력기능 (0) | 2022.02.09 |
---|---|
[NGINX] proxy_pass 사용 시 클라이언트 아이피 전달 및 확인 (0) | 2021.12.12 |
[web] 반응형 테이블 만들기 - css grid (0) | 2021.03.19 |
[Web] 네이버 주식시세 가져오기 시도중 (1) | 2021.03.05 |
[Web] KRX 주식 시세 - 이상함. (0) | 2021.03.05 |
최근댓글