mirror of
https://github.com/casdoor/casdoor.git
synced 2025-07-04 05:10:19 +08:00
feat: allow captcha to be enabled when logging in (#1211)
* Fix bug in GetAcceptLanguage() * feat: allow captcha to be enabled when logging in * feat: when the login password is wrong, enable captcha * feat: Restrict captcha from frontend * fix: modify CaptchaModal component * fix: modify the words of i18n * Update data.json Co-authored-by: Gucheng Wang <nomeguy@qq.com> Co-authored-by: hsluoyz <hsluoyz@qq.com>
This commit is contained in:
wenxuan70
159
web/src/common/CaptchaModal.js
Normal file
159
web/src/common/CaptchaModal.js
Normal file
@ -0,0 +1,159 @@
|
||||
// Copyright 2022 The Casdoor Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import {Button, Col, Input, Modal, Row} from "antd";
|
||||
import i18next from "i18next";
|
||||
import React, {useEffect} from "react";
|
||||
import * as UserBackend from "../backend/UserBackend";
|
||||
import {CaptchaWidget} from "./CaptchaWidget";
|
||||
import {SafetyOutlined} from "@ant-design/icons";
|
||||
|
||||
export const CaptchaModal = ({
|
||||
owner,
|
||||
name,
|
||||
captchaType,
|
||||
subType,
|
||||
clientId,
|
||||
clientId2,
|
||||
clientSecret,
|
||||
clientSecret2,
|
||||
open,
|
||||
onOk,
|
||||
onCancel,
|
||||
canCancel,
|
||||
}) => {
|
||||
const [visible, setVisible] = React.useState(false);
|
||||
const [captchaImg, setCaptchaImg] = React.useState("");
|
||||
const [captchaToken, setCaptchaToken] = React.useState("");
|
||||
const [secret, setSecret] = React.useState(clientSecret);
|
||||
const [secret2, setSecret2] = React.useState(clientSecret2);
|
||||
|
||||
useEffect(() => {
|
||||
setVisible(() => {
|
||||
if (open) {
|
||||
getCaptchaFromBackend();
|
||||
} else {
|
||||
cleanUp();
|
||||
}
|
||||
return open;
|
||||
});
|
||||
}, [open]);
|
||||
|
||||
const handleOk = () => {
|
||||
onOk?.(captchaType, captchaToken, secret);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
onCancel?.();
|
||||
};
|
||||
|
||||
const cleanUp = () => {
|
||||
setCaptchaToken("");
|
||||
};
|
||||
|
||||
const getCaptchaFromBackend = () => {
|
||||
UserBackend.getCaptcha(owner, name, true).then((res) => {
|
||||
if (captchaType === "Default") {
|
||||
setSecret(res.captchaId);
|
||||
setCaptchaImg(res.captchaImage);
|
||||
} else {
|
||||
setSecret(res.clientSecret);
|
||||
setSecret2(res.clientSecret2);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const renderDefaultCaptcha = () => {
|
||||
return (
|
||||
<Col>
|
||||
<Row
|
||||
style={{
|
||||
backgroundImage: `url('data:image/png;base64,${captchaImg}')`,
|
||||
backgroundRepeat: "no-repeat",
|
||||
height: "80px",
|
||||
width: "200px",
|
||||
borderRadius: "5px",
|
||||
border: "1px solid #ccc",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
/>
|
||||
<Row>
|
||||
<Input
|
||||
autoFocus
|
||||
value={captchaToken}
|
||||
prefix={<SafetyOutlined />}
|
||||
placeholder={i18next.t("general:Captcha")}
|
||||
onPressEnter={handleOk}
|
||||
onChange={(e) => setCaptchaToken(e.target.value)}
|
||||
/>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
const onSubmit = (token) => {
|
||||
setCaptchaToken(token);
|
||||
};
|
||||
|
||||
const renderCheck = () => {
|
||||
if (captchaType === "Default") {
|
||||
return renderDefaultCaptcha();
|
||||
} else {
|
||||
return (
|
||||
<Col>
|
||||
<Row>
|
||||
<CaptchaWidget
|
||||
captchaType={captchaType}
|
||||
subType={subType}
|
||||
siteKey={clientId}
|
||||
clientSecret={secret}
|
||||
onChange={onSubmit}
|
||||
clientId2={clientId2}
|
||||
clientSecret2={secret2}
|
||||
/>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const renderFooter = () => {
|
||||
if (canCancel) {
|
||||
return [
|
||||
<Button key="cancel" onClick={handleCancel}>{i18next.t("user:Cancel")}</Button>,
|
||||
<Button key="ok" type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>,
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
<Button key="ok" type="primary" onClick={handleOk}>{i18next.t("user:OK")}</Button>,
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Modal
|
||||
closable={false}
|
||||
maskClosable={false}
|
||||
destroyOnClose={true}
|
||||
title={i18next.t("general:Captcha")}
|
||||
visible={visible}
|
||||
width={348}
|
||||
footer={renderFooter()}
|
||||
>
|
||||
{renderCheck()}
|
||||
</Modal>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
@ -12,13 +12,12 @@
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import {Button, Col, Input, Modal, Row} from "antd";
|
||||
import {Button} from "antd";
|
||||
import React from "react";
|
||||
import i18next from "i18next";
|
||||
import * as UserBackend from "../backend/UserBackend";
|
||||
import {CaptchaModal} from "./CaptchaModal";
|
||||
import * as ProviderBackend from "../backend/ProviderBackend";
|
||||
import {SafetyOutlined} from "@ant-design/icons";
|
||||
import {CaptchaWidget} from "./CaptchaWidget";
|
||||
import * as UserBackend from "../backend/UserBackend";
|
||||
|
||||
export const CaptchaPreview = ({
|
||||
provider,
|
||||
@ -33,37 +32,9 @@ export const CaptchaPreview = ({
|
||||
clientId2,
|
||||
clientSecret2,
|
||||
}) => {
|
||||
const [visible, setVisible] = React.useState(false);
|
||||
const [captchaImg, setCaptchaImg] = React.useState("");
|
||||
const [captchaToken, setCaptchaToken] = React.useState("");
|
||||
const [secret, setSecret] = React.useState(clientSecret);
|
||||
const [secret2, setSecret2] = React.useState(clientSecret2);
|
||||
|
||||
const handleOk = () => {
|
||||
UserBackend.verifyCaptcha(captchaType, captchaToken, secret).then(() => {
|
||||
setCaptchaToken("");
|
||||
setVisible(false);
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
const getCaptchaFromBackend = () => {
|
||||
UserBackend.getCaptcha(owner, name, true).then((res) => {
|
||||
if (captchaType === "Default") {
|
||||
setSecret(res.captchaId);
|
||||
setCaptchaImg(res.captchaImage);
|
||||
} else {
|
||||
setSecret(res.clientSecret);
|
||||
setSecret2(res.clientSecret2);
|
||||
}
|
||||
});
|
||||
};
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const clickPreview = () => {
|
||||
setVisible(true);
|
||||
provider.name = name;
|
||||
provider.clientId = clientId;
|
||||
provider.type = captchaType;
|
||||
@ -71,64 +42,10 @@ export const CaptchaPreview = ({
|
||||
if (clientSecret !== "***") {
|
||||
provider.clientSecret = clientSecret;
|
||||
ProviderBackend.updateProvider(owner, providerName, provider).then(() => {
|
||||
getCaptchaFromBackend();
|
||||
setOpen(true);
|
||||
});
|
||||
} else {
|
||||
getCaptchaFromBackend();
|
||||
}
|
||||
};
|
||||
|
||||
const renderDefaultCaptcha = () => {
|
||||
return (
|
||||
<Col>
|
||||
<Row
|
||||
style={{
|
||||
backgroundImage: `url('data:image/png;base64,${captchaImg}')`,
|
||||
backgroundRepeat: "no-repeat",
|
||||
height: "80px",
|
||||
width: "200px",
|
||||
borderRadius: "5px",
|
||||
border: "1px solid #ccc",
|
||||
marginBottom: 10,
|
||||
}}
|
||||
/>
|
||||
<Row>
|
||||
<Input
|
||||
autoFocus
|
||||
value={captchaToken}
|
||||
prefix={<SafetyOutlined />}
|
||||
placeholder={i18next.t("general:Captcha")}
|
||||
onPressEnter={handleOk}
|
||||
onChange={(e) => setCaptchaToken(e.target.value)}
|
||||
/>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
const onSubmit = (token) => {
|
||||
setCaptchaToken(token);
|
||||
};
|
||||
|
||||
const renderCheck = () => {
|
||||
if (captchaType === "Default") {
|
||||
return renderDefaultCaptcha();
|
||||
} else {
|
||||
return (
|
||||
<Col>
|
||||
<Row>
|
||||
<CaptchaWidget
|
||||
captchaType={captchaType}
|
||||
subType={subType}
|
||||
siteKey={clientId}
|
||||
clientSecret={secret}
|
||||
onChange={onSubmit}
|
||||
clientId2={clientId2}
|
||||
clientSecret2={secret2}
|
||||
/>
|
||||
</Row>
|
||||
</Col>
|
||||
);
|
||||
setOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
@ -146,6 +63,16 @@ export const CaptchaPreview = ({
|
||||
return false;
|
||||
};
|
||||
|
||||
const onOk = (captchaType, captchaToken, secret) => {
|
||||
UserBackend.verifyCaptcha(captchaType, captchaToken, secret).then(() => {
|
||||
setOpen(false);
|
||||
});
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
@ -156,20 +83,20 @@ export const CaptchaPreview = ({
|
||||
>
|
||||
{i18next.t("general:Preview")}
|
||||
</Button>
|
||||
<Modal
|
||||
closable={false}
|
||||
maskClosable={false}
|
||||
destroyOnClose={true}
|
||||
title={i18next.t("general:Captcha")}
|
||||
visible={visible}
|
||||
okText={i18next.t("user:OK")}
|
||||
cancelText={i18next.t("user:Cancel")}
|
||||
onOk={handleOk}
|
||||
onCancel={handleCancel}
|
||||
width={348}
|
||||
>
|
||||
{renderCheck()}
|
||||
</Modal>
|
||||
<CaptchaModal
|
||||
owner={owner}
|
||||
name={name}
|
||||
captchaType={captchaType}
|
||||
subType={subType}
|
||||
clientId={clientId}
|
||||
clientId2={clientId2}
|
||||
clientSecret={clientSecret}
|
||||
clientSecret2={clientSecret2}
|
||||
open={open}
|
||||
onOk={onOk}
|
||||
onCancel={onCancel}
|
||||
canCancel={true}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user