[48일차 복습] JavaScript, node.js, Oauth 로 카카오 로그인 연결해보기 kakao login

Oauth 용어 

• 사용자(user): 서비스 제공자와 소비자를 사용하는 계정을 가지고 있는 개인
• 소비자(consumer): Open API를 이용하여 개발된 OAuth를 사용하여 서비스 제공자에게 접근하는 웹사이트 또는 애플리케이션
• 서비스 제공자(service provider): OAuth를 통해 접근을 지원하는 웹 애플리케이션(Open API를 제공하는 서비스)
• 소비자 비밀번호(consumer secret) : 서비스 제공자에서 소비자가 자신임을 인증하기 위한 키
• 요청 토큰(request token) : 소비자가 사용자에게 접근권한을 인증받기 위해 필요한 정보가 담겨있으며 후에 접근 토큰으로 변환된다.
• 접근 토큰(access token) : 인증 후에 사용자가 서비스 제공자가 아닌 소비자를 통해서 보호된 자원에 접근하기 위한 키를 포함한 값. 

출처 : 위키백과 

 

 

kakaoAuthURL : https://kauth.kakao.com/oauth/authorize

token;

            url:'https://kauth.kakao.com/oauth/token',
            headers:{
                'content-type':'application/x-www-form-urlencoded'
            },

user;

url:'https://kapi.kakao.com/v2/user/me',
            headers:{
                Authorization:`Bearer ${token.data.access_token}`
            }

 

 

=============================================================================================================

 

 

 

 

 

 

 

javaScript, express, node.js + oauth + kakao login 만들기 

Kakao Developers 에서 할 일

 

 

1. REST API 얻기 

카카오 Developers 접속 -> 로그인 -> 내 어플리케이션 추가 -> REST API 복사, 따로 메모 해놓기 

 

rest API란? 

https://meetup.toast.com/posts/92

REST API 제대로 알고 사용하기 : NHN Cloud Meetup

 

 

2. 활성화 설정 상태 on , Redirect URI 설정 

kakao developers 메뉴 - 로그인 -> 활성화 설정 클릭 -> on 으로 바꾸고 redirect uri 입력 

rest API 개발 경우 필수 설정 

redirect uri 주소 따로 메모  =  카카오 로그인 되었을 때 나올 주소 설정함. 

 

 

 

3. secret key 만들기 

kakao developers - 메뉴 '보안' -> 코드 생성 -> key 생성 

-> 따로 메모 해놓기 

 

 

 

4. web 플랫폼 등록 

kakao developers - 메뉴 '플랫폼' - web 등록 

내가 설정한 port 값 

 

 

 

 

========================================================================

 

 

 

Visual Studio - Local server  에서 할 일

 

 

0. npm init 

1. express 설치 및 코드 작성 

터미널 명령어 실행 $ npm install express

server.js 코드 작성 

const express=require('express');
const app = express();

app.get('/', (req,res)=>{
    res.send('kakao login')
})

app.listen(3000,()=>{
    console.log('server start port: 3000')
})

 

터미널 명령어

$node server.js 입력 -> server on 시키고 

app.get('/') res.send 잘 나오는지도 확인 

 

 

 

 

 

 

 

 

 

 

 

2. nunjucks 설치, 코드 작성, views폴더, index.html (in views) 생성

$npm install nunjucks 

views폴더 생성

views폴더 안 - index.html 파일 생성 , 아무 글 작성 (nunjucks 잘 되는지 test위함) 

server.js 코드 추가 

const express=require('express');
const nunjucks=require('nunjucks');              //추가요
const app = express();

nunjucks.configure('views', {
    express:app,
})
app.set('view engine','html');

app.get('/', (req,res)=>{              // send -> render 
    res.render('index.html')            //nunjucks -> html파일 render 보내기 위함. 
})

app.listen(3000,()=>{
    console.log('server start port: 3000')
})

$node server.js -> server on -> localhost:3000 확인 

 

 

 

nunjucks 까지 잘 추가됨. 

 

 

 

 

 

 

 

 

 

 

3. kakao developers 에서 생성한 RestAPI, secret key, redirectURI 객체로 담기 

-> 편하게 쓰기 위함

server.js 파일에 아래 코드 작성 

const kakao={
    clientID : 'f219cecc72g1eb147e757978ac0e323f',
    clientSecret : 'ucuZ7zZ5KKaeRedSedBMiXZIpTFnGBvi',
    redirectUri : 'http://localhost:3000/auth/kakao/callback'
}

 

 

 

4. 카카오 URL 전달, redirectURL 까지 만들기 

views - index.html 수정 - 로그인하러 보내는 a 링크 만들기 

auth/kakao을 한 번 거치게 만듬

(redirectUri는 auth/kakao/callback ) 

<a href="/auth/kakao">카카오 로그인</a>
<a href="#">회원정보</a>

 

server.js 코드 작성

app.get('/auth/kakao', (req,res)=>{
    const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize`;
    res.redirect(kakaoAuthURL);
})

위의 URL 에 소비자 (client = local server) 의 clientID = restAPI, redirect_uri, response_type 값을 get 형식으로 보내줘야 한다.  아래처럼 추가 

app.get('/auth/kakao', (req,res)=>{
    const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?
    client_id=${kakao.cliendtID}
    &redirect_uri=${kakao.redirectUri}
    &response_type=code`;
    res.redirect(kakaoAuthURL);
})

 

server.js 전체

const express=require('express');
const nunjucks=require('nunjucks');
const app = express();

nunjucks.configure('views', {
    express:app,
})
app.set('view engine','html');

const kakao={
    clientID : 'f219cecc72g1eb147e757978ac0e323f',
    clientSecret : 'ucuZ7zZ5KKaeRedSedBMiXZIpTFnGBvi',
    redirectUri : 'http://localhost:3000/auth/kakao/callback'
}   

app.get('/', (req,res)=>{
    res.render('index.html')
})

app.get('/auth/kakao', (req,res)=>{
    const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?
    client_id=${kakao.cliendtID}&redirect_uri=${kakao.redirectUri}&
    response_type=code`;
    res.redirect(kakaoAuthURL);
})

app.listen(3000,()=>{
    console.log('server start port: 3000')
})

** url 부분은 보기 좋게 엔터를 쳤지만 엔터가 있으면 오류남 !!! 쭉 - 이어서 URL쓰기 

server on -> 로그인 클릭 -> 카카오 페이지가 나옴 -> 동의하고계속하기 -> 아까 설정한 /auth/kakao/callbck 주소로 보내짐 

 

 

my local -------req----> kakao ---------> local 로 돌아옴 

다시 

my local ------req------> kakao  요청하는거 만들기 

 

 

 

 

 

5. /auth/kakao/callback 받는 app.get추가 

server.js 추가 

app.get('/auth/kakao/callback',(req,res)=>{
    res.send('ok');
})

 

 

 

 

ok 잘 뜸 

 

 

 

 

 

 

 

6. AXIOS 사용해서 카카오로 요청(post로) 줄 것!  axios 다운, 코드 작성 

$npm install axios 

server.js 작성

const axios=require('axios');

 

 

app.get('/auth/kakao/callback', async (req,res)=>{
    let token;
    try{
        token=await axios({
            method:'POST',
            url:'https://kauth.kakao.com/oauth/token',
            headers:{
                'content-type':'application/x-www-form-urlencoded'
            }
        })
    }catch(err){
        res.json(err.data)
    }
    res.send('ok');
})

-> 에러가 뜸. 저 url 만 복사해서 브라우저에 넣고 엔터

-> 요게 뜬다.   ---------------> 

 

 

 

7. qs 다운, 코드 작성 ( axios로 kakao에게 접근 토큰, access key 요청) 

$npm install qs

server 코드 추가 

const qs=require('qs');

qs 란? A querystring parsing and stringifying library with some added security.

 

server.js 코드 추가 2

app.get('/auth/kakao/callback', async (req,res)=>{
    let token;
    try{
        token=await axios({
            method:'POST',
            url:'https://kauth.kakao.com/oauth/token',
            headers:{
                'content-type':'application/x-www-form-urlencoded'
            },
            data:qs.stringify({
                grant_type:'authorization_code',
                client_id:kakao.clientID,
                client_secret:kakao.clientSecret,
                redirectUri:kakao.redirectUri,
                code:req.query.code,
            })
        })
    }catch(err){
        res.json(err.data)
    }
    console.log(token)
    res.send('ok');
})

 

server on -> 로그인->  동의하고 진행하기 -> 'ok' send됨

이 때 console.log(token) 내용

 

 

data 라는 속성에 우리가 필요한 access_token 이 들어 있음. 

 

 

 

 

 

 

 

 

 

 

8. 로그인 시 가져올 정보 ( 동의항목) 선택 & server.js 코드에 추가 

kakao developers - 메뉴 '로그인' - 동의항목 체크 

** ID 를 잘 기억하기 !

 

 

 

server.js 추가 

app.get('/auth/kakao', (req,res)=>{
    const kakaoAuthURL = `https://kauth.kakao.com/oauth/authorize?
    client_id=${kakao.clientID}&redirect_uri=${kakao.redirectUri}
    &response_type=cod
    e&scope=profile,account_email`;
    res.redirect(kakaoAuthURL);
})

** URL 부분은 엔터없이 쭉 써야함. 위는 보기 편하게 엔터를 침 

scope=profile,account_email을 추가

get값은 원래 하나씩 보내지만 kakao쪽에서 알아서 처리할거라 괜춘 

 

 

server.on - > 다시 들어가보기 ! 

필수, 선택 동의 창이 나온다. - > 동의하고 계속하기 click -> 'ok'   send 완료 

 

 

 

 

9. access token을 가지고 kakao에 다시 요청 보내기  (회원 정보 가져오기) 

 -> 이 이후에는 db, session 저장만 하면 로그인 기능은 완료 된다 !

server.js

app.get('/auth/kakao/callback', async (req,res)=>{
    let token;
    try{
        token=await axios({
            method:'POST',
            url:'https://kauth.kakao.com/oauth/token',
            headers:{
                'content-type':'application/x-www-form-urlencoded'
            },
            data:qs.stringify({
                grant_type:'authorization_code',
                client_id:kakao.clientID,
                client_secret:kakao.clientSecret,
                redirectUri:kakao.redirectUri,
                code:req.query.code,
            })
        })
    }catch(err){
        res.json(err.data)
    }

    let user;
    try{
        user=await axios({
            method:'GET',
            url:'https://kapi.kakao.com/v2/user/me',
            headers:{
                Authorization:`Bearer ${token.data.access_token}`
            }
        })
    }catch(err){
        res.json(err.data)
    }

    console.log(user)
    res.send('ok');
})

data라는 속성 안에 우리가 필요한게 들어옴 

  data: {
    id: 1739030102,
    connected_at: '2021-05-21T02:27:37Z',
    properties: {
      nickname: '안뇽?',
      profile_image: 'http://k.kakaocdn.net/dn/kqi/btq85gK9hw/ecW5iwL9kUFf3JmBGK1VK/img_640x640.jpg',
      thumbnail_image: 'http://k.kakaocdn.net/dn/kqi/tq083gK9hw/ecW5iwL9kUFf6JmBG1VLK/img_110x110.jpg'
    },

 

안뜰경우 

1. 카카오 로그인 연결 해제하기

https://bottlecok.tistory.com/128

카톡으로 가입한 연결된 앱,게임 연결끊는 방법

2. 인터넷 설정 - 쿠키 삭제하기 

 

-> 다시 진행 -> 로그인부터 잘 나온다. 

 

 

 

10. session-express 다운, 코드 작성 

우리가 필요한 내용 : token, user 

일단 오늘은user만 넣는 방법 

 

$npm install express-session

server.js 코드 추가

const session=require('express-session');

app.use(session({
    secret:'aa',
    resave:true,
    secure:false,
    saveUninitialized:false,
}))

 

 

 

 

11. 가져온 data를 session에 담고 auth/info html에서 사용해보기 

server.js

    req.session.kakao=user.data;       //session 추가  
    res.redirect('/');                     // redirect('/') 로 수정 -> 그대로 있도록
})

session에 kakao라는 속성에 user.data 정보를 담음 

 

 

 

views-index.html  수정 

<a href="/auth/kakao">카카오 로그인</a>
<a href="/auth/info">회원정보</a>

 

 

server.js /auth/info 추가

app.get('/auth/info', (req,res)=>{
    console.log(req.session);
    let {nickname,profile_image} = req.session.kakao.properties
    res.render('info.html',{
        nickname,profile_image,
    });
})

 

 

 

info.html 만들기 

당신의 id는 {{nickname}}입니다. 
프로필 사진 
<img src="{{profile_image}}">

 

 

 

= > server on 하고 -> 로그인 클릭 -> 회원정보 -> nickname & profile_image 가 뜬다 !