react + node.js + passport-kakao 예제 - 카카오 로그인

1. node.js 설치

nodejs.org/ko/

Node.js

 

2. react 프로젝트 생성

ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

- 기본 react 프로젝트 생성 

$ mkdir reactexample
$ cd reactexample

$ npx create-react-app reactexample

- 웹브라우저 실행

$ npm start

 

3. node 프로젝트 생성

$ mkdir nodejsexample
$ cd nodejsexample

$ npm init
$ npm install express --save

- nodejsexample\app.js 파일 생성

const express = require('express')
const app = express()
const port = 4000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

$ node app.js

 

4. passport-kakao 설치

npm install passport-kakao

 

---

 

5. react, 로그인 버튼 설정

- reactexample\src\App.js 

import './App.css';

function App() {
  return (
    <div className="App">
      <a href="http://localhost:4000/oauth"><img src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg" /> </a>
    </div>
  );
}

export default App;

6. node, passport-kakao 설정

- nodejsexample\app.js

const express = require('express')
const passport = require('passport')
const KakaoStrategy = require('passport-kakao').Strategy

const app = express()
const port = 4000
app.use(passport.initialize())
app.use(passport.session())

passport.use(new KakaoStrategy({
        clientID : "REST API KEY를 입력하세요",
        clientSecret: "", // clientSecret을 사용하지 않는다면 넘기지 말거나 빈 스트링을 넘길 것
        callbackURL : "http://localhost:4000/oauth"
    },
    (accessToken, refreshToken, profile, done) => {
        // authorization 에 성공했을때의 액션
        console.log(`accessToken : ${accessToken}`)
        console.log(`사용자 profile: ${JSON.stringify(profile._json)}`)
        let user = {
            profile: profile._json,
            accessToken: accessToken
        }
        return done(null, user)
    }
))

passport.serializeUser(function (user, done) {
    console.log(`user : ${user.profile.id}`)
    done(null, user)
})
passport.deserializeUser(function (obj, done) {
    console.log(`obj : ${obj}`)
    done(null, obj)
})

app.get('/oauth', passport.authenticate('kakao'), function (req, res) {
    // 로그인 시작시 state 값을 받을 수 있음
    res.send(`id : ${req.user.profile.id} / accessToken : ${req.user.accessToken} `)
})

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

 

 

 

참고 사항 for passport-kakao

- KOE101 :  잘못된 앱키, clientID확인할 것.

- KOE006 : 잘못된 리다이렉트URI, callbackURL확인할 것.