[Node.js] Kakao 소셜로그인 구현

먼저, https://developers.kakao.com에 들어가 시작하기 버튼을 누르고

 

애플리케이션을 추가한다.

 

애플리케이션 추가하기 버튼을 누르면 다음과 같은 화면이 나오는데, 앱 이름과 사업자명을 입력하고

저장버튼을 누른다.

 

그러면 이제 다음과 같은 화면이 나오게 된다.

REST API키는 따로 저장해두고,

왼쪽 카테고리를 보면 카카오 로그인이 있을 것이다.

카카오 로그인을 누르고나서,

 

카카오 로그인 밑에, 활성화 설정이 있는데 이 부분의 상태값을 ON으로 바꿔준다.

그리고 밑쪽의 Redirect URI를 설정해준다.

Redirect URL를 설정해주고(Local환경에서 테스트 해보는거라 저렇게 했다.)

동의항목을 누른 후

프로필정보 중 닉네임을 클릭하고

.

다음과 같이 필수동의로 바꿔준다. 그다음

앱설정에 플랫폼으로 들어가서 ,

웹 설정을 해주도록 한다.

이제 Kakao 개발자 플랫폼에서 진행할 일은 거의 끝인데

마지막 단계로,

제품설정의 보안탭으로 가서 client Secret키를 발급 받는다.

 

이제 서버를 구현해보면,

const express = require("express");
const connect = require("./schemas/index");
const cors = require("cors");
const app = express();
// const passport = require("passport")
// const session = require("express-session")
// const cookie = require("cookie-session")
// const Keygrip = require("keygrip")
const nunjucks = require('nunjucks');
const axios = require('axios');
const qs = require('qs');
const session = require('express-session');

const usersRouter = require("./routes/users");
const moviesRouter = require("./routes/movies");
const commentsRouter = require("./routes/comments");
const port = 5000;
// require("./config/passport")
// require("./schemas/google")
require("dotenv").config()

app.use(cors({
    exposedHeaders:["authorization"],
    origin: '*', //출처 허용 옵션: 테스트용 - 전부허용!
    credentials: 'true', // 사용자 인증이 필요한 리소스(쿠키..등) 접근
  }));

connect();

app.use(express.static("static"));
app.use(express.json()); // json형태의 데이터를 parsing하여 사용할 수 있게 만듦.
app.use(express.urlencoded({extended:false}));
app.use("/users", [usersRouter]);
app.use("/movies", [moviesRouter]);
app.use("/comments", [commentsRouter]);
app.set('view engine','html');
nunjucks.configure('views',{
    express:app,
})
app.use(session({
  secret:'ras',
  resave:true,
  secure:false,
  saveUninitialized:false,
}))

const kakao = {
  clientID: 'd8f2c1ac25b1384520ae26ab15166d81 ',
  clientSecret: 'dfrMhWE4g7VY3mNCOWUpj7RIjBK54MKE',
  redirectUri: 'http://localhost:5000/auth/kakao/callback'
}

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);
})
// app.set('view engine', 'ejs')
// app.use(cookie({
//   maxAge : 30 * 24 * 60 * 60 * 1000, // 30days
//   keys: new Keygrip(['key1'], 'SHA384', 'base64'), /// it will randomly pick one if many
//   })
// )
// app.use(session({secret:'MySecret', resave: false, saveUninitialized:true}));
// app.use(passport.initialize());
// app.use(passport.session());

app.get('/auth/kakao/callback', async(req,res)=>{
  //axios>>promise object
  try{//access토큰을 받기 위한 코드
  token = await axios({//token
      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,//결과값을 반환했다. 안됐다.
      })//객체를 string 으로 변환
  })
}catch(err){
  res.json(err.data);
}
//access토큰을 받아서 사용자 정보를 알기 위해 쓰는 코드
  let user;
  try{
      console.log(token);//access정보를 가지고 또 요청해야 정보를 가져올 수 있음.
      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.send('success');
})

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

app.get(kakao.redirectUri)

app.listen(port, () => {
    console.log(port, "포트로 서버가 켜졌습니다.");
  });

대충 이렇게 나오는데, 나는 포스트맨으로 요청을 실험할 예정이다.

 

포스트맨의 Autorization 카테고리에 들어가서 Type을 OAuth 2.0으로 바꿔준다.

그리고 나서 다음의 Configure New Token을 통해 토큰을 발급받으면 되는데,

Token Name : 적고 싶은 이름을 적어준다.

 

Callback URL : Authorization Code 방식으로 토큰 발급을 받는 url을 적는 곳이다.                                                              위에서 Redirect URI 부분에 추가가 되있는 uri를 사용해야 한다. 만약 되지 않았다면, 006 Error 발생한다.

http://localhost:5000/auth/kakao/callback

콜백 URL은 서버상으로도 설정이 되있어야 한다.

 

Auth URL : OAUTH를 지원해 주는 서버에 로그인을 하기 위해 적는다.       

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

Access Token URL : 발급 받은 인증 코드를 포함하여 request 하여 response해서 token을 받기 위한 URL이다.

https://kauth.kakao.com/oauth/token

Client ID : Kakao Developer에서 확인한 REST API Key

 

Client Secret : Kakao Developer에서 발급받은 보안 Client Secret Key

 

이제 전부 제대로 입력하고, Get New Access Token이라는 주황색 버튼을 누르면 다음과 같은 이미지가 나타난다.

 

위의 이미지가 뜨고, 로그인 하고 나면 토큰이 발급될 것이다.

 

이제 토큰이 들어와 있는 창에서 url에다가 https://kapi.kakao.com/v1/user/access_token_info라고 입력하게 되면,

 

이런 이미지가 등장하고, https://kapi.kakao.com/v2/user/me를 통해 데이터를 받아오게 되면,

동의항목에서 설정한 user info가 나타나게 될 것이다.

 

일단 프론트페이지와 연결해보는건 그 다음으로... 추가하겠습니다.