From 16299f7f131ab60eb8e2ac673affc02253cd81c9 Mon Sep 17 00:00:00 2001 From: serin-B Date: Mon, 5 Dec 2022 11:41:30 +0900 Subject: [PATCH 01/11] [FE] test: google oauth --- front/src/pages/SignInPage/SignInPage.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/front/src/pages/SignInPage/SignInPage.js b/front/src/pages/SignInPage/SignInPage.js index 9049b920..9cae714c 100644 --- a/front/src/pages/SignInPage/SignInPage.js +++ b/front/src/pages/SignInPage/SignInPage.js @@ -19,6 +19,7 @@ import { import { signInAsync } from 'store/modules/authSlice'; import SignInTextFields from './SignInTextFields'; import { setOpenSnackbar } from 'store/modules/snackbarSlice'; +import axios from 'api/axios'; const LoginErrorMsgStyled = styled.div` font-size: 0.75rem; @@ -81,6 +82,15 @@ const SignInPage = () => { }); }; + const handleGoogleOauth = () => { + axios + .get('http://localhost:8080/oauth2/authorization/google') + .then(() => { + console.log('구글 로그인 되나?'); + }) + .catch((error) => console.log(error)); + }; + return ( @@ -125,6 +135,7 @@ const SignInPage = () => { + ); }; From ff570d80eb955dd1f364a930ec8e2483a55346c2 Mon Sep 17 00:00:00 2001 From: serin-B Date: Tue, 6 Dec 2022 19:04:43 +0900 Subject: [PATCH 02/11] =?UTF-8?q?[FE]test:=20Oauth=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/RoutesComponent.js | 2 ++ front/src/pages/SignInPage/SignInPage.js | 19 ++++++++++++------- front/src/pages/TestPage/OauthTestPage.js | 18 ++++++++++++++++++ 3 files changed, 32 insertions(+), 7 deletions(-) create mode 100644 front/src/pages/TestPage/OauthTestPage.js diff --git a/front/src/components/RoutesComponent.js b/front/src/components/RoutesComponent.js index 1dead1e3..87c792eb 100644 --- a/front/src/components/RoutesComponent.js +++ b/front/src/components/RoutesComponent.js @@ -2,6 +2,7 @@ import { Routes, Route, Navigate } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { selectFirstLogin, selectIsLogin } from 'store/modules/authSlice'; import LandingPage from 'pages/LandingPage'; +import OauthTestPage from 'pages/TestPage/OauthTestPage'; import { MainPage, SignUpPage, @@ -138,6 +139,7 @@ const RoutesComponent = () => { } /> } /> } /> + } /> ); diff --git a/front/src/pages/SignInPage/SignInPage.js b/front/src/pages/SignInPage/SignInPage.js index 9cae714c..2730b77e 100644 --- a/front/src/pages/SignInPage/SignInPage.js +++ b/front/src/pages/SignInPage/SignInPage.js @@ -19,7 +19,6 @@ import { import { signInAsync } from 'store/modules/authSlice'; import SignInTextFields from './SignInTextFields'; import { setOpenSnackbar } from 'store/modules/snackbarSlice'; -import axios from 'api/axios'; const LoginErrorMsgStyled = styled.div` font-size: 0.75rem; @@ -82,13 +81,18 @@ const SignInPage = () => { }); }; + const handleKakaoOauth = () => { + const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${ + process.env.REACT_APP_KAKAO_CLIENTID + }&redirect_uri=${'http://localhost:3000/oauth/kakao'}&response_type=code&prompt=login`; + window.location.replace(KAKAO_AUTH_URL); + }; + const handleGoogleOauth = () => { - axios - .get('http://localhost:8080/oauth2/authorization/google') - .then(() => { - console.log('구글 로그인 되나?'); - }) - .catch((error) => console.log(error)); + const GOOGLE_AUTH_URL = `https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=${ + process.env.REACT_APP_GOOGLE_CLIENTID + }&scope=email%20profile&state=Xm-I8A9bXAsM-ZWgygWBbjfNIsLs-Z_80iyaZ83VIfA%3D&redirect_uri=${'http://localhost:3000/oauth/google'}`; + window.location.replace(GOOGLE_AUTH_URL); }; return ( @@ -135,6 +139,7 @@ const SignInPage = () => { + ); diff --git a/front/src/pages/TestPage/OauthTestPage.js b/front/src/pages/TestPage/OauthTestPage.js new file mode 100644 index 00000000..39930780 --- /dev/null +++ b/front/src/pages/TestPage/OauthTestPage.js @@ -0,0 +1,18 @@ +import axios from 'axios'; +import { useEffect } from 'react'; + +const OauthTestPage = () => { + useEffect(() => { + const path = location.pathname; + const code = location.search; + console.log(code); + axios.get(`http://localhost:8080${path}${code}`); + }, []); + return ( +
+

Oauth 로그인 테스트페이지입니다

+
+ ); +}; + +export default OauthTestPage; From 301fd59aa5c45900d74ff768b59d7d65cd460a76 Mon Sep 17 00:00:00 2001 From: serin-B Date: Tue, 6 Dec 2022 21:36:12 +0900 Subject: [PATCH 03/11] =?UTF-8?q?[FE]=20=EC=B9=B4=EC=B9=B4=EC=98=A4?= =?UTF-8?q?=ED=86=A1=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20?= =?UTF-8?q?=EC=A3=BC=EC=86=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/pages/SignInPage/SignInPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/src/pages/SignInPage/SignInPage.js b/front/src/pages/SignInPage/SignInPage.js index 2730b77e..b7844c11 100644 --- a/front/src/pages/SignInPage/SignInPage.js +++ b/front/src/pages/SignInPage/SignInPage.js @@ -84,14 +84,14 @@ const SignInPage = () => { const handleKakaoOauth = () => { const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${ process.env.REACT_APP_KAKAO_CLIENTID - }&redirect_uri=${'http://localhost:3000/oauth/kakao'}&response_type=code&prompt=login`; + }&redirect_uri=${'http://localhost:8080/oauth/kakao'}&response_type=code&prompt=login`; window.location.replace(KAKAO_AUTH_URL); }; const handleGoogleOauth = () => { const GOOGLE_AUTH_URL = `https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=${ process.env.REACT_APP_GOOGLE_CLIENTID - }&scope=email%20profile&state=Xm-I8A9bXAsM-ZWgygWBbjfNIsLs-Z_80iyaZ83VIfA%3D&redirect_uri=${'http://localhost:3000/oauth/google'}`; + }&scope=email%20profile&redirect_uri=${'http://localhost:3000/oauth/google'}`; window.location.replace(GOOGLE_AUTH_URL); }; From fbe7e485f14ae76a64629b950befb1e279ff5969 Mon Sep 17 00:00:00 2001 From: serin-B Date: Tue, 6 Dec 2022 22:14:53 +0900 Subject: [PATCH 04/11] =?UTF-8?q?[fe]=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?= =?UTF-8?q?=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20=EC=A3=BC?= =?UTF-8?q?=EC=86=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/pages/SignInPage/SignInPage.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/front/src/pages/SignInPage/SignInPage.js b/front/src/pages/SignInPage/SignInPage.js index b7844c11..af942738 100644 --- a/front/src/pages/SignInPage/SignInPage.js +++ b/front/src/pages/SignInPage/SignInPage.js @@ -82,10 +82,12 @@ const SignInPage = () => { }; const handleKakaoOauth = () => { - const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${ - process.env.REACT_APP_KAKAO_CLIENTID - }&redirect_uri=${'http://localhost:8080/oauth/kakao'}&response_type=code&prompt=login`; - window.location.replace(KAKAO_AUTH_URL); + // const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${ + // process.env.REACT_APP_KAKAO_CLIENTID + // }&redirect_uri=${'http://localhost:8080/oauth/kakao'}&response_type=code&prompt=login`; + window.location.replace( + 'https://accounts.kakao.com/login/?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A8080%252Foauth%252Fkakao%26through_account%3Dtrue%26client_id%3De50e158c20358065eb3d6e2eabd76f5c' + ); }; const handleGoogleOauth = () => { From adb61779bb4adf5570245e1063d199de34da78df Mon Sep 17 00:00:00 2001 From: serin-B Date: Tue, 6 Dec 2022 22:18:05 +0900 Subject: [PATCH 05/11] =?UTF-8?q?=EA=B5=AC=EA=B8=80=20=EC=A3=BC=EC=86=8C?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/pages/SignInPage/SignInPage.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/front/src/pages/SignInPage/SignInPage.js b/front/src/pages/SignInPage/SignInPage.js index af942738..3cdcb1f7 100644 --- a/front/src/pages/SignInPage/SignInPage.js +++ b/front/src/pages/SignInPage/SignInPage.js @@ -91,10 +91,12 @@ const SignInPage = () => { }; const handleGoogleOauth = () => { - const GOOGLE_AUTH_URL = `https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=${ - process.env.REACT_APP_GOOGLE_CLIENTID - }&scope=email%20profile&redirect_uri=${'http://localhost:3000/oauth/google'}`; - window.location.replace(GOOGLE_AUTH_URL); + // const GOOGLE_AUTH_URL = `https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=${ + // process.env.REACT_APP_GOOGLE_CLIENTID + // }&scope=email%20profile&redirect_uri=${'http://localhost:3000/oauth/google'}`; + window.location + .replace(`https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=293970161173-a059nllv4dpvc9quk4hqid4kservumh6.apps.googleusercontent.com + &scope=email%20profile&redirect_uri=http://localhost:3000/oauth/google`); }; return ( From 01711184c08eb3e21f590be9db9129255d85dd9d Mon Sep 17 00:00:00 2001 From: serin-B Date: Tue, 6 Dec 2022 23:05:56 +0900 Subject: [PATCH 06/11] =?UTF-8?q?a=20=EB=A7=81=ED=81=AC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/pages/SignInPage/SignInPage.js | 41 +++++++++++++----------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/front/src/pages/SignInPage/SignInPage.js b/front/src/pages/SignInPage/SignInPage.js index 3cdcb1f7..e3af87ec 100644 --- a/front/src/pages/SignInPage/SignInPage.js +++ b/front/src/pages/SignInPage/SignInPage.js @@ -81,23 +81,22 @@ const SignInPage = () => { }); }; - const handleKakaoOauth = () => { - // const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${ - // process.env.REACT_APP_KAKAO_CLIENTID - // }&redirect_uri=${'http://localhost:8080/oauth/kakao'}&response_type=code&prompt=login`; - window.location.replace( - 'https://accounts.kakao.com/login/?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A8080%252Foauth%252Fkakao%26through_account%3Dtrue%26client_id%3De50e158c20358065eb3d6e2eabd76f5c' - ); - }; + // const handleKakaoOauth = () => { + // // const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${ + // // process.env.REACT_APP_KAKAO_CLIENTID + // // }&redirect_uri=${'http://localhost:8080/oauth/kakao'}&response_type=code&prompt=login`; + // window.location.replace( + // 'https://accounts.kakao.com/login/?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A8080%252Foauth%252Fkakao%26through_account%3Dtrue%26client_id%3De50e158c20358065eb3d6e2eabd76f5c' + // ); + // }; - const handleGoogleOauth = () => { - // const GOOGLE_AUTH_URL = `https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=${ - // process.env.REACT_APP_GOOGLE_CLIENTID - // }&scope=email%20profile&redirect_uri=${'http://localhost:3000/oauth/google'}`; - window.location - .replace(`https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=293970161173-a059nllv4dpvc9quk4hqid4kservumh6.apps.googleusercontent.com - &scope=email%20profile&redirect_uri=http://localhost:3000/oauth/google`); - }; + // const handleGoogleOauth = () => { + // // const GOOGLE_AUTH_URL = `https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=${ + // // process.env.REACT_APP_GOOGLE_CLIENTID + // // }&scope=email%20profile&redirect_uri=${'http://localhost:3000/oauth/google'}`; + // window.location.href = `https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=293970161173-a059nllv4dpvc9quk4hqid4kservumh6.apps.googleusercontent.com + // &scope=email%20profile&redirect_uri=http://localhost:3000/oauth/google`; + // }; return ( @@ -143,8 +142,14 @@ const SignInPage = () => { - - + {/* + */} + + 구글로그인 + + + 카카오로그인 + ); }; From 3f2dbb5098c03a03199095d130f12b2b4674ad88 Mon Sep 17 00:00:00 2001 From: serin-B Date: Wed, 7 Dec 2022 00:06:26 +0900 Subject: [PATCH 07/11] =?UTF-8?q?=EC=B9=B4=EC=B9=B4=EC=98=A4=20=EB=A6=AC?= =?UTF-8?q?=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20=EC=A3=BC=EC=86=8C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/pages/SignInPage/SignInPage.js | 2 +- front/src/pages/TestPage/OauthTestPage.js | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/front/src/pages/SignInPage/SignInPage.js b/front/src/pages/SignInPage/SignInPage.js index e3af87ec..c757d0e0 100644 --- a/front/src/pages/SignInPage/SignInPage.js +++ b/front/src/pages/SignInPage/SignInPage.js @@ -147,7 +147,7 @@ const SignInPage = () => { 구글로그인 - + 카카오로그인 diff --git a/front/src/pages/TestPage/OauthTestPage.js b/front/src/pages/TestPage/OauthTestPage.js index 39930780..2a69c693 100644 --- a/front/src/pages/TestPage/OauthTestPage.js +++ b/front/src/pages/TestPage/OauthTestPage.js @@ -5,8 +5,12 @@ const OauthTestPage = () => { useEffect(() => { const path = location.pathname; const code = location.search; - console.log(code); - axios.get(`http://localhost:8080${path}${code}`); + console.log('get 요청주소', `http://localhost:8080${path}${code}`); + axios.get(`http://localhost:8080${path}${code}`).then(() => { + console.log('성공', `http://localhost:8080${path}${code}`).catch(() => { + console.log('실패', `http://localhost:8080${path}${code}`); + }); + }); }, []); return (
From 55cd9a330d7900c8da508553c0a8b7f9b9f5535b Mon Sep 17 00:00:00 2001 From: serin-B Date: Thu, 8 Dec 2022 15:55:39 +0900 Subject: [PATCH 08/11] =?UTF-8?q?[FE]=20=EC=B9=B4=EC=B9=B4=EC=98=A4oauth?= =?UTF-8?q?=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EB=A5=BC=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?=EC=B5=9C=EC=8B=A0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/api/authApi.js | 17 ++++++++++ front/src/index.js | 16 ++++----- front/src/pages/TestPage/OauthTestPage.js | 31 ++++++++++++++---- front/src/store/modules/authSlice.js | 40 +++++++++++++++++++++++ 4 files changed, 90 insertions(+), 14 deletions(-) diff --git a/front/src/api/authApi.js b/front/src/api/authApi.js index c366f70b..9d9ef789 100644 --- a/front/src/api/authApi.js +++ b/front/src/api/authApi.js @@ -77,6 +77,23 @@ const authApi = { .catch((error) => reject(error)); }); }, + kakaoOauth: ({ path, code }) => { + return new Promise((resolve, reject) => { + return axios + .get(`http://localhost:8080${path}${code}`) + .then((response) => { + console.log(response); + console.log('성공', `http://localhost:8080${path}${code}`); + signInSuccess(response); + setTimeout(authApi.logout, REFRESH_EXPIRY_TIME); + return resolve(response); + }) + .catch((error) => { + console.log('실패', `http://localhost:8080${path}${code}`); + return reject(error); + }); + }); + }, }; export default authApi; diff --git a/front/src/index.js b/front/src/index.js index 99c8271a..86fa9c5f 100644 --- a/front/src/index.js +++ b/front/src/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +// import React from 'react'; import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; import { store } from './store/store'; @@ -13,13 +13,13 @@ const container = document.getElementById('root'); const root = createRoot(container); root.render( - - - - - - - + // + + + + + + // ); reportWebVitals(); diff --git a/front/src/pages/TestPage/OauthTestPage.js b/front/src/pages/TestPage/OauthTestPage.js index 2a69c693..ff4b977e 100644 --- a/front/src/pages/TestPage/OauthTestPage.js +++ b/front/src/pages/TestPage/OauthTestPage.js @@ -1,17 +1,36 @@ -import axios from 'axios'; import { useEffect } from 'react'; +import { useDispatch } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; +import { kakaoOauthAsync } from 'store/modules/authSlice'; +import { setOpenSnackbar } from 'store/modules/snackbarSlice'; const OauthTestPage = () => { + const dispatch = useDispatch(); + const navigate = useNavigate(); useEffect(() => { const path = location.pathname; const code = location.search; + console.log(code); console.log('get 요청주소', `http://localhost:8080${path}${code}`); - axios.get(`http://localhost:8080${path}${code}`).then(() => { - console.log('성공', `http://localhost:8080${path}${code}`).catch(() => { - console.log('실패', `http://localhost:8080${path}${code}`); - }); - }); + getKaKao(path, code); }, []); + + const getKaKao = (path, code) => { + dispatch(kakaoOauthAsync({ path, code })) + .unwrap() + .then(() => { + dispatch( + setOpenSnackbar({ + severity: 'success', + message: '로그인이 완료되었습니다.', + }) + ); + navigate('/', { replace: true }); + }) + .catch((err) => { + console.log('로그인실패', err); + }); + }; return (

Oauth 로그인 테스트페이지입니다

diff --git a/front/src/store/modules/authSlice.js b/front/src/store/modules/authSlice.js index 380ff33a..316545ce 100644 --- a/front/src/store/modules/authSlice.js +++ b/front/src/store/modules/authSlice.js @@ -24,6 +24,19 @@ export const signInAsync = createAsyncThunk( } ); +export const kakaoOauthAsync = createAsyncThunk( + 'auth/kakaoOauth', + async ({ path, code }, thunkAPI) => { + try { + const response = await authApi.kakaoOauth({ path, code }); + console.log('와야하는데유ㅠ', response.data.data); + return response.data.data; + } catch (error) { + return thunkAPI.rejectWithValue(error); + } + } +); + export const firstLoginAsync = createAsyncThunk( 'auth/firstLogin', async (params, thunkAPI) => { @@ -81,6 +94,33 @@ export const authSlice = createSlice({ state.roles = []; state.profileImage = ''; }) + .addCase(kakaoOauthAsync.pending, (state) => { + state.loading = true; + state.isLogin = false; + state.firstLogin = false; + state.nickName = ''; + state.email = ''; + state.roles = []; + state.profileImage = ''; + }) + .addCase(kakaoOauthAsync.fulfilled, (state, { payload }) => { + state.loading = false; + state.isLogin = true; + state.firstLogin = payload.firstLogin; + state.nickName = payload.nickName; + state.email = payload.email; + state.roles = payload.roles; + state.profileImage = payload.profileImage; + }) + .addCase(kakaoOauthAsync.rejected, (state) => { + state.loading = false; + state.isLogin = false; + state.firstLogin = false; + state.nickName = ''; + state.email = ''; + state.roles = []; + state.profileImage = ''; + }) .addCase(firstLoginAsync.pending, (state) => { state.loading = true; state.isLogin = false; From 8d0ba53f0d0fcc2bc09d76020a6f6b9a1e49c57e Mon Sep 17 00:00:00 2001 From: serin-B Date: Thu, 8 Dec 2022 16:06:34 +0900 Subject: [PATCH 09/11] =?UTF-8?q?[FE]=20chore=20:=20=EB=AC=B8=EA=B5=AC=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/pages/TestPage/OauthTestPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/pages/TestPage/OauthTestPage.js b/front/src/pages/TestPage/OauthTestPage.js index ff4b977e..d1112c92 100644 --- a/front/src/pages/TestPage/OauthTestPage.js +++ b/front/src/pages/TestPage/OauthTestPage.js @@ -33,7 +33,7 @@ const OauthTestPage = () => { }; return (
-

Oauth 로그인 테스트페이지입니다

+

Oauth 로그인 중입니다!!🫶

); }; From 87bd531eea0c2b0bd5bcd3fc55134f9e328b93c4 Mon Sep 17 00:00:00 2001 From: serin-B Date: Thu, 8 Dec 2022 18:19:03 +0900 Subject: [PATCH 10/11] =?UTF-8?q?[FE]=20chore:=20=EC=BD=98=EC=86=94=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EB=A1=9C=EB=94=A9=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/api/authApi.js | 3 --- front/src/pages/SignInPage/SignInPage.js | 19 ------------------- front/src/pages/TestPage/OauthTestPage.js | 19 +++++++++++++------ front/src/store/modules/authSlice.js | 1 - 4 files changed, 13 insertions(+), 29 deletions(-) diff --git a/front/src/api/authApi.js b/front/src/api/authApi.js index 9d9ef789..341729ce 100644 --- a/front/src/api/authApi.js +++ b/front/src/api/authApi.js @@ -82,14 +82,11 @@ const authApi = { return axios .get(`http://localhost:8080${path}${code}`) .then((response) => { - console.log(response); - console.log('성공', `http://localhost:8080${path}${code}`); signInSuccess(response); setTimeout(authApi.logout, REFRESH_EXPIRY_TIME); return resolve(response); }) .catch((error) => { - console.log('실패', `http://localhost:8080${path}${code}`); return reject(error); }); }); diff --git a/front/src/pages/SignInPage/SignInPage.js b/front/src/pages/SignInPage/SignInPage.js index c757d0e0..43e35ce5 100644 --- a/front/src/pages/SignInPage/SignInPage.js +++ b/front/src/pages/SignInPage/SignInPage.js @@ -81,23 +81,6 @@ const SignInPage = () => { }); }; - // const handleKakaoOauth = () => { - // // const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${ - // // process.env.REACT_APP_KAKAO_CLIENTID - // // }&redirect_uri=${'http://localhost:8080/oauth/kakao'}&response_type=code&prompt=login`; - // window.location.replace( - // 'https://accounts.kakao.com/login/?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A8080%252Foauth%252Fkakao%26through_account%3Dtrue%26client_id%3De50e158c20358065eb3d6e2eabd76f5c' - // ); - // }; - - // const handleGoogleOauth = () => { - // // const GOOGLE_AUTH_URL = `https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=${ - // // process.env.REACT_APP_GOOGLE_CLIENTID - // // }&scope=email%20profile&redirect_uri=${'http://localhost:3000/oauth/google'}`; - // window.location.href = `https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=293970161173-a059nllv4dpvc9quk4hqid4kservumh6.apps.googleusercontent.com - // &scope=email%20profile&redirect_uri=http://localhost:3000/oauth/google`; - // }; - return ( @@ -142,8 +125,6 @@ const SignInPage = () => { - {/* - */} 구글로그인 diff --git a/front/src/pages/TestPage/OauthTestPage.js b/front/src/pages/TestPage/OauthTestPage.js index d1112c92..ef8519cd 100644 --- a/front/src/pages/TestPage/OauthTestPage.js +++ b/front/src/pages/TestPage/OauthTestPage.js @@ -3,6 +3,8 @@ import { useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { kakaoOauthAsync } from 'store/modules/authSlice'; import { setOpenSnackbar } from 'store/modules/snackbarSlice'; +import PageContainer from 'containers/PageContainer'; +import Loading from 'components/Loading'; const OauthTestPage = () => { const dispatch = useDispatch(); @@ -10,8 +12,6 @@ const OauthTestPage = () => { useEffect(() => { const path = location.pathname; const code = location.search; - console.log(code); - console.log('get 요청주소', `http://localhost:8080${path}${code}`); getKaKao(path, code); }, []); @@ -28,13 +28,20 @@ const OauthTestPage = () => { navigate('/', { replace: true }); }) .catch((err) => { - console.log('로그인실패', err); + console.log(err); + dispatch( + setOpenSnackbar({ + severity: 'error', + message: `${err.message}로 인해 로그인 실패하였습니다`, + }) + ); + navigate('/', { replace: true }); }); }; return ( -
-

Oauth 로그인 중입니다!!🫶

-
+ + + ); }; diff --git a/front/src/store/modules/authSlice.js b/front/src/store/modules/authSlice.js index 316545ce..dbb669e2 100644 --- a/front/src/store/modules/authSlice.js +++ b/front/src/store/modules/authSlice.js @@ -29,7 +29,6 @@ export const kakaoOauthAsync = createAsyncThunk( async ({ path, code }, thunkAPI) => { try { const response = await authApi.kakaoOauth({ path, code }); - console.log('와야하는데유ㅠ', response.data.data); return response.data.data; } catch (error) { return thunkAPI.rejectWithValue(error); From 6f18a02bd5f9e0238833a4385ae1f2bb566e22fa Mon Sep 17 00:00:00 2001 From: serin-B Date: Fri, 9 Dec 2022 01:06:39 +0900 Subject: [PATCH 11/11] =?UTF-8?q?[FE]=20style:=20oauth=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/public/images/googleLoginBtn.png | Bin 0 -> 5073 bytes front/public/images/kakaoLoginBtn.png | Bin 0 -> 8342 bytes front/public/images/naverLoginBtn.png | Bin 0 -> 5907 bytes front/src/api/authApi.js | 4 +- front/src/components/RoutesComponent.js | 4 +- front/src/pages/SignInPage/SignInPage.js | 82 ++++++++++++++---- .../{OauthTestPage.js => OauthPage.js} | 12 +-- front/src/store/modules/authSlice.js | 15 ++-- 8 files changed, 85 insertions(+), 32 deletions(-) create mode 100644 front/public/images/googleLoginBtn.png create mode 100644 front/public/images/kakaoLoginBtn.png create mode 100644 front/public/images/naverLoginBtn.png rename front/src/pages/TestPage/{OauthTestPage.js => OauthPage.js} (82%) diff --git a/front/public/images/googleLoginBtn.png b/front/public/images/googleLoginBtn.png new file mode 100644 index 0000000000000000000000000000000000000000..be552342c52d7e3df1206b0be2ad132029385ab9 GIT binary patch literal 5073 zcmd^D_g7O(yWW7vk*b1#R7Ir-!lyJT0wP5Nh@pfKsvu3INeL~0A}9$Ek%M$XIn>ZQ zp?W0X0SVHjgeXW)C;|aO$qnCkf4b}b0e7wY!=BmiUh~X;-%0W z_2{9V833HAX1oXgahB1}jd8Ftx^un{t^EOjgZK1d0y44$86TPa%?x#cN`lA=LpbAh z-{d|3)Sx+zo-z=;u8;KYTLd#vh&I7lyNDlKq^ui8wJ|)7!s33ulW%$+CzB;zt`_A@ zzDU*-q^{)1^Vg=f3cSi}kC~y^eQ?{Lo^4*XRJdX?bur^?>p72y$;>h1=O4x=c*Q5w zxU4yPJVwwTEU@?Tf6%6 zNk^tr(euAW2)Cp4T?b}h=W*VXKY-lGbI@-OWMBjBUpu&f<-|$fl*%Q0AnHWI@jg!j ztU}g64#*8#G{6Sf-AvJw1C|w;`FC{KEeBld{2!5Y1Wd1-^uw1#bV7J(#AAoH;uY%T8^qvl6NON+YQflXQ6sxRtK@w}3++!0H zz3uF#f{;1rC`nUfz}YZAd)#BLF}fN$R4*(*57oG1ufeb)V}dw71VQ~KEj z+1S{Ewv|O`5;d-ba`?FT&yVoM;?!*MJx_7j0jd5>=5wtyMue~ zYsqK+Wh%so^JoaM;d6VYSuLzV<_rTU7js{^`l3?iQ23t3*Q3uIx3^K93F!`6;`bDl zFISN7Bp-*zD0>zVOW?D%Qvv=!7wGq}kpiAWq3v5syK`^i_a+|)05H17Q2JYjAR0xA zyiXz?XylOa>5y)8iXJsL#TTHprdqP+QleM^BPqxG+MY`J zfj`5u4z=kTuwqmFup?bL?DJb?m;+mjh>bd?Zzet+2d+CHm`t4@oP>aj-1WT@`g5yS z9L**cd<6g?>P#Fo%Z!k~ql)JJ3GHBQd%G;8OY)*!O5g2ZdSn8KzZ$tV!KR~H=st>l zw@a=Yr0#;!--<^x*WD=*Fgr35??l(~UBd*=#SwPN6W^DY-O0pORq6&wd~Y^vBmbHd z;7d6pw``vMit^SzafM}2&U?YK@M6rTJn7kL6(rWmFi+)uyO~9;#?(+wsbTAFQOdSJ zejv5o-Qg}Krgo7{+(FvFkBF1rpk)g-FKHWi5NXn!Roqb#DftGf(FRDPB|=t=eV7YqNZXabxALd@Lx%W%m7r2;qs+4 zEM0J9P&9rq&KVVIdzAxPn2?!YyEg)!t&v56t)qngVYX-`o_kuM=$7xd<2&j=b5TNn z)eCz$7j62ak9mBGD|^gpLA2?NjzajF4QciHuSeJqA8FyF{T|i)Of%cnv5(z80QW9OCgA3A*jIX%5cFSO+?7LVHvBJ;bgMZHenRnn+`Ygc`%VKCZI?p{8B0wJfxE zK*sdtbi!pefwF)#FYw_^Hu&&w0RfSm44)H8d9kClw3A7a-uCW<#LY42F6P8$biFUf zdC!aKo21YA1i; zfK9#>`AsM0Wu2JQYnST{YXIv;buqrl0f zzW~<~YtW$TFYsdGhkFJtu&~rTiFx&j;C!>mWpHa_PoF{}4oyY~Mn^Ms4gY$oH3mw8 zfCq>@!41L6RvE8S7Ci?**jgZJmbW?=Q!jjB34{JU{s27dE6E-`iAGUm#b8inz6DWn z)YLtP^%ufqPEQAxTi;+wK z>eLB6;tdZ+lfjb_cOXQ6%~lcA+-kb4SVrS9SGY?gXT+Rvt@ zIC_V}zN&P!hwa%TQ6XyBYru{M!xQyA)u$AT3yx>e5*f*05pO-0y#v96d6Hg8Z;UkO zgo0>BBRBWa+baECfB0D-DU)g4KN`e-y&d{0rLpbO@am+z-ADDV_6h!r^h%e8=>?Wq zrl{GA)w!niZjbeiJ2LRt?Tya7?}@rCqWGco5{epcicN2R{fX03WgjK1Ab8#cY};@X zfZ+P)KkwS^DygUhtpvdqKF`Ui=n)d0pb+I1IY4z=R?K-Cey7GALwAAHX3%Mkx~2VxO?uh9;W7{lfm+JbJ2XYN$rtT{`zy;+vcfo_zyb3b& z)$UbFL}EZ}TMG`+)5^DoI|!f9_$8;JJCN|k^xp0$o2$)$6e7npvU10hUzjO(j}b}) zMvC+A9ndT{RNalkmP#jSEJ zg|AvH@@R{vts=9=gL)tqMy^>lK0_vkHn$9A?+Q|qxB6HsZ)@W3JO zHepKX=WQ`_Xr1~^VV|`u<$q=0^Syntu~$?e&~dDN)@j?lhPMu=eA~bDcxy-*&N`l< z?5VZ0&xaXyQF&N&$!AdOklZ%?aD=_B<*8pDwh@T(yyken)7{u$l$5>qUN=yQ9Sc`b zx4+>gH8sRxK0+x`odRQ}pbrlt*j-N8zC>X76`ZrxKbxO*#nzfc^(v zuOo&CpeLR$Pny);T zKw>2_oUOErQpWOoCch-V0$sgn9~Z^5^()y_-h<=m6u*kF%5YE>-y43<4rtPBalh4z zKy!Afc220(ln}h4vi`Y;nyqJ7hO)+YQQ(U}q}Q7Wu*f@UuE>X78OSuP%OQ85sFIJ& zj`lJVc57v+JNx!8Sjkj>s>IEK2E-wil{JI!jcdUZ+V@+}x)8PB=5drSN!L=nr+=RV zjtvOIzT&cH|Y>-a5ucl4I| z^_Xn+_U51meWrxh&hmGNE=8_m<@dkC73$}IsN};<3W9>|g>eZPyC0#VSd8 z1ufHZ?u9v(5*V#atX)-zJ<#RDh{z73je1Y7AI7#n=|ftw8&U`cpF&&Dv$?9^QM-X# zWo#>#S$7LWxdZNJ zBjR12s7Qe=eNTPdDdb~!_kt>q&%3d)q~)R&R}F$mX@HoWQ;>BUhrFgd`iZG78}OKgm4v0qvp+%HutBO!KY8rdTcC8N2FKe?pZjrm^HQ?*%)4FH0n;{nMZhp8I*S@?2s%s&3L*!Jq==j?t=8}<0RR;`+r z{|KeVb9Wr7-K+w!dh1kViH6rn2L;i>+Z012XYazV+pBG31v6XDXR}&8u-24q=TE6o zFbw%km2RvI5BjVyYoDm$eG9)CwP2+~x9-a-;YnsjPMS;@vO|fQ{m+nAjPtQv0>kK4 zYC}_xv9lyMM!PXL1zJ~>IkH9VE)8DqCiTj0oZKuc1T78son(5C)*ZSzmHFM4|7zTg zCsSvLuPgdi+~bdwrWO>zIs3+ct_o{!&e%*`a^7fkdO>=^$v6o?r5Sl=v@yx#_LH(8 zh|%#%6^4*M5}*W2;6d2d5t06i0_v&w=c$tUw|%8y3&}(BkM*A(ZG+v*6F}uiSmAkx zqhJ|tA`~fX#R1i!FYg)`Q>L5P`lTw~gWQtIG2U607Xe6_t_H7;!}IzKzX(^&lZjV8 zJ*B0J*_P)0`P*e?@20}&YB!TH@kxJ=Lsdn#=wgELpPpX@(JnFcLtSBo}s{M32V&`YpPONKCJlh&buB;(g!5Dfv}i&c&0;A? zwNO#KvNExI(Q<8`r|BeuJXx)wf-WaS%rdZ1H)@zUAh`mj;>b>Qnr++f*)_(NtfaXc znQ6^ z*voFv*7M^ZQ_XuHwcoX>AXI`XCohhf-C$sHh0n-AKM7F`Ml%P}UKj^LoJ57SFZ;xc zQfxZ|e^LmSIg5oxQX4OGGe}r%i%RM%6RfCAv>AVavMaE0>fh{X4smx5qB~k3$H-<# zU8*=^&VcAB)_}jf-YgXj_O_ZY)vnb9E41DtX2peKbMz|>meOD{_|lgab!&OQb;^YW z69S`EyWPD489|(lfj+%DV01c_mriX0UK)3u-t%0UI3xFO(d7S`NWn0n7eYRU-$~;- Pwf~X+W4%gU$JhS_$&zpp literal 0 HcmV?d00001 diff --git a/front/public/images/kakaoLoginBtn.png b/front/public/images/kakaoLoginBtn.png new file mode 100644 index 0000000000000000000000000000000000000000..8d4d93cb121dcbb68e983087786cb27e647800e0 GIT binary patch literal 8342 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 Ux6BH_dX!N*8ZXo<)NDWe50%`u)c^nh literal 0 HcmV?d00001 diff --git a/front/public/images/naverLoginBtn.png b/front/public/images/naverLoginBtn.png new file mode 100644 index 0000000000000000000000000000000000000000..b7aa18bae85f512f3cf758caa3aee16cd206605c GIT binary patch literal 5907 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 literal 0 HcmV?d00001 diff --git a/front/src/api/authApi.js b/front/src/api/authApi.js index 341729ce..bfadb202 100644 --- a/front/src/api/authApi.js +++ b/front/src/api/authApi.js @@ -77,10 +77,10 @@ const authApi = { .catch((error) => reject(error)); }); }, - kakaoOauth: ({ path, code }) => { + oauth: ({ path, code }) => { return new Promise((resolve, reject) => { return axios - .get(`http://localhost:8080${path}${code}`) + .get(`${path}${code}`) .then((response) => { signInSuccess(response); setTimeout(authApi.logout, REFRESH_EXPIRY_TIME); diff --git a/front/src/components/RoutesComponent.js b/front/src/components/RoutesComponent.js index 87c792eb..231deeea 100644 --- a/front/src/components/RoutesComponent.js +++ b/front/src/components/RoutesComponent.js @@ -2,7 +2,7 @@ import { Routes, Route, Navigate } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { selectFirstLogin, selectIsLogin } from 'store/modules/authSlice'; import LandingPage from 'pages/LandingPage'; -import OauthTestPage from 'pages/TestPage/OauthTestPage'; +import OauthPage from 'pages/TestPage/OauthPage'; import { MainPage, SignUpPage, @@ -139,7 +139,7 @@ const RoutesComponent = () => { } /> } /> } /> - } /> + } /> ); diff --git a/front/src/pages/SignInPage/SignInPage.js b/front/src/pages/SignInPage/SignInPage.js index 43e35ce5..26b6ad50 100644 --- a/front/src/pages/SignInPage/SignInPage.js +++ b/front/src/pages/SignInPage/SignInPage.js @@ -34,6 +34,36 @@ const AvatarStyled = styled(Avatar)` background-color: ${({ theme }) => theme.colors.purple_2}; `; +const OauthBtns = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + margin-top: -5px; + .google { + border: 1px solid rgba(0, 0, 0, 0.1); + } +`; + +const BtnStyled = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 40px; + margin: 5px; + border-radius: 20px; + overflow: hidden; + &:hover { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + } + img { + margin-top: 5px; + height: 45px; + } +`; + const SignInPage = () => { const navigate = useNavigate(); const dispatch = useDispatch(); @@ -110,27 +140,47 @@ const SignInPage = () => { 입력하신 내용을 다시 확인해주세요. ) : null} - - {/* */} - {/* + + + + + google oauth login button + + + + + kakao oauth login button + + + + + naver oauth login button + + + + + {/* */} + {/* Forgot password? */} - - 계정이 없으신가요?{' '} - - 회원가입 - - + + 계정이 없으신가요?{' '} + + 회원가입 + - - - 구글로그인 - - - 카카오로그인 - + ); }; diff --git a/front/src/pages/TestPage/OauthTestPage.js b/front/src/pages/TestPage/OauthPage.js similarity index 82% rename from front/src/pages/TestPage/OauthTestPage.js rename to front/src/pages/TestPage/OauthPage.js index ef8519cd..8efa7875 100644 --- a/front/src/pages/TestPage/OauthTestPage.js +++ b/front/src/pages/TestPage/OauthPage.js @@ -1,22 +1,22 @@ import { useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; -import { kakaoOauthAsync } from 'store/modules/authSlice'; +import { oauthAsync } from 'store/modules/authSlice'; import { setOpenSnackbar } from 'store/modules/snackbarSlice'; import PageContainer from 'containers/PageContainer'; import Loading from 'components/Loading'; -const OauthTestPage = () => { +const OauthPage = () => { const dispatch = useDispatch(); const navigate = useNavigate(); useEffect(() => { const path = location.pathname; const code = location.search; - getKaKao(path, code); + getOauthCode(path, code); }, []); - const getKaKao = (path, code) => { - dispatch(kakaoOauthAsync({ path, code })) + const getOauthCode = (path, code) => { + dispatch(oauthAsync({ path, code })) .unwrap() .then(() => { dispatch( @@ -45,4 +45,4 @@ const OauthTestPage = () => { ); }; -export default OauthTestPage; +export default OauthPage; diff --git a/front/src/store/modules/authSlice.js b/front/src/store/modules/authSlice.js index dbb669e2..58c3464f 100644 --- a/front/src/store/modules/authSlice.js +++ b/front/src/store/modules/authSlice.js @@ -24,11 +24,14 @@ export const signInAsync = createAsyncThunk( } ); -export const kakaoOauthAsync = createAsyncThunk( - 'auth/kakaoOauth', +export const oauthAsync = createAsyncThunk( + 'auth/oauth', async ({ path, code }, thunkAPI) => { + console.log('path', path); + console.log('code', code); try { - const response = await authApi.kakaoOauth({ path, code }); + const response = await authApi.oauth({ path, code }); + console.log('성공하면 오는 res', response.data); return response.data.data; } catch (error) { return thunkAPI.rejectWithValue(error); @@ -93,7 +96,7 @@ export const authSlice = createSlice({ state.roles = []; state.profileImage = ''; }) - .addCase(kakaoOauthAsync.pending, (state) => { + .addCase(oauthAsync.pending, (state) => { state.loading = true; state.isLogin = false; state.firstLogin = false; @@ -102,7 +105,7 @@ export const authSlice = createSlice({ state.roles = []; state.profileImage = ''; }) - .addCase(kakaoOauthAsync.fulfilled, (state, { payload }) => { + .addCase(oauthAsync.fulfilled, (state, { payload }) => { state.loading = false; state.isLogin = true; state.firstLogin = payload.firstLogin; @@ -111,7 +114,7 @@ export const authSlice = createSlice({ state.roles = payload.roles; state.profileImage = payload.profileImage; }) - .addCase(kakaoOauthAsync.rejected, (state) => { + .addCase(oauthAsync.rejected, (state) => { state.loading = false; state.isLogin = false; state.firstLogin = false;