From 8424865d6a6f311af53e59b7268b6204e02a2db3 Mon Sep 17 00:00:00 2001 From: "SK\\ssssk" Date: Wed, 10 Jul 2024 09:45:06 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20key=20=EB=B3=B4=EC=9D=B4=EB=8A=94=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auth/SignUp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/auth/SignUp.tsx b/src/components/auth/SignUp.tsx index 70184500..349025f4 100644 --- a/src/components/auth/SignUp.tsx +++ b/src/components/auth/SignUp.tsx @@ -30,7 +30,7 @@ const SignUp = () => { className={ "relative mb-[0.75rem] flex h-[2.875rem] w-full items-center justify-center rounded-3xl bg-[#FEE500]" } - href={`https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.KAKAO_REST_API_KEY}&redirect_uri=${process.env.KAKAO_REDIRECT_URL}`} + href="/api/auth/kakao" >
{"kakao-logo-image"} From c14c8b4fd03fb92addbebb27ca89d56f5b71c80d Mon Sep 17 00:00:00 2001 From: "SK\\ssssk" Date: Wed, 10 Jul 2024 12:40:32 +0900 Subject: [PATCH 2/4] =?UTF-8?q?google=20oauth=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/api/auth/google/route.ts | 6 +++ src/app/auth/loading/google/page.tsx | 9 ++++ src/containers/auth/AuthGoogleContainer.tsx | 51 +++++++++++++++++++++ 3 files changed, 66 insertions(+) create mode 100644 src/app/api/auth/google/route.ts create mode 100644 src/app/auth/loading/google/page.tsx create mode 100644 src/containers/auth/AuthGoogleContainer.tsx diff --git a/src/app/api/auth/google/route.ts b/src/app/api/auth/google/route.ts new file mode 100644 index 00000000..d9a9f728 --- /dev/null +++ b/src/app/api/auth/google/route.ts @@ -0,0 +1,6 @@ +import { NextResponse } from "next/server"; + +export function GET() { + const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${process.env.GOOGLE_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URL}&scope=email profile&prompt=select_account`; + return NextResponse.redirect(googleAuthUrl); +} diff --git a/src/app/auth/loading/google/page.tsx b/src/app/auth/loading/google/page.tsx new file mode 100644 index 00000000..67f2c5f2 --- /dev/null +++ b/src/app/auth/loading/google/page.tsx @@ -0,0 +1,9 @@ +import AuthGoogleContainer from "@/containers/auth/AuthGoogleContainer"; + +const Page = () => { + + return ( + + ); +}; +export default Page diff --git a/src/containers/auth/AuthGoogleContainer.tsx b/src/containers/auth/AuthGoogleContainer.tsx new file mode 100644 index 00000000..fe730efb --- /dev/null +++ b/src/containers/auth/AuthGoogleContainer.tsx @@ -0,0 +1,51 @@ +"use client"; + +import AuthLoading from "@/components/auth/AuthLoading"; +import useAuthStore from "@/store/authStore"; +import UrlQueryStringToObject from "@/utils/UrlQueryStringToObject"; +import { useRouter } from "next/navigation"; +import { useEffect } from "react"; + +const AuthGoogleContainer = () => { + const router = useRouter(); + const authStore = useAuthStore(); + + useEffect(() => { + const _queryStringObject = UrlQueryStringToObject<{ + [key: string]: string; + }>(window.location.href); + const googleLogin = async () => { + try { + const response = await fetch( + `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/oauth2/login?type=google&redirectUrl=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URL}&code=${_queryStringObject?.code}`, + { + method: "GET", + headers: { + "Content-Type": "application/json;charset=utf-8", + "Access-Control-Allow-Origin": "*", + }, + credentials: "include", + }, + ); + + if (!response.ok) { + throw new Error("Network response was not ok"); + } + + // const res = await response.json(); + // res.accessToken 받아서 사용자 정보 받아오고 홈으로 이동 + authStore.setUser({ nickname: "성공" }); + router.push("/"); + } catch (error) { + console.error("로그인 실패", error); + router.push("/auth/signin"); + } + }; + + googleLogin(); + }, []); + + return ; +}; + +export default AuthGoogleContainer; From ec73ac71c469c881d7d463a9aeb3e2ee7e8dd2ff Mon Sep 17 00:00:00 2001 From: "SK\\ssssk" Date: Wed, 10 Jul 2024 12:40:52 +0900 Subject: [PATCH 3/4] =?UTF-8?q?google=20key=20=EB=B3=B4=EC=9D=B4=EB=8A=94?= =?UTF-8?q?=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auth/SignIn.tsx | 2 +- src/components/auth/SignUp.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/auth/SignIn.tsx b/src/components/auth/SignIn.tsx index f15b08fc..f5959f6a 100644 --- a/src/components/auth/SignIn.tsx +++ b/src/components/auth/SignIn.tsx @@ -43,7 +43,7 @@ const SignIn = () => { className={ "relative mb-[3rem] flex h-[2.875rem] w-full items-center justify-center rounded-3xl outline outline-[1px] outline-offset-[-1px] outline-gray3" } - href={`https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${process.env.GOOGLE_CLIENT_ID}&redirect_uri=${process.env.GOOGLE_REDIRECT_URL}&scope=email profile&prompt=select_account`} + href="/api/auth/google" >
{ className={ "relative mb-[0.75rem] flex h-[2.875rem] w-full items-center justify-center rounded-3xl bg-[#FEE500]" } - href="/api/auth/kakao" + href="/api/auth/kakao" >
{"kakao-logo-image"} @@ -43,7 +43,7 @@ const SignUp = () => { className={ "relative mb-[1.75rem] flex h-[2.875rem] w-full items-center justify-center rounded-3xl outline outline-[1px] outline-offset-[-1px] outline-gray3" } - href={`https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${process.env.GOOGLE_CLIENT_ID}&redirect_uri=${process.env.GOOGLE_REDIRECT_URL}&scope=email profile&prompt=select_account`} + href="/api/auth/google" >
Date: Wed, 10 Jul 2024 12:41:08 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=EB=B3=80=EC=88=98=EB=AA=85=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/api/auth/kakao/route.ts | 2 +- src/containers/auth/AuthKaKaoContainer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/api/auth/kakao/route.ts b/src/app/api/auth/kakao/route.ts index f07da979..36941a54 100644 --- a/src/app/api/auth/kakao/route.ts +++ b/src/app/api/auth/kakao/route.ts @@ -1,6 +1,6 @@ import { NextResponse } from "next/server"; export function GET() { - const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NODE_ENV === "development" ? process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY : process.env.KAKAO_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}`; + const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.KAKAO_REST_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URL}`; return NextResponse.redirect(kakaoAuthUrl); } diff --git a/src/containers/auth/AuthKaKaoContainer.tsx b/src/containers/auth/AuthKaKaoContainer.tsx index e2bf16b4..6e54f45f 100644 --- a/src/containers/auth/AuthKaKaoContainer.tsx +++ b/src/containers/auth/AuthKaKaoContainer.tsx @@ -17,7 +17,7 @@ const AuthKaKaoContainer = () => { const kakaoLogin = async () => { try { const response = await fetch( - `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/oauth2/login?type=kakao&redirectUrl=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI}&code=${_queryStringObject?.code}`, + `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/oauth2/login?type=kakao&redirectUrl=${process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URL}&code=${_queryStringObject?.code}`, { method: "GET", headers: {