passport.js : (3) kakao 로그인

passport.js : (2) 회원가입과 local 로그인

여기에서 이어서 합니다. 또한, 아래 passport를 참고해보는 것도 좋습니다. "한국어로 되어있습니다"

passport-kakao

 

passport의 방법은 다 비슷합니다. kakao를 예시로 들면 이런 방법으로 처리됩니다.

 

1. /auth/kakao => Get 명령으로 passport.authenticate("kakao")를 트리거한다.

2. passport.authenticate는 자동으로 passport.use(new KakaoStrategy(...))을 찾아 인증을 요청한다.

3. 인증을 담당하는 회사(여기서는 kakao)에서 인증 과정을 마치면 지정한 callbackURL로 정보를 반환함과 동시에

4. passport.use(new KakaoStrategy(...))의 콜백 부분이 실행된다. 여기에서 인증, 유저 정보 Db 저장 등을 처리하면 된다.

 

 

 

 

 - 설치 및 developers 등록

 

npm i passport-kakao

 

카카오 소셜 로그인을 하기 위해서는 developers 사이트에 가서 가입 후 플랫폼 등록 및 사용 신청을 해야 합니다. 이는 kakao 뿐만 아니라 google, facebook도 마찬가지입니다.

 

Kakao Developers

 

 

앱 등록 이후에는 REST API키를 dotenv에 등록시켜 clientId로 사용한다. 이후 코드에서 살펴보자.

callback 주소는 redirect라는 이름으로 주어진다. /oauth로 끝나니 잘 찾아보자.

 

카카오 로그인을 위해 활성화도 지정하고 프로필을 반환할 URL도 등록해야한다. 또한, profile의 무엇을 사용할 것인지 사용자에게 동의를 받을 수 있는 정도도 설정할 수 있으니 설정하자.

 

 

 

1. 카카오톡 로그인 버튼을 누르면 /auth/kakao로 이동하여 로그인 요청

2. 카카오 로그인 (콜백 함수 실행 안 됨)

3. /auth/kakao/callback으로 프로필 반환

4. 콜백 함수 실행 됨

 

 

---

 

routes/auth.js

..상단 내용 생략

// 1. /auth/kakao로 로그인 요청
authRouter.get("/kakao", passport.authenticate("kakao"));

// 3. /auth/kakao/callback으로 프로필 반환
authRouter.get(
  "/kakao/callback",
  // done에 오류값이 전달되면 "/"로 리다이렉트합니다.
  passport.authenticate("kakao", { failureRedirect: "/" }),
  (req, res) => {
    res.redirect("/");
  }
);

 

./passport.js

 

import { Strategy as KakaoStrategy } from "passport-kakao";
import { User } from "../models";

// 2. 카카오 로그인 (콜백 함수 실행 안 됨)
// 4. 콜백 함수 실행 됨
passport.use(
  new KakaoStrategy(
    {
      clientID: process.env.KAKAO_CLIENT_ID,
      clientSecret: "", // clientSecret을 사용하지 않는다면 넘기지 말거나 빈 스트링을 넘길 것
      callbackURL: "http://localhost:5000/oauth",
    },
    async (_, __, profile, cb) => {
      const {
        id,
        username: name,
        _json: {
          properties: { profile_image },
          kakao_account: { email },
        },
      } = profile;
      try {
        const user = await User.findOne({ email });
        if (user) {
          user.kakaoId = id;
          user.save();
          return cb(null, user);
        } else {
          const newUser = await User.create({
            email,
            name,
            kakaoId: id,
            avartarUrl: profile_image,
          });
          return cb(null, newUser);
        }
      } catch (error) {
        return cb(error);
      }
    }
  )
);

 

 

---

 

 

kakao의 profile은 다음과 같이 생겼습니다.

{
  "provider": "kakao",
  "id": 111,
  "username": "이름",
  "displayName": "이름",
  "_raw": "{\"id\":111,\"connected_at\":\"생성된 날짜\",
            \"properties\":{\"nickname\":\"이름\",
            \"profile_image\":\"이미지 주소\",
            \"thumbnail_image\":\"이미지 주소\"},
            \"kakao_account\":{
                \"profile_needs_agreement\":false,\"profile\":
                    {\"nickname\":\"이름\",\"thumbnail_image_url\":\"이미지 주소\",\"profile_image_url\":\"이미지 주소\"},
                    \"has_email\":true,\"email_needs_agreement\":false,\"is_email_valid\":true,
                    \"is_email_verified\":true,\"email\":\"이메일주소\"}}",
  "_json": {
    "id": 111,
    "connected_at": "생성된 날짜",
    "properties": {
      "nickname": "이름",
      "profile_image": "이미지 주소",
      "thumbnail_image": "이미지 주소"
    },
    "kakao_account": {
      "profile_needs_agreement": false,
      "profile": [Object],
      "has_email": true,
      "email_needs_agreement": false,
      "is_email_valid": true,
      "is_email_verified": true,
      "email": "이메일 주소"
    }
  }
}