登录 Widget 是一个可嵌入到任何网页的登录表单组件。通过一行 <script> 标签引入,即可在你的网站上展示 New API 的登录界面。用户登录成功后,通过回调函数返回用户数据,由嵌入方自行处理后续逻辑。
当前版本仅支持密码登录。
在你的 HTML 页面中添加 <script> 标签,src 指向你的 New API 服务地址:
<script src="https://your-domain.com/static/login-widget.js"></script>
在页面中放置一个 DOM 元素作为 Widget 的挂载点:
<div id="login-container"></div>
在脚本加载后调用 NewApiLoginWidget.init():
<script>
var widget = NewApiLoginWidget.init({
container: '#login-container',
apiUrl: 'https://your-domain.com',
onSuccess: function(data) {
console.log('登录成功', data);
// 在这里处理登录成功逻辑
},
onError: function(err) {
console.log('登录失败', err.message);
}
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的网站</title>
</head>
<body>
<h1>欢迎</h1>
<!-- 登录 Widget 挂载点 -->
<div id="login-container"></div>
<!-- 引入 Widget 脚本 -->
<script src="https://your-domain.com/static/login-widget.js"></script>
<!-- 初始化 -->
<script>
var widget = NewApiLoginWidget.init({
container: '#login-container',
apiUrl: 'https://your-domain.com',
onSuccess: function(data) {
// 登录成功,保存用户信息
localStorage.setItem('user', JSON.stringify(data));
alert('欢迎, ' + data.username);
},
onError: function(err) {
alert('登录失败: ' + err.message);
}
});
</script>
</body>
</html>
NewApiLoginWidget.init(options)初始化并渲染登录表单。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
container |
string 或 Element |
是 | 挂载点,支持 CSS 选择器字符串或 DOM 元素 |
apiUrl |
string |
是 | New API 服务地址,如 https://api.example.com |
onSuccess |
function |
否 | 登录成功回调,参数为用户数据对象 |
onError |
function |
否 | 登录失败回调,参数为 { message: string } |
theme |
string |
否 | 主题,可选 'light'(默认)或 'dark' |
返回一个对象,包含以下方法:
| 方法 | 说明 |
|---|---|
destroy() |
卸载 Widget,清除 DOM |
{
"id": 1,
"username": "user",
"display_name": "用户",
"role": 1,
"status": 1,
"group": "default"
}
| 字段 | 类型 | 说明 |
|---|---|---|
id |
number | 用户 ID |
username |
string | 用户名 |
display_name |
string | 显示名称 |
role |
number | 角色(1=普通用户,10+=管理员,100+=超级管理员) |
status |
number | 状态 |
group |
string | 用户组 |
NewApiLoginWidget.init({
container: '#login',
apiUrl: 'https://your-domain.com',
// theme: 'light' // 默认就是 light,可省略
});
NewApiLoginWidget.init({
container: '#login',
apiUrl: 'https://your-domain.com',
theme: 'dark'
});
当不再需要登录表单时(如登录成功后),调用 destroy() 移除:
var widget = NewApiLoginWidget.init({ ... });
// 登录成功后销毁
widget.destroy();
支持在同一页面创建多个 Widget 实例(如同时显示 Light 和 Dark 主题):
<div id="login-light"></div>
<div id="login-dark"></div>
<script src="https://your-domain.com/static/login-widget.js"></script>
<script>
var widget1 = NewApiLoginWidget.init({
container: '#login-light',
apiUrl: 'https://your-domain.com',
theme: 'light'
});
var widget2 = NewApiLoginWidget.init({
container: '#login-dark',
apiUrl: 'https://your-domain.com',
theme: 'dark'
});
</script>
onSuccess 回调中自行处理用户会话。onError 会收到提示信息。NewApiLoginWidget is not defined确保 <script src="...login-widget.js"> 在调用 init() 的 <script> 之前。浏览器按顺序执行脚本,Widget 脚本必须先加载完成。
onSuccess 返回的数据中不包含 Token。你需要:
/api/token 接口用用户密码创建一个 API TokenWidget 使用 Shadow DOM 隔离样式,外部 CSS 不会影响内部。当前仅支持 light 和 dark 两种内置主题。如需深度自定义,需要修改 web/widget/styles.css 并重新构建。
cd web/widget && bun install && bun run build
构建产物输出到 web/dist/static/login-widget.js。重新编译后端(go build)后生效。