feat: login from token in widget

src/app/services/auth.ts

@@ -15,7 +15,7 @@ import baseQuery from "./base.query";
 
 const getDeviceId = () => {
   let d = localStorage.getItem(KEY_DEVICE_ID);
-  let dt = localStorage.getItem(KEY_DEVICE_TOKEN) || "";
+  const dt = localStorage.getItem(KEY_DEVICE_TOKEN) || "";
   if (!d) {
     d = `web:${nanoid()}`;
     localStorage.setItem(KEY_DEVICE_ID, d);
@@ -53,7 +53,7 @@ export const authApi = createApi({
           if (data) {
             dispatch(setAuthData(data));
           }
-          // 从localstorage 去掉 magic token
+          // 从 localstorage 去掉 magic token
           localStorage.removeItem(KEY_LOCAL_MAGIC_TOKEN);
         } catch {
           console.log("login error");
@@ -67,7 +67,7 @@ export const authApi = createApi({
           const { data } = await queryFulfilled;
           if (data) {
             dispatch(setAuthData(data));
-            // 从localstorage 去掉 magic token
+            // 从 localstorage 去掉 magic token
             localStorage.removeItem(KEY_LOCAL_MAGIC_TOKEN);
           }
         } catch {
@@ -86,7 +86,7 @@ export const authApi = createApi({
         }
       })
     }),
-    // 更新token
+    // 更新 token
     renew: builder.mutation<RenewTokenResponse, RenewTokenDTO>({
       query: (data) => ({
         url: "/token/renew",
@@ -116,7 +116,7 @@ export const authApi = createApi({
         }
       })
     }),
-    //   获取openid
+    //   获取 openid
     getOpenid: builder.mutation<{ url: string }, { issuer: string; redirect_uri: string }>({
       query: (data) => ({
         url: "/token/openid/authorize",

src/routes/setting/Widget.tsx

@@ -54,7 +54,7 @@ export default function Widget() {
       <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
         {`<!-- ${t(
           "code_comment"
-        )} -->\n<script \n  data-host-id="${loginUid}" \n  data-theme-color="#1fe1f9" \n  data-close-width="48" \n  data-close-height="48" \n  data-open-width="380" \n  data-open-height="680" \n  data-welcome="Your custom welcome text" \n  src="${
+        )} -->\n<script \n  data-host-id="${loginUid}" \n data-auto-reg="false" \n data-login-token="xxxxxxxx" \n  data-theme-color="#1fe1f9" \n  data-close-width="48" \n  data-close-height="48" \n  data-open-width="380" \n  data-open-height="680" \n  data-welcome="Your custom welcome text" \n  src="${
           location.origin
         }/widget.js" \n  async \n></script>`}
       </SyntaxHighlighter>
@@ -95,6 +95,11 @@ export default function Widget() {
                 paramDefault: "false",
                 remarks: t("param_auto_reg")
               },
+              {
+                paramKey: "login-token",
+                paramDefault: "",
+                remarks: t("param_login_token")
+              },
               {
                 paramKey: "theme-color",
                 paramDefault: "#1fe1f9",

src/widget/Popup/Login/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import clsx from "clsx";
 
-import { useRegisterMutation } from "../../../app/services/auth";
+import { useLoginMutation, useRegisterMutation } from "../../../app/services/auth";
 import { useGetLoginConfigQuery } from "../../../app/services/server";
 import { setAuthData } from "../../../app/slices/auth.data";
 import Divider from "../../../components/Divider";
@@ -23,10 +23,11 @@ const randomText = () => (Math.random() + 1).toString(36).substring(7);
 const Login = () => {
   const { t } = useTranslation("widget");
   const dispatch = useDispatch();
-  const { color, fgColor, from, autoReg } = useWidget();
+  const { color, fgColor, from, autoReg, token } = useWidget();
   const { clientId } = useGoogleAuthConfig();
   const { config: githubAuthConfig } = useGithubAuthConfig();
   const [register, { isLoading, isSuccess, data, error }] = useRegisterMutation();
+  const [loginByToken, { isLoading: isLogging }] = useLoginMutation();
   //  const [login]= useLoginMutation();
   const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
   const registerUser = (name: string, auto?: boolean) => {
@@ -55,10 +56,12 @@ const Login = () => {
     // const content = new FormData(form).get("prompt") as string;
   };
   useEffect(() => {
-    if (autoReg) {
+    if (autoReg && !token) {
       registerUser(`w-${randomText()}`, true);
+    } else if (token) {
+      loginByToken({ key: token, type: "thirdparty" });
     }
-  }, [autoReg]);
+  }, [autoReg, token]);
 
   useEffect(() => {
     if (isSuccess && data) {
@@ -84,7 +87,7 @@ const Login = () => {
     }
   }, [error]);
   if (!loginConfigSuccess) return null;
-  if (autoReg) return <Loading />;
+  if (autoReg || isLogging) return <Loading />;
   const { github: enableGithubLogin, google: enableGoogleLogin } = loginConfig;
   const googleLogin = enableGoogleLogin && clientId;
   const hasSocialLogins = enableGithubLogin || googleLogin;

src/widget/WidgetContext.tsx

@@ -8,11 +8,13 @@ import { shallowEqual } from "react-redux";
 const query = new URLSearchParams(location.search);
 const welcome = decodeURIComponent(query.get("welcome") || "");
 const autoReg = decodeURIComponent(query.get("autoReg") || "false") == "true";
+const token = decodeURIComponent(query.get("token") || "");
 const color = decodeURIComponent(query.get("themeColor") || "#1fe1f9");
 const from = decodeURIComponent(query.get("from") || "widget.link");
 const fgColor = getContrastColor(color);
 const embed = isInIframe();
 const WidgetContext = createContext({
+  token,
   autoReg,
   color,
   fgColor,
@@ -36,6 +38,7 @@ function WidgetProvider({ children }: { children: ReactNode }) {
   return (
     <WidgetContext.Provider
       value={{
+        token,
         autoReg,
         welcome,
         loading,