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 の実装

推薦する

eCharts でパーセンテージ付きの横棒グラフを実装する方法

目次サンプルコードレンダリングコード分​​析要約するサンプルコード var データ = [220, ...

Dockerのクイックガイド

Docker は、安全で繰り返し可能な環境でソフトウェアを自動的にデプロイする方法を提供し、コンピュ...

Nginx で Angular プロジェクトを展開する際の落とし穴

コンパイル後にAngularプロジェクトをNginxにデプロイする方法をオンラインで検索すると、ほと...

Linux 環境変数とプロセス アドレス空間の概要

目次Linux 環境変数とプロセスアドレス空間コードを通じて環境変数を取得するプロセスアドレス空間な...

ニューススタイルのウェブサイトデザイン例25選

bmi ボイジャーピッチフォークアルスター食料品店チャウ真/斜めポスタこれは偽のDIYですクリエイテ...

Dayjs を使用して Vue で一般的な日付を計算する方法

vue を使用してプロジェクトを開発する場合、フロントエンドでは次のような日付と時刻を計算する必要が...

Vueは移動可能なフローティングボタンを実装します

この記事の例では、どこにでも移動できるフローティングボタンを実現するためのVueの具体的なコードを共...

MySQL バージョンは、2 つのタイムスタンプ型の値をサポートしていないバージョンよりも低いです。

MySQL エラー:エラー コード: 1293 テーブル定義が正しくありません。CURRENT_T...

MySQLインデックスを最適化する方法

1. MySQL のインデックスの使用方法インデックスは、特定の列の値を持つ行をすばやく見つけるため...

コード標準では、SQL ステートメントに結合が多すぎないようにする必要があるのはなぜですか?

無料ポイントインタビュアー:Linuxを使ったことはありますか?私:はいインタビュアー:メモリ使用量...

HTML 基本要約推奨事項 (テキスト形式)

HTMLテキスト書式タグ 標簽 描述 <b> 定義粗體文本 <em> 呈現...

JavaScript の基礎におけるデータ型の詳細な説明

目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...

VueはOpenLayersを使用してTiandi MapとAmapを読み込み

目次1. 世界地図1. VueにOpenLayersをインストールする2. アマップ1. 世界地図1...

ウェブページの背景色を制御する CSS コード

誰もが自分の Web ページの背景にふさわしい画像を見つけることに悩むことが多いと思います。これは事...

vue keepAlive キャッシュクリア問題事例の詳細な説明

Keepalive は Vue プロジェクトでのキャッシュによく使用され、基本的な要件を満たすのに非...