kakaologin-사용자 정보를 얻어오기까지

.gitignore

@@ -2,4 +2,5 @@ node_modules/
 .vscode/
 package-lock.json
 dist/
-uploads/
\ No newline at end of file
+uploads/
+.env
\ No newline at end of file

frontend/.gitignore

 node_modules/
 .vscode/
 package-lock.json
-dist/
\ No newline at end of file
+dist/
+src/auth/OauthKey.tsx
\ No newline at end of file

frontend/src/MainRouter.tsx

@@ -18,6 +18,8 @@ import {
   ResultLayout,
 } from "./layouts";
 import { Home } from "./home";
+import { OAuthRedirectHandler } from "./auth/OAuthRedirectHandler";
+import { LoginSuccess } from "./commons/LoginSuccess";
 
 export const MainRouter = () => {
   return (
@@ -26,6 +28,8 @@ export const MainRouter = () => {
         <Route element={<BaseLayout />}>
           <Route path="/" element={<Home />}></Route>
           <Route path="/login" element={<Login />} />
+          <Route path="/login/success" element={<LoginSuccess />} />
+          <Route path="/oauth/kakao" element={<OAuthRedirectHandler />} />
           <Route path="/signup" element={<SignUp />} />
           <Route element={<ResultLayout />}>
             <Route path="/results/:surveyId" element={<ResultSurvey />} />

frontend/src/apis/auth.api.ts

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

frontend/src/auth/Login.tsx

@@ -3,6 +3,9 @@ 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 KakaoLoginImg from "../icons/kakao_login_medium_wide.png";
 
 interface LocationState {
   state: { from: string };
@@ -35,6 +38,20 @@ 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`;
+  };
+
   return (
     <div className="flex flex-col items-center">
       <div className="text-2xl mt-20">로그인</div>
@@ -88,6 +105,11 @@ export const Login = () => {
           </Link>
         </div>
       </form>
+      <div>
+        <button type="button" onClick={kakaoLogin}>
+          <img src={KakaoLoginImg} className="my-2"></img>
+        </button>
+      </div>
     </div>
   );
 };

frontend/src/auth/OAuthRedirectHandler.tsx

+import React, { useEffect, useState } from "react";
+import { authApi } from "../apis";
+
+export const OAuthRedirectHandler = () => {
+  const [message, setMessage] = useState(
+    "잠시만 기다려 주세요! 로그인 중입니다."
+  );
+  const [code, setCode] = useState("");
+
+  useEffect(() => {
+    setCode(new URL(window.location.href).searchParams.get("code") as string); //인가코드
+  }, []);
+
+  useEffect(() => {
+    const getKakaoUserData = async (code: string) => {
+      const userData = await authApi.getKakaoUserData(code);
+      console.log(userData);
+    };
+    if (code) {
+      console.log("code=", code);
+      getKakaoUserData(code);
+    }
+  }, [code]);
+
+  return (
+    <div>
+      <p>{message}</p>
+    </div>
+  );
+};

frontend/src/auth/index.tsx

@@ -2,3 +2,5 @@ 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"

frontend/src/commons/LoginSuccess.tsx

+import React from "react";
+import { Link } from "react-router-dom";
+
+export const LoginSuccess = () => {
+  return (
+    <div className="flex flex-col mt-10 justify-center text-center text-5xl">
+      <h1 className="text-4xl">로그인이 완료되었습니다.</h1>
+      <Link to={"/"} className="mt-4">
+        홈으로
+      </Link>
+    </div>
+  );
+};

package.json

@@ -34,8 +34,10 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "bcryptjs": "^2.4.3",
     "cookie-parser": "^1.4.6",
+    "dotenv": "^16.0.3",
     "express": "^4.18.1",
     "formidable": "^2.0.1",
     "jsonwebtoken": "^8.5.1",

src/app.ts

 import cookieParser from "cookie-parser";
+import * as dotenv from "dotenv";
+dotenv.config();
 import express, { Request, Response, NextFunction } from "express";
 import path from "path";
 import router from "./routes";
-
 const app = express();
 
 app.use(express.json());

src/controllers/auth.controller.ts

@@ -6,12 +6,17 @@ import isEmail from "validator/lib/isEmail";
 import { asyncWrap } from "../helpers";
 import { roleDb, userDb } from "../db";
 import { jwtCofig, envConfig, cookieConfig } from "../config";
+import axios from "axios";
 
 export interface TypedRequestAuth<T> extends Request {
   auth: T;
   user: any;
 }
 
+const REST_API_KEY = process.env.REST_API_KEY as string;
+const REDIRECT_URI = process.env.REDIRECT_URI as string;
+const CLIENT_SECRET_KEY = process.env.CLIENT_SECRET_KEY as string;
+console.log("restapikey", REST_API_KEY);
 /**
  * 함수를 호출하기 전에 req에 user 정보를 지정해야 합니다.
  */
@@ -72,7 +77,9 @@ export const login = asyncWrap(async (req, res) => {
   const user = await userDb.findUserByEmail(email, true);
   console.log("user =", user);
   if (!user) {
-    return res.status(422).send(`${email} 사용자가 존재하지않습니다 회원가입을 해주세요`);
+    return res
+      .status(422)
+      .send(`${email} 사용자가 존재하지않습니다 회원가입을 해주세요`);
   }
   // 2) 비밀번호 확인
   const passwordMatch = await bcrypt.compare(password, user.password);
@@ -149,3 +156,30 @@ export const signup = asyncWrap(async (req, res) => {
   // 5) 사용자 반환
   res.json(newUser);
 });
+
+export const kakaoAuthenticate = asyncWrap(async (req, res) => {
+  // console.log(req.query);
+  // const code = req.query.code as string;
+  console.log(req.body);
+  const code = req.body.code;
+  try {
+    const params = new URLSearchParams({
+      grant_type: "authorization_code",
+      client_id: REST_API_KEY,
+      redirect_uri: REDIRECT_URI,
+      code: code,
+      client_secret: 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) });
+  } catch (error) {
+    console.log(error);
+    res.send("에러");
+  }
+});

src/routes/auth.route.ts

@@ -5,6 +5,9 @@ const router = express.Router();
 
 router.route("/signup").post(authCtrl.signup);
 router.route("/login").post(authCtrl.login);
+router.route("/login/kakao").get(authCtrl.kakaoLogin);
 router.route("/logout").get(authCtrl.logout);
 
+router.route("/oauth/kakao").post(authCtrl.kakaoAuthenticate);
+
 export default router;