Feat/GitHub login (#16)

* feat: github login * style: code format * feat: callback and login step enhancements * fix: login ssr disable
NJUPT-SAST · Jul 24, 2024 · ef64d39 · ef64d39
1 parent 3fe6115
commit ef64d39
Show file tree

Hide file tree

Showing 8 changed files with 3,512 additions and 4,319 deletions.
diff --git a/app/(tourist)/callback/feishu/page.tsx b/app/(tourist)/callback/feishu/page.tsx
@@ -1,14 +1,11 @@
 "use client";
-import { handleError } from "@/components/function";
 import { getFeishuLoginStatus } from "@/lib/apis/global";
 import { getUserInfo } from "@/lib/apis/user";
 import { useAppDispatch } from "@/redux";
 import { addAccount } from "@/redux/features/userList";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import styles from "./page.module.scss";
-import { cupSaucer } from "@lucide/lab";
-import { Icon } from "lucide-react";
 import { Player } from "@lottiefiles/react-lottie-player";
 import BackLayout from "@/components/Layout/BackLayout";
 

diff --git a/app/(tourist)/callback/github/page.module.scss b/app/(tourist)/callback/github/page.module.scss
@@ -0,0 +1,16 @@
+.base {
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  .wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    .text {
+      font-weight: bold;
+      font-size: large;
+    }
+  }
+}
diff --git a/app/(tourist)/callback/github/page.tsx b/app/(tourist)/callback/github/page.tsx
@@ -0,0 +1,76 @@
+"use client";
+import { getGithubLoginStatus } from "@/lib/apis/global";
+import { getUserInfo } from "@/lib/apis/user";
+import { useAppDispatch } from "@/redux";
+import { addAccount } from "@/redux/features/userList";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import styles from "./page.module.scss";
+import { Player } from "@lottiefiles/react-lottie-player";
+import BackLayout from "@/components/Layout/BackLayout";
+
+const GithubCallback = ({
+  searchParams,
+}: {
+  searchParams: {
+    code: string;
+    state: string;
+  };
+}) => {
+  const { code, state } = searchParams;
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  console.log("code", code, "state", state);
+
+  useEffect(() => {
+    getGithubLoginStatus(code, state).then((githubRes) => {
+      if (githubRes.data.Success) {
+        localStorage.setItem(
+          "Token",
+          JSON.stringify(githubRes.data.Data.loginToken),
+        );
+        getUserInfo().then((res) => {
+          if (res.data.Success) {
+            const data = res.data.Data;
+            dispatch(
+              addAccount({
+                nickName: "ming",
+                email: data.email,
+                Token: githubRes.data.Data.loginToken,
+                userId: data.userId,
+              }),
+            );
+
+            router.replace("/home");
+          }
+        });
+      } else {
+        if (githubRes.data.ErrCode === 50000) {
+          return <div>Github 登录失败</div>;
+        }
+        router.replace(`/login?oauthTicket=${githubRes.data.Data.oauthTicket}`);
+      }
+    });
+  }, [code, dispatch, router, state]);
+
+  return (
+    <div className={styles["base"]}>
+      <BackLayout type="green" />
+      <div className={styles["wrap"]}>
+        {/* <Icon iconNode={cupSaucer} size={48} strokeWidth={1.25} /> */}
+        <Player
+          autoplay={true}
+          loop={false}
+          src="/svg/done.json"
+          style={{ height: "64px", width: "64px" }}
+          keepLastFrame
+          renderer="svg"
+        />
+        <div className={styles["text"]}>授权成功，正在重定向</div>
+      </div>
+    </div>
+  );
+};
+
+export default GithubCallback;
diff --git a/app/(tourist)/login/loginStep1.tsx b/app/(tourist)/login/loginStep1.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Form } from "@/components/form";
-import { useContext, useRef, useState, useCallback } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import { useAppDispatch, useAppSelector } from "@/redux";
 import { addLoginTicket } from "@/redux/features/login";
 import { veriLoginAccount } from "@/lib/apis/global";
@@ -18,11 +18,10 @@ import styles from "./page.module.scss";
 import classNames from "classnames";
 import PageTransition from "@/components/pageTransition";
 import { message } from "@/components/message";
-import { LarkIcon } from "@/components/icon/larkIcon";
 
 const list = [
   {
-    target: "",
+    target: `/apis/login/github?redirect_url=${window.location.protocol}//${window.location.host}/callback/github`,
     describe: "Github",
     icon: <GithubIcon />,
   },
@@ -56,6 +55,12 @@ const LoginStep1 = () => {
     return false;
   }, []);
 
+  useEffect(() => {
+    if (urlParams.get("oauthTicket")) {
+      message.warning("请先绑定账号");
+    }
+  }, [urlParams]);
+
   /**
    * 输入账号，点击登录后进入判断，验证账号存在性，存储返回信息
    */
@@ -70,12 +75,9 @@ const LoginStep1 = () => {
             const username = args.username as string;
             veriLoginAccount(username)
               .then((res) => {
-                console.log("res", res);
                 if (res.data.Success) {
                   const ticket = res.data.Data.loginTicket;
-                  console.log(ticket);
                   dispatch(addLoginTicket(ticket));
-                  console.log(urlParams.get("redirect"));
                   router.replace(
                     `/login/2${
                       urlParams.get("redirect")
@@ -128,22 +130,20 @@ const LoginStep1 = () => {
             className={classNames(styles.formButton)}
             type={"submit"}
           >
-            下一步
+            {urlParams.get("oauthTicket") ? "绑定账号" : "下一步"}
           </Button>
         </Form>
-        {
-          // TODO 第三方认证登录
-        }
-        <Anchor
-          // onClick={() => {
-          // 	message.warning("暂未开放");
-          // }}
-          href={`/apis/login/lark?redirect_url=${window.location.protocol}//${window.location.host}/callback/feishu`}
-          className={classNames(styles.anchor)}
-        >
-          SAST 飞书登录
-        </Anchor>
-        <OtherLoginList list={list} />
+        {!urlParams.get("oauthTicket") && (
+          <>
+            <Anchor
+              href={`/apis/login/lark?redirect_url=${window.location.protocol}//${window.location.host}/callback/feishu`}
+              className={classNames(styles.anchor)}
+            >
+              SAST 飞书登录
+            </Anchor>
+            <OtherLoginList list={list} />
+          </>
+        )}
         <div className={`${styles.toRegist}`}>
           没有账号？
           <Link href={`/regist${redirect ? `?redirect=${redirect}` : ""}`}>
@@ -155,4 +155,4 @@ const LoginStep1 = () => {
   );
 };
 
-export { LoginStep1 };
+export default LoginStep1;
diff --git a/app/(tourist)/login/page.tsx b/app/(tourist)/login/page.tsx
@@ -1,13 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useSearchParams } from "next/navigation";
-import { LoginStep1 } from "./loginStep1";
-import { useAppDispatch, useAppSelector } from "@/redux";
-import { addRedirect } from "@/redux/features/login";
+import dynamic from "next/dynamic";
+
+const LoginStep1 = dynamic(() => import("@/app/(tourist)/login/loginStep1"), {
+  ssr: false,
+});
 
 const Login = () => {
-  // TODO 错误处理
   return (
     <>
       <LoginStep1 />

diff --git a/components/list/otherLoginList/index.tsx b/components/list/otherLoginList/index.tsx
@@ -16,16 +16,15 @@ const OtherLoginList = (props: {
       <ul className={classNames([styles.icons])}>
         {list.map((item) => {
           return (
-            // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
             <li
-              // onClick={() => {
-              // 	message.warning("暂未开放");
-              // }}
+              onClick={() => {
+                !item.target && message.warning("暂未开放");
+              }}
               key={`other_login_${item.describe}`}
             >
               <a
                 title={item.describe}
-                href={`${item.target}?redirect_url=${location.protocol}//${location.host}/callback/feishu`}
+                href={item.target ? item.target : undefined}
               >
                 {item.icon}
               </a>

diff --git a/lib/apis/global.ts b/lib/apis/global.ts
@@ -114,3 +114,7 @@ export function resetPassword(password: string, resetTicket: string) {
 export const getFeishuLoginStatus = (code: string, state: string) => {
   return apis.get(`/apis/login/lark/callback?code=${code}&state=${state}`);
 };
+
+export const getGithubLoginStatus = (code: string, state: string) => {
+  return apis.get(`/apis/login/github/callback?code=${code}&state=${state}`);
+};