add sso login logic

neos.config.json

@@ -11,6 +11,7 @@
    "cardsDbUrl":"https://cdn02.moecube.com:444/ygopro-database/zh-CN/cards.cdb",
    "stringsUrl":"https://cdn02.moecube.com:444/ygopro-database/zh-CN/strings.conf",
    "replayUrl":"replay.neos.moe",
+   "accountUrl":"https://accounts.moecube.com",
    "chainALL":false,
    "streamInterval":20,
    "startDelay":1000,

neos.config.prod.json

@@ -11,6 +11,7 @@
    "cardsDbUrl":"https://cdn02.moecube.com:444/ygopro-database/zh-CN/cards.cdb",
    "stringsUrl":"https://cdn02.moecube.com:444/ygopro-database/zh-CN/strings.conf",
    "replayUrl":"replay.neos.moe",
+   "accountUrl":"https://accounts.moecube.com",
    "chainALL":false,
    "streamInterval":20,
    "startDelay":1000,

src/stores/index.ts

@@ -10,6 +10,7 @@ export * from "./replayStore";
 
 import { devtools } from "valtio/utils";
 
+import { accountStore } from "./accountStore";
 import { cardStore } from "./cardStore";
 import { chatStore } from "./chatStore";
 import { joinStore } from "./joinStore";
@@ -27,6 +28,7 @@ devtools(matStore, { name: "mat", enabled: true });
 devtools(cardStore, { name: "card", enabled: true });
 devtools(placeStore, { name: "place", enabled: true });
 devtools(replayStore, { name: "replay", enabled: true });
+devtools(accountStore, { name: "account", enabled: true });
 
 // 重置所有`Store`
 export const resetUniverse = () => {

src/ui/Sso.tsx

 import React, { useEffect, useState } from "react";
 
-import { match, MatchInfo } from "@/api";
+import { useConfig } from "@/config";
+import { accountStore, User } from "@/stores";
 
-interface SSOParams {
-  id: string;
-  username: string;
-  name: string;
-  email: string;
-  return_sso_url: string;
-  token: string;
-  external_id: number;
-}
+const NeosConfig = useConfig();
 
 const Sso: React.FC = () => {
   const sso = new URL(location.href).searchParams.get("sso");
-  const ssoParams: SSOParams | undefined = sso
-    ? getSSOParams(new URLSearchParams(atob(sso)))
+  const user: User | undefined = sso
+    ? getSSOUser(new URLSearchParams(atob(sso)))
     : undefined;
-  const [matchInfo, setMatchInfo] = useState<MatchInfo | undefined>(undefined);
-  const onMatch = async () => {
-    if (ssoParams) {
-      setMatchInfo(await match(ssoParams.username, ssoParams.external_id));
-    }
-  };
+
+  const [logined, setLogined] = useState(false);
 
   useEffect(() => {
     if (!sso) {
@@ -30,18 +19,17 @@ const Sso: React.FC = () => {
 
       window.location.href = ssoUrl;
     }
+
+    if (user) {
+      accountStore.login(user);
+      setLogined(true);
+      // TODO: navigate
+    }
   }, []);
 
   return (
     <div>
-      <p>username={ssoParams?.username}</p>
-      <p>name={ssoParams?.name}</p>
-      <p>email={ssoParams?.email}</p>
-      <button onClick={onMatch}>match</button>
-      <p>match info</p>
-      <p>address={matchInfo?.address}</p>
-      <p>port={matchInfo?.port}</p>
-      <p>password={matchInfo?.password}</p>
+      <p>{logined ? "登录成功，正在跳转。。" : "登陆萌卡账号中。。。"}</p>
     </div>
   );
 };
@@ -51,14 +39,14 @@ function getSSOUrl(callbackUrl: string): string {
   params.set("return_sso_url", callbackUrl);
   const payload = btoa(params.toString());
 
-  const url = new URL("https://accounts.moecube.com");
+  const url = new URL(NeosConfig.accountUrl);
   params = url.searchParams;
   params.set("sso", payload);
 
   return url.toString();
 }
 
-function getSSOParams(searchParams: URLSearchParams): SSOParams {
+function getSSOUser(searchParams: URLSearchParams): User {
   const sso = {};
   for (const [key, value] of searchParams) {
     // @ts-ignore

src/ui/Start/index.tsx

 import "./index.scss";
 
-import React, { useEffect } from "react";
+import React from "react";
+import { useNavigate } from "react-router-dom";
 
 import { useConfig } from "@/config";
-import { accountStore, User } from "@/stores";
 const NeosConfig = useConfig();
 
 const Start: React.FC = () => {
-  const sso = new URL(location.href).searchParams.get("sso");
-  const user: User | undefined = sso ? getSSOUser(new URLSearchParams(atob(sso))) : undefined;
-  const onLogin = () => {
-    const ssoUrl = getSSOUrl(location.href);
-    window.location.href = ssoUrl;
-  };
-
-  useEffect(() => {
-    if (user) {
-      accountStore.login(user);
-      // TODO: navigate
-    }
-
-  }, [user])
-
+  const navigate = useNavigate();
   return (
     <>
       <div className="mycard-header">
@@ -45,7 +31,13 @@ const Start: React.FC = () => {
                 alt="YGO NEOS"
               />
             </h1>
-            <button onClick={onLogin}>登陆萌卡进行游玩</button>
+            <button
+              onClick={() => {
+                navigate("/sso");
+              }}
+            >
+              登陆萌卡进行游玩
+            </button>
           </div>
         </div>
       </div>
@@ -53,26 +45,4 @@ const Start: React.FC = () => {
   );
 };
 
-function getSSOUrl(callbackUrl: string): string {
-  let params = new URLSearchParams();
-  params.set("return_sso_url", callbackUrl);
-  const payload = btoa(params.toString());
-
-  const url = new URL("https://accounts.moecube.com");
-  params = url.searchParams;
-  params.set("sso", payload);
-
-  return url.toString();
-}
-
-function getSSOUser(searchParams: URLSearchParams): User {
-  const sso = {};
-  for (const [key, value] of searchParams) {
-    // @ts-ignore
-    sso[key] = value;
-  }
-
-  return sso as any;
-}
-
 export default Start;