mdt-login

产品身份认证中心

产品前端单点登录设计

参数名称	参数值	参考示例	说明
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;