feat: add dynamic mode for provider to enable verification code when the login password is wrong (#1753)

* fix: update webAuthnBufferDecode to support Base64URL for WebAuthn updates * feat: enable verification code when the login password is wrong * fix: only enable captcha when login in password * fix: disable login error limits when captcha on * fix: pass "enableCaptcha" as an optional param * fix: change enbleCapctah to optional bool param
2025-07-04 13:20:19 +08:00 · 2023-04-22 16:16:25 +08:00
parent ee8c2650c3
commit 6d6cbc7e6f
31 changed files with 150 additions and 29 deletions
--- a/web/src/auth/AuthBackend.js
+++ b/web/src/auth/AuthBackend.js
@ -139,3 +139,13 @@ export function getWechatMessageEvent() {
    },
  }).then(res => res.json());
 }
+
+export function getCaptchaStatus(values) {
+  return fetch(`${Setting.ServerUrl}/api/get-captcha-status?organization=${values["organization"]}&user_id=${values["username"]}`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Accept-Language": Setting.getAcceptLanguage(),
+    },
+  }).then(res => res.json());
+}
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@ -31,6 +31,7 @@ import CustomGithubCorner from "../common/CustomGithubCorner";
 import {SendCodeInput} from "../common/SendCodeInput";
 import LanguageSelect from "../common/select/LanguageSelect";
 import {CaptchaModal} from "../common/modal/CaptchaModal";
+import {CaptchaRule} from "../common/modal/CaptchaModal";
 import RedirectForm from "../common/RedirectForm";

 class LoginPage extends React.Component {
@ -47,7 +48,7 @@ class LoginPage extends React.Component {
      validEmailOrPhone: false,
      validEmail: false,
      loginMethod: "password",
-      enableCaptchaModal: false,
+      enableCaptchaModal: CaptchaRule.Never,
      openCaptchaModal: false,
      verifyCaptcha: undefined,
      samlResponse: "",
@ -81,7 +82,13 @@ class LoginPage extends React.Component {
    if (prevProps.application !== this.props.application) {
      const captchaProviderItems = this.getCaptchaProviderItems(this.props.application);
      if (captchaProviderItems) {
-        this.setState({enableCaptchaModal: captchaProviderItems.some(providerItem => providerItem.rule === "Always")});
+        if (captchaProviderItems.some(providerItem => providerItem.rule === "Always")) {
+          this.setState({enableCaptchaModal: CaptchaRule.Always});
+        } else if (captchaProviderItems.some(providerItem => providerItem.rule === "Dynamic")) {
+          this.setState({enableCaptchaModal: CaptchaRule.Dynamic});
+        } else {
+          this.setState({enableCaptchaModal: CaptchaRule.Never});
+        }
      }

      if (this.props.account && this.props.account.owner === this.props.application?.organization) {
@ -110,6 +117,22 @@ class LoginPage extends React.Component {
    }
  }

+  checkCaptchaStatus(values) {
+    AuthBackend.getCaptchaStatus(values)
+      .then((res) => {
+        if (res.status === "ok") {
+          if (res.data) {
+            this.setState({
+              openCaptchaModal: true,
+              values: values,
+            });
+            return null;
+          }
+        }
+        this.login(values);
+      });
+  }
+
  getApplicationLogin() {
    const oAuthParams = Util.getOAuthGetParameters();
    AuthBackend.getApplicationLogin(oAuthParams)
@ -255,15 +278,19 @@ class LoginPage extends React.Component {
      this.signInWithWebAuthn(username, values);
      return;
    }
-
-    if (this.state.loginMethod === "password" && this.state.enableCaptchaModal) {
-      this.setState({
-        openCaptchaModal: true,
-        values: values,
-      });
-    } else {
-      this.login(values);
+    if (this.state.loginMethod === "password") {
+      if (this.state.enableCaptchaModal === CaptchaRule.Always) {
+        this.setState({
+          openCaptchaModal: true,
+          values: values,
+        });
+        return;
+      } else if (this.state.enableCaptchaModal === CaptchaRule.Dynamic) {
+        this.checkCaptchaStatus(values);
+        return;
+      }
    }
+    this.login(values);
  }

  login(values) {
@ -544,13 +571,15 @@ class LoginPage extends React.Component {
  }

  renderCaptchaModal(application) {
-    if (!this.state.enableCaptchaModal) {
+    if (this.state.enableCaptchaModal === CaptchaRule.Never) {
      return null;
    }
-
-    const provider = this.getCaptchaProviderItems(application)
-      .filter(providerItem => providerItem.rule === "Always")
-      .map(providerItem => providerItem.provider)[0];
+    const captchaProviderItems = this.getCaptchaProviderItems(application);
+    const alwaysProviderItems = captchaProviderItems.filter(providerItem => providerItem.rule === "Always");
+    const dynamicProviderItems = captchaProviderItems.filter(providerItem => providerItem.rule === "Dynamic");
+    const provider = alwaysProviderItems.length > 0
+      ? alwaysProviderItems[0].provider
+      : dynamicProviderItems[0].provider;

    return <CaptchaModal
      owner={provider.owner}
--- a/web/src/common/modal/CaptchaModal.js
+++ b/web/src/common/modal/CaptchaModal.js
@ -170,3 +170,9 @@ export const CaptchaModal = (props) => {
    </Modal>
  );
 };
+
+export const CaptchaRule = {
+  Always: "Always",
+  Never: "Never",
+  Dynamic: "Dynamic",
+};
--- a/web/src/locales/de/data.json
+++ b/web/src/locales/de/data.json
@ -25,6 +25,7 @@
    "Copy prompt page URL": "URL der Prompt-Seite kopieren",
    "Copy signin page URL": "URL der Anmeldeseite kopieren",
    "Copy signup page URL": "URL der Anmeldeseite kopieren",
+    "Dynamic": "Dynamic",
    "Edit Application": "Anwendung bearbeiten",
    "Enable Email linking": "E-Mail-Verknüpfung aktivieren",
    "Enable Email linking - Tooltip": "Bei der Verwendung von Drittanbietern zur Anmeldung wird, wenn es in der Organisation einen Benutzer mit der gleichen E-Mail gibt, automatisch die Drittanbieter-Anmelde-Methode mit diesem Benutzer verbunden",
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@ -25,6 +25,7 @@
    "Copy prompt page URL": "Copy prompt page URL",
    "Copy signin page URL": "Copy signin page URL",
    "Copy signup page URL": "Copy signup page URL",
+    "Dynamic": "Dynamic",
    "Edit Application": "Edit Application",
    "Enable Email linking": "Enable Email linking",
    "Enable Email linking - Tooltip": "When using 3rd-party providers to log in, if there is a user in the organization with the same Email, the 3rd-party login method will be automatically associated with that user",
--- a/web/src/locales/es/data.json
+++ b/web/src/locales/es/data.json
@ -25,6 +25,7 @@
    "Copy prompt page URL": "Copiar URL de la página del prompt",
    "Copy signin page URL": "Copiar la URL de la página de inicio de sesión",
    "Copy signup page URL": "Copiar URL de la página de registro",
+    "Dynamic": "Dynamic",
    "Edit Application": "Editar solicitud",
    "Enable Email linking": "Habilitar enlace de correo electrónico",
    "Enable Email linking - Tooltip": "Cuando se utilizan proveedores externos de inicio de sesión, si hay un usuario en la organización con el mismo correo electrónico, el método de inicio de sesión externo se asociará automáticamente con ese usuario",
--- a/web/src/locales/fr/data.json
+++ b/web/src/locales/fr/data.json
@ -25,6 +25,7 @@
    "Copy prompt page URL": "Copier l'URL de la page de l'invite",
    "Copy signin page URL": "Copier l'URL de la page de connexion",
    "Copy signup page URL": "Copiez l'URL de la page d'inscription",
+    "Dynamic": "Dynamic",
    "Edit Application": "Modifier l'application",
    "Enable Email linking": "Autoriser la liaison de courrier électronique",
    "Enable Email linking - Tooltip": "Lorsque l'on utilise des fournisseurs tiers pour se connecter, s'il y a un utilisateur dans l'organisation avec la même adresse e-mail, la méthode de connexion tierce sera automatiquement associée à cet utilisateur",
--- a/web/src/locales/id/data.json
+++ b/web/src/locales/id/data.json
@ -25,6 +25,7 @@
    "Copy prompt page URL": "Salin URL halaman prompt",
    "Copy signin page URL": "Salin URL halaman masuk",
    "Copy signup page URL": "Salin URL halaman pendaftaran",
+    "Dynamic": "Dynamic",
    "Edit Application": "Mengedit aplikasi",
    "Enable Email linking": "Aktifkan pengaitan email",
    "Enable Email linking - Tooltip": "Ketika menggunakan penyedia layanan pihak ketiga untuk masuk, jika ada pengguna di organisasi dengan email yang sama, metode login pihak ketiga akan secara otomatis terhubung dengan pengguna tersebut",
--- a/web/src/locales/ja/data.json
+++ b/web/src/locales/ja/data.json
@ -25,6 +25,7 @@
    "Copy prompt page URL": "プロンプトページのURLをコピーしてください",
    "Copy signin page URL": "サインインページのURLをコピーしてください",
    "Copy signup page URL": "サインアップページのURLをコピーしてください",
+    "Dynamic": "Dynamic",
    "Edit Application": "アプリケーションを編集する",
    "Enable Email linking": "イーメールリンクの有効化",
    "Enable Email linking - Tooltip": "組織内に同じメールアドレスを持つユーザーがいる場合、サードパーティのログイン方法は自動的にそのユーザーに関連付けられます",
--- a/web/src/locales/ko/data.json
+++ b/web/src/locales/ko/data.json
@ -25,6 +25,7 @@
    "Copy prompt page URL": "프롬프트 페이지 URL을 복사하세요",
    "Copy signin page URL": "사인인 페이지 URL 복사",
    "Copy signup page URL": "가입 페이지 URL을 복사하세요",
+    "Dynamic": "Dynamic",
    "Edit Application": "앱 편집하기",
    "Enable Email linking": "이메일 링크 사용 가능하도록 설정하기",
    "Enable Email linking - Tooltip": "3rd-party 로그인 공급자를 사용할 때, 만약 조직 내에 동일한 이메일을 사용하는 사용자가 있다면, 3rd-party 로그인 방법은 자동으로 해당 사용자와 연동됩니다",
--- a/web/src/locales/ru/data.json
+++ b/web/src/locales/ru/data.json
@ -25,6 +25,7 @@
    "Copy prompt page URL": "Скопируйте URL страницы предложения",
    "Copy signin page URL": "Скопируйте URL-адрес страницы входа",
    "Copy signup page URL": "Скопируйте URL страницы регистрации",
+    "Dynamic": "Dynamic",
    "Edit Application": "Изменить приложение",
    "Enable Email linking": "Включить связывание электронной почты",
    "Enable Email linking - Tooltip": "При использовании сторонних провайдеров для входа, если в организации есть пользователь с такой же электронной почтой, то способ входа через стороннего провайдера автоматически будет связан с этим пользователем",
--- a/web/src/locales/vi/data.json
+++ b/web/src/locales/vi/data.json
@ -25,6 +25,7 @@
    "Copy prompt page URL": "Sao chép URL của trang nhắc nhở",
    "Copy signin page URL": "Sao chép URL trang đăng nhập",
    "Copy signup page URL": "Sao chép URL trang đăng ký",
+    "Dynamic": "Dynamic",
    "Edit Application": "Chỉnh sửa ứng dụng",
    "Enable Email linking": "Cho phép liên kết Email",
    "Enable Email linking - Tooltip": "Khi sử dụng nhà cung cấp bên thứ ba để đăng nhập, nếu có người dùng trong tổ chức có cùng địa chỉ Email, phương pháp đăng nhập bên thứ ba sẽ tự động được liên kết với người dùng đó",
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@ -25,6 +25,7 @@
    "Copy prompt page URL": "复制提醒页面URL",
    "Copy signin page URL": "复制登录页面URL",
    "Copy signup page URL": "复制注册页面URL",
+    "Dynamic": "动态开启",
    "Edit Application": "编辑应用",
    "Enable Email linking": "自动关联邮箱相同的账号",
    "Enable Email linking - Tooltip": "使用第三方授权登录时，如果组织中存在与授权用户邮箱相同的用户，会自动关联该第三方登录方式到该用户",
--- a/web/src/table/ProviderTable.js
+++ b/web/src/table/ProviderTable.js
@ -189,6 +189,7 @@ class ProviderTable extends React.Component {
                this.updateField(table, index, "rule", value);
              }} >
              <Option key="None" value="None">{i18next.t("application:None")}</Option>
+              <Option key="Dynamic" value="Dynamic">{i18next.t("application:Dynamic")}</Option>
              <Option key="Always" value="Always">{i18next.t("application:Always")}</Option>
            </Select>
          );