@yidun/quickpass-plugin-rn v1.3.6

号码认证

直连三大运营商，一步校验手机号与当前SIM卡号一致性。优化注册/登录/支付等场景验证流程

平台支持（兼容性）

环境准备

CocoaPods安装教程

资源引入/集成

npm install @yidun/quickpass-plugin-rn

项目开发配置

旧版本需要在 react-native 工程对应的 android/app/build.gradle 文件的 android 域中添加

repositories {
    flatDir {
        dirs project(':yidun_quickpass-plugin-rn').file('libs')
    }
}

release 包需要添加混淆规则

-dontwarn com.cmic.sso.sdk.**
-keep class com.cmic.sso.**{*;}
-dontwarn com.sdk.**
-keep class com.sdk.** { *;}
-keep class cn.com.chinatelecom.account.**{*;}
-keep public class * extends android.view.View
-keep class com.netease.nis.quicklogin.entity.**{*;}
-keep class com.netease.nis.quicklogin.listener.**{*;}
-keep class com.netease.nis.quicklogin.QuickLogin{
    public <methods>;
    public <fields>;
}
-keep class com.netease.nis.quicklogin.helper.UnifyUiConfig{*;}
-keep class com.netease.nis.quicklogin.helper.UnifyUiConfig$Builder{
     public <methods>;
     public <fields>;
 }
-keep class com.netease.nis.quicklogin.utils.LoginUiHelper$CustomViewListener{
     public <methods>;
     public <fields>;
}
-keep class com.netease.nis.basesdk.**{
    public *;
    protected *;
}

调用示例

export default class App extends Component {
  componentDidMount() {
    NativeModules.QuickLoginPlugin.initQuickLogin('此处填写您申请的业务id');
  }

  handlePressLogin() {
    NativeModules.QuickLoginPlugin.prefetchNumber((success, resultDic) => {
      if (!success) return;
      
      const token = resultDic.token

      let uiJsonConfig;
      if (Platform.OS==='android') {
        uiJsonConfig = androidConfigJson;
        NativeModules.QuickLoginPlugin.setUiConfig(uiJsonConfig);
        NativeModules.QuickLoginPlugin.login((success, resultDic)=>{
            if (!success) return
            NativeModules.QuickLoginPlugin.closeAuthController();

            fetch('您的后端认证接口', {
                method: 'POST',
                body: JSON.stringify({
                    token,
                    accessToken: resultDic.accessToken
                })
            })
        })
      } else {
        uiJsonConfig = iosConfigJson;
        NativeModules.QuickLoginPlugin.setUiConfig(uiJsonConfig, (success) => {
            if (success) {
                console.log("设置UI成功")
                NativeModules.QuickLoginPlugin.login((success, resultDic)=>{
                    if (!success) return
                    NativeModules.QuickLoginPlugin.closeAuthController();

                    fetch('您的后端认证接口', {
                        method: 'POST', 
                        body: JSON.stringify({
                            token,
                            accessToken: resultDic.accessToken
                        })
                    })
                });
            } 
        });
      }
    })
  }

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.handlePressLogin}>
          <View>
            <Text>登录</Text>
          </View>
        </TouchableOpacity>
      </View>
    )
  }
}

更多使用场景请参考 demo

SDK方法说明

1. 创建对象

代码说明：

import {NativeModules} from 'react-native';
var quichLoginPlugin = NativeModules.QuickLoginPlugin;

2. 初始化

代码说明：

quichLoginPlugin.initQuickLogin('此处填写您申请的业务id');

参数说明：

• 入参说明：

  参数	类型	是否必填	默认值	描述
  businessId	String	是	无	易盾分配的业务id

3. 预取号

代码说明：

quichLoginPlugin.prefetchNumber((success, data) => {
  if (success) {
    // TODO: 预取号成功处理，可以进行授权页面配置和调起授权页
  } else {
    // TODO: 预取号失败处理  
  }
})

参数说明：

• 回调参数说明：

  回调参数	类型	描述
  success	Boolean	预取号成功
  data.token	String	如果预取号成功则返回易盾token，否则无此字段
  data.desc	String	如果预取号失败，返回错误详情, 否则无此字段

4. 是否具备一键登录能力

代码说明：

quichLoginPlugin.checkVerifyEnable((success) => {
  if (success) {
    // TODO: 具备一键登录能力
  } else {
    // TODO: 不具备一键登录能力
  }
})

参数说明：

• 回调参数说明：

  回调参数	类型	描述
  success	Boolean	是否具备一键登录能力

5. 自定义授权页面

代码说明：

NativeModules.QuickLoginPlugin.setUiConfig(config, (success) => {
    if (success) {  
        // TODO:设置UI成功，可以进行取号接口调用
    } else {
    }
});

参数说明：

• 基础参数：

  参数	类型	是否必填	默认值	描述
  config	Object	是	无	自定义配置项
  success	Boolean	设置授权页面UI成功

config 可配置项说明： android版

开发者不得通过任何技术手段，将授权页面的隐私栏、手机掩码号、供应商品牌内容隐藏、覆盖 网易易盾与运营商会对应用授权页面进行审查，若发现上述违规行为，网易易盾有权将您的一键登录功能下线

状态栏

导航栏

应用 Logo

手机掩码

认证品牌

登录按钮

隐私协议

协议详情 Web 页面导航栏

其他

自定义view

config 可配置项说明： iOS版

设计规范概览 开发者不得通过任何技术手段，将授权页面的隐私栏、手机掩码号、供应商品牌内容隐藏、覆盖 网易易盾与运营商会对应用授权页面进行审查，若发现上述违规行为，网易易盾有权将您的一键登录功能下线

基础配置

转场动画

自定义控件

事例,注意：授权页面的图片需放到iOS项目 Assets.xcassets 中

"widgets": [
        {
            "type": "UIButton",
            "image": "weixin",
            "title": "",    
            "titleColor": "#000000",
            "titleFont": 12,
            "cornerRadius": 20,
            "action": "handleCustomEvent1",
            "frame": {"mainScreenLeftDistance":70,"mainScreenTopDistance":340,"width":40,"height":40},
            "backgroundImage":""
        },
        {
            "type": "UIButton",
            "image": "qq",
            "title": "",    
            "titleColor": "#FFFFFF",
            "titleFont": 12,
            "cornerRadius": 20,
            "action": "handleCustomEvent2",
            "frame": {"mainScreenCenterXWithLeftDistance":0,"mainScreenTopDistance":340,"width":40,"height":40},
            "backgroundImage": ""
        },
        {
            "type": "UIButton",
            "image": "weibo",
            "title": "",    
            "titleColor": "#FFFFFF",
            "titleFont": 12,
            "cornerRadius": 20,
            "action": "handleCustomEvent3",
            "frame": {"mainScreenRightDistance":70,"mainScreenTopDistance":340,"width":40,"height":40},
            "backgroundImage": ""
        },
        {
            "type": "UIButton",
            "image": "",
            "title": "其他登录方式",
            "titleColor": "#000000",
            "titleFont": 14,
            "cornerRadius": 20,
            "action": "handleCustomLabel",
            "backgroundImage": "login_btn_normal",
            "backgroundColor": "#000000",
            "frame": {"mainScreenLeftDistance":80,"mainScreenRightDistance":80,"mainScreenTopDistance":280,"height":40}
        },
        {
            "type": "UILabel",
            "textColor": "#FFFFFF",
            "font": 15,
            "cornerRadius": 20,
            "action": "handleCustomLabel1",
            "text": "其他登录方式",
            "textAlignment": 1,
            "backgroundColor": "#000000",
            "frame": {"mainScreenLeftDistance":80,"mainScreenRightDistance":80,"mainScreenBottomDistance":400,"height":40}
        }
    ]

背景设置视频

背景设置 Gif

状态栏

导航栏

应用 Logo

手机掩码

认证品牌

登录按钮

隐私协议

若勾选框需要展示，请务必设置勾选框的选中态图片与未选中态图片 协议未勾选时，登录按钮是否可点击可以自定义设置，弹窗提示的样式也可以自定义

弹窗模式

6. 调起授权页面

代码说明：

quichLoginPlugin.login((success, data) => {
  if (success) {
    // TODO: 授权成功处理，可以进行关闭授权页、服务端验证等
    NativeModules.QuickLoginPlugin.closeAuthController();
  } else {
    // TODO: 授权失败处理
  }
})

参数说明：

• 回调参数说明：

  回调参数	类型	描述
  success	Boolean	授权是否成功
  data.accessToken	String	如果取号成功返回运营商授权码，否则无此字段
  data.desc	String	如果取号失败，返回的错误详情, 否则返回"取号成功

7. 事件监听

代码说明：

const emitter = new NativeEventEmitter(NativeModules.QuickLoginPlugin)
emitter.addListener('uiCallback', (value) => {
  // TODO: 处理监听事件
})

value 是一个 Map ，里面包含各种 key 和对应的值

• iOS value 值说明：

  回调参数	类型	描述
  value.action	String	authViewDidLoad 表示正在加载授权页authViewWillAppear 表示授权页已经出现 authViewWillDisappear 表示授权页将要消失 authViewDidDisappear表示授权页已经消失authViewDealloc 表示授权页销毁 appDPrivacy 表示点击了默认协议appFPrivacy 表示点击了议第一个协议点击 appSPrivacy 表示点击了第二个协议 loginAction 表示点击了登录按钮，data.checked = true 表示在点击登录按钮时复选框选已选中反之 checkedAction 表示点击了复选框，data.checked = true 表示复选框已选中反之

• Android value 值说明：

  回调参数	类型	描述
  value.viewId	String	自定义 view 点击，返回自定义 view 的 id
  value.lifecycle	String	onCreate - 页面创建，onStart - 页面已开始活动，onResume - 页面展示，onPause - 页面非活动状态，onStop - 页面已停止，onDestroy - 页面销毁
  value.clickViewType	String	privacy - 隐私协议点击事件，checkbox - 复选框点击事件（含isCheckboxChecked: 0/1），loginButton - 登录按钮点击事件（含isCheckboxChecked: 0/1），leftBackButton - 左上角返回按钮点击事件
  value.isCheckboxChecked	String	协议复选框的值，仅在复选框事件和登录按钮点击事件中存在

8. 关闭授权页面

代码说明：

quichLoginPlugin.closeAuthController()

9. 本机校验

在初始化之后执行，本机校验和一键登录可共用初始化，本机校验界面需自行实现

代码说明：

quichLoginPlugin.verifyPhoneNumber(String phoneNumber,(success, data) => {
  if (success) {
    // TODO: 本机校验成功处理
  } else {
    // TODO: 本机校验失败处理
  }
})

参数说明：

• 入参说明：

  参数	类型	是否必填	默认值	描述
  phoneNumber	String	是	无	待校验手机号

• 回调参数说明：

  回调参数	类型	描述
  success	Boolean	授权是否成功
  data.accessToken	String	如果本机校验返回运营商授权码，否则无此字段
  data.desc	String	如果本机校验失败，返回的错误详情, 否则返回"本机校验成功