产品身份认证中心
产品前端单点登录设计
参数名称 | 参数值 | 参考示例 | 说明 |
---|---|---|---|
redirect |
必须 | redirect=https://www.datlas.cn |
认证成功后跳转地址 |
force |
非必须 | force=1 |
强制登录,force 不为空即可 |
Q: 为什么需要 force 参数
A: 有可能产品退出时,未调用 logout API 或者 其他原因导致 logout API 调用失败,
导致SSO的 token 不失效,又重复跳转至产品。强烈推荐退出跳转至SSO时带上force
定制化登录
目前支持通过
url参数
定制及config.js
来定制; 假如url参数
与config.js
相同功能的参数冲突,以url参数
为准
url参数
样例
https://www.xxx.com/?language=cn&tab=phone
参数名称 | 参数值 | 参考示例 | 说明 |
---|---|---|---|
language |
非必须 | language=cn |
可选值:cn, en
|
tab |
非必须 | tab=phone |
可选值:phone, wechat, dingtalk, account
|
config.js 来定制
后续可根据需求追加参数
样例
window.__MDT_LOGIN_WINDOW_NAME="脉策数据市场";
window.__MDT_LOGIN_WINDOW_DESC="脉策数据市场-您贴心的数据管理管家";
参数名称 | 参数值 | 参考示例 | 说明 |
---|---|---|---|
__MDT_LOGIN_WINDOW_NAME |
非必须 | 数据市场 |
窗口的标题 |
__MDT_LOGIN_WINDOW_DESC |
非必须,默认__DM_WINDOW_NAME 的值 |
数据市场-您贴心的数据管理管家 |
网页的描述 |
__MDT_LOGIN_API_URL |
非必须,默认location.host
|
store.maicedata.com |
api 请求地址 |
__MDT_LOGIN_LANGUAGE |
非必须 | 参考url参数 的language
|
设置语言 |
__MDT_LOGIN_TAB |
非必须 | 参考url参数 的tab
|
设置默认登录项 |
__MDT_LOGIN_TABS |
非必须,登录项配置 | ['phone', 'wechat'] |
最多设置4项['phone', 'wechat', 'dingtalk', 'account']
|
__MDT_LOGIN_LOGO |
非必须,定制化登录页面Logo | https://www.xx.png |
url 及 base64都行 |
通过SDK来定制化
上述2种定制化只支持有限的功能定制,通过SDK你可以定制任何你想要的功能
安装npm包
yarn add mdt-login
或者
npm install mdt-login
代码中引入lib,并初始化
import { initLoginConfig, LoginPage, VerifyPage } from 'mdt-login';
// 初始化配置
initLoginConfig(Options);
// 然后在需要的地方使用组件
Options参考
interface ILabelValue {
label: string;
value: string;
}
// 背景相关设置
interface IBg {
isVideo: boolean; // 背景是否是视频
color: string; // 背景的颜色
url: string; // 背景的url
}
interface ILanguageState {
language: string;
visible: boolean;
[key: string]: any;
}
// 国际化相关设置
interface ILanguage {
disable?: boolean; // 禁用
supportLanguages: ILabelValue[]; // 配置支持的语种
initialState: () => ILanguageState; // 设置组件的状态
changeLanguage: Function; // 切换语言回调
}
// 页面footer
interface IFooter {
renderFooter: Function;
}
// 登录项配置
interface ITabs {
defaultItem: string; // 默认登录项
items: ILabelValue[]; // 支持的登录项
renderExtra?: Function; // 额外拓展
}
interface IAccountState {
name: string;
nameError: string;
password: string;
passwordError: string;
buttonLoading: boolean;
buttonDisabled?: boolean;
[key: string]: any;
}
// 账号登录设置,如果登录项配置了,需要设置
interface IAccount {
nameLabel: string; // 账号标签
namePlaceholder: string; // 账号输入提示
passwordLabel: string; // 密码标签
passwordPlaceholder: string; // 密码输入提示
buttonLabel: string; // 按钮的标签
buttonLoadingLabel: string; // 按钮认证中的标签
initialState: () => IAccountState;
verifyName: Function; // 对输入的账号校验
verifyPassword: Function; // 对输入的密码校验
verifyAll: Function;
loginIn: Function; // 校验通过后认证的方法
renderExtraFormItem?: Function; // 额外定制渲染表格项
renderExtraButton?: Function; // 额外定制渲染按钮项
}
interface IPhoneState {
phone: string;
phoneError: string;
captcha: string;
captchaError: string;
selectISO: string;
code: string;
captchaDisabled: boolean;
buttonLoading: boolean;
buttonDisabled?: boolean;
[key: string]: any;
}
// 短信登录设置,如果登录项配置了,需要设置
interface IPhone {
phoneLabel: string; // 手机号标签
phonePlaceholder: string; // 输入手机号提示
captchaLabel: string; // 验证码标签
captchaPlaceholder: string; // 验证码输入提示
captchaInterval: number; // 验证码获取间隔
captchaButtonLabel: string; // 验证码按钮
captchaButtonSendedLabel: Function; // 验证码发送后标签
buttonLabel: string; // 按钮的标签
buttonLoadingLabel: string; // 按钮认证中的标签
supportCodes: { name: string; iso: string; code: string }[]; // 手机号支持的国家及地区
initialState: () => IPhoneState;
verifyPhone: Function; // 手机号校验
verifyCaptcha: Function; // 验证码校验
verifyAll: Function;
sendCaptcha: Function; // 发送验证
loginIn: Function; // 校验通过后认证的方法
renderExtraFormItem?: Function; // 额外定制渲染表格项
renderExtraButton?: Function; // 额外定制渲染按钮项
}
interface IWechatState {
state: string;
[key: string]: any;
}
// 微信扫码设置,如果登录项配置了,需要设置
interface IWechat {
successContent: string; // 扫码成功的提示
failContent: string; // 扫码失败的提示
statusContent: string; // 扫码中的提示
tipColor: string; // 字体颜色
flashInterval: number; // 二维码刷新的间隔
initialState: () => IWechatState;
getState: Function; // 获取state
getIframeSrc: Function; // 获取二维码url
renderExtra?: Function; // 额外定制渲染
}
interface IDingtalkState {
state: string;
[key: string]: any;
}
// 钉钉扫码设置,如果登录项配置了,需要设置
interface IDingtalk {
flashInterval: number; // 二维码刷新的间隔
initialState: () => IDingtalkState;
getState: Function; // 获取state
splicingGoto: Function; // 获取二维码url
renderExtra?: Function; // 额外定制渲染
}
// 微信,钉钉验证绑定界面,如果需要,可以定制
interface IVerify {
renderPage: Function;
}
// 整个config 配置
interface IConfig {
logo: string; // logo
bg: IBg; // 背景
theme: Record<string, string>; // 定制主题
language: ILanguage; // 国际化
footer: IFooter; // 页脚
tabs: ITabs; // 登录项
account?: IAccount; // 账号登录配置
phone?: IPhone; // 手机号配置
wechat?: IWechat; // 微信扫码配置
dingtalk?: IDingtalk; // 钉钉扫码配置
verify?: IVerify; // 绑定界面
}
个性化定制主题
目前支持以下变量定制
--mdt-login-text-color: #a3aac2;
--mdt-login-text-dim-color: #727d9b;
--mdt-login-text-highlight-color: #f4f6fc;
--mdt-login-primary-color: #4285f4;
--mdt-login-primary-dim-color: #2b4997;
--mdt-login-primary-highlight-color: #3b6fd5;
--mdt-login-error-color: #f85960;
--mdt-login-success-color: #22cc89;
--mdt-login-tab-text-color: var(--mdt-login-text-dim-color);
--mdt-login-tab-text-hover-color: var(--mdt-login-text-color);
--mdt-login-tab-text-actived-color: var(--mdt-login-primary-color);
--mdt-login-tab-border-color: var(--mdt-login-text-dim-color);
--mdt-login-tab-border-actived-color: var(--mdt-login-primary-color);
--mdt-login-form-label-color: var(--mdt-login-text-color);
--mdt-login-form-msg-color: var(--mdt-login-error-color);
--mdt-login-input-tip-color: var(--mdt-login-text-color);
--mdt-login-input-color: var(--mdt-login-text-highlight-color);
--mdt-login-input-bg-color: rgba(50, 56, 78, 0.2);
--mdt-login-input-bg-hover-color: rgba(50, 56, 78, 0.35);
--mdt-login-input-border-color: #333b52;
--mdt-login-input-focused-border-color: var(--mdt-login-primary-color);
--mdt-login-input-error-border-color: var(--mdt-login-error-color);
--mdt-login-btn-bg-color: var(--mdt-login-primary-highlight-color);
--mdt-login-btn-bg-hover-color: var(--mdt-login-primary-color);
--mdt-login-btn-bg-diasbled-color: var(--mdt-login-primary-dim-color);
--mdt-login-btn-text-color: var(--mdt-login-text-highlight-color);
--mdt-login-btn-text-disabled-color: var(--mdt-login-text-dim-color);
--mdt-login-link-color: var(--mdt-login-btn-bg-color);
--mdt-login-link-hover-color: var(--mdt-login-btn-bg-hover-color);
--mdt-login-link-diasbled-color: var(--mdt-login-btn-bg-diasbled-color);
--mdt-login-overlay-border-color: #4a5472;
--mdt-login-overlay-bg-color: #343c54;
--mdt-login-overlay-text-color: #f4f6fc;
--mdt-login-overlay-hover-item-bg-color: #3f4863;
--mdt-login-overlay-hover-item-text-color: #f4f6fc;
--mdt-login-overlay-scrollbar-track-color: transparent;
--mdt-login-overlay-scrollbar-thumb-color: #3f4863;