Open-WebUI Ubuntu环境下的开辟摆设及自定义登录（下）

前一篇已经大致安装摆设当地的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企服之家，中国第一个企服评测及商务社交产业平台。