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

feat: support face ID provider (#3666)

Browse Source
This commit is contained in:
DacongDA
2025-03-19 22:57:35 +08:00
committed by GitHub
parent 15a037ca74
commit 141372cb86
15 changed files with 598 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/ProviderEditPage.js
View File

@ -567,6 +567,8 @@ class ProviderEditPage extends React.Component {
this.updateProviderField("type", "MetaMask");
} else if (value === "Notification") {
this.updateProviderField("type", "Telegram");
} else if (value === "Face ID") {
this.updateProviderField("type", "Alibaba Cloud Facebody");
}
})}>
{
@ -580,6 +582,7 @@ class ProviderEditPage extends React.Component {
{id: "SMS", name: "SMS"},
{id: "Storage", name: "Storage"},
{id: "Web3", name: "Web3"},
{id: "Face ID", name: "Face ID"},
]
.sort((a, b) => a.name.localeCompare(b.name))
.map((providerCategory, index) => <Option key={index} value={providerCategory.id}>{providerCategory.name}</Option>)
@ -901,7 +904,7 @@ class ProviderEditPage extends React.Component {
</Row>
)
}
{this.state.provider.category === "Storage" || ["Custom HTTP SMS", "Custom HTTP Email", "SendGrid", "CUCloud"].includes(this.state.provider.type) ? (
{["Face ID", "Storage"].includes(this.state.provider.category) || ["Custom HTTP SMS", "Custom HTTP Email", "SendGrid", "CUCloud"].includes(this.state.provider.type) ? (
<div>
{["Local File System", "CUCloud"].includes(this.state.provider.type) ? null : (
<Row style={{marginTop: "20px"}} >
@ -915,7 +918,7 @@ class ProviderEditPage extends React.Component {
</Col>
</Row>
)}
{["Custom HTTP SMS", "SendGrid", "Local File System", "MinIO", "Tencent Cloud COS", "Google Cloud Storage", "Qiniu Cloud Kodo", "Synology", "Casdoor", "CUCloud"].includes(this.state.provider.type) ? null : (
{["Custom HTTP SMS", "SendGrid", "Local File System", "MinIO", "Tencent Cloud COS", "Google Cloud Storage", "Qiniu Cloud Kodo", "Synology", "Casdoor", "CUCloud", "Alibaba Cloud Facebody"].includes(this.state.provider.type) ? null : (
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={2}>
{Setting.getLabel(i18next.t("provider:Endpoint (Intranet)"), i18next.t("provider:Region endpoint for Intranet"))} :
@ -927,7 +930,7 @@ class ProviderEditPage extends React.Component {
</Col>
</Row>
)}
{["Custom HTTP SMS", "SendGrid", "Local File System", "CUCloud"].includes(this.state.provider.type) ? null : (
{["Custom HTTP SMS", "SendGrid", "Local File System", "CUCloud", "Alibaba Cloud Facebody"].includes(this.state.provider.type) ? null : (
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={2}>
{["Casdoor"].includes(this.state.provider.type) ?
@ -941,7 +944,7 @@ class ProviderEditPage extends React.Component {
</Col>
</Row>
)}
{["Custom HTTP SMS", "SendGrid", "CUCloud"].includes(this.state.provider.type) ? null : (
{["Custom HTTP SMS", "SendGrid", "CUCloud", "Alibaba Cloud Facebody"].includes(this.state.provider.type) ? null : (
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={2}>
{Setting.getLabel(i18next.t("provider:Path prefix"), i18next.t("provider:Path prefix - Tooltip"))} :
@ -953,7 +956,7 @@ class ProviderEditPage extends React.Component {
</Col>
</Row>
)}
{["Custom HTTP SMS", "SendGrid", "Synology", "Casdoor", "CUCloud"].includes(this.state.provider.type) ? null : (
{["Custom HTTP SMS", "SendGrid", "Synology", "Casdoor", "CUCloud", "Alibaba Cloud Facebody"].includes(this.state.provider.type) ? null : (
<Row style={{marginTop: "20px"}} >
<Col style={{marginTop: "5px"}} span={2}>
{Setting.getLabel(i18next.t("provider:Domain"), i18next.t("provider:Domain - Tooltip"))} :

10
web/src/Setting.js
View File

@ -416,6 +416,12 @@ export const OtherProviderInfo = {
url: "https://www.cucloud.cn/",
},
},
"Face ID": {
"Alibaba Cloud Facebody": {
logo: `${StaticBaseUrl}/img/social_aliyun.png`,
url: "https://vision.aliyun.com/facebody",
},
},
};
export function initCountries() {
@ -1150,6 +1156,10 @@ export function getProviderTypeOptions(category) {
{id: "Viber", name: "Viber"},
{id: "CUCloud", name: "CUCloud"},
]);
} else if (category === "Face ID") {
return ([
{id: "Alibaba Cloud Facebody", name: "Alibaba Cloud Facebody"},
]);
} else {
return [];
}

1
web/src/UserEditPage.js
View File

@ -1054,6 +1054,7 @@ class UserEditPage extends React.Component {
<FaceIdTable
title={i18next.t("user:Face IDs")}
table={this.state.user.faceIds}
{...this.props}
onUpdateTable={(table) => {this.updateUserField("faceIds", table);}}
/>
</Col>

38
web/src/auth/LoginPage.js
View File

@ -37,6 +37,7 @@ import RedirectForm from "../common/RedirectForm";
import {RequiredMfa} from "./mfa/MfaAuthVerifyForm";
import {GoogleOneTapLoginVirtualButton} from "./GoogleLoginButton";
import * as ProviderButton from "./ProviderButton";
const FaceRecognitionCommonModal = lazy(() => import("../common/modal/FaceRecognitionCommonModal"));
const FaceRecognitionModal = lazy(() => import("../common/modal/FaceRecognitionModal"));
class LoginPage extends React.Component {
@ -263,6 +264,13 @@ class LoginPage extends React.Component {
onUpdateApplication(application) {
this.props.onUpdateApplication(application);
for (const idx in application.providers) {
const provider = application.providers[idx];
if (provider.provider?.category === "Face ID") {
this.setState({haveFaceIdProvider: true});
break;
}
}
}
parseOffset(offset) {
@ -698,19 +706,25 @@ class LoginPage extends React.Component {
</Button>
{
this.state.loginMethod === "faceId" ?
<Suspense fallback={null}>
<FaceRecognitionModal
visible={this.state.openFaceRecognitionModal}
onOk={(faceId) => {
const values = this.state.values;
values["faceId"] = faceId;
this.state.haveFaceIdProvider ? <Suspense fallback={null}><FaceRecognitionCommonModal visible={this.state.openFaceRecognitionModal} onOk={(FaceIdImage) => {
const values = this.state.values;
values["FaceIdImage"] = FaceIdImage;
this.login(values);
this.setState({openFaceRecognitionModal: false});
}} onCancel={() => this.setState({openFaceRecognitionModal: false})} /></Suspense> :
<Suspense fallback={null}>
<FaceRecognitionModal
visible={this.state.openFaceRecognitionModal}
onOk={(faceId) => {
const values = this.state.values;
values["faceId"] = faceId;
this.login(values);
this.setState({openFaceRecognitionModal: false});
}}
onCancel={() => this.setState({openFaceRecognitionModal: false})}
/>
</Suspense>
this.login(values);
this.setState({openFaceRecognitionModal: false});
}}
onCancel={() => this.setState({openFaceRecognitionModal: false})}
/>
</Suspense>
:
<>
</>

177
web/src/common/modal/FaceRecognitionCommonModal.js Normal file
View File

@ -0,0 +1,177 @@
// Copyright 2025 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, Modal, Progress, message} from "antd";
import React, {useState} from "react";
import i18next from "i18next";
const FaceRecognitionCommonModal = (props) => {
const {visible, onOk, onCancel} = props;
const videoRef = React.useRef();
const canvasRef = React.useRef();
const [percent, setPercent] = useState(0);
const mediaStreamRef = React.useRef(null);
const [isCameraCaptured, setIsCameraCaptured] = useState(false);
const [capturedImageArray, setCapturedImageArray] = useState([]);
React.useEffect(() => {
if (isCameraCaptured) {
let count = 0;
let count2 = 0;
const interval = setInterval(() => {
count++;
if (videoRef.current) {
videoRef.current.srcObject = mediaStreamRef.current;
videoRef.current.play();
const interval2 = setInterval(() => {
if (!visible) {
clearInterval(interval);
setPercent(0);
}
count2++;
if (count2 >= 8) {
clearInterval(interval2);
setPercent(0);
onOk(capturedImageArray);
} else if (count2 > 3) {
setPercent((count2 - 4) * 20);
const canvas = document.createElement("canvas");
canvas.width = videoRef.current.videoWidth;
canvas.height = videoRef.current.videoHeight;
const context = canvas.getContext("2d");
context.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
const b64 = canvas.toDataURL("image/png");
capturedImageArray.push(b64);
setCapturedImageArray(capturedImageArray);
}
}, 1000);
clearInterval(interval);
}
if (count >= 30) {
clearInterval(interval);
}
}, 100);
} else {
mediaStreamRef.current?.getTracks().forEach(track => track.stop());
if (videoRef.current) {
videoRef.current.srcObject = null;
}
}
}, [isCameraCaptured]);
React.useEffect(() => {
if (visible) {
navigator.mediaDevices
.getUserMedia({video: {facingMode: "user"}})
.then((stream) => {
mediaStreamRef.current = stream;
setIsCameraCaptured(true);
}).catch((error) => {
handleCameraError(error);
});
} else {
setIsCameraCaptured(false);
setCapturedImageArray([]);
}
}, [visible]);
const handleCameraError = (error) => {
if (error instanceof DOMException) {
if (error.name === "NotFoundError" || error.name === "DevicesNotFoundError") {
message.error(i18next.t("login:Please ensure that you have a camera device for facial recognition"));
} else if (error.name === "NotAllowedError" || error.name === "PermissionDeniedError") {
message.error(i18next.t("login:Please provide permission to access the camera"));
} else if (error.name === "NotReadableError" || error.name === "TrackStartError") {
message.error(i18next.t("login:The camera is currently in use by another webpage"));
} else if (error.name === "TypeError") {
message.error(i18next.t("login:Please load the webpage using HTTPS, otherwise the camera cannot be accessed"));
} else {
message.error(error.message);
}
}
};
return <div>
<Modal
closable={false}
maskClosable={false}
title={i18next.t("login:Face Recognition")}
width={350}
footer={[
<Button key="ok" type={"primary"} disabled={capturedImageArray.length === 0} onClick={() => {
onOk(capturedImageArray);
}}>
Ok
</Button>,
<Button key="back" onClick={onCancel}>
Cancel
</Button>,
]}
destroyOnClose={true}
open={visible}>
<Progress percent={percent} />
<div style={{
marginTop: "20px",
marginBottom: "50px",
justifyContent: "center",
alignContent: "center",
position: "relative",
flexDirection: "column",
}}>
{
<div style={{display: "flex", justifyContent: "center", alignContent: "center"}}>
<video
ref={videoRef}
style={{
borderRadius: "50%",
height: "220px",
verticalAlign: "middle",
width: "220px",
objectFit: "cover",
}}
></video>
<div style={{
position: "absolute",
width: "240px",
height: "240px",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
}}>
<svg width="240" height="240" fill="none">
<circle
strokeDasharray="700"
strokeDashoffset={700 - 6.9115 * percent}
strokeWidth="4"
cx="120"
cy="120"
r="110"
stroke="#5734d3"
transform="rotate(-90, 120, 120)"
strokeLinecap="round"
style={{transition: "all .2s linear"}}
></circle>
</svg>
</div>
<canvas ref={canvasRef} style={{position: "absolute"}} />
</div>
}
</div>
</Modal>
</div>;
};
export default FaceRecognitionCommonModal;

49
web/src/table/FaceIdTable.js
View File

@ -13,9 +13,11 @@
// limitations under the License.
import React, {Suspense, lazy} from "react";
import {Button, Col, Input, Row, Table} from "antd";
import {Button, Col, Input, Row, Table, Upload} from "antd";
import i18next from "i18next";
import * as Setting from "../Setting";
import {UploadOutlined} from "@ant-design/icons";
import * as ResourceBackend from "../backend/ResourceBackend";
const FaceRecognitionModal = lazy(() => import("../common/modal/FaceRecognitionModal"));
class FaceIdTable extends React.Component {
@ -53,6 +55,19 @@ class FaceIdTable extends React.Component {
this.updateTable(table);
}
addFaceImage(table, imageUrl) {
const faceId = {
name: Setting.getRandomName(),
imageUrl: imageUrl,
faceIdData: [],
};
if (table === undefined || table === null) {
table = [];
}
table = Setting.addRow(table, faceId);
this.updateTable(table);
}
renderTable(table) {
const columns = [
{
@ -78,6 +93,14 @@ class FaceIdTable extends React.Component {
return "[" + front + " ... " + back + "]";
},
},
{
title: i18next.t("general:ImageUrl"),
dataIndex: "imageUrl",
key: "imageUrl",
render: (text, record, index) => {
return text;
},
},
{
title: i18next.t("general:Action"),
key: "action",
@ -92,6 +115,24 @@ class FaceIdTable extends React.Component {
},
];
const handleUpload = (info) => {
this.setState({uploading: true});
const filename = info.fileList[0].name;
const fullFilePath = `resource/${this.props.account.owner}/${this.props.account.name}/${filename}`;
ResourceBackend.uploadResource(this.props.account.owner, this.props.account.name, "custom", "ResourceListPage", fullFilePath, info.file)
.then(res => {
if (res.status === "ok") {
Setting.showMessage("success", i18next.t("application:File uploaded successfully"));
this.addFaceImage(table, res.data);
} else {
Setting.showMessage("error", res.msg);
}
}).finally(() => {
this.setState({uploading: false});
});
};
return (
<Table scroll={{x: "max-content"}} columns={columns} dataSource={this.props.table} size="middle" bordered pagination={false}
title={() => (
@ -103,6 +144,12 @@ class FaceIdTable extends React.Component {
<Button disabled={this.props.table?.length >= 5} style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.setState({openFaceRecognitionModal: true, withImage: true})}>
{i18next.t("general:Add Face Id with image")}
</Button>
<Upload maxCount={1} accept="image/*" showUploadList={false}
beforeUpload={file => {return false;}} onChange={info => {handleUpload(info);}}>
<Button id="upload-button" icon={<UploadOutlined />} loading={this.state.uploading} type="primary" size="small">
{i18next.t("resource:Upload a file...")}
</Button>
</Upload>
<Suspense fallback={null}>
<FaceRecognitionModal
visible={this.state.openFaceRecognitionModal}