react-native 实现一键登录
文章目录
- react-native 实现一键登录
- 一、阿里云一键登录流程
- 二、集成步骤
- 1.引入相关库
- 2.ios集成
- 3.android集成
- 三、阿里云官方配置
- 四、代码实现例子
一、阿里云一键登录流程
一键登录的系统交互流程主要分为四个步骤:
第一步,号码认证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)
}
}, []
)