zlgx-uamsdk
v1.2.6
Published
统一账户管理(Unified Account Manager) Javascript SDK 域名:zlgx:[sso.zlgx.com](//sso.zlgx.com) lg:[lgsso.zlgx.com](//lgsso.zlgx.com)
Downloads
18
Readme
zlgx-uamsdk
统一账户管理(Unified Account Manager) Javascript SDK
域名:zlgx:sso.zlgx.com lg:lgsso.zlgx.com
sdk弹窗新版登录页地址:
//(sso|lgsso).zlgx.com/#/miniLogin
sdk跳转新版登录页地址:
//(sso|lgsso).zlgx.com/#/login
安装和引入方式
直接引用文件(推荐)
在你的项目的 html 文件中引入
<script src="//sso.zlgx.com/sdk/uamsdk.min.js"></script>
使用 npm 安装
$ npm install zlgx-uamsdk
require('uamsdk'); // ES5
import uamsdk from 'zlgx-uamsdk'; // ES6
使用方法
step1: 拷贝 example/callback.html 到您的 web 服务器中并确保可访问;
step2: 文档加载完毕时调用init;
uamsdk.init({
client_id: 'YOUR_CLIENT_ID', // 必填
redirect_uri: '您的 callback.html 访问地址', // 必填
});
step3: 根据业务场景手动调用登录函数(根据登录模式传递不同的display参数或者调用不同的函数login / createLoginIframe,参考下面四种登录模式的例子)
例子1: 弹窗登录(弹出一个固定大小的window窗口)login(不推荐,且已不再维护)
uamsdk.init({
client_id: 'YOUR_CLIENT_ID', // 必填
display: uamsdk.POPUP, // 必填
redirect_uri: '您的 callback.html 访问地址', // 必填
});
uamsdk.login(callback, keepSession);
例子2: 弹出遮罩层登录(弹出一个带遮罩的iframe)login(推荐)
uamsdk.init({
client_id: 'YOUR_CLIENT_ID', // 必填
display: uamsdk.IFRAME, // 必填
redirect_uri: '您的 callback.html 访问地址', // 必填
});
uamsdk.login(callback, keepSession);
例子3: 自定义嵌入登录页(用户提供容器来容纳登录部分)createLoginIframe
uamsdk.init({
client_id: 'YOUR_CLIENT_ID', // 必填
redirect_uri: '您的 callback.html 访问地址', // 必填
});
/**
* @param wrapperId {string} iframe容器的ID
* @param styleObj {object} 用户自定义iframe样式
* @param callback {function} 登录成功后回调函数
* @param keepSession {boolean} 是否保持会话(重新打开浏览器是否保持登录状态)
* @param showTip {boolean} 是否给予顶部提示
*/
uamsdk.createLoginIframe(wrapperId, styleObj, callback, keepSession = true, showTip = false)
例子4: 跳转到登录页登录login
uamsdk.init({
client_id: 'YOUR_CLIENT_ID', // 必填
display: uamsdk.REDIRECT, // 必填
redirect_uri: '您的 callback.html 访问地址', // 必填
});
uamsdk.login(callback, keepSession)
// display = POPUP或IFRAME 时 callback必须指定函数; = REDIRECT 时 为string(不传递使用 redirect_uri)
step4: 退出
uamsdk.logout(function() {
...
})
// 或者是
uamsdk.logout('//a.com/redirect-callback.html')
uamsdk.方法列表
| name | 说明 | 返回值 |
| -------- | ----- | ---- |
| init | 初始化配置,接受1个options配置对象完成初始化 | undefiend |
| login | 登录;接受两个参数:locationOrcallback, keepSession = true,根据init配置的display展示不同的登录 | undefined |
| createLoginIframe | 嵌入登录页的iframe,并加入自定义样式 | undefined |
| logout | 退出登录 | undefined |
| register | 跳转到注册页,redirect_uri参数是注册成功后要跳转的地址,不传则默认跳转到location.href | undefined |
| loggedIn | 判断用户是否已登录(找存储的token
字段) | boolean |
| loggingIn | 判断用户是否正在登录 | boolean |
| getToken | 获取登录的token(token
字段) | string |
| closeLoginDialog | 关闭登录弹层,option参数解释: 不传option默认值是{action: 'destroy'}, action为'destroy'时删除弹层元素,否则隐藏弹层元素,如果弹层是window窗口,则无视option参数 | |
| tipInIframe | 在使用createLoginIframe方式登录时,默认登录成功不提示,可以使用该方法调用iframe内部的提示; type: success/error/warning | -- |
| handleStatusChange | 监听用户登陆状态,接收一个回调函数callback和time作为参数,此回调函数接受一个参数 response: {status: 'kicked/not_login/already_login', msg: 'message from server'} | undefined |
| cancelHandleStatusChange | 取消监听用户登录状态,调用此方法会停止向后端请求获取用户登录状态 | undefined |
| ajax | 调用接口。接受3个参数 method:get/post
; path:可以是绝对url或者相对url,相对url时会生成 apiurl(baseUrl + '/api/v1/') + path的接口地址; params | promise |
| get | get方式调用接口 接受2个参数 path:参考ajax方法; params | promise |
| post | post方式调用接口 接受2个参数 path:参考ajax方法; params | promise |
| onClosedPopup | 给popup弹窗关闭事件添加回调 将指定回调传给本方法即可| undefined |
| getUserInfo | 获取登录用户的信息,返回promise | promise |
init
// @param option {object} 初始化配置参数
uamsdk.init = function(option){ ... }
// opition详细配置:
option = {
// 指定所使用SSO登录项目所在的域关键字及地址
ssoTemplate:'sso服务域名前缀,默认为sso(关联登陆状态检测和基础API接口)',
baseUrl:'目标项目部署地址://xxx.zlgx.com',
display: '登录模式(uamsdk.POPUP/uamsdk.IFRAME/uamsdk.REDIRECT)',
client_id: '你的客户端ID',
redirect_uri: '你的callback.html访问地址',
// 改组参数 单点登录 项目常用, 其他项目可忽略
loginUrl: '你要使用的登录地址,可选',
logoutUrl: '你要使用的退出登录地址,可选',
registerUrl:'你要使用的注册页面地址,可选',
userStatusUrl:'监听用户登录状态的接口的尾段', // 默认 /v1/get/login/status
iframeWrapperStyle: '弹窗的样式,可以通过此项自定义弹窗的宽高等样式。如: {width: "100px", height: "500px"}',
// 老版本留下来的配置项, 目前只发现有根据未登录并且有ticket时自动登录;不建议设置此参数
// apiUrl:'目标项目公共接口地址://xxx.zlgx.com/api/v1/',
}
init方法option配置对象字段说明
| 字段 | 说明 | 类型 | 默认值 | 是否必填 |
| ------- | ------ | ---- | ---- | ---- |
| client_id | 调用uamsdk的业务平台ID | string | undefined | 是 |
| redirect_uri | 你的callback.html访问地址 | string | undefined | 是 |
| display | 以哪种方式进行登录 | uamsdk.POPUP
oruamsdk.IFRAME
or uamsdk.REDIRECT
| uamsdk.IFRAME
| 否 |
| ssoTemplate | (//sso.zlgx.com)中的sso部分 | sso
| lgsso
| sso
| 否 |
| baseUrl | 自定义baseurl | string | :// + ssoTemplate + rootDomain
| 否 |
| apiUrl | 自定义api接口前段 | string | baseUrl + /api/v1/
| 不可配置 只在init初始化 |
| loginUrl | 自定义登录页地址 | string | baseUrl/#/miniLogin
| 否 |
| logoutUrl | 自定义退出页地址 | string | baseUrl/login/logout.html
| 否 |
| registerUrl | 自定义注册页地址 | string | baseUrl/#/register
| 否 |
| userStatusUrl | 自定义监听用户登录状态api地址尾段 | string | /v1/get/login/status
| 否 |
| userInfoUrl | 自定义获取用户信息的url | string | | 否 |
init方法中部分参数不同环境下对应的值(其中sso = sso | lgsso)
| key | dev | test | watest| production |
| -------- | --------- | -------- | ------------ | ---------- |
| loginUrl | 前台: 后台: | 前台:http://sso.test.zlgx.com
后台:http://uam-sso.test.zlgx.com
| 前台: http://sso-watest.zlgx.com
后台: http://uam-sso-watest.zlgx.com
| 前台: https://sso.zlgx.com
后台: https://uam-sso.zlgx.com
|
| logoutUrl | 前台:
后台:
| 前台: http://sso.test.zlgx.com/login/logout.html
后台: http://uam-sso.test.zlgx.com/#/logout
| 前台: http://sso-watest.zlgx.com/login/logout.html
后台: http://uam-sso-watest.zlgx.com/#/logout
| 前台: https://sso.zlgx.com/login/logout.html
后台: https://uam-sso.zlgx.com/#/logout
|
| userInfoUrl | 前台项目: /api/v1/login/getUserByToken
后台项目: /api/v1/uamUser/getUamUserByToken
| 根路径不变,域名和登录、退出的域名一致 | 同上 | 同上 | 同上 |
login
// @param callbackOrRedirectUrl 登录成功后回调函数或者是重定向地址
// @param keepSession {boolean} 是否保持会话(重新打开浏览器是否保持登录状态),不传则默认为true,即重新打开浏览器依然保持登录
uamsdk.login = function(callback, keepSession){ ... }
createLoginIframe
// 创建登录的iframe
// @param wrapperId {string} iframe容器的ID
// @param styleObj {object} 用户自定义iframe样式
// @param callback {function} 登录成功后回调函数
// @param keepSession {boolean} 是否保持会话(重新打开浏览器是否保持登录状态),不传则默认为true,即重新打开浏览器依然保持登录
uamsdk.createLoginIframe = function(iframeWrapperId, iframeStyleObj, callback, keepSession){ ... }
handleStatusChange
userStatus用户状态可选值见文档底部
// 监听用户登录状态
uamsdk.handleStatusChange(function (response) {
// 判断用户登录状态(response.status)
if (response.status === 'xxx') {
// ...your business
}
}, 300000)
logout
// @param callbackOrRedirectUrl 可以是回调函数或者是合法的跳转链接
uamsdk.logout = function(callbackOrRedirectUrl){ ... }
register
// 跳转到注册页
uamsdk.register = function(redirect_uri:string){ ... }
onClosedPopup
// 给popup弹窗关闭事件添加回调
uamsdk.onClosedPopup = function(cb){ ... }
// eg:
uamsdk.onClosedPopup(function(){
//your stuff...
})
display参数可取值说明:
- 'popup': 弹窗模式,弹出新的window窗口
- 'redirect': 跳转模式,当前窗口跳转到登录页
- 'iframe': 弹出类似于模态框的iframe,不打开新的window窗口,默认居中显示
- 'customIframe': 自定义嵌入的iframe, 可调整sdk嵌入的iframe样式,需要提供容器给iframe,使用uamsdk.createLoginIframe方法
userStatus值的说明:
- 'not_login': 未登录
- 'already_login': 已登录
- 'kicked': 被踢下线
- 'frozen': 已冻结
更新日志
[1.0.7] 2023-1-11
- 增加企微环境判断,在企微中优先从cookie取token;
[1.1.0] 2024-03-20
- 兼容lgsso域名前缀下用户登录状态监听接口地址,主要用于龙钢各项目;
- 优化配置参数等,整理更新README.md
[1.2.0] 2024-03-20
- 基础接口地址bug修改;
- README更新
[1.2.3] 2024-03-20
- 恢复getUserInfo 方法;
[1.2.5] 2024-05-07
- 监听登录状态函数增加轮询时间参数;