카카오 로그인 맛보기

server.js

const express = require('express');
const app = express(); 
const nunjucks = require('nunjucks'); 
const axios = require('axios'); 
const qs = require('qs'); 
const session = require('express-session'); 

//nunjuck 설정 
app.set('veiw engine','html'); 
nunjucks.configure('views',{ 
  express:app, 
})

//session 설정 
app.use(session({ 
  secret:'123124',
  resave:false, 
  secure:false, 
  saveUninitialized:false, 
}))


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


app.listen(3000,()=>[ 
  console.log(`hello port 3000`)
])

이렇게 초기 설정해주고. 

 

 

---

 

카카오 디펠로퍼스에 가서 애플리케이션 추가 

---

 

server.js

//session 설정 
app.use(session({ 
  secret:'123124',
  resave:false, 
  secure:false, 
  saveUninitialized:false, 
}))

// 값을 쓰기 쉽게 kakao 객체에 담아줌 
const kakao = { 
  clientID: // 앱 누르면 바로 나오는 페이지에서 REST API 키
  clientSecret: //보안탭에서 클라이언트 시크릿 키 받고. 
  redirectUri: 'http://localhost:3000/auth/kakao/callback', 

}

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

값을 쓰기 쉽게 kakao라는 객체에 담아줌. 

 

---

 

views 폴더에 index.html

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

 

 

---

카카오 로그인 탭에서 

로그인 설정도 해주고. 

Redirect URI 에, 위에 카카오 객체에 담아줬던 리다이렉트유알아이를 담아줌. 

 

---

동의 항목탭에서 아래와 같이 설정해줌. 

 

---

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=code&scope=profile,account_email`; 
  res.redirect(kakaoAuthURL); 
})

여기까지 하면 Cannot GET /auth/kakao/callback 이 나온다. 이부분은 

아까 위에서 정했던. redirect URi : http://localhost:3000/auth/kakao/callback 로 이동하는 거.

이제  /auth/kakao/callback 부분을 만들어주면됨. 

---

app.get('/auth/kakao/callback', async (req,res)=>{ 
  //여기서 axios를 사용한다. 
  //먼저 토큰을 만들어 주고, 
  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(e){ 
    res.json(e.data);
  }

  console.log(token);

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

  console.log(user);

  req.session.kakao= user.data; //세션에 담아주기. 
  //req.session = {  ['kakao]' : user.data, }
  res.redirect('/'); 
})

---

server.js 

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

이렇게 하고.   info.html 도 만들어주면됨^^