前一篇已经大致安装摆设当地的open-webui的底子环境了，我们利用deepseek过程中，大概涉及到与已有系统的账号同一登录的情况。官方文档有一些关于怎样对接的文档，稍显复杂，一时半会不太能把握，本身就试着做一点简朴的修改，实现一键登录需求。
大致思如如下：
- A系统有test@email.com 的账号，在A系统页面增长一个按钮，主动登录到B系统；
- B（open-webui）系统，前端通过url传递参数，然后提交到B系统后端；
- B系统后端校验参数，识别到系统也存在test@email.com的账号，然后后端带着传递的参数请求A系统，
- A系统校验参数合法，返回给B系统后端，
- B系统后端接受到返回，如果校验无误，效果返回给B系统前端
- B系统前端吸收到后端返回效果，完成登录
大致流程如下：
作为示例，只做简朴的md5校验
前端访问 http://127.0.0.1:8080/auth?token=c8da6b4e734be162&email=test.email.com
前端把 token和email两个参数传递到后端。
后端对email的md5值和token做比较完成用户的校验
这个是open-webui的标准登录页面。
我们参考这个页面的登录逻辑，做一下修改
前端部分
1 . 首先我们看下 open-webui/src/routes/auth/+page.svelte 文件
这个是前端的登录页,
关注下如下部分的代码
const signInHandler = async () => {
const sessionUser = await userSignIn(email, password).catch((error) => {
toast.error(`${error}`);
return null;
});
await setSessionUser(sessionUser);
};
这个是用户登录的函数，
主要是通过userSignIn这个函数完成用的登录动作。
userSignIn函数在文件open-webui/src/lib/apis/auths/index.ts文件里实现的
export const userSignIn = async (email: string, password: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/auths/signin`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({
email: email,
password: password
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
console.log(err);
error = err.detail;
return null;
});
if (error) {
throw error;
}
return res;
};
我们可以参考这部分代码，写出本身的实现如下:
在open-webui/src/routes/auth/+page.svelte文件增长如下代码
const mySignIn = async () => {
const params = new URLSearchParams(window.location.search);
const token = params.get('token');
const email = params.get('email');
const sessionUser = await mySignIn (email, ctoken).catch((error) => {
return null;
});
await setSessionUser(sessionUser);
};
#从url里获取token、email两个参数，传递到函数userTokenSignIn里完成背景请求完成登录
#onMount增长我们的函数
onMount(async () => {
await mySignIn ();
......
});
在open-webui/src/lib/apis/auths/index.ts文件参考userSignIn函数增长mySignIn 函数：
export const mySignIn = async (email: string, token: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/auths/mySignIn`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include',
body: JSON.stringify({
email: email,
token: token
})
}) .then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = err.detail;
return null;
});
if (error) {
throw error;
}
return res;
};
前端部分大部分已经完成。
后端部分
后端的登录在open-webui/backend/open_webui/routers/auths.py文件内里
首先看先之前的用户登录代码
############################
# SignIn
############################
@router.post("/signin", response_model=SessionUserResponse)
async def signin(request: Request, response: Response, form_data: SigninForm):
......
user = Auths.authenticate_user(form_data.email.lower(), form_data.password)
......
主要是通过 Auths.authenticate_user实现email和password的校验
这个部分代码在 open-webui/backend/open_webui.models/auths.py里实现
def authenticate_user(self, email: str, password: str) -> Optional[UserModel]:
log.info(f"authenticate_user: {email}")
try:
with get_db() as db:
auth = db.query(Auth).filter_by(email=email, active=True).first()
if auth:
if verify_password(password, auth.password):
user = Users.get_user_by_id(auth.id)
return user
else:
return None
else:
return None
except Exception:
return None
我们参考这两部分代码，不需要做太大的修改就可以实现我们的需求
在open-webui/backend/open_webui/routers/auths.py增长我们的实现mySignIn函数
############################
# mySignIn
############################
@router.post("/mySignIn", response_model=SessionUserResponse)
async def tokenSignin(request: Request, response: Response, form_data: TokenSigninForm):
......
user = Auths.authenticate_user_mySignIn(form_data.email.lower(), form_data.token)
......
只需要修改用户校验部分，其他部分都原封不动的照抄signin的函数
open-webui/backend/open_webui.models/auths.py里实现用户的校验函数
authenticate_user_mySignIn
def authenticate_user_mySignIn(self, email: str, token: str) -> Optional[UserModel]:
log.info(f"authenticate_user_mySignIn: {email}")
try:
with get_db() as db:
auth = db.query(Auth).filter_by(email=email, active=True).first()
if auth:
#校验token,这里只简朴的做md5的校验
md5_token = hashlib.md5(email.encode()).hexdigest()
if md5_token == token :
user = Users.get_user_by_id(auth.id)
return user
else:
return None
else:
return None
except Exception:
return None
至此这个简朴的校验email的md5值的token登录方式就实现了
我们访问地点
http://127.0.0.1:8080/auth?token=c8da6b4e734be162&email=test.email.com
如果token是email的md5值。就可以实现用户主动登录
关于修改后的摆设
如果你是通过docker摆设的open-webui，代码修改后需要如下操作：
前端编译后会成才一个build的目录，覆盖到docker里原先的build目录；
后端直接把修改的文件覆盖到docker里对应的文件；
然后重启docker。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
