序文:この記事では、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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL でデータ復旧に binlog を使用する方法
>>: Maven+Tomcat 基本イメージを構築する Docker の実装
HTML コードを書くとき、最初の行は DOCTYPE にする必要がありますが、DOCTYPE は通...
目次1. MySQLレプリケーションプロセス2. MySQLの遅延問題の分析3. プロモーション期間...
CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...
以前、追加と変更を一緒に記述したテストプログラムを書いたことがあります。変更が必要な場合は、フォーム...
背景トランザクションについて話すとき、誰もがそれに精通している必要があります。MySQL データベー...
WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...
原文記事、転載の際は著者と出典を明記してください! Web デザインは間違いなくテクノロジーであり、...
目次1. 概要1.1 querySelector() と querySelectorAll() の使...
目次序文2次元配列、一方向基本インターフェースのマッピング幅優先、包括的検索マップ編集経路探索アルゴ...
RDF と OWL は、2 つの重要なセマンティック ウェブ テクノロジーです。 RDF と OWL...
エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...
この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...
目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...
目次導入配列の作成作成方法詳しい説明方法参加する() push() と pop() shift() ...
npm インストールチュートリアル: 1. Node.jsインストールパッケージをダウンロードする公...