feat: add saml provider error (#1168)

* fix: add saml provider error

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

* fix: search

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

Signed-off-by: Yixiang Zhao <seriouszyx@foxmail.com>

web/src/auth/LoginPage.js

@@ -269,23 +269,6 @@ class LoginPage extends React.Component {
     }
   }
 
-  getSamlUrl(provider) {
-    const params = new URLSearchParams(this.props.location.search);
-    const clientId = params.get("client_id");
-    const application = params.get("state");
-    const realRedirectUri = params.get("redirect_uri");
-    const redirectUri = `${window.location.origin}/callback/saml`;
-    const providerName = provider.name;
-    const relayState = `${clientId}&${application}&${providerName}&${realRedirectUri}&${redirectUri}`;
-    AuthBackend.getSamlLogin(`${provider.owner}/${providerName}`, btoa(relayState)).then((res) => {
-      if (res.data2 === "POST") {
-        document.write(res.data);
-      } else {
-        window.location.href = res.data;
-      }
-    });
-  }
-
   isProviderVisible(providerItem) {
     if (this.state.mode === "signup") {
       return Setting.isProviderVisibleForSignUp(providerItem);
@@ -446,7 +429,7 @@ class LoginPage extends React.Component {
           <Form.Item>
             {
               application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
-                return ProviderButton.renderProviderLogo(providerItem.provider, application, 30, 5, "small");
+                return ProviderButton.renderProviderLogo(providerItem.provider, application, 30, 5, "small", this.props.location);
               })
             }
           </Form.Item>
@@ -467,7 +450,7 @@ class LoginPage extends React.Component {
           <br />
           {
             application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
-              return ProviderButton.renderProviderLogo(providerItem.provider, application, 40, 10, "big");
+              return ProviderButton.renderProviderLogo(providerItem.provider, application, 40, 10, "big", this.props.location);
             })
           }
           <div>

web/src/auth/ProviderButton.js

@@ -39,6 +39,7 @@ import SteamLoginButton from "./SteamLoginButton";
 import BilibiliLoginButton from "./BilibiliLoginButton";
 import OktaLoginButton from "./OktaLoginButton";
 import DouyinLoginButton from "./DouyinLoginButton";
+import * as AuthBackend from "./AuthBackend";
 
 function getSigninButton(type) {
   const text = i18next.t("login:Sign in with {type}").replace("{type}", type);
@@ -95,7 +96,24 @@ function getSigninButton(type) {
   return text;
 }
 
-export function renderProviderLogo(provider, application, width, margin, size) {
+function getSamlUrl(provider, location) {
+  const params = new URLSearchParams(location.search);
+  const clientId = params.get("client_id");
+  const application = params.get("state");
+  const realRedirectUri = params.get("redirect_uri");
+  const redirectUri = `${window.location.origin}/callback/saml`;
+  const providerName = provider.name;
+  const relayState = `${clientId}&${application}&${providerName}&${realRedirectUri}&${redirectUri}`;
+  AuthBackend.getSamlLogin(`${provider.owner}/${providerName}`, btoa(relayState)).then((res) => {
+    if (res.data2 === "POST") {
+      document.write(res.data);
+    } else {
+      window.location.href = res.data;
+    }
+  });
+}
+
+export function renderProviderLogo(provider, application, width, margin, size, location) {
   if (size === "small") {
     if (provider.category === "OAuth") {
       return (
@@ -105,7 +123,7 @@ export function renderProviderLogo(provider, application, width, margin, size) {
       );
     } else if (provider.category === "SAML") {
       return (
-        <a key={provider.displayName} onClick={this.getSamlUrl.bind(this, provider)}>
+        <a key={provider.displayName} onClick={() => getSamlUrl(provider, location)}>
           <img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
         </a>
       );

web/src/auth/SamlCallback.js

@@ -51,7 +51,7 @@ class SamlCallback extends React.Component {
     const samlResponse = params.get("samlResponse");
     const messages = atob(relayState).split("&");
     const clientId = messages[0];
-    const applicationName = messages[1] === "null" ? "app-built-in" : messages[1];
+    const applicationName = (messages[1] === "null" || messages[1] === "undefined") ? "app-built-in" : messages[1];
     const providerName = messages[2];
     const redirectUri = messages[3];
     const responseType = this.getResponseType(redirectUri);

web/src/auth/SignupPage.js

@@ -595,7 +595,7 @@ class SignupPage extends React.Component {
         </Form.Item>
         {
           application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map(providerItem => {
-            return ProviderButton.renderProviderLogo(providerItem.provider, application, 30, 5, "small");
+            return ProviderButton.renderProviderLogo(providerItem.provider, application, 30, 5, "small", this.props.location);
           })
         }
       </Form>