Merge pull request #24 from AjouThonTeam6/feat/googleLogin

[feat&refactor] Login 페이지 코드 리팩토링 및 ASMLRequest 값 추출
AjouThonTeam6 · Aug 11, 2023 · c88308f · c88308f
2 parents 9dc3f75 + 4a4ed4c
commit c88308f
Show file tree

Hide file tree

Showing 8 changed files with 222 additions and 170 deletions.
diff --git a/ajouthon/package.json b/ajouthon/package.json
@@ -58,5 +58,6 @@
     "@types/react-csv": "^1.1.3",
     "@types/react-table": "^7.7.14",
     "@types/styled-components": "^5.1.26"
-  }
+  },
+  "proxy": "https://sso.ajou.ac.kr"
 }
diff --git a/ajouthon/src/Router.tsx b/ajouthon/src/Router.tsx
@@ -12,13 +12,6 @@ import MemberSociety from "./pages/member/memberSociety/MemberSociety";
 import RecordClub from "./pages/record/recordClub/RecordClub";
 import RecordSociety from "./pages/record/recordSociety/RecordSociety";
 
-const TopContainer = styled.div`
-  display: flex;
-  width: 1440px;
-  height: 900px;
-  border: 1px solid black;
-`;
-
 const Router = () => {
   return (
     <BrowserRouter>
@@ -57,3 +50,10 @@ const Router = () => {
 };
 
 export default Router;
+
+const TopContainer = styled.div`
+  display: flex;
+  width: 1440px;
+  height: 900px;
+  border: 1px solid black;
+`;
diff --git a/ajouthon/src/components/header/Header.tsx b/ajouthon/src/components/header/Header.tsx
@@ -8,50 +8,6 @@ import { accountAtom } from "../../atoms/accountAtom";
 import { IAccount } from "../../interfaces/loginInterface";
 import { TfiHelpAlt } from "react-icons/tfi";
 
-const HeaderContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid black;
-  padding: 10px 0;
-`;
-
-const NavigationArea = styled.div`
-  display: flex;
-`;
-
-const NavigationButton = styled.button`
-  display: flex;
-  justify-content: center;
-  padding: 13px 20px;
-  background-color: white;
-  color: #8c8c8c;
-  margin-right: 10px;
-  cursor: pointer;
-`;
-
-const NavigationText = styled.span`
-  font-size: 18px;
-  margin-left: 5px;
-`;
-
-const LogoutArea = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 20px;
-  cursor: pointer;
-`;
-
-const LogoutText = styled.span`
-  color: #8c8c8c;
-  margin-left: 5px;
-`;
-
-const AjouLogo = styled.img`
-  width: 40px;
-  height: 40px;
-`;
-
 const Header = () => {
   const [account, setAccount] = useRecoilState<IAccount>(accountAtom);
   const navigate = useNavigate();
@@ -109,3 +65,47 @@ const Header = () => {
 };
 
 export default Header;
+
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid black;
+  padding: 10px 0;
+`;
+
+const NavigationArea = styled.div`
+  display: flex;
+`;
+
+const NavigationButton = styled.button`
+  display: flex;
+  justify-content: center;
+  padding: 13px 20px;
+  background-color: white;
+  color: #8c8c8c;
+  margin-right: 10px;
+  cursor: pointer;
+`;
+
+const NavigationText = styled.span`
+  font-size: 18px;
+  margin-left: 5px;
+`;
+
+const LogoutArea = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 20px;
+  cursor: pointer;
+`;
+
+const LogoutText = styled.span`
+  color: #8c8c8c;
+  margin-left: 5px;
+`;
+
+const AjouLogo = styled.img`
+  width: 40px;
+  height: 40px;
+`;
diff --git a/ajouthon/src/pages/account/login/Login.tsx b/ajouthon/src/pages/account/login/Login.tsx
@@ -3,77 +3,129 @@ import { useNavigate } from "react-router-dom";
 import { useRecoilState } from "recoil";
 import styled from "styled-components";
 import { accountAtom } from "../../../atoms/accountAtom";
-
-const LoginContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 1440px;
-  height: 900px;
-`;
-
-const inputBoxStyle = {
-  color: "black",
-  border: "1px solid rgba(217, 217, 217, 1)",
-  marginTop: "10px",
-  marginBottom: "20px",
-  paddingLeft: "5px",
-  width: "50rem",
-  height: "2.5rem",
-};
-
-const buttonSytle = {
-  backgroundColor: "#1890FF",
-  color: "white",
-  borderRadius: "5px",
-  height: "2.5rem",
-  width: "5rem",
-  fontWeight: "bold",
-};
-
-const TextLogo = styled.img``;
+import axios from "axios";
 
 const Login = () => {
   const [id, setId] = useState("");
   const [password, setPassword] = useState("");
+  const [asmlRequest, setAsmlRequest] = useState("");
   const [account, setAccount] = useRecoilState(accountAtom);
   const navigate = useNavigate();
+
+  async function loginPost(id: string, password: string) {
+    const response = await axios.post(
+      "/sso/processAuthnResponse.do",
+      {
+        autoLogin: "Y",
+        SAMLRequest:
+          "3A65828FF982B8FF0105D06ED6791B72782655586BFE69341E49E861FDB70B1C0652AD672B8419D0E855F11C1DE485DB0B778FB784B60D31BB212970AF0786B8D693543DB7790BB8C77C6D3EA1D3CDCAF71E19C00251B0540F5F0EB66D41F13E4A7E5666097E5183FFADE84A1898659AB7BC874C63594E5C75DCF47B32E92A6744F31B6536C4DDD532C84635A7405F6F93DB005B8BF320257ECE49AC8CCA34C463BDD8E66990A97C95898931310C6841037538D0607333C41F01FB8880223EE637ED54AD713CEBB163E302386CF48EE151200953A7AA1C5676E5A7ED6A1937F0B0A873E124D1930B812E6649FE9DD9E9FF8C1BFE78EE9B751DE0FFE37D95905D14A92297E301F5BE299E3B019A74747020F0D5C57837A80CA877130F656F786E",
+        RelayState: null,
+        returnPage: "/jsp/sso/ip/login_form.jsp",
+        userAgent: "PC|MACINTEL|CHROME|114",
+        relogin: "N",
+        userId: id,
+        password: password,
+      },
+      {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+          Accept:
+            "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.7",
+        },
+      }
+    );
+    // console.log(response.data);
+    // console.log(typeof response.data);
+    // DOMParser를 사용하여 HTML을 파싱
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(response.data, "text/html");
+
+    const targetElement = doc.querySelector("input[name=SAMLResponse]");
+    if (targetElement) {
+      const targetAttribute = targetElement.getAttribute("value");
+      if (targetAttribute) {
+        setAsmlRequest(targetAttribute);
+      }
+    }
+  }
+
+  const onSumbit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log(e);
+    loginPost(id, password);
+  };
+
+  console.log(asmlRequest);
   return (
     <LoginContainer>
       <TextLogo src={require("../../../imgs/textLogo.png")} />
-      <div>
-        <div> 학사서비스 ID</div>
-        <input
-          style={inputBoxStyle}
-          type="text"
-          placeholder=" ID를 입력하세요"
-          id="id"
-          value={id}
-          onChange={(e) => setId(e.target.value)}
-        />
-      </div>
-      <div>
-        <div> 학사서비스 PW</div>
-        <input
-          style={inputBoxStyle}
-          type="password"
-          placeholder=" PW를 입력하세요"
-          id="pw"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-      </div>
-      <div
-        onClick={() => {
-          setAccount({ id: id, pw: password });
-          navigate("/member-club");
-        }}
-      >
-        <button style={buttonSytle}>로그인</button>
-      </div>
+      <LoginForm onSubmit={onSumbit}>
+        <InputBox>
+          <InputTitle> 학사서비스 ID</InputTitle>
+          <Input
+            type="text"
+            placeholder=" ID를 입력하세요"
+            id="id"
+            value={id}
+            onChange={(e) => setId(e.target.value)}
+          />
+        </InputBox>
+        <InputBox>
+          <InputTitle> 학사서비스 PW</InputTitle>
+          <Input
+            type="password"
+            placeholder=" PW를 입력하세요"
+            id="pw"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </InputBox>
+        <LoginButton>로그인</LoginButton>
+      </LoginForm>
     </LoginContainer>
   );
 };
 
 export default Login;
+
+const TextLogo = styled.img``;
+
+const LoginContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 1440px;
+  height: 900px;
+`;
+
+const LoginForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const LoginButton = styled.button`
+  background-color: #1890ff;
+  color: white;
+  border-radius: 5px;
+  height: 2.5rem;
+  width: 5rem;
+  font-weight: bold;
+`;
+
+const InputBox = styled.div``;
+
+const InputTitle = styled.div``;
+
+const Input = styled.input`
+  color: black;
+  border: 1px solid rgba(217, 217, 217, 1);
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding-left: 5px;
+  width: 50rem;
+  height: 2.5rem;
+`;
+// "autoLogin=Y&SAMLRequest=3A65828FF982B8FF0105D06ED6791B72782655586BFE69341E49E861FDB70B1C0652AD672B8419D0E855F11C1DE485DB0B778FB784B60D31BB212970AF0786B8D693543DB7790BB8C77C6D3EA1D3CDCAF71E19C00251B0540F5F0EB66D41F13E4A7E5666097E5183FFADE84A1898659AB7BC874C63594E5C75DCF47B32E92A6744F31B6536C4DDD532C84635A7405F6F93DB005B8BF320257ECE49AC8CCA34C463BDD8E66990A97C95898931310C6841037538D0607333C41F01FB8880223EE637ED54AD713CEBB163E302386CF48EE151200953A7AA1C5676E5A7ED6A1937F0B0A873E124D1930B812E6649FE9DD9E9FF8C1BFE78EE9B751DE0FFE37D95905D14A92297E301F5BE299E3B019A74747020F0D5C57837A80CA877130F656F786E&returnPage=%2Fjsp%2Fsso%2Fip%2Flogin_form.jsp&userAgent=PC%7CMACINTEL%7CCHROME%7C114&relogin=N"
diff --git a/ajouthon/src/pages/activity/activityClub/ActivityClub.tsx b/ajouthon/src/pages/activity/activityClub/ActivityClub.tsx
@@ -5,6 +5,35 @@ import styled from "styled-components";
 import ClubTable from "../../../components/ClubTale";
 import { ActivityModelColumn } from "../../../model/activityTableModel";
 
+const MemberClub = () => {
+  //동아리 회원 관리 페이지
+
+  return (
+    <OuterContainer>
+      <InfoBoxContainer>
+        <InfoBox title="활동 내역" value={`${dummyData.length} 건`}></InfoBox>
+        <InfoBox
+          title="임시저장 내역"
+          value={`${dummyData.length} 건`}
+        ></InfoBox>
+      </InfoBoxContainer>
+      <Link to="../write">
+        <button style={buttonSytle}>활동내역 추가</button>
+      </Link>
+
+      <ClubTable
+        columnData={ActivityModelColumn}
+        datas={dummyData}
+        needCheckBox={true}
+      ></ClubTable>
+      <Outlet></Outlet>
+      <button style={buttonSytle}>학사서비스 업로드</button>
+    </OuterContainer>
+  );
+};
+
+export default MemberClub;
+
 export const dummyData = [
   {
     활동명: "1",
@@ -52,32 +81,3 @@ const buttonSytle = {
   width: "8rem",
   fontWeight: "bold",
 };
-
-const MemberClub = () => {
-  //동아리 회원 관리 페이지
-
-  return (
-    <OuterContainer>
-      <InfoBoxContainer>
-        <InfoBox title="활동 내역" value={`${dummyData.length} 건`}></InfoBox>
-        <InfoBox
-          title="임시저장 내역"
-          value={`${dummyData.length} 건`}
-        ></InfoBox>
-      </InfoBoxContainer>
-      <Link to="../write">
-        <button style={buttonSytle}>활동내역 추가</button>
-      </Link>
-
-      <ClubTable
-        columnData={ActivityModelColumn}
-        datas={dummyData}
-        needCheckBox={true}
-      ></ClubTable>
-      <Outlet></Outlet>
-      <button style={buttonSytle}>학사서비스 업로드</button>
-    </OuterContainer>
-  );
-};
-
-export default MemberClub;