@aligov/gov-login NPM

gov-login

@aligov/gov-login

G 端政务统一登录组件,包含登录、注册、忘记密码等功能

Install

外部源: npm install @aligov/gov-login -S 内部源: tnpm install @aligov/gov-login -S

同步 tnpm

tnpm sync @aligov/gov-login

API

参数名	说明	必填	类型	默认值	备注
hasGovernment	是否有经办人办理 tab	否	boolean	false	无
extendParam	扩展参数	否	object	无	publicKeyUrl: 公钥 url loginUrl: 登录 url treeUrl: 组织树 url lang: 多语言 tag。英文: en-US, 葡文: pt-PT, 中文繁体: zh-TW,中文简体(默认): zh-CN
config	页面静态配置	否	object	无
extLoginTypes	扩展登录方式	否	Array	无	见下描述
disabledLoginTypes	禁止透出的登录方式列表	否	Array	无	登录方式 value 列表

页面静态配置 config

Copyright: 可选，string，自定义网页底部
logoSrc: 可选，string，自定义 logo 地址
title: 可选，string，登录组件标题，默认是“登录”。如果有 logoSrc，那么优先展示 logo，不展示 title
register: 是否出现注册按钮（未实现）
recoverPW: 是否出现忘记登录密码（未实现）
bgImage: 可选，string，自定义大背景图，不填则使用默认
rightStyle: 可选，object，右侧登录组件样式

内置的登录方式包括

gov: 政府服务部门账号
manager: 系统管理员账号

extLoginTypes

extLoginTypes 用来扩展自定义的登录方式，目前支持引入外链 script 或 iframe，如扫码登录，类型是 Array<Object>。

script 方式

script 方式是指加载外部脚本，由该脚本来生成登录 UI。

对于script登录，默认会创建一个 #J-script-login-${code} 的 div，可用来供放置自定义元素

外链 script 方式的配置项包括：

type，值为 'script'
code，该登录类型代号，应在项目中唯一
name，该登录类型描述文案
url，外链脚本地址
constructorName，可选，如果指定，script 加载完成后调用 window[constructorName](...args)
methodName，可选，如果指定，script 加载完成后调用 window[methodName](...args)
args，数组，可选，用于 constructorName 或 methodName 调用

iframe 方式

iframe 方式是指潜入 iframe，由该 iframe 来提供登录功能。

type，只为 'iframe'
code，该登录类型代号，应在项目中唯一
name，该登录类型描述文案
url，iframe 地址
successPredict，可选，基于从 iframe 中获取到的 mesage 来判断是否登录成功，如果成功，则进行后续的处理。类型是 (eventData: any) => boolean，eventData 是 message 事件对象中的 data（event.data）
getRedirectUrl，可选，从 iframe message 信息中获取指定的跳转地址。如果是有效字符串，那么登录模块跳转到该指定地址。否则，采用内置的跳转逻辑。类型是 (eventData: any) => string。
width，可选，iframe 宽度
height，可选，iframe 高度

Usage

使用默认页

推荐使用

import React from "react";
import Login from "@aligov/gov-login";


export default () => {
  render() {
    return (
      <div>
        <GovLogin
          hasGovernment
          extendParam={{ indexPage: '/test' }}
          config={{
            Copyright: '浙江省杭州市人民政府版权所有',
            logoSrc: 'https://gw.alicdn.com/tfs/TB12WS9Rhv1gK0jSZFFXXb0sXXa-612-88.png',
            bgImage: '//mdn.alipayobjects.com/afts/img/A*jkYqTLCEZeAAAAAAAAAAAABjAQAAAQ/original?bz=mpaas_user'
          }}
        />
      </div>
    );
  }
}

直接调用接口，不使用默认登录页

import Login from "@aligov/gov-login";

enum ACCOUNT_TYPE {
  // 系统管理员
  manager = 'manager',
  // 政府部门账号
  gov = 'gov',
  person = 'person',
  legal = 'legal',
}


interface loginDataTypes {
  account: string;
  password: string;
  department?: object;
  accountType?: ACCOUNT_TYPE;
  oid?: string;
  devCoding?: string;
  orgName?: string;
}

Login.doLogin({
    params: loginDataTypes,
    extendParam: any,
    loginService?: any
});

一般地，直接调用接口地方式，关注params即可，以下是举例：

例一：G端管理员账户登录（线下大厅登录）

Login.doLogin(
  {
      account: 'xxx',
      password: 'xxx',
      accountType: 'manager'
  }, {}
)
.then(data => console.log(data))
.catch(err => console.log(err));