xinyin025/new-api
1
0
Fork 0
mirror of https://github.com/linux-do/new-api.git synced 2025-09-18 08:26:37 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update makefile and user model, add Telegram integration

Browse Source
This commit is contained in:
Ehco1996 2024-03-01 22:33:30 +08:00
parent 690d2e6ba2
commit 194ff1ac57
6 changed files with 204 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
makefile
View File

@ -1,7 +1,7 @@
FRONTEND_DIR = ./web FRONTEND_DIR = ./web
BACKEND_DIR = . BACKEND_DIR = .
.PHONY: all start-frontend start-backend .PHONY: all build-frontend start-backend
all: start-frontend start-backend all: start-frontend start-backend
@ -9,12 +9,6 @@ build-frontend:
@echo "Building frontend..." @echo "Building frontend..."
@cd $(FRONTEND_DIR) && npm install && DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build npm run build @cd $(FRONTEND_DIR) && npm install && DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build npm run build
# 启动前端开发服务器
start-frontend:
@echo "Starting frontend dev server..."
@cd $(FRONTEND_DIR) && npm start &
# 启动后端开发服务器
start-backend: start-backend:
@echo "Starting backend dev server..." @echo "Starting backend dev server..."
@cd $(BACKEND_DIR) && go run main.go & @cd $(BACKEND_DIR) && go run main.go &

4
model/user.go
View File

@ -3,10 +3,11 @@ package model
import ( import (
"errors" "errors"
"fmt" "fmt"
"gorm.io/gorm"
"one-api/common" "one-api/common"
"strings" "strings"
"time" "time"
"gorm.io/gorm"
) )
// User if you add sensitive fields, don't forget to clean them in setupLogin function. // User if you add sensitive fields, don't forget to clean them in setupLogin function.
@ -21,6 +22,7 @@ type User struct {
Email string `json:"email" gorm:"index" validate:"max=50"` Email string `json:"email" gorm:"index" validate:"max=50"`
GitHubId string `json:"github_id" gorm:"column:github_id;index"` GitHubId string `json:"github_id" gorm:"column:github_id;index"`
WeChatId string `json:"wechat_id" gorm:"column:wechat_id;index"` WeChatId string `json:"wechat_id" gorm:"column:wechat_id;index"`
TelegramId string `json:"telegram_id" gorm:"column:telegram_id;index"`
VerificationCode string `json:"verification_code" gorm:"-:all"` // this field is only for Email verification, don't save it to database! VerificationCode string `json:"verification_code" gorm:"-:all"` // this field is only for Email verification, don't save it to database!
AccessToken string `json:"access_token" gorm:"type:char(32);column:access_token;uniqueIndex"` // this token is for system management AccessToken string `json:"access_token" gorm:"type:char(32);column:access_token;uniqueIndex"` // this token is for system management
Quota int `json:"quota" gorm:"type:int;default:0"` Quota int `json:"quota" gorm:"type:int;default:0"`

67
web/src/components/LoginForm.js
View File

@ -1,14 +1,14 @@
import React, {useContext, useEffect, useState} from 'react'; import React, { useContext, useEffect, useState } from 'react';
import {Link, useNavigate, useSearchParams} from 'react-router-dom'; import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import {UserContext} from '../context/User'; import { UserContext } from '../context/User';
import {API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning} from '../helpers'; import { API, getLogo, isMobile, showError, showInfo, showSuccess, showWarning } from '../helpers';
import {onGitHubOAuthClicked} from './utils'; import { onGitHubOAuthClicked } from './utils';
import Turnstile from "react-turnstile"; import Turnstile from "react-turnstile";
import {Layout, Card, Image, Form, Button, Divider, Modal} from "@douyinfe/semi-ui"; import { Layout, Card, Image, Form, Button, Divider, Modal } from "@douyinfe/semi-ui";
import Title from "@douyinfe/semi-ui/lib/es/typography/title"; import Title from "@douyinfe/semi-ui/lib/es/typography/title";
import Text from "@douyinfe/semi-ui/lib/es/typography/text"; import Text from "@douyinfe/semi-ui/lib/es/typography/text";
import {IconGithubLogo} from '@douyinfe/semi-icons'; import { IconGithubLogo } from '@douyinfe/semi-icons';
const LoginForm = () => { const LoginForm = () => {
const [inputs, setInputs] = useState({ const [inputs, setInputs] = useState({
@ -18,7 +18,7 @@ const LoginForm = () => {
}); });
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const [submitted, setSubmitted] = useState(false); const [submitted, setSubmitted] = useState(false);
const {username, password} = inputs; const { username, password } = inputs;
const [userState, userDispatch] = useContext(UserContext); const [userState, userDispatch] = useContext(UserContext);
const [turnstileEnabled, setTurnstileEnabled] = useState(false); const [turnstileEnabled, setTurnstileEnabled] = useState(false);
const [turnstileSiteKey, setTurnstileSiteKey] = useState(''); const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
@ -56,9 +56,9 @@ const LoginForm = () => {
const res = await API.get( const res = await API.get(
`/api/oauth/wechat?code=${inputs.wechat_verification_code}` `/api/oauth/wechat?code=${inputs.wechat_verification_code}`
); );
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
userDispatch({type: 'login', payload: data}); userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data)); localStorage.setItem('user', JSON.stringify(data));
navigate('/'); navigate('/');
showSuccess('登录成功！'); showSuccess('登录成功！');
@ -69,7 +69,7 @@ const LoginForm = () => {
}; };
function handleChange(name, value) { function handleChange(name, value) {
setInputs((inputs) => ({...inputs, [name]: value})); setInputs((inputs) => ({ ...inputs, [name]: value }));
} }
async function handleSubmit(e) { async function handleSubmit(e) {
@ -83,13 +83,13 @@ const LoginForm = () => {
username, username,
password password
}); });
const {success, message, data} = res.data; const { success, message, data } = res.data;
if (success) { if (success) {
userDispatch({type: 'login', payload: data}); userDispatch({ type: 'login', payload: data });
localStorage.setItem('user', JSON.stringify(data)); localStorage.setItem('user', JSON.stringify(data));
showSuccess('登录成功！'); showSuccess('登录成功！');
if (username === 'root' && password === '123456') { if (username === 'root' && password === '123456') {
Modal.error({title: '您正在使用默认密码！', content: '请立刻修改默认密码！', centered: true}); Modal.error({ title: '您正在使用默认密码！', content: '请立刻修改默认密码！', centered: true });
} }
navigate('/token'); navigate('/token');
} else { } else {
@ -100,16 +100,23 @@ const LoginForm = () => {
} }
} }
// 添加Telegram登录处理函数
const onTelegramLoginClicked = async () => {
// 这里调用后端API进行Telegram登录
// 例如: const res = await API.get(`/api/oauth/telegram`);
// 根据响应处理登录逻辑
};
return ( return (
<div> <div>
<Layout> <Layout>
<Layout.Header> <Layout.Header>
</Layout.Header> </Layout.Header>
<Layout.Content> <Layout.Content>
<div style={{justifyContent: 'center', display: "flex", marginTop: 120}}> <div style={{ justifyContent: 'center', display: "flex", marginTop: 120 }}>
<div style={{width: 500}}> <div style={{ width: 500 }}>
<Card> <Card>
<Title heading={2} style={{textAlign: 'center'}}> <Title heading={2} style={{ textAlign: 'center' }}>
用户登录 用户登录
</Title> </Title>
<Form> <Form>
@ -129,12 +136,12 @@ const LoginForm = () => {
onChange={(value) => handleChange('password', value)} onChange={(value) => handleChange('password', value)}
/> />
<Button theme='solid' style={{width: '100%'}} type={'primary'} size='large' <Button theme='solid' style={{ width: '100%' }} type={'primary'} size='large'
htmlType={'submit'} onClick={handleSubmit}> htmlType={'submit'} onClick={handleSubmit}>
登录 登录
</Button> </Button>
</Form> </Form>
<div style={{display: 'flex', justifyContent: 'space-between', marginTop: 20}}> <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}>
<Text> <Text>
没有账号请先 <Link to='/register'>注册账号</Link> 没有账号请先 <Link to='/register'>注册账号</Link>
</Text> </Text>
@ -142,16 +149,16 @@ const LoginForm = () => {
忘记密码 <Link to='/reset'>点击重置</Link> 忘记密码 <Link to='/reset'>点击重置</Link>
</Text> </Text>
</div> </div>
{status.github_oauth || status.wechat_login ? ( {status.github_oauth || status.wechat_login || status.telegram_oauth ? (
<> <>
<Divider margin='12px' align='center'> <Divider margin='12px' align='center'>
第三方登录 第三方登录
</Divider> </Divider>
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}> <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
{status.github_oauth ? ( {status.github_oauth ? (
<Button <Button
type='primary' type='primary'
icon={<IconGithubLogo/>} icon={<IconGithubLogo />}
onClick={() => onGitHubOAuthClicked(status.github_client_id)} onClick={() => onGitHubOAuthClicked(status.github_client_id)}
/> />
) : ( ) : (
@ -167,6 +174,18 @@ const LoginForm = () => {
{/*) : (*/} {/*) : (*/}
{/* <></>*/} {/* <></>*/}
{/*)}*/} {/*)}*/}
{status.telegram_oauth ? (
<Button
type='primary'
// icon={<IconTelegram/>} // 假设您有Telegram的图标
onClick={onTelegramLoginClicked}
>
Telegram登录
</Button>
) : (
<></>
)}
</div> </div>
</> </>
) : ( ) : (
@ -208,7 +227,7 @@ const LoginForm = () => {
{/*</Modal>*/} {/*</Modal>*/}
</Card> </Card>
{turnstileEnabled ? ( {turnstileEnabled ? (
<div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}> <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
<Turnstile <Turnstile
sitekey={turnstileSiteKey} sitekey={turnstileSiteKey}
onVerify={(token) => { onVerify={(token) => {

21
web/src/components/PersonalSetting.js
View File

@ -443,6 +443,27 @@ const PersonalSetting = () => {
</div> </div>
</div> </div>
<div style={{marginTop: 10}}>
<Typography.Text strong>Telegram</Typography.Text>
<div style={{display: 'flex', justifyContent: 'space-between'}}>
<div>
<Input
value={userState.user && userState.user.telegram_id !== ''?userState.user.telegram_id:'未绑定'}
readonly={true}
></Input>
</div>
<div>
<Button
disabled={(userState.user && userState.user.telegram_id !== '') || !status.telegram_oauth}
>
{
status.github_oauth?'绑定':'未启用'
}
</Button>
</div>
</div>
</div>
<div style={{marginTop: 10}}> <div style={{marginTop: 10}}>
<Space> <Space>
<Button onClick={generateAccessToken}>生成系统访问令牌</Button> <Button onClick={generateAccessToken}>生成系统访问令牌</Button>

20
web/src/components/SystemSetting.js
View File

@ -34,7 +34,7 @@ const SystemSetting = () => {
EmailDomainRestrictionEnabled: '', EmailDomainRestrictionEnabled: '',
EmailDomainWhitelist: '', EmailDomainWhitelist: '',
// telegram login // telegram login
TelegramLoginEnabled: '', TelegramOAuthEnabled: '',
TelegramBotToken: '', TelegramBotToken: '',
TelegramBotName: '', TelegramBotName: '',
}); });
@ -81,7 +81,7 @@ const SystemSetting = () => {
case 'EmailVerificationEnabled': case 'EmailVerificationEnabled':
case 'GitHubOAuthEnabled': case 'GitHubOAuthEnabled':
case 'WeChatAuthEnabled': case 'WeChatAuthEnabled':
case 'TelegramLoginEnabled': case 'TelegramOAuthEnabled':
case 'TurnstileCheckEnabled': case 'TurnstileCheckEnabled':
case 'EmailDomainRestrictionEnabled': case 'EmailDomainRestrictionEnabled':
case 'RegisterEnabled': case 'RegisterEnabled':
@ -240,7 +240,7 @@ const SystemSetting = () => {
}; };
const submitTelegramSettings = async () => { const submitTelegramSettings = async () => {
await updateOption('TelegramLoginEnabled', inputs.TelegramLoginEnabled); await updateOption('TelegramOAuthEnabled', inputs.TelegramOAuthEnabled);
await updateOption('TelegramBotToken', inputs.TelegramBotToken); await updateOption('TelegramBotToken', inputs.TelegramBotToken);
await updateOption('TelegramBotName', inputs.TelegramBotName); await updateOption('TelegramBotName', inputs.TelegramBotName);
}; };
@ -397,6 +397,12 @@ const SystemSetting = () => {
name='WeChatAuthEnabled' name='WeChatAuthEnabled'
onChange={handleInputChange} onChange={handleInputChange}
/> />
<Form.Checkbox
checked={inputs.TelegramOAuthEnabled === 'true'}
label='允许通过 Telegram 进行登录'
name='TelegramOAuthEnabled'
onChange={handleInputChange}
/>
</Form.Group> </Form.Group>
<Form.Group inline> <Form.Group inline>
<Form.Checkbox <Form.Checkbox
@ -596,25 +602,17 @@ const SystemSetting = () => {
<Divider /> <Divider />
<Header as='h3'>配置 Telegram 登录</Header> <Header as='h3'>配置 Telegram 登录</Header>
<Form.Group inline> <Form.Group inline>
<Form.Checkbox
checked={inputs.TelegramLoginEnabled === 'true'}
label='允许通过 Telegram 进行登录'
name='TelegramLoginEnabled'
onChange={handleInputChange}
/>
<Form.Input <Form.Input
label='Telegram Bot Token' label='Telegram Bot Token'
name='TelegramBotToken' name='TelegramBotToken'
value={inputs.TelegramBotToken} value={inputs.TelegramBotToken}
placeholder='输入你的 Telegram Bot Token' placeholder='输入你的 Telegram Bot Token'
onChange={handleInputChange}
/> />
<Form.Input <Form.Input
label='Telegram Bot 名称' label='Telegram Bot 名称'
name='TelegramBotName' name='TelegramBotName'
value={inputs.TelegramBotName} value={inputs.TelegramBotName}
placeholder='输入你的 Telegram Bot 名称' placeholder='输入你的 Telegram Bot 名称'
onChange={handleInputChange}
/> />
</Form.Group> </Form.Group>
<Form.Button onClick={submitTelegramSettings}> <Form.Button onClick={submitTelegramSettings}>

248
web/src/pages/User/EditUser.js
View File

@ -1,9 +1,9 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';
import {API, isMobile, showError, showSuccess} from '../../helpers'; import { API, isMobile, showError, showSuccess } from '../../helpers';
import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render'; import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
import Title from "@douyinfe/semi-ui/lib/es/typography/title"; import Title from "@douyinfe/semi-ui/lib/es/typography/title";
import {SideSheet, Space, Button, Spin, Input, Typography, Select, Divider} from "@douyinfe/semi-ui"; import { SideSheet, Space, Button, Spin, Input, Typography, Select, Divider } from "@douyinfe/semi-ui";
const EditUser = (props) => { const EditUser = (props) => {
const userId = props.editingUser.id; const userId = props.editingUser.id;
@ -19,8 +19,8 @@ const EditUser = (props) => {
group: 'default' group: 'default'
}); });
const [groupOptions, setGroupOptions] = useState([]); const [groupOptions, setGroupOptions] = useState([]);
const { username, display_name, password, github_id, wechat_id, email, quota, group } = const { username, display_name, password, github_id, wechat_id, telegram_id, email, quota, group } =
inputs; inputs;
const handleInputChange = (name, value) => { const handleInputChange = (name, value) => {
setInputs((inputs) => ({ ...inputs, [name]: value })); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
@ -88,126 +88,132 @@ const EditUser = (props) => {
}; };
return ( return (
<> <>
<SideSheet <SideSheet
placement={'right'} placement={'right'}
title={<Title level={3}>{'编辑用户'}</Title>} title={<Title level={3}>{'编辑用户'}</Title>}
headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}} headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}} bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}
visible={props.visible} visible={props.visible}
footer={ footer={
<div style={{display: 'flex', justifyContent: 'flex-end'}}> <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Space> <Space>
<Button theme='solid' size={'large'} onClick={submit}>提交</Button> <Button theme='solid' size={'large'} onClick={submit}>提交</Button>
<Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button> <Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button>
</Space> </Space>
</div>
}
closeIcon={null}
onCancel={() => handleCancel()}
width={isMobile() ? '100%' : 600}
>
<Spin spinning={loading}>
<div style={{ marginTop: 20 }}>
<Typography.Text>用户名</Typography.Text>
</div>
<Input
label='用户名'
name='username'
placeholder={'请输入新的用户名'}
onChange={value => handleInputChange('username', value)}
value={username}
autoComplete='new-password'
/>
<div style={{ marginTop: 20 }}>
<Typography.Text>密码</Typography.Text>
</div>
<Input
label='密码'
name='password'
type={'password'}
placeholder={'请输入新的密码，最短 8 位'}
onChange={value => handleInputChange('password', value)}
value={password}
autoComplete='new-password'
/>
<div style={{ marginTop: 20 }}>
<Typography.Text>显示名称</Typography.Text>
</div>
<Input
label='显示名称'
name='display_name'
placeholder={'请输入新的显示名称'}
onChange={value => handleInputChange('display_name', value)}
value={display_name}
autoComplete='new-password'
/>
{
userId && <>
<div style={{ marginTop: 20 }}>
<Typography.Text>分组</Typography.Text>
</div> </div>
} <Select
closeIcon={null} placeholder={'请选择分组'}
onCancel={() => handleCancel()} name='group'
width={isMobile() ? '100%' : 600} fluid
> search
<Spin spinning={loading}> selection
<div style={{marginTop: 20}}> allowAdditions
<Typography.Text>用户名</Typography.Text> additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
</div> onChange={value => handleInputChange('group', value)}
<Input value={inputs.group}
label='用户名'
name='username'
placeholder={'请输入新的用户名'}
onChange={value => handleInputChange('username', value)}
value={username}
autoComplete='new-password' autoComplete='new-password'
/> optionList={groupOptions}
<div style={{marginTop: 20}}> />
<Typography.Text>密码</Typography.Text> <div style={{ marginTop: 20 }}>
</div> <Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text>
<Input </div>
label='密码' <Input
name='password' name='quota'
type={'password'} placeholder={'请输入新的剩余额度'}
placeholder={'请输入新的密码，最短 8 位'} onChange={value => handleInputChange('quota', value)}
onChange={value => handleInputChange('password', value)} value={quota}
value={password} type={'number'}
autoComplete='new-password' autoComplete='new-password'
/> />
<div style={{marginTop: 20}}> </>
<Typography.Text>显示名称</Typography.Text> }
</div> <Divider style={{ marginTop: 20 }}>以下信息不可修改</Divider>
<Input <div style={{ marginTop: 20 }}>
label='显示名称' <Typography.Text>已绑定的 GitHub 账户</Typography.Text>
name='display_name' </div>
placeholder={'请输入新的显示名称'} <Input
onChange={value => handleInputChange('display_name', value)} name='github_id'
value={display_name} value={github_id}
autoComplete='new-password' autoComplete='new-password'
/> placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
{ readonly
userId && <> />
<div style={{marginTop: 20}}> <div style={{ marginTop: 20 }}>
<Typography.Text>分组</Typography.Text> <Typography.Text>已绑定的微信账户</Typography.Text>
</div> </div>
<Select <Input
placeholder={'请选择分组'} name='wechat_id'
name='group' value={wechat_id}
fluid autoComplete='new-password'
search placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
selection readonly
allowAdditions />
additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'} <Input
onChange={value => handleInputChange('group', value)} name='telegram_id'
value={inputs.group} value={telegram_id}
autoComplete='new-password' autoComplete='new-password'
optionList={groupOptions} placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
/> readonly
<div style={{marginTop: 20}}> />
<Typography.Text>{`剩余额度${renderQuotaWithPrompt(quota)}`}</Typography.Text> <div style={{ marginTop: 20 }}>
</div> <Typography.Text>已绑定的邮箱账户</Typography.Text>
<Input </div>
name='quota' <Input
placeholder={'请输入新的剩余额度'} name='email'
onChange={value => handleInputChange('quota', value)} value={email}
value={quota} autoComplete='new-password'
type={'number'} placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
autoComplete='new-password' readonly
/> />
</> </Spin>
} </SideSheet>
<Divider style={{marginTop: 20}}>以下信息不可修改</Divider> </>
<div style={{marginTop: 20}}>
<Typography.Text>已绑定的 GitHub 账户</Typography.Text>
</div>
<Input
name='github_id'
value={github_id}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readonly
/>
<div style={{marginTop: 20}}>
<Typography.Text>已绑定的微信账户</Typography.Text>
</div>
<Input
name='wechat_id'
value={wechat_id}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readonly
/>
<div style={{marginTop: 20}}>
<Typography.Text>已绑定的邮箱账户</Typography.Text>
</div>
<Input
name='email'
value={email}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readonly
/>
</Spin>
</SideSheet>
</>
); );
}; };