refactor(login): use 302 method in agora sso login (#1557)

Author: BlackHole1

web/flat-web/src/api-middleware/flatServer/index.ts

@@ -489,7 +489,6 @@ export interface LoginProcessResult {
     userUUID: string;
     token: string;
     hasPhone: boolean;
-    agoraSSOLoginID?: string;
 }
 
 export async function loginProcess(authUUID: string): Promise<LoginProcessResult> {
@@ -498,24 +497,6 @@ export async function loginProcess(authUUID: string): Promise<LoginProcessResult
     });
 }
 
-export interface AgoraSSOLoginCheckPayload {
-    loginID: string;
-}
-
-export interface AgoraSSOLoginCheckResult {
-    jwtToken: string;
-}
-
-// Only Web
-export async function agoraSSOLoginCheck(loginID: string): Promise<AgoraSSOLoginCheckResult> {
-    return await postNotAuth<AgoraSSOLoginCheckPayload, AgoraSSOLoginCheckResult>(
-        "login/agora/check",
-        {
-            loginID,
-        },
-    );
-}
-
 export interface LoginPhoneSendCodePayload {
     phone: string; // +8612345678901
 }

web/flat-web/src/pages/LoginPage/agoraLogin.ts

@@ -1,12 +1,11 @@
-import { setAuthUUID, loginProcess } from "../../api-middleware/flatServer";
+import { setAuthUUID } from "../../api-middleware/flatServer";
 import { v4 as uuidv4 } from "uuid";
 import { LoginExecutor } from "./utils";
 import { errorTips } from "../../components/Tips/ErrorTips";
 import { FLAT_SERVER_LOGIN } from "../../api-middleware/flatServer/constants";
 import { AGORA_OAUTH } from "../../constants/process";
 
-export const agoraLogin: LoginExecutor = onSuccess => {
-    let timer = NaN;
+export const agoraLogin: LoginExecutor = () => {
     const authUUID = uuidv4();
 
     function getAgoraURL(authUUID: string): string {
@@ -21,27 +20,9 @@ export const agoraLogin: LoginExecutor = onSuccess => {
             errorTips(err);
         }
 
-        void window.open(getAgoraURL(authUUID));
-
-        const agoraLoginProcessRequest = async (): Promise<void> => {
-            try {
-                const data = await loginProcess(authUUID);
-
-                if (!data.name) {
-                    timer = window.setTimeout(agoraLoginProcessRequest, 2000);
-                    return;
-                }
-
-                onSuccess(data);
-            } catch (err) {
-                errorTips(err);
-            }
-        };
-
-        void agoraLoginProcessRequest();
+        window.location.href = getAgoraURL(authUUID);
     })();
 
-    return () => {
-        window.clearTimeout(timer);
-    };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
 };

web/flat-web/src/pages/LoginPage/index.tsx

@@ -17,7 +17,6 @@ import { PRIVACY_URL, PRIVACY_URL_CN, SERVICE_URL, SERVICE_URL_CN } from "../../
 import { useSafePromise } from "../../utils/hooks/lifecycle";
 import { NEED_BINDING_PHONE } from "../../constants/config";
 import {
-    agoraSSOLoginCheck,
     bindingPhone,
     bindingPhoneSendCode,
     loginCheck,
@@ -59,41 +58,31 @@ export const LoginPage = observer(function LoginPage() {
         [globalStore, pushHistory],
     );
 
+    useEffect(() => {
+        if (urlParams.utm_source === "agora") {
+            handleLogin("agora");
+        }
+    }, [urlParams.utm_source]);
+
     useEffect(() => {
         // Get login info through loginCheck().
         // But we don't want to goto home page if already logged in.
         // Instead, if we have `hasPhone: false`, we should show the binding phone page.
         const checkNormalLogin = async (): Promise<void> => {
-            const userInfo = await sp(loginCheck());
+            const userInfo = await sp(loginCheck(urlParams.token));
             if (NEED_BINDING_PHONE && !userInfo.hasPhone) {
                 setLoginResult(userInfo);
             }
         };
 
-        const checkAgoraLogin = async (): Promise<void> => {
-            const { jwtToken } = await sp(agoraSSOLoginCheck(globalStore.agoraSSOLoginID!));
-            const userInfo = await sp(loginCheck(jwtToken));
-            setLoginResult(userInfo);
-        };
-
-        let checkLogin: Promise<unknown>;
-        if (urlParams.utm_source === "agora" && globalStore.agoraSSOLoginID) {
-            checkLogin = checkAgoraLogin();
-        } else {
-            checkLogin = checkNormalLogin();
-        }
-
-        checkLogin.catch(error => {
+        checkNormalLogin().catch(error => {
             // no handling required
             console.warn(error);
         });
-    }, [globalStore, setLoginResult, sp, urlParams.utm_source]);
+    }, [globalStore, setLoginResult, sp, urlParams.token]);
 
     const onLoginResult = useCallback(
         async (authData: LoginProcessResult) => {
-            if (authData.agoraSSOLoginID) {
-                globalStore.updateAgoraSSOLoginID(authData.agoraSSOLoginID);
-            }
             globalStore.updateUserInfo(authData);
             if (NEED_BINDING_PHONE && !authData.hasPhone) {
                 setLoginResult(authData);
@@ -126,7 +115,7 @@ export const LoginPage = observer(function LoginPage() {
             }
             switch (loginChannel) {
                 case "agora": {
-                    loginDisposer.current = agoraLogin(onLoginResult);
+                    agoraLogin(onLoginResult);
                     return;
                 }
                 case "github": {
@@ -156,11 +145,7 @@ export const LoginPage = observer(function LoginPage() {
                     bindingPhone={async (countryCode, phone, code) =>
                         wrap(bindingPhone(countryCode + phone, Number(code)).then(onBoundPhone))
                     }
-                    buttons={
-                        urlParams.utm_source === "agora"
-                            ? ["agora"]
-                            : [process.env.FLAT_REGION === "US" ? "google" : "wechat", "github"]
-                    }
+                    buttons={[process.env.FLAT_REGION === "US" ? "google" : "wechat", "github"]}
                     cancelBindingPhone={() => setLoginResult(null)}
                     isBindingPhone={
                         NEED_BINDING_PHONE && (loginResult ? !loginResult.hasPhone : false)

web/flat-web/src/stores/GlobalStore.ts

@@ -6,7 +6,7 @@ import type { UID } from "agora-rtc-sdk-ng";
 // clear storage if not match
 const LS_VERSION = 1;
 
-export type UserInfo = Omit<LoginProcessResult, "agoraSSOLoginID">;
+export type UserInfo = LoginProcessResult;
 
 /**
  * Properties in Global Store are persisted and shared globally.
@@ -31,7 +31,6 @@ export class GlobalStore {
     } | null = null;
     public rtmToken: string | null = null;
     public lastLoginCheck: number | null = null;
-    public agoraSSOLoginID: string | null = null;
     /**
      * To sync update the roomStore's room information data after call the begin of the class in the classRoomStore,
      * that for sure roomStore's begin time value of roomInfo is correct so that the classroom page's Timer component display correctly.
@@ -54,10 +53,6 @@ export class GlobalStore {
         this.userInfo = userInfo;
     };
 
-    public updateAgoraSSOLoginID = (val: string | undefined | null): void => {
-        this.agoraSSOLoginID = val ?? null;
-    };
-
     public updateLastLoginCheck = (val: number | null): void => {
         this.lastLoginCheck = val;
     };