实现手机号一键登录功能

1、开通极光安全认证

登录极光账号，并在工作台中找到极光安全认证功能，按照引导设置集成、申请一键登录

2、代码集成

官方文档：https://docs.jiguang.cn/jverification/client/android_guide
ReactNative版github: https://github.com/jpush/jverification-react-native
有些配置我在之前做推送的时候已经配好了，推送开发记录：//www.greatytc.com/p/9ef81a5f9f18

添加依赖：
yarn add jverification-react-native
如果项目里没有jcore-react-native，需要安装:
yarn add jcore-react-native

根据github文档补充配置：

在android/app/build.gradle添加配置

dependencies {
      ...
      implementation project(':jverification-react-native') // 添加 jverification 依赖
      implementation project(':jcore-react-native')         // （这个之前已经加了）
  }

在android/setting.gradle添加配置

include ':jverification-react-native'
project(':jverification-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jverification-react-native/android')

3、编写项目代码

API文档：JVerification React Native API.md
在你的项目里建一个JVerify模块文件，封装代码：

import JVerification from 'jverification-react-native';
import config from '@/config';  //用来拿环境变量，判断是否生产环境
import { Platform } from 'react-native';

const initParams = {
  'time': 5000,
  'appKey': 'keyCode',       //你的极光KEY，仅iOS
  'channel': 'dev',              //仅iOS
  'advertisingId': 'HgAdId',     //仅iOS
  'isProduction': config.ENV == 'production',  //仅iOS
};

class JVerificationModule {
  public init = () => {
    if(config.ENV !== 'production') {
      JVerification.setLoggerEnable(true);  //开发环境设置调试模式
    }

    JVerification.init(initParams, result => {
      //初始化完成后，直接预取手机号，提升授权打开速度
      this.perLogin();
    });
  }

  public perLogin = () => {
    JVerification.preLogin(5000, result => {
      console.log('preLogin:' + JSON.stringify(result));
    })
  }

  private setLoginUI = () => {
    /**
     * 设置授权页面样式： addLoginCustomConfig
     * 这部分样式设置参数很多，可以查看文档研究一下
     * 第二个参数接收的是自定义组件，可以在窗口中加入自定义元素
     * **/

    //IOS弹窗样式：
    const iosDialogConfig = {
      // navHidden:true,    //导航栏是否隐藏
    }
    //安卓弹窗模式
    const androidDialogConfig = {
      privacyNeedClose: true,                      //弹窗是否需要关闭按钮 
      privacyDialogTheme: [300, 400, 0, 0, false], //授权页弹窗样式；宽、高、x、y、是否底部

      /**以下是需要注意的参数，部分与文档有出入**/
      //1、privacyOne、privacyTwo 在源码中提示：过期 2.7.3+不生效，
      //用以下方法代替实现
      privacyNameAndUrlBeanList: [{
        name: "隐私协议",
        url: "url link"
      }, {
        name: "服务协议",
        url: "url link"
      }],
      privacyColor:[-8289919,-1614248],
      privacyText: ['已阅读并同意','并授权APP获得本机号码', '无用', '无用'],  //隐私条款名称外的文字(只有[0][1]用到了 😊)
      unAgreePrivacyHintToast: true,  //隐私条款checkBox未选中时，toast提示
      //其他参数可以去
      // ./node_modules/jverification-react-native/android/src/main/java/cn/jiguang/plugins/verification/common/JConstans.java
      // ./node_modules/jverification-react-native/android/src/main/java/cn/jiguang/plugins/verification/JVerificationModule.java
      //这两个文件对应着查看

      //里面所用到的图片素材，按照文档说明，放置在 android/app/src/main/res/drawable/ 目录下
    }

    const customViewParams = [
      {customViewName: 'customView1', customViewPoint: [20, 200, 150, 30]},
      {customViewName: 'customView2', customViewPoint: [20, 300, 150, 30]},
    ];   //自定义UI组件
    /** 
      * 注意： 这里的customViewName使用的name,需要在执行前注册好
      * 比如customView1可以在app初始化时使用AppRegistry.registerComponent注册
      * import {AppRegistry} from 'react-native';
      * import CustomView1 from './CustomView1';
      * AppRegistry.registerComponent('customView1', () => CustomView1);
    **/

    if(Platform.OS == 'android'){
      JVerification.addLoginCustomConfig(androidDialogConfig, customViewParams);
      } else {
      JVerification.addLoginCustomConfig(iosDialogConfig, []);
    }
  }

  public Login = () => {
    this.setLoginUI()  //登录前设置好样式
    JVerification.addLoginEventListener(this.LoginListener);  //监听活动
    if(Platform.OS == 'ios'){
        JVerification.addUncheckBoxEventListener(result => {
            console.log('UnCheckboxEvent:未选中隐私协议框');
        })
    }
     
    JVerification.login(true)
  }

  private LoginListener = (e) => {
    //监听登录结果
    if(!e) {
      return;
    }
    switch (e.code) {
      case 6000: 
        /**
         * 登录成功 {
            "operator": "CU",
            "content": "code",
            "code": 6000
          } **/
        // TODO: 把拿到的数据给后端。。。
        JVerification.removeListener(this.LoginListener)
        break;
      case 1: 
        //closed
        break;
      case 2: 
        //started
        break;
      case 3: 
        //运营商协议或自定义协议点击事件，根据content判断
        break;
      case 6: 
        //checked
        break;
      case 7: 
        //unchecked
        break;
      default: 
        console.log('LoginListener Error')
    }
  }
  
}

const JVerify = new JVerificationModule();
export default JVerify;

然后只需要在APP启动时调用JVerify.init()，然后在需要登录时调用JVerify.Login()。在监听到登录成功后，处理好后续的登录流程就好了。