wodax-login-qrcode.react

login component with qrcode for WodaX applications

Usage no npm install needed!

<script type="module">
  import wodaxLoginQrcodeReact from 'https://cdn.skypack.dev/wodax-login-qrcode.react';
</script>

README

WodaX 扫二维码登录组件

NPM version NPM downloads

安装

$ npm i wodax-login-qrcode.react
# 或 
$ yarn add wodax-login-qrcode.react

功能特性

  • 支持HTML5 EventSource 获取实时反馈；
  • 支持自定义二维码显示样式；
  • 支持外接API方式获取二维码；
  • 支持自定义渲染接口；
  • 支持调试日志输出；
  • 高性能低占用率
  • 高级可定制

使用说明

Demo

import WodaXLoginWithQrCode from 'wodax-login-qrcode.react';
 
 
const Example = () => (
  <WodaXLoginWithQrCode />
);

当前可用的Props

WodaXLoginWithQrCode.defaultProps = {
  className: `wodax-login-with-qrcode`,
  Style: {},

  // 是否开启日志调试
  debugEnable: false,

  // 可选项
  options: {
    // 基础参数: {eventSource使用}

    // 是否使用EventSource来重新获取最新QrCode
    useEventSourceForFetchQrCode: false,
    clientEventSource: {
      // EventSource 主要服务url
      url: `https://stream.wikimedia.org/v2/stream/recentchange`,
      // EventSource 附带参数
      params: {},
      // EventSource 可以处理的消息类型
      messageTypes: [`message`],
      // withCredentials
      withCredentials: false,
      // EventSource 是否保存所有
      saveAllEvents: false,
    },

    // 基础参数: {Title使用}
    title: `打开App，扫码登录`,
    titleClassName: `qr-login-title`,
    appLogo: ``,

    // QrCode 二维码配置
    qrCodeConfig: {
      renderAs: `canvas`,
      size: 128,
      bgColor: `#FFFFFF`,
      fgColor: `#000000`,
      level: `L`,
      includeMargin: false,
    },
    qrCodeContainerOpacity: {
      min: 0.01,
      max: 1,
    },

    // 提示信息
    toolTipContainerClassName: `qr-login-tooltip`,
    toolTipContainerStyle: {
      padding: '4px',
      position: 'absolute',
    },
    codeOutWorkText: `二维码已失效`,
    loginFailedText: `登录失败`,
    loginSuccessText: `登录成功`,
    qrCodeGetFailedText: `获取二维码失败`,
    scanCompleteText: `扫描成功! 请在手机上确认登录`,

    // 基础参数: {刷新区域，重新获取二维码}
    // 是否一直显示刷新区域
    refreshContainerShowEveryTime: false,
    refreshContainerProps: {
      style: {
        padding: '4px',
        position: 'absolute',
        marginTop: '40px',
      },
    },
    // 点击刷新
    refreshButtonCaption: `请点击刷新`,
    refreshButtonElement: `button`,
    refreshButtonProps: {
      style: {
        padding: '4px',
      },
    },

    // 基础参数: {实时信息接收处理}

    // 是否默认显示sse回显信息
    showSSEMessage: false,
  },

  // 数据请求接口，可以覆盖
  fetchQrCodeHandler: _default.fetchQrCodeHandler,

  // 数据反馈接口。外接应用，可以自己处理所有来自服务器的消息
  onReceiveMessageHandler: _default.onReceiveMessageHandler,

  // 渲染接口, 可以覆盖，重新写
  titleRender: _default.titleRender,
  qrCodeRender: _default.qrCodeRender,
  toolTipRender: _default.toolTipRender,
  additionLayerRender: _default.additionLayerRender,
  refreshQrCodeRender: _default.refreshQrCodeRender,
  sseMessageRender: _default.sseMessageRender,
};

在线文档运行

$ npm run website:run
# 或
$ yarn website:run

开发维护

构建

# 建议在兼容Linux的终端中运行，如Windows的WSL、或者Git Bash
$ yarn build

授权信息

MIT