@digitalzz/login v1.2.9

digitalzz/login

介绍

基于 react^16.8.6 的 页面级组件-登录页组件，集成手机验证码登录、短信验证码登录、郑好办扫码登录、郑政钉扫码登录功能

安装

## npm安装

npm install --save @digitalzz/login
或者
npm i @digitalzz/login -S

## yarn 安装
yarn add @digitalzz/login

使用方法

1. 账号密码登录

import DzrLogin from '@digitalzz/login'
import headerLogo from '@/assets/image/main-logo.jpg'
import bgImage from '@/assets/image/login-bg.jpg'

/**
 * 账号密码登录接口
 */
const pwdLogin = params => {
  // 使用promise 把结果resolve，可以从success里获取该response
  // 不使用promise 可直接在该函数里处理登录逻辑
  return new Promise(resolve => {
    // 处理输入框字段命名问题，默认用户名：loginName，密码：password
    const data = {
      appId: params.appId,
      username: params.loginName,
      password: params.password
    }
    // 后端api接口方法
    pwdLoginApi(data).then(response => {
      resolve(response)
    })
  })
}

export default () => {
  return (
    <DzrLogin
      params={{ appId: 'xxx-xxx' }}
      headerLogo={headerLogo}
      bgImage={bgImage}
      pwdLogin={pwdLogin}
      loginType={['pwd']}
      success={response => {
        // 登录成功，取response登录接口获取的数据处理登录
      }}
    />
  )
}

2. 短信验证码登录

import DzrLogin from '@digitalzz/login'
import headerLogo from '@/assets/image/main-logo.jpg'
import bgImage from '@/assets/image/login-bg.jpg'

/**
 * 发送短信验证码
 */
const sendCode = params => {
  return new Promise(resolve => {
    // 后端api接口方法
    sendCodeApi(data).then(response => {
      resolve(response)
    })
  })
}

/**
 * 短信验证码登录
 */
const sendCodeLogin = params => {
  // 使用promise 把结果resolve，可以从success里获取该response
  // 不使用promise 可直接在该函数里处理登录逻辑
  return new Promise(resolve => {
    // 后端api接口方法
    sendCodeLoginApi(data).then(response => {
      resolve(response)
    })
  })
}

export default () => {
  return (
    <DzrLogin
      params={{ appId: 'xxx-xxx' }}
      headerLogo={headerLogo}
      bgImage={bgImage}
      sendCode={sendCode}
      sendCodeLogin={sendCodeLogin}
      loginType={['sms']}
      success={response => {
        // 登录成功，取response登录接口获取的数据处理登录
      }}
    />
  )
}

3. 郑好办扫码登录

import DzrLogin from '@digitalzz/login'
import headerLogo from '@/assets/image/main-logo.jpg'
import bgImage from '@/assets/image/login-bg.jpg'

/**
 * 获取郑好办二维码
 */
const getZhbQrcode = params => {
  return new Promise(resolve => {
    getZhbQrcodeApi(params).then(res => {
      const { code, message, data } = res
      const dataObj = {
        url: data,
        uuid: qs.parse(data).uuid
      }
      const response = { code, message, data: dataObj }
      resolve(response)
    })
  })
}

/**
 * 获取郑好办扫码登录用户信息
 */
const getZhbUserInfo = params => {
  // 使用promise 把结果resolve，可以从success里获取该response
  // 不使用promise 可直接在该函数里处理登录逻辑
  return new Promise(resolve => {
    // 后端api接口方法
    getZhbUserInfoApi(data).then(response => {
      resolve(response)
    })
  })
}

export default () => {
  return (
    <DzrLogin
      params={{ appId: 'xxx-xxx' }}
      headerLogo={headerLogo}
      bgImage={bgImage}
      getZhbQrcode={getZhbQrcode}
      getZhbUserInfo={getZhbUserInfo}
      loginType={['zhb']}
      success={response => {
        // 登录成功，取response登录接口获取的数据处理登录
      }}
    />
  )
}

4. 郑政钉扫码登录

import DzrLogin from '@digitalzz/login'
import headerLogo from '@/assets/image/main-logo.jpg'
import bgImage from '@/assets/image/login-bg.jpg'

/**
 * 获取郑政钉扫码登录用户信息
 */
const zzdLogin = params => {
  // 扫码获取code，code给后端换取token
  // 使用promise 把结果resolve，可以从success里获取该response
  // 不使用promise 可直接在该函数里处理登录逻辑
  return new Promise(resolve => {
    // 后端api接口方法
    zzdLoginApi(data).then(response => {
      resolve(response)
    })
  })
}

export default () => {
  return (
    <DzrLogin
      params={{ appId: 'xxx-xxx' }}
      headerLogo={headerLogo}
      bgImage={bgImage}
      zzdIframeUrl="https://login-dingding.zhengzhou.gov.cn/oauth2/auth.htm?response_type=code&client_id=zkp_dingoa&redirect_uri=http://59.207.61.4:11373&scope=get_user_info&authType=QRCODE&embedMode=true"
      zzdLogin={zzdLogin}
      loginType={['zzd']}
      success={response => {
        // 登录成功，取response登录接口获取的数据处理登录
      }}
    />
  )
}

Api

默认 rules

export const defaultRules = {
  loginName: [{ required: true, message: '请输入账号' }],
  phone: [
    { required: true, message: '请输入手机号' },
    {
      pattern: /^1[3-9][\d]{9}$/,
      message: '请输入正确的手机号'
    }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { pattern: /^((?=.*[a-zA-Z])|(?=.*\d)).{6,50}$/, message: '请输入不小于6位的密码' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码' },
    { pattern: /^((?=.*[a-zA-Z])|(?=.*\d)).{6,50}$/, message: '请输入不小于6位的新密码' }
  ],
  captcha: [
    { required: true, message: '请输入图形验证码' },
    { pattern: /^[0-9a-zA-Z]{4,10}$/, message: '请输入图形验证码' }
  ],
  smsCaptcha: [
    { required: true, message: '请输入短信验证码' },
    { pattern: /^[0-9]{4,8}$/, message: '请输入短信验证码' }
  ]
}