feat: 소셜 로그인 구현(Google, Kakao) #111

구글 및 카카오를 이용한 로그인 및 로그아웃 로직 구현
codestates-seb · Jan 27, 2023 · 77e0d3a · 77e0d3a
2 parents 2937e6a + 091f6b5
commit 77e0d3a
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 114 deletions.
diff --git a/project/package.json b/project/package.json
@@ -65,5 +65,5 @@
     "@types/styled-components": "^5.1.26",
     "styled-components": "^5.3.6"
   },
-  "proxy": "http://pikcha36.o-r.kr:8080"
+  "proxy" : "http://pikcha36.o-r.kr:8080"
 }
diff --git a/project/src/App.tsx b/project/src/App.tsx
@@ -12,6 +12,7 @@ import { RecoilRoot } from "recoil";
 import DetailPost from "./pages/DetailPost";
 import MyPage from "./pages/MyPage";
 import EditPost from "./pages/EditPost ";
+import Oauth from "./pages/Oauth"
 
 function App() {
 
@@ -34,6 +35,7 @@ function App() {
             <Route path="/posts/detail/:id" element={<DetailPost />} />
             <Route path="/mypage" element={<MyPage />} />
             <Route path="/edit/:id" element={<EditPost />} />
+            <Route path="/oauth" element={<Oauth />} />
           </Routes>
         </RecoilRoot>
       </BrowserRouter>

diff --git a/project/src/components/GoogleLogin.js b/project/src/components/GoogleLogin.js
diff --git a/project/src/components/Header/index.tsx b/project/src/components/Header/index.tsx
@@ -25,7 +25,6 @@ const SearchBar = lazy(() => import("./SearchBar"));
 
 const IMG_SRC =
   "https://drive.google.com/uc?id=1OmsgU1GLU9iUBYe9ruw_Uy1AcrN57n4g";
-const isLoggedIn = true;
 
 const HeaderTopBar = () => {
   const navigate = useNavigate();

diff --git a/project/src/components/Login.tsx b/project/src/components/Login.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import ButtonForm from "./Button";
 import Axios from "axios";
@@ -8,6 +8,7 @@ import { useNavigate } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import { LoginState, AuthToken, LoggedUser } from "../recoil/state";
 
+
 interface TextProps {
   fontSize: string;
   color: string;
@@ -304,38 +305,12 @@ const Login = () => {
     }
   };
 
-  const GoogleHandler = () => {
-    axios
-      // .post("/login/oauth2/code/google", {
-      //     username: loginemail,
-      //     password: loginpassword,
-      // })
-      .get("oauth2/authorization/google", {
-        // headers: {
-        //     "Content-Type" : "application/x-www-form-urlencoded"
-        // }
-      })
-      .then((res) => console.log(res))
-      .catch((err) => console.error(err));
-  };
-
-  const googlelogin = () => {
-    window.location.href =
-      "http://localhost:8090/oauth2/authorization/google";
-    const query = window.location.search;
-    console.log("이게무야2", query);
-    const param = new URLSearchParams(query);
-    console.log(param);
-  };
-
-  const kakaologin = () => {
-    window.location.href =
-    "http://localhost:8090/oauth2/authorization/kakao"
-        const query = window.location.search;
-    console.log("이게무야2", query);
-    const param = new URLSearchParams(query);
-    console.log(param);
-  };
+    const googleLogin = () => {
+      window.location.href = "http://pikcha36.o-r.kr:8080/oauth2/authorization/google";
+    };
+    const kakaologin = () => {
+      window.location.href = "http://pikcha36.o-r.kr:8080/oauth2/authorization/kakao";
+    };
 
   return (
     <Wrapper>
@@ -363,15 +338,9 @@ const Login = () => {
           로그인
         </TextStyle>
         <CustomPadding padding="30px 0px 0px 0px"></CustomPadding>
-        <button onClick={kakaologin}>카카</button>
-        <button onClick={googlelogin}>구글</button>
-
-
-
-        <GButton>G</GButton>
-
-
-
+        <button onClick={kakaologin}>카카2</button>
+        <button onClick={googleLogin}>구글3</button>
+        <GButton onClick={googleLogin}>G</GButton>
         <TextStyle color="#6154F8" fontSize="22px" fontweight="bold">
           SNS 계정으로 로그인
         </TextStyle>

diff --git a/project/src/components/PostBox.tsx b/project/src/components/PostBox.tsx
@@ -106,10 +106,10 @@ const PostBox = ({postData}:any) => {
           postData.map((el:any)=>{
             return(
               <PostCard key={el.postId}>
-                <div><img src={el.picture}></img></div>
+                <div><img src={el.picture} alt="" /></div>
                 <div>
                   <div>
-                    <img src={el.picture}></img>
+                    <img src={el.picture} alt=""/>
                       <div>
                         <div>{el.username}</div>
                         <span>{(el.createdAt).slice(0,10)}</span>

diff --git a/project/src/components/PostCardComponent.tsx.tsx b/project/src/components/PostCardComponent.tsx.tsx
@@ -117,13 +117,13 @@ const PostCardComponent = ({
             <PostCard key={post.postId} width={width}>
               <div>
                 <img
-                  src={post.picture}
+                  src={post.picture} alt=""
                   onClick={() => navigate(`/posts/detail/${post.postId}`)}
                 ></img>
               </div>
               <div>
                 <div>
-                  <img src={post.picture}></img>
+                  <img src={post.picture} alt=""/>
                   <div>
                     <div>{post.username}</div>
                     <span>{post.createdAt.slice(0, 10)}</span>

diff --git a/project/src/pages/MyPage.tsx b/project/src/pages/MyPage.tsx
@@ -292,7 +292,7 @@ const MyPage = () => {
       <MyPageContainer>
         <MyPageUserInfo>
           <form>
-            <img src="http://drive.google.com/uc?export=view&amp;id=1OmsgU1GLU9iUBYe9ruw_Uy1AcrN57n4g" />
+            <img src="http://drive.google.com/uc?export=view&amp;id=1OmsgU1GLU9iUBYe9ruw_Uy1AcrN57n4g" alt="" />
             <div>
               개구리 뒷다리 <TfiPencil />
             </div>

diff --git a/project/src/pages/Oauth.tsx b/project/src/pages/Oauth.tsx
@@ -0,0 +1,37 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  useRecoilState,
+} from "recoil";
+import { LoginState, AuthToken, LoggedUser } from "../recoil/state";
+
+const Oauth = () => {
+  const navigate = useNavigate();
+  const [isLogin, setIsLogin] = useRecoilState(LoginState);
+  const [isToken, setToken] = useRecoilState(AuthToken);
+
+  useEffect(() =>  {
+    const query = window.location.search;
+    const param = new URLSearchParams(query);
+
+    const getaccessToken = param.get("accessToken");
+    const getId = param.get("id");
+
+    // console.log("팔람팔람팔람:",param)
+    // console.log("퀄퀄:",query)
+    // console.log("토토토토토토 :", getaccessToken)
+
+    localStorage.setItem("Authorization",`Bearer ${getaccessToken}`)
+    localStorage.setItem("memberId", `${getId}`)
+    localStorage.setItem("loginStatus",`true`)
+    setIsLogin(true);
+    setToken(`Bearer ${getaccessToken}`);
+
+    window.location.replace("/")
+    ;
+  } ,[]
+  )
+  return <></>
+};
+
+export default Oauth;
diff --git a/project/src/utils/axiosinstance.tsx b/project/src/utils/axiosinstance.tsx
@@ -7,7 +7,6 @@ axios.interceptors.request.use(
   (config) => {
     // const accessToken = localStorage.getItem("Authorization");
     // axios.defaults.headers.common["Authorization"] = accessToken;
-
     return config;
   },
   (error) => {
@@ -27,7 +26,7 @@ axios.interceptors.response.use(
       response: { status },
     } = error;
     if (status === 400 && error.response.data.message === "Token Expired") {
-        const originalRequest = config;
+    const originalRequest = config;
         axios.defaults.headers.common["Authorization"] = null;
         const memberId = localStorage.getItem("memberId");
         const { data } = await axios.get(`/token/refresh/${memberId}`);
@@ -54,10 +53,6 @@ axios.interceptors.response.use(
       alert("로그인 시간 만료.")
       window.location.replace("/login")
     }
-    if(status === 403){
-
-    }
-
     console.log("response error", error);
     return Promise.reject(error);
   }