序文:この記事では、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 の実装
目次サンプルコードレンダリングコード分析要約するサンプルコード var データ = [220, ...
Docker は、安全で繰り返し可能な環境でソフトウェアを自動的にデプロイする方法を提供し、コンピュ...
コンパイル後にAngularプロジェクトをNginxにデプロイする方法をオンラインで検索すると、ほと...
目次Linux 環境変数とプロセスアドレス空間コードを通じて環境変数を取得するプロセスアドレス空間な...
bmi ボイジャーピッチフォークアルスター食料品店チャウ真/斜めポスタこれは偽のDIYですクリエイテ...
vue を使用してプロジェクトを開発する場合、フロントエンドでは次のような日付と時刻を計算する必要が...
この記事の例では、どこにでも移動できるフローティングボタンを実現するためのVueの具体的なコードを共...
MySQL エラー:エラー コード: 1293 テーブル定義が正しくありません。CURRENT_T...
1. MySQL のインデックスの使用方法インデックスは、特定の列の値を持つ行をすばやく見つけるため...
無料ポイントインタビュアー:Linuxを使ったことはありますか?私:はいインタビュアー:メモリ使用量...
HTMLテキスト書式タグ 標簽 描述 <b> 定義粗體文本 <em> 呈現...
目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...
目次1. 世界地図1. VueにOpenLayersをインストールする2. アマップ1. 世界地図1...
誰もが自分の Web ページの背景にふさわしい画像を見つけることに悩むことが多いと思います。これは事...
Keepalive は Vue プロジェクトでのキャッシュによく使用され、基本的な要件を満たすのに非...