Ant Design Pro ログイン機能にグラフィック検証コード コンポーネントを統合する方法

Ant Design Pro ログイン機能にグラフィック検証コード コンポーネントを統合する方法

序文:

この記事では、Ant Design Proログイン機能にグラフィック検証コードコンポーネントを統合する手順のみを紹介します。サーバー側の方法については、「OAuth2.0認証システムに基づく検証コード機能」を参照してください。

文章:

Ant Design Pro テンプレートでは、アカウントとパスワードのログイン機能部分 (以下に示す) にグラフィック検証コードが開発されていないため、この機能を自分で実装する必要があります。ここでのログイン機能は実際にはフォームの送信なので、グラフィック検証コード フォーム コントロールを独自に開発するだけで済みます。具体的な実装は次のとおりです。

1. グラフィック検証コードフォーム制御コードCaptchaInput.tsx:

'react' から React、{useState、useEffect} をインポートします。
'antd' から {Input, message} をインポートします。
'@ant-design/icons' から {SafetyCertificateOutlined} をインポートします。
'@/utils/api' から api をインポートします。
"@/utils/stringUtil" から stringUtil をインポートします。
「@/utils/request」からリクエストをインポートします。
"umi" から {useIntl} をインポートします。
 
 
インターフェース CaptchaInputValue {
  captchaコード?: 文字列;
  captchaKey?: 文字列;
}
 
インターフェース CaptchaInputProps {
  値?: CaptchaInputValue;
  onChange?: (値: CaptchaInputValue) => void;
}
 
/**
 * 認証コードを取得 */
const getCaptcha = 非同期() => {
  試す {
    const データ = リクエストを待機します (api.captcha);
    (データコード === 1)の場合{
      data.data を返します。
    }
  } キャッチ(エラー){
    message.error('部門ツリーを取得できませんでした。もう一度お試しください');
    戻る [];
  }
  message.error('部門ツリーを取得できませんでした。もう一度お試しください');
  戻る [];
}
 
const CaptchaInput: React.FC<CaptchaInputProps> = ({value = {}, onChange}) => {
 
  定数 intl = useIntl();
  const [captchaCode、setCaptchaCode] = useState<文字列>('');
  const [captchaKey、setCaptchaKey] = useState<文字列>('');
  const [imageData, setImageData] = useState<string>('');
 
  // トリガーの変更 const triggerChange = (changedValue: { captchaCode?: string; captchaKey?: string }) => {
    変更があった場合
      onChange({captchaCode、captchaKey、...値、...変更された値});
    }
  };
 
  使用効果(() => {
    getCaptcha().then((データ: any) => {
      キャプチャキーを設定します。
      画像データを設定します。
      トリガーの変更({captchaKey: data.captchaKey});
    })
  }, []);
 
 
  // 入力ボックスの変更 const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const コード = e.target.value || '';
    (stringUtil.isNotEmpty(コード))の場合{
      CaptchaCodeを設定します(コード)。
    }
    トリガー変更({captchaCode: コード});
  }
 
  // 時間型の変更 const onClickImage = () => {
    getCaptcha().then((データ: any) => {
      キャプチャキーを設定します。
      画像データを設定します。
      トリガーの変更({captchaKey: data.captchaKey});
    })
  };
 
  戻る (
    <span>
       <Input.Group コンパクト>
          <Input prefix={<SafetyCertificateOutlined style={{color: "#319cff"}}/>} placeholder={intl.formatMessage({
            id: 'pages.login.captcha.placeholder',
            defaultMessage: '認証コードを入力してください',
          })}
                 onChange={onChangeInput}
                 スタイル={{幅: '75%', マージン右: 5, パディング: '6.5px 11px 6.5px 11px', 垂直配置: 'middle'}}/>
                   <img style={{幅: '23%', 高さ: '35px', 垂直配置: 'middle', パディング: '0px 0px 0px 0px'}}
                        src={imageData} onClick={onClickImage}/>
       </Input.Group>
    </span>
  );
};
デフォルトの CaptchaInput をエクスポートします。

2. ログインページ統合コンポーネント:

'./components/CaptchaInput' から CaptchaInput をインポートします。
 
…… 
 
  const handleSubmit = (値: LoginParamsType) => {
    const { ディスパッチ } = props;
    values.client_id = "hanxiaozhang";
    values.client_secret = "hanxiaozhang";
    values.scope = "hanxiaozhang";
    values.grant_type = "パスワード";
    値.captcha_key = 値.captchaComp.captchaKey;
    値.captcha_code = 値.captchaComp.captchaCode;
    values.captchaComp を削除します。
    急送({
      タイプ: 'ログイン/ログイン'、
      ペイロード: {...値、タイプ},
    });
  };
 
…… 
 
            <Form.Item name="captchaComp" ルール={[{
              検証トリガー: 'onBlur'、
              バリデータ: async (ルール, 値) => {
                // console.log(ルール)
                (文字列ユーティリティが空の場合(値キャプチャコード)){
                  throw new Error('確認コードを入力してください!');
                }
              }
            },]}>
              <キャプチャ入力/>
            </フォーム.アイテム>
 
……

3. 使用方法:

統合後の効果は次のとおりです。

上記は、Ant Design Pro ログイン機能にグラフィック検証コード コンポーネントを統合する詳細です。Ant Design Pro ログインの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • AntDesign Pro + .NET CoreはJWTベースのログイン認証機能を実装します
  • Ant Design Proメニューカスタムアイコンについての簡単な説明
  • Ant Design Pro における制御可能なフィルタリングと並べ替えの例
  • Ant Design ProでProTableを使用する方法
  • antデザインでthis.props.form.validateFieldsが実行されない問題を解決する
  • Ant Design Pro でのファイルダウンロードの実装コード

<<:  MySQL でデータ復旧に binlog を使用する方法

>>:  Maven+Tomcat 基本イメージを構築する Docker の実装

推薦する

HTML チュートリアル: DOCTYPE の省略形

HTML コードを書くとき、最初の行は DOCTYPE にする必要がありますが、DOCTYPE は通...

MySQL のレイテンシ問題とデータフラッシュ戦略プロセスの分析

目次1. MySQLレプリケーションプロセス2. MySQLの遅延問題の分析3. プロモーション期間...

CSS3は小さな矢印のさまざまなグラフィック効果を実現します

CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...

無効にするとフォームの入力が送信できない問題の解決方法

以前、追加と変更を一緒に記述したテストプログラムを書いたことがあります。変更が必要な場合は、フォーム...

MySql 学習ノートにおけるトランザクション分離レベルの詳細な説明

背景トランザクションについて話すとき、誰もがそれに精通している必要があります。MySQL データベー...

WeChatアプレットがログインインターフェースを実装

WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...

ウェブデザイン実践者必読のキャリアプラン

原文記事、転載の際は著者と出典を明記してください! Web デザインは間違いなくテクノロジーであり、...

JavaScript の querySelector メソッドと getElementById メソッドの違いを分析する

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

Javascript と Vue を組み合わせて、あらゆる迷路画像の自動パス検索を実現します。

目次序文2次元配列、一方向基本インターフェースのマッピング幅優先、包括的検索マップ編集経路探索アルゴ...

W3C チュートリアル (14): W3C RDF および OWL アクティビティ

RDF と OWL は、2 つの重要なセマンティック ウェブ テクノロジーです。 RDF と OWL...

Vue3 の参照と参照の詳細

エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...

Docker stopはすべてのコンテナを停止/削除します

この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...

VueはTeleportをベースにModalコンポーネントを実装します

目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...

JavaScript 配列メソッドの詳細な例

目次導入配列の作成作成方法詳しい説明方法参加する() push() と pop() shift() ...

node.jsのインストールとHbuilderXの設定の詳細な説明

npm インストールチュートリアル: 1. Node.jsインストールパッケージをダウンロードする公...