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登录接口获取的数据处理登录
      }}
    />
  )
}

Api