react-native-onepass
阿里云号码认证一键登录，同时支持IOS和Android
预设5种授权画面风格，可快速集成使用
BuildModelStyle.Portrait 竖屏（全屏模式）
BuildModelStyle.Landscape 横屏（全屏模式）
BuildModelStyle.AlertPortrait 竖屏（弹窗模式）
BuildModelStyle.AlertLandscape 横屏（弹窗模式）
BuildModelStyle.SheetPortrait 竖屏（底部弹窗模式）
安装（React Native >= 0.60.0）
npm install react-native-onepass打开ios目录运行
pod install使用
import Onepass from "react-native-onepass";
// ...
// 1.设置秘钥，阿里云生成，区分ios/android
await Onepass.setAuthSDKInfo(
Platform.OS === 'ios' ? keys.iosKey : keys.androidKey
);
// 2.非进入app就需要登录场景，可调用该方法加速取号
const res = await Onepass.checkAndPrepareEnv();
// ios 和 android SDK返回码不一致，参考官方文档
if (res.code === '600000' || res.code === '600024') {
console.log('终端环境检查⽀持认证');
}
// ...
// 3.授权页各点击事件回调
Onepass.addAuthUIControlClickListener((args) => {
console.log(args);
});
// 移除事件
Onepass.removeAuthUIControlClickListener();
// 4.设置授权页样式并弹出授权页获取token
const res = await Onepass.buildWithStyleGetToken(style, {
navColor: '#263a97',
navTitle: {
text: '一键登录/注册',
size: 20,
color: '#ffffff',
},
privacyAlignment: PrivacyAlignment.AlignmentLeft,
privacyNavColor: '#263a97',
alertTitle: {
text: '一键登录/注册',
size: 16,
color: '#000000',
},
changeBtnTitle: {
text: '其它登录方式',
size: 16,
color: '#263a97',
},
privacyColors: ['#000000', '#263a97'],
preferredStatusBarStyle: StatusBarStyle.UIStatusBarStyleLightContent,
navBackImage: 'icon_nav_back_light',
logoImage: 'taobao',
privacyOne: ['协议1', 'https://www.taobao.com'],
});
// 获取token成功
if (res.code === '600000') {
console.log(res);
} else {
console.log(res);
}布局参数
{
navIsHidden?: boolean; // 全屏模式导航栏是否隐藏
navColor?: string; // 导航栏主题色
navTitle?: Font; // 导航栏标题文字
navBackImage?: string; // 导航返回按钮图片名
hideNavBackItem?: boolean; // 隐藏返回按钮
privacyNavColor?: string; // 协议详情页导航栏背景色
privacyNavTitleColor?: string; // 协议详情页导航栏标题文字颜色
privacyNavTitleSize?: number; // 协议详情页导航栏标题文字大小
privacyNavBackImage?: string; // 协议详情页导航栏返回图片
sloganText?: Font; // slogan文案文字
logBtnToastHidden?: boolean; // 登录默认toast提示，android
loginBtnText?: Font; // 登录按钮文字
loginBtnBgImgs?: [string, string, string]; // 登录按钮图片组 @[激活状态的图片,失效状态的图片,高亮状态的图片]
changeBtnTitle?: Font; // 切换按钮文字
changeBtnIsHidden?: boolean; // 切换按钮是否隐藏
prefersStatusBarHidden?: boolean; // 状态栏是否隐藏
preferredStatusBarStyle?: StatusBarStyle; // 状态栏主题风格，默认黑色
logoImage?: string; // logo图片
logoIsHidden?: boolean; // logo是否隐藏
numberColor?: string; // 掩码颜色
numberFontSize?: number; // 号码字体大小设置，大小小于16则不生效
checkBoxImages?: [string, string]; // checkBox图片组，[uncheckedImg,checkedImg]
checkBoxIsChecked?: boolean; // checkBox是否勾选，默认NO
checkBoxIsHidden?: boolean; // checkBox是否隐藏，默认NO
checkBoxWH?: number; // checkBox大小，高宽一样，必须大于0
privacyOne?: [string, string]; // 协议1，[协议名称,协议Url]，注：三个协议名称不能相同
privacyTwo?: [string, string]; // 协议2，[协议名称,协议Url]，注：三个协议名称不能相同
privacyColors?: [string, string]; // 协议内容颜色数组，[非点击文案颜色，点击文案颜色]
privacyAlignment?: PrivacyAlignment; // 协议文案支持居中、居左设置，默认居左
privacyPreText?: string; // 协议整体文案，前缀部分文案
privacySufText?: string; // 协议整体文案，后缀部分文案
privacyOperatorPreText?: string; // 运营商协议名称前缀文案，仅支持 <([《（【『
privacyOperatorSufText?: string; // 运营商协议名称后缀文案，仅支持 >)]》）】』
privacyFontSize?: number; // 协议整体文案字体大小，小于12.0不生效
// 弹窗样式
alertTitleBarColor?: string; // 弹窗标题栏背景颜色
alertBarIsHidden?: boolean; // 弹窗标题栏是否隐藏，默认NO
// 文字，颜色，大小同时设置才生效
alertTitle?: Font;
alertCloseImage?: string; // 标题栏右侧关闭按钮图片设
alertCloseItemIsHidden?: boolean; // 标题栏右侧关闭按钮是否显示，默认NO
logoFrameBlock?: FrameBlock; // logo 位置大小
numberFrameBlock?: Position; // 掩码位置大小
loginBtnFrameBlock?: FrameBlock; // 登录按钮位置大小
changeBtnFrameBlock?: Position; // 切换按钮位置大小
sloganFrameBlock?: Position; // slogan位置大小
contentViewFrameBlock?: FrameBlock; // contentView位置大小
}Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT