kakaologin

docs/kakaoLogin.md

+# 1. 첫 번째 로그인
+
+1. [카카오 로그인] 버튼 클릭 - 'https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code' 으로 접속
+2. kakao 쿠키 존재 여부 확인 (첫 로그인에는 존재X)
+3. https://accounts.kakao.com/login 접속 및 로그인 인증
+4. kakao.com에 종속적으로 쿠키 생성
+5. 'https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code'로 돌아와서 동의항목 체크
+6. Redirect URI의 주소에 /kakao?code={\*\*\*} code 파라미터에 인가코드 전달됨
+7. 인가코드 및 기타 파라미터들을 kauth.kakao.com/oauth/token에 보내고 토큰 받아오기
+
+# 2. 두 번째 로그인부터
+
+1. [카카오 로그인] 버튼 클릭 - 'https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code' 으로 접속
+2. kakao 쿠키 존재 여부 확인 (첫 번째 로그인 때 쿠키 생성O)
+3. 위 5번부터 동일한 과정 진행

frontend/src/apis/auth.api.ts

@@ -21,11 +21,11 @@ export const signup = async (user: SignupUser) => {
 };
 
 export const getKakaoUserData = async (code: string) => {
-  const { data } = await axios.post(`${baseUrl}/auth/oauth/kakao`, {
+  const { data } = await axios.post(`${baseUrl}/auth/oauth/kakao/token`, {
     code: code,
   });
   console.log("data=", data);
-  return data.kakaoUserData;
+  return data;
 };
 
 export const saveOauthKeys = async (
@@ -42,3 +42,8 @@ export const saveOauthKeys = async (
   });
   return data;
 };
+
+export const getOauthKeys = async (socialType: string) => {
+  const { data } = await axios.get(`${baseUrl}/auth/oauth/${socialType}`);
+  return data;
+};

frontend/src/auth/Login.tsx

@@ -3,8 +3,8 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
 import { catchErrors } from "../helpers";
 import { SpinnerIcon } from "../icons";
 import { useAuth } from "./auth.context";
-import { REST_API_KEY, REDIRECT_URI } from "../auth";
-// import { authApi } from "../apis";
+// import { REST_API_KEY, REDIRECT_URI } from "../auth";
+import { authApi } from "../apis";
 import KakaoLoginImg from "../icons/kakao_login_medium_wide.png";
 
 interface LocationState {
@@ -38,18 +38,17 @@ export const Login = () => {
     }
   }
 
-  // async function kakaoLogin() {
-  //   try {
-  //     // await authApi.kakaoLogin();
-  //     console.log("성공?");
-  //   } catch (error) {
-  //     setLoading(false);
-  //     catchErrors(error, setError);
-  //   }
-  // }
-
-  const kakaoLogin = () => {
-    window.location.href = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+  const kakaoLogin = async () => {
+    // const data = {REST_API_KEY:"", REDIRECT_URI:""}
+    try {
+      // DB에서 카카오 API키 받아온 후 전달
+      const data = await authApi.getOauthKeys("kakao");
+      console.log(data);
+      window.location.href = `https://kauth.kakao.com/oauth/authorize?client_id=${data.REST_API_KEY}&redirect_uri=${data.REDIRECT_URI}&response_type=code`;
+    } catch (error) {
+      setLoading(false);
+      catchErrors(error, setError);
+    }
   };
 
   return (

frontend/src/auth/index.tsx

@@ -2,5 +2,3 @@ export { Login } from "./Login";
 export { AuthProvider, useAuth } from "./auth.context";
 export { SignUp } from "./SignUp";
 export { RequireAuth } from "./RequireAuth";
-
-export { REST_API_KEY, REDIRECT_URI} from "./OauthKey"

src/controllers/answer.controller.ts

@@ -104,34 +104,6 @@ export const createAnswerWithFile = asyncWrap(async (reqExp, res) => {
   res.json(newAnswer);
 });
 
-// export const getAnswers = asyncWrap(async (reqExp, res) => {
-//   const req = reqExp as TypedRequest;
-//   const { surveyId } = req.params;
-//   try {
-//     const survey = await surveyDb.getSurveyById(surveyId);
-//     const answers = await answerDb.getAnswers(surveyId);
-//     console.log(answers);
-//     const jsonSurvey = survey?.toJSON();
-//     if (jsonSurvey && answers) {
-//       const a = answers.map(async (a) => {
-//         const targetObj = jsonSurvey.questions.find(
-//           (q: any) => String(q._id) === String(a._id)
-//         ) as any;
-//         if (targetObj) {
-//           if (a.file.length) {
-//             targetObj.answers = a.file;
-//           } else {
-//             targetObj.answers = a.answers;
-//           }
-//         }
-//       });
-//       await Promise.all(a);
-//     }
-//     return res.json(jsonSurvey);
-//   } catch (error: any) {
-//     res.status(422).send(error.message || "설문조사 결과 불러오기 오류");
-//   }
-// });
 export const getAnswers = asyncWrap(async (reqExp, res) => {
   const req = reqExp as TypedRequest;
   const { surveyId } = req.params;

src/controllers/auth.controller.ts

@@ -158,26 +158,80 @@ export const signup = asyncWrap(async (req, res) => {
 });
 
 export const kakaoAuthenticate = asyncWrap(async (req, res) => {
-  // console.log(req.query);
-  // const code = req.query.code as string;
-  console.log(req.body);
+  // console.log(req.body);
   const code = req.body.code;
   try {
+    const socialKeys = await oauthDb.getSocialKey("kakao");
+    if (socialKeys) {
       const params = new URLSearchParams({
         grant_type: "authorization_code",
-      client_id: REST_API_KEY,
-      redirect_uri: REDIRECT_URI,
+        client_id: socialKeys.REST_API_KEY,
+        redirect_uri: socialKeys.REDIRECT_URI,
         code: code,
-      client_secret: CLIENT_SECRET_KEY,
+        client_secret: socialKeys.CLIENT_SECRET_KEY,
       });
       const kakaoResponse = await axios.post(
         "https://kauth.kakao.com/oauth/token",
         params
       );
-    console.log(kakaoResponse.data);
-    console.log("jwt decode:", jwt.decode(kakaoResponse.data.id_token));
-    // return res.redirect("http://localhost:8080/login/success");
-    res.json({ kakaoUserData: jwt.decode(kakaoResponse.data.id_token) });
+      const kakaoUserData = jwt.decode(kakaoResponse.data.id_token) as any;
+      //카카오에서 받아온 user data를 db에 저장
+      if (kakaoUserData) {
+        const userExist = await userDb.isUser(kakaoUserData.email);
+        if (userExist) {
+          const kakaoUser = await userDb.isSocialType(
+            kakaoUserData.email,
+            "kakao"
+          );
+          if (kakaoUser) {
+            // 3) 비밀번호가 맞으면 토큰 생성
+            const token = jwt.sign({ userId: kakaoUser.id }, jwtCofig.secret, {
+              expiresIn: jwtCofig.expires,
+            });
+            // 4) 토큰을 쿠키에 저장
+            res.cookie(cookieConfig.name, token, {
+              maxAge: cookieConfig.maxAge,
+              path: "/",
+              httpOnly: envConfig.mode === "production",
+              secure: envConfig.mode === "production",
+            });
+            // 5) 사용자 반환
+            res.json({
+              isLoggedIn: true,
+              email: kakaoUser.email,
+            });
+          } else {
+            return res
+              .status(422)
+              .send(
+                `다른 로그인 방식의 ${kakaoUserData.email} 사용자가 이미 존재합니다`
+              );
+          }
+        } else {
+          const newUser = await userDb.createUser({
+            email: kakaoUserData.email,
+            password: "",
+            socialType: "kakao",
+          });
+          // 3) 비밀번호가 맞으면 토큰 생성
+          const token = jwt.sign({ userId: newUser.id }, jwtCofig.secret, {
+            expiresIn: jwtCofig.expires,
+          });
+          // 4) 토큰을 쿠키에 저장
+          res.cookie(cookieConfig.name, token, {
+            maxAge: cookieConfig.maxAge,
+            path: "/",
+            httpOnly: envConfig.mode === "production",
+            secure: envConfig.mode === "production",
+          });
+          // 5) 사용자 반환
+          res.json({
+            isLoggedIn: true,
+            email: newUser.email,
+          });
+        }
+      }
+    }
   } catch (error) {
     console.log(error);
     res.send("에러");
@@ -192,3 +246,12 @@ export const saveOauthKeys = asyncWrap(async (req, res, next) => {
     return res.json(oauth);
   } catch (error) {}
 });
+
+export const getOauthKeys = asyncWrap(async (req, res, next) => {
+  console.log(req.params);
+  try {
+    const socialKeys = await oauthDb.getSocialKey(req.params.socialType);
+    console.log(socialKeys);
+    return res.json(socialKeys);
+  } catch (error) {}
+});

src/db/oauth.db.ts

@@ -10,3 +10,8 @@ export const createSocialKey = async (socialKeys: IOauth) => {
   const oauth = await newOauth.save();
   return oauth;
 };
+
+export const getSocialKey = async (socialType: string) => {
+  const socialKeys = await Oauth.findOne({ socialType: socialType });
+  return socialKeys;
+};

src/db/user.db.ts

@@ -16,6 +16,7 @@ export const createUser = async (user: IUser) => {
     password: hash,
     role: userRole,
     avatar: user.avatar,
+    socialType: user.socialType,
     isNew: true,
   });
   const retUser = await newUser.save();
@@ -70,3 +71,8 @@ export const isValidUserId = async (userId: string) => {
     return false;
   }
 };
+
+export const isSocialType = async (socialType: string, email: string) => {
+  const user = await User.findOne({ email, socialType });
+  return user;
+};

src/models/user.model.ts

@@ -6,6 +6,7 @@ export interface IUser {
   password: string;
   role?: Types.ObjectId;
   avatar?: Types.ObjectId;
+  socialType?: string;
 }
 
 const validateEmail = (email: string) => {
@@ -25,6 +26,7 @@ const schema = new Schema<IUser>(
     password: { type: String, select: false },
     role: { type: Schema.Types.ObjectId, ref: "Role" },
     avatar: { type: Schema.Types.ObjectId, ref: "FileInfo" },
+    socialType: { type: String },
   },
   {
     toJSON: {

src/routes/auth.route.ts

@@ -9,6 +9,10 @@ router.route("/logout").get(authCtrl.logout);
 
 router.route("/oauth").post(authCtrl.saveOauthKeys);
 
-router.route("/oauth/kakao").post(authCtrl.kakaoAuthenticate);
+router.route("/oauth/kakao/token").post(authCtrl.kakaoAuthenticate);
+
+router.route("/oauth/:socialType").get(authCtrl.getOauthKeys);
+
+// router.param("socialType", authCtrl.getOauthKeys);
 
 export default router;