llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-04 21:30:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add aliyun captcha (#833)

Browse Source 
* feat: add aliyun captcha provider

* Rename App key

* fix typo

* Rename HMACSHA1 & Reused clientId2 and clientSecret2

* Update ProviderEditPage.js

* Delete unused import

Co-authored-by: Gucheng <85475922+nomeguy@users.noreply.github.com>
This commit is contained in:
Resulte Lee
2022-06-29 11:31:32 +08:00
committed by GitHub
parent 8a66448365
commit a0e11cc8a0
9 changed files with 272 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/ProviderEditPage.js
View File

@ -81,7 +81,11 @@ class ProviderEditPage extends React.Component {
return Setting.getLabel(i18next.t("provider:Client ID"), i18next.t("provider:Client ID - Tooltip"));
}
case "Captcha":
return Setting.getLabel(i18next.t("provider:Site key"), i18next.t("provider:Site key - Tooltip"));
if (this.state.provider.type === "Aliyun Captcha") {
return Setting.getLabel(i18next.t("provider:Access key"), i18next.t("provider:Access key - Tooltip"));
} else {
return Setting.getLabel(i18next.t("provider:Site key"), i18next.t("provider:Site key - Tooltip"));
}
default:
return Setting.getLabel(i18next.t("provider:Client ID"), i18next.t("provider:Client ID - Tooltip"));
}
@ -100,7 +104,11 @@ class ProviderEditPage extends React.Component {
return Setting.getLabel(i18next.t("provider:Client secret"), i18next.t("provider:Client secret - Tooltip"));
}
case "Captcha":
return Setting.getLabel(i18next.t("provider:Secret key"), i18next.t("provider:Secret key - Tooltip"));
if (this.state.provider.type === "Aliyun Captcha") {
return Setting.getLabel(i18next.t("provider:Secret access key"), i18next.t("provider:SecretAccessKey - Tooltip"));
} else {
return Setting.getLabel(i18next.t("provider:Secret key"), i18next.t("provider:Secret key - Tooltip"));
}
default:
return Setting.getLabel(i18next.t("provider:Client secret"), i18next.t("provider:Client secret - Tooltip"));
}
@ -242,7 +250,7 @@ class ProviderEditPage extends React.Component {
</Col>
</Row>
{
this.state.provider.type !== "WeCom" && this.state.provider.type !== "Infoflow" ? null : (
this.state.provider.type !== "WeCom" && this.state.provider.type !== "Infoflow" && this.state.provider.type !== "Aliyun Captcha" ? null : (
<React.Fragment>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={2}>
@ -378,11 +386,13 @@ class ProviderEditPage extends React.Component {
)
}
{
this.state.provider.type !== "WeChat" ? null : (
this.state.provider.type !== "WeChat" && this.state.provider.type !== "Aliyun Captcha" ? null : (
<React.Fragment>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("provider:Client ID 2"), i18next.t("provider:Client ID 2 - Tooltip"))}
{this.state.provider.type === "Aliyun Captcha"
? Setting.getLabel(i18next.t("provider:Scene"), i18next.t("provider:Scene - Tooltip"))
: Setting.getLabel(i18next.t("provider:Client ID 2"), i18next.t("provider:Client ID 2 - Tooltip"))}
</Col>
<Col span={22} >
<Input value={this.state.provider.clientId2} onChange={e => {
@ -392,7 +402,9 @@ class ProviderEditPage extends React.Component {
</Row>
<Row style={{marginTop: '20px'}} >
<Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
{Setting.getLabel(i18next.t("provider:Client secret 2"), i18next.t("provider:Client secret 2 - Tooltip"))}
{this.state.provider.type === "Aliyun Captcha"
? Setting.getLabel(i18next.t("provider:App key"), i18next.t("provider:App key - Tooltip"))
: Setting.getLabel(i18next.t("provider:Client secret 2"), i18next.t("provider:Client secret 2 - Tooltip"))}
</Col>
<Col span={22} >
<Input value={this.state.provider.clientSecret2} onChange={e => {
@ -686,10 +698,13 @@ class ProviderEditPage extends React.Component {
providerName={this.state.providerName}
clientSecret={this.state.provider.clientSecret}
captchaType={this.state.provider.type}
subType={this.state.provider.subType}
owner={this.state.provider.owner}
clientId={this.state.provider.clientId}
name={this.state.provider.name}
providerUrl={this.state.provider.providerUrl}
clientId2={this.state.provider.clientId2}
clientSecret2={this.state.provider.clientSecret2}
/>
</Col>
</Row>

10
web/src/Setting.js
View File

@ -118,6 +118,10 @@ export const OtherProviderInfo = {
"hCaptcha": {
logo: `${StaticBaseUrl}/img/social_hcaptcha.png`,
url: "https://www.hcaptcha.com",
},
"Aliyun Captcha": {
logo: `${StaticBaseUrl}/img/social_aliyun.png`,
url: "https://help.aliyun.com/product/28308.html",
}
}
};
@ -614,6 +618,7 @@ export function getProviderTypeOptions(category) {
{id: 'Default', name: 'Default'},
{id: 'reCAPTCHA', name: 'reCAPTCHA'},
{id: 'hCaptcha', name: 'hCaptcha'},
{id: 'Aliyun Captcha', name: 'Aliyun Captcha'},
]);
} else {
return [];
@ -628,6 +633,11 @@ export function getProviderSubTypeOptions(type) {
{id: 'Third-party', name: 'Third-party'},
]
);
} else if (type === "Aliyun Captcha") {
return [
{id: 'nc', name: 'Sliding Validation'},
{id: 'ic', name: 'Intelligent Validation'},
];
} else {
return [];
}

64
web/src/common/CaptchaPreview.js
View File

@ -20,18 +20,27 @@ import * as ProviderBackend from "../backend/ProviderBackend";
import { SafetyOutlined } from "@ant-design/icons";
import { CaptchaWidget } from "./CaptchaWidget";
export const CaptchaPreview = ({ provider, providerName, clientSecret, captchaType, owner, clientId, name, providerUrl }) => {
export const CaptchaPreview = ({
provider,
providerName,
clientSecret,
captchaType,
subType,
owner,
clientId,
name,
providerUrl,
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(() => {
UserBackend.verifyCaptcha(captchaType, captchaToken, secret).then(() => {
setCaptchaToken("");
setVisible(false);
});
@ -48,9 +57,10 @@ export const CaptchaPreview = ({ provider, providerName, clientSecret, captchaTy
setCaptchaImg(res.captchaImage);
} else {
setSecret(res.clientSecret);
setSecret2(res.clientSecret2);
}
});
}
};
const clickPreview = () => {
setVisible(true);
@ -100,24 +110,50 @@ export const CaptchaPreview = ({ provider, providerName, clientSecret, captchaTy
setCaptchaToken(token);
};
const renderCheck = () => {
if (captchaType === "Default") {
return renderDefaultCaptcha();
} else {
return (
<CaptchaWidget
captchaType={captchaType}
siteKey={clientId}
onChange={onSubmit}
/>
<Col>
<Row>
<CaptchaWidget
captchaType={captchaType}
subType={subType}
siteKey={clientId}
clientSecret={secret}
onChange={onSubmit}
clientId2={clientId2}
clientSecret2={secret2}
/>
</Row>
</Col>
);
}
};
const getButtonDisabled = () => {
if (captchaType !== "Default") {
if (!clientId || !clientSecret) {
return true;
}
if (captchaType === "Aliyun Captcha") {
if (!subType || !clientId2 || !clientSecret2) {
return true;
}
}
}
return false;
};
return (
<React.Fragment>
<Button style={{ fontSize: 14 }} type={"primary"} onClick={clickPreview} disabled={captchaType !== "Default" && (!clientId || !clientSecret)}>
<Button
style={{ fontSize: 14 }}
type={"primary"}
onClick={clickPreview}
disabled={getButtonDisabled()}
>
{i18next.t("general:Preview")}
</Button>
<Modal

27
web/src/common/CaptchaWidget.js
View File

@ -14,7 +14,7 @@
import React, { useEffect } from "react";
export const CaptchaWidget = ({ captchaType, siteKey, onChange }) => {
export const CaptchaWidget = ({ captchaType, subType, siteKey, clientSecret, onChange, clientId2, clientSecret2 }) => {
const loadScript = (src) => {
var tag = document.createElement("script");
tag.async = false;
@ -53,11 +53,34 @@ export const CaptchaWidget = ({ captchaType, siteKey, onChange }) => {
}
}, 300);
break;
case "Aliyun Captcha":
const AWSCTimer = setInterval(() => {
if (!window.AWSC) {
loadScript("https://g.alicdn.com/AWSC/AWSC/awsc.js");
}
if (window.AWSC) {
if (clientSecret2 && clientSecret2 !== "***") {
window.AWSC.use(subType, function (state, module) {
module.init({
appkey: clientSecret2,
scene: clientId2,
renderTo: "captcha",
success: function (data) {
onChange(`SessionId=${data.sessionId}&AccessKeyId=${siteKey}&Scene=${clientId2}&AppKey=${clientSecret2}&Token=${data.token}&Sig=${data.sig}&RemoteIp=192.168.0.1`);
},
});
});
}
clearInterval(AWSCTimer);
}
}, 300);
break;
default:
break;
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [captchaType, siteKey]);
}, [captchaType, subType, siteKey, clientSecret, clientId2, clientSecret2]);
return <div id="captcha"></div>;
};

15
web/src/common/CountDownInput.js
View File

@ -14,7 +14,6 @@
import {Button, Col, Input, Modal, Row} from "antd";
import React from "react";
import * as Setting from "../Setting";
import i18next from "i18next";
import * as UserBackend from "../backend/UserBackend";
import {SafetyOutlined} from "@ant-design/icons";
@ -34,6 +33,9 @@ export const CountDownInput = (props) => {
const [buttonLoading, setButtonLoading] = React.useState(false);
const [buttonDisabled, setButtonDisabled] = React.useState(true);
const [clientId, setClientId] = React.useState("");
const [subType, setSubType] = React.useState("");
const [clientId2, setClientId2] = React.useState("");
const [clientSecret2, setClientSecret2] = React.useState("");
const handleCountDown = (leftTime = 60) => {
let leftTimeSecond = leftTime
@ -79,13 +81,14 @@ export const CountDownInput = (props) => {
setCaptchaImg(res.captchaImage);
setCheckType("Default");
setVisible(true);
} else if (res.type === "reCAPTCHA" || res.type === "hCaptcha") {
} else {
setCheckType(res.type);
setClientId(res.clientId);
setCheckId(res.clientSecret);
setVisible(true);
} else {
Setting.showMessage("error", i18next.t("signup:Unknown Check Type"));
setSubType(res.subType);
setClientId2(res.clientId2);
setClientSecret2(res.clientSecret2);
}
})
}
@ -123,8 +126,12 @@ export const CountDownInput = (props) => {
return (
<CaptchaWidget
captchaType={checkType}
subType={subType}
siteKey={clientId}
clientSecret={checkId}
onChange={onSubmit}
clientId2={clientId2}
clientSecret2={clientSecret2}
/>
);
}