test(#72): 카카오 소셜 로그인, CORS 해결전

DaengPlace · Dec 10, 2024 · c33ba3f · c33ba3f
1 parent d0d2abf
commit c33ba3f
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 12 deletions.
diff --git a/src/apis/auth/postGoogleToken.jsx b/src/apis/auth/postGoogleToken.jsx
@@ -0,0 +1,20 @@
+"use client";
+
+import axios from "axios";
+
+const baseURL = process.env.NEXT_PUBLIC_APP_BASE_URL;
+
+export async function postGoogleToken(google_accessToken) {
+  try {
+    const response = await axios.get(`${baseURL}/google/callback`, {
+      headers: {
+        Authorization: `Bearer ${google_accessToken}`,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error("Failed to login with Google: " + error);
+  }
+}
+
+export default postGoogleToken;
diff --git a/src/apis/auth/postKakaoToken.jsx b/src/apis/auth/postKakaoToken.jsx
@@ -11,7 +11,7 @@ export async function postKakaoToken(kakao_accessToken) {
         Authorization: `Bearer ${kakao_accessToken}`,
       },
     });
-    return response.data.accessToken;
+    return response.data;
   } catch (error) {
     throw new Error("Failed to login with Kakao: " + error);
   }

diff --git a/src/app/auth/google/page.jsx b/src/app/auth/google/page.jsx
@@ -0,0 +1,67 @@
+"use client";
+
+import postGoogleToken from "@/apis/auth/postGoogleToken";
+import axios from "axios";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useAuthStore } from "@/stores/authStore";
+
+const GoogleLogin = () => {
+  const router = useRouter();
+  const { setTokens } = useAuthStore();
+  const CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
+  const REDIRECT_URI = process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI;
+
+  useEffect(() => {
+    const getToken = async () => {
+      const AUTHORIZATION_CODE = new URL(window.location.href).searchParams.get(
+        "code"
+      );
+      if (!AUTHORIZATION_CODE) {
+        console.error("Authorization Code is missing");
+        return;
+      }
+
+      try {
+        const params = new URLSearchParams();
+        params.append("client_id", CLIENT_ID);
+        params.append(
+          "client_secret",
+          process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET
+        );
+        params.append("redirect_uri", REDIRECT_URI);
+        params.append("code", AUTHORIZATION_CODE);
+
+        const response = await axios.post(
+          `https://oauth2.googleapis.com`,
+          params,
+          {
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+            },
+          }
+        );
+
+        const google_accessToken = response.data.access_token;
+        const data = await postGoogleToken(google_accessToken);
+
+        if (data.accessToken) {
+          router.push("/signin");
+
+          setTokens({
+            accessToken: data.accessToken,
+            refreshToken: data.refreshToken,
+          });
+        }
+      } catch (error) {
+        console.error("Failed to process Google login:", error);
+        alert("로그인에 실패했습니다. 다시 시도해주세요.");
+      }
+    };
+    getToken();
+  }, []);
+
+  return null;
+};
+
+export default GoogleLogin;
diff --git a/src/app/auth/page.jsx → src/app/auth/kakao/page.jsx b/src/app/auth/page.jsx → src/app/auth/kakao/page.jsx
@@ -6,11 +6,11 @@ import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { useAuthStore } from "@/stores/authStore";
 
-const Auth = () => {
+const KakaoLogin = () => {
   const router = useRouter();
   const { setTokens } = useAuthStore();
-  const REST_API_KEY = process.env.NEXT_PUBLIC_REST_API_KEY;
-  const REDIRECT_URI = process.env.NEXT_PUBLIC_REDIRECT_URI;
+  const REST_API_KEY = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;
+  const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
 
   useEffect(() => {
     const getToken = async () => {
@@ -40,6 +40,7 @@ const Auth = () => {
         );
 
         const kakao_accessToken = response.data.access_token;
+        console.log(kakao_accessToken);
         const data = await postKakaoToken(kakao_accessToken);
         console.log(data);
 
@@ -62,4 +63,4 @@ const Auth = () => {
   return null;
 };
 
-export default Auth;
+export default KakaoLogin;
diff --git a/src/app/page.js b/src/app/page.js
@@ -7,12 +7,16 @@ import { useRouter } from "next/navigation";
 export default function Home() {
   const router = useRouter();
 
-  const REST_API_KEY = process.env.NEXT_PUBLIC_REST_API_KEY;
-  const REDIRECT_URI = process.env.NEXT_PUBLIC_REDIRECT_URI;
-  const KAKAO_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+  const KAKAO_REST_API_KEY = process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY;
+  const KAKAO_REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI;
+  const KAKAO_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&response_type=code`;
 
-  const handleKakaoLogin = () => {
-    window.location.href = KAKAO_URL;
+  const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
+  const GOOGLE_REDIRECT_URI = process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI;
+  const GOOGLE_URL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${GOOGLE_CLIENT_ID}&redirect_uri=${GOOGLE_REDIRECT_URI}&response_type=code&scope=https://www.googleapis.com/auth/userinfo.email`;
+
+  const handleLogin = (url) => {
+    window.location.href = url;
   };
 
   return (
@@ -37,14 +41,14 @@ export default function Home() {
           width={300}
           height={50}
           alt="kakao_login_btn"
-          onClick={handleKakaoLogin}
+          onClick={() => handleLogin(KAKAO_URL)}
         />
         <Image
           src="/assets/common/google_login_btn.svg"
           width={300}
           height={50}
           alt="google_login_btn"
-          onClick={() => router.push("/signin")} // 임시
+          onClick={() => handleLogin(GOOGLE_URL)}
         />
       </ButtonBox>
     </Container>