fix: fix webauthn redirection (#1148)

web/src/auth/LoginPage.js

@@ -138,46 +138,7 @@ class LoginPage extends React.Component {
     this.props.onUpdateAccount(account);
   }
 
-  onFinish(values) {
+  populateOauthValues(values) {
-    if (this.state.loginMethod === "webAuthn") {
-      let username = this.state.username;
-      if (username === null || username === "") {
-        username = values["username"];
-      }
-
-      this.signInWithWebAuthn(username);
-      return;
-    }
-
-    const application = this.getApplicationObj();
-    const ths = this;
-
-    // here we are supposed to determine whether Casdoor is working as an OAuth server or CAS server
-    if (this.state.type === "cas") {
-      // CAS
-      const casParams = Util.getCasParameters();
-      values["type"] = this.state.type;
-      AuthBackend.loginCas(values, casParams).then((res) => {
-        if (res.status === "ok") {
-          let msg = "Logged in successfully. ";
-          if (casParams.service === "") {
-            // If service was not specified, Casdoor must display a message notifying the client that it has successfully initiated a single sign-on session.
-            msg += "Now you can visit apps protected by Casdoor.";
-          }
-          Util.showMessage("success", msg);
-
-          if (casParams.service !== "") {
-            const st = res.data;
-            const newUrl = new URL(casParams.service);
-            newUrl.searchParams.append("ticket", st);
-            window.location.href = newUrl.toString();
-          }
-        } else {
-          Util.showMessage("error", `Failed to log in: ${res.msg}`);
-        }
-      });
-    } else {
-      // OAuth
     const oAuthParams = Util.getOAuthGetParameters();
     if (oAuthParams !== null && oAuthParams.responseType !== null && oAuthParams.responseType !== "") {
       values["type"] = oAuthParams.responseType;
@@ -197,21 +158,14 @@ class LoginPage extends React.Component {
     if (this.state.owner !== null && this.state.owner !== undefined) {
       values["organization"] = this.state.owner;
     }
-
+  }
-      AuthBackend.login(values, oAuthParams)
+  postCodeLoginAction(res) {
-        .then((res) => {
+    const application = this.getApplicationObj();
-          if (res.status === "ok") {
+    const ths = this;
-            const responseType = values["type"];
+    const oAuthParams = Util.getOAuthGetParameters();
-            if (responseType === "login") {
-              Util.showMessage("success", "Logged in successfully");
-
-              const link = Setting.getFromLink();
-              Setting.goToLink(link);
-            } else if (responseType === "code") {
     const code = res.data;
     const concatChar = oAuthParams?.redirectUri?.includes("?") ? "&" : "?";
     const noRedirect = oAuthParams.noRedirect;
-
     if (Setting.hasPromptPage(application)) {
       AuthBackend.getAccount("")
         .then((res) => {
@@ -246,7 +200,59 @@ class LoginPage extends React.Component {
         Setting.goToLink(`${oAuthParams.redirectUri}${concatChar}code=${code}&state=${oAuthParams.state}`);
       }
     }
+  }
 
+  onFinish(values) {
+    if (this.state.loginMethod === "webAuthn") {
+      let username = this.state.username;
+      if (username === null || username === "") {
+        username = values["username"];
+      }
+
+      this.signInWithWebAuthn(username, values);
+      return;
+    }
+
+    // here we are supposed to determine whether Casdoor is working as an OAuth server or CAS server
+    if (this.state.type === "cas") {
+      // CAS
+      const casParams = Util.getCasParameters();
+      values["type"] = this.state.type;
+      AuthBackend.loginCas(values, casParams).then((res) => {
+        if (res.status === "ok") {
+          let msg = "Logged in successfully. ";
+          if (casParams.service === "") {
+            // If service was not specified, Casdoor must display a message notifying the client that it has successfully initiated a single sign-on session.
+            msg += "Now you can visit apps protected by Casdoor.";
+          }
+          Util.showMessage("success", msg);
+
+          if (casParams.service !== "") {
+            const st = res.data;
+            const newUrl = new URL(casParams.service);
+            newUrl.searchParams.append("ticket", st);
+            window.location.href = newUrl.toString();
+          }
+        } else {
+          Util.showMessage("error", `Failed to log in: ${res.msg}`);
+        }
+      });
+    } else {
+      // OAuth
+      const oAuthParams = Util.getOAuthGetParameters();
+      this.populateOauthValues(values);
+
+      AuthBackend.login(values, oAuthParams)
+        .then((res) => {
+          if (res.status === "ok") {
+            const responseType = values["type"];
+            if (responseType === "login") {
+              Util.showMessage("success", "Logged in successfully");
+
+              const link = Setting.getFromLink();
+              Setting.goToLink(link);
+            } else if (responseType === "code") {
+              this.postCodeLoginAction(res);
               // Util.showMessage("success", `Authorization code: ${res.data}`);
             } else if (responseType === "token" || responseType === "id_token") {
               const accessToken = res.data;
@@ -572,12 +578,9 @@ class LoginPage extends React.Component {
     );
   }
 
-  signInWithWebAuthn(username) {
+  signInWithWebAuthn(username, values) {
-    if (username === null || username === "") {
+    const oAuthParams = Util.getOAuthGetParameters();
-      Setting.showMessage("error", "username is required for webauthn login");
+    this.populateOauthValues(values);
-      return;
-    }
-
     const application = this.getApplicationObj();
     return fetch(`${Setting.ServerUrl}/api/webauthn/signin/begin?owner=${application.organization}&name=${username}`, {
       method: "GET",
@@ -622,8 +625,16 @@ class LoginPage extends React.Component {
         })
           .then(res => res.json()).then((res) => {
             if (res.msg === "") {
+              const responseType = values["type"];
+              if (responseType === "code") {
+                this.postCodeLoginAction(res);
+              } else if (responseType === "token" || responseType === "id_token") {
+                const accessToken = res.data;
+                Setting.goToLink(`${oAuthParams.redirectUri}#${responseType}=${accessToken}?state=${oAuthParams.state}&token_type=bearer`);
+              } else {
                 Setting.showMessage("success", "Successfully logged in with webauthn credentials");
                 Setting.goToLink("/");
+              }
             } else {
               Setting.showMessage("error", res.msg);
             }