react-native 阿里云一键登录

react-native 实现一键登录

---

一、阿里云一键登录流程

一键登录的系统交互流程主要分为四个步骤：
第一步，号码认证SDK初始化
第二步，唤起授权页
第三步，同意授权并登录
第四步，发起取号

二、集成步骤

1.引入相关库

react-native : 0.63.2
react : 16.13.1

git地址：https://github.com/yoonzm/react-native-ali-onepass

npm install react-native-ali-onepass --save //使用npm
yarn add react-native-ali-onepass //使用yarn

2.ios集成

右键点击Libraries文件夹，点击Add Files to “项目名”，如下图：

选择项目根目录下node_modules -> react-native-ali-onepass ->ios下的RNAliOnepass.xcodeproj文件添加，如下图：

选择Build Phases下的 Link Binary With Libraries点击 + 号，如下图：

搜索libRnAliOnePass.a文件添加，如下图：
在项目根目录下执行命令行cd ios && pod install

3.android集成

android/settings.gradle文件下添加

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

android/build.gradle文件下添加

allprojects {
   repositories {
       mavenLocal()
       maven {
           // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
           url("$rootDir/../node_modules/react-native/android")
       }
       maven {
           // Android JSC is installed from npm
           url("$rootDir/../node_modules/jsc-android/dist")
       }
       google()
       jcenter()
       maven { url 'https://www.jitpack.io' }
       // 添加此行
       flatDir {
         dirs 'libs', '../../node_modules/react-native-ali-onepass/android/libs'
       }
   }
}

android/app/build.gradle文件下添加

compile project(':react-native-ali-onepass')

三、阿里云官方配置

搜索号码认证服务，点击开通，进入阿里云号码服务界面，点击认证方案。创建ios端的认证方案将方案的名称，app的名称填入，BundleID可在xcode找到,如下图

创建 android端的认证方案，包名可在android文件下的mainActivity.java文件第一行找到。签名获取需要在手机上安装阿里云的签名获取工具，需要注意的是需要在android debug包和release包上各获取一次签名，android端需要创建开发环境和正式环境两套认证方案。创建成功后可获取ios和android的秘钥。

四、代码实现例子

引入依赖

import * as OnePass from 'react-native-ali-onepass'

初始化

const init = useCallback(async () => {
    // 这里的key是在阿里云官网注册app的秘钥
    let key = androidPassKey
    key = __DEV__ ? key : androidPassReleaseKey
    // 是否为ios
    if (IS_IOS) {
        key = iosPassReleaseKey
    }
    try {
        await OnePass.init(key)
        const available = await OnePass.checkEnvAvailable()
        await OnePass.prefetch()
        await onePass()
    } catch (error) {
        console.log('error', error)
    }
}, [onePass])

//样式配置
const onePass = useCallback(async () => {
    const operatorType = await OnePass.getOperatorType()
    const config = {
        //状态栏
        statusBarColor: '#FFFFFF',
        lightColor: true,
        statusBarHidden: false,
        // 标题栏
        navColor: '#FFFFFF',
        navTextColor: '#333333',
        navText: '登录',
        navTextSize: 18,
        webNavColor: '#FFFFFF',
        webNavTextColor: '#333333',
        webNavTextSize: 18,
        navReturnImgPath: 'back_icon',
        // logo
        logoImgPath: 'app_logo',
        logoHidden: true,
        logoWidth: 80,
        logoHeight: 80,
        logoOffsetY: 175,
        // 手机号掩码
        numberColor: '#333333',
        numberSize: 36,
        numberFieldOffsetY: getOffsetY(200),
        // slogan
        sloganText: `认证服务由${operatorType}提供`,
        sloganTextColor: '#B2B2B2',
        sloganTextSize: 13,
        sloganOffsetY: getOffsetY(248),
        // 登录按钮
        logBtnText: '本机号码一键登录',
        logBtnTextColor: '#FFFFFF',
        logBtnTextSize: 15,
        logBtnHeight: 58,
        // ios
        logBtnBackgroundPaths: [
            'onepass_login_btn_normal',
            'onepass_login_btn_press',
            'onepass_login_btn_press',
        ],
        // android
        logBtnBackgroundPath: 'login_btn_bg',
        logBtnMarginLeftAndRight: 30,
        logBtnOffsetY: 340,
        // 其他登录方式
        // switchAccHidden: true,
        switchAccText: '其他登录方式',
        switchAccTextSize: 15,
        switchAccTextColor: '#666666',
        switchOffsetY: 405,
        // 协议栏
        privacyBefore: '登录即代表已阅读并同意',
        privacyEnd: '并授权获取本机号码',
        checkboxHidden: true,
        privacyState: true,
        appPrivacyOneName: ' 用户协议 ',
        appPrivacyOneUrl: `www.csdn.net`,
        appPrivacyTwoName: ' 隐私政策 ',
        appPrivacyTwoUrl: `www.csdn.net`,
        vendorPrivacyPrefix: '《',
        vendorPrivacySuffix: '》',
        privacyTextSize: 12,
        appPrivacyBaseColor: '#4F4F4F',
        appPrivacyColor: '#5B6FFF',
    }
    await OnePass.setUIConfig(config)
    await OnePass.onePass()
}, [])

//事件监听和卸载
useEffect(() => {
    let listerens = [
        OnePass.addListener(OnePass.EVENTS.onTokenSuccess, successPass),
        OnePass.addListener(OnePass.EVENTS.onTokenFailed, failPass),
    ]
    return () => {
        listerens.forEach((item) => item.remove())
    }
}, [successPass, failPass])

// 调用成功
const successPass = useCallback(
    (data) => {
       try {
           const { code, msg, token } = data
           const numberCode = Number(code)
           console.log('xsaxsa', code, msg, token)
       } catch (error) {
           console.error('捕获错误', error)
       }
   }, []
)

//调用失败
const failPass = useCallback(
    (data) => {
       try {
           const { code, msg, token } = data
           const numberCode = Number(code)
           console.log('xsaxsa', code, msg, token)
       } catch (error) {
           console.error('捕获错误', error)
       }
   }, []
)