반응형

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'}

 

728x90
반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기