本文为您详细介绍uni-app开发框架集成号码认证服务原生语言插件的方式及一键登录相关方法的说明。
在使用过程中如有疑问,可以提交工单联系阿里云技术工程师处理。
背景信息
uni-app原生语言插件
阿里云号码认证SDK插件是基于HBuilder提供的uni-app原生插件扩展能力开发出的认证插件,开发者可以轻松将阿里云号码认证能力集成到自己的项目中,在JS层实现相关功能。
本插件使用原生语言开发,仅支持在uni-app开发框架开发的Android或iOS应用中使用,无法在其他各类小程序中使用。
在项目中引入插件
创建uni-app项目。
如果您还未创建uni-app项目,请参见通过HBuilder可视化界面创建项目。
如果您已有项目,可直接进入下一步。
下载插件。
访问插件地址:阿里云号码认证SDK,进入插件详情页。
点击界面右侧的下载 for 离线打包下载插件。
项目中引入插件。
在项目的根目录新建nativeplugins文件夹,将下载的AliCloud-NirvanaPns_x.x.x.zip解压后引入
nativeplugins
文件夹。打开根目录
manifest.json
文件,单击App原生插件配置 > 选择本地插件。在本地插件选择对话框,勾选阿里云号码认证SDK。
单击确定即可引入。
创建认证方案
您导入项目或调用API接口时,会用到方案Code等参数信息,请先在号码认证产品控制台,创建认证方案,获取方案Code等参数信息。
交互流程详解
完整的功能交互流程请参见一键登录交互流程。
方法说明
引入方式
在vue或者nvue文件中,通过使用uni.requireNativePlugin
方法引入原生插件。
调用示例
const aLiSDKModule = uni.requireNativePlugin('AliCloud-NirvanaPns');
setAuthSDKInfo(设置密钥)
方法说明:必调方法。
使用一键登录前,需要先设置密钥,并确保密钥跟Bundle Id或包名匹配。
参数说明: setAuthSDKInfo(info)
参数 | 类型 | 说明 |
参数 | 类型 | 说明 |
info | String | 阿里云号码认证控制台生成的密钥 |
调用示例
aLiSDKModule.setAuthSDKInfo("<SDK_INFO>"); //替换为从控制台获取的密钥
accelerateLoginPage(加速唤起授权页)
加速唤起授权页,防止调用getLoginToken
等待弹起授权页时间过长。
建议在判断当前用户属于未登录状态时使用,已登录状态用户请不要调用该方法。
建议在调用唤起授权页的方法前,提前一段时间调用预取号方法,中间最好有2~3秒的缓冲(因为加速方法需要1~3秒的时间取得临时凭证)。
请勿频繁多次调用。
请勿与唤起授权登录页同时或之后调用。
打开App就登录的场景不需要调用此接口,无法起到加速效果。
参数说明
参数 | 类型 | 说明 |
参数 | 类型 | 说明 |
timeout | Number | 设置接口超时时间,单位:毫秒。 |
callback(args) | Function | 回调函数。回调函数入参结构如下:
|
调用示例
aLiSDKModule.accelerateLoginPage(5000, (result) => {
if ("600000" == result.resultCode) {
console.log("加速成功");
}
});
getLoginToken(唤起一键登录授权页)
获取一键登录Token,调用该接口会唤起授权页,点击授权页的登录按钮获取Token。
参数说明
参数 | 类型 | 说明 |
参数 | 类型 | 说明 |
timeout | Number | 设置接口超时时间,单位:毫秒。 |
authUiConfig | Map | 授权页UI配置,详情参见修改授权页主题配置。 |
tokenCallback(args) | Function | 在此回调可判断调用状态。回调函数入参结构如下:
|
uiCallback(args) | Function | 点击自带控件回调。回调函数入参结构如下:
|
customUiCallback(args) | Function | 点击自定义控件回调。回调函数入参结构如下:
|
授权页点击事件响应码
resultCode | 相关描述 |
resultCode | 相关描述 |
700000 | 点击返回,⽤户取消免密登录 |
700001 | 点击切换按钮,⽤户取消免密登录 |
700002 | 点击登录按钮事件 |
700003 | 点击check box事件 |
700004 | 点击协议富文本文字事件 |
示例代码
aLiSDKModule.getLoginToken(
5000,
config,
tokenResult => {
if ("600001" == tokenResult.resultCode) {
console.log("授权页拉起成功");
} else if ("600000" == tokenResult.resultCode) {
console.log(
"获取Token成功,接下来拿着结果里面的Token去服务端换取手机号码,SDK服务到此结束"
);
//手动关闭授权页
aLiSDKModule.quitLoginPage();
} else {
//其他失败情况,手动关闭授权页
aLiSDKModule.quitLoginPage();
}
},
clickResult => {
switch (clickResult.resultCode) {
case "700000":
console.log("用户点击返回按钮");
break;
case "700001":
console.log("用户切换其他登录方式");
break;
case "700002":
console.log("用户点击登录按钮");
//通过isChecked字段可以得到checkbox是否勾选,未勾选可以用自定义Toast进行提示
if (!clickResult.result.isChecked) {
//Toast样式可参考:https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUl.toast
plus.nativeUI.toast("请同意服务条款"); //本Toast需手动添加
}
break;
case "700003":
console.log("用户点击checkBox");
break;
case "700004":
console.log("用户点击协议");
break;
case "700010":
//调用userControlAuthPageCancel后方可使用
console.log("用户点击返回按钮,Android专用");
break;
case "700011":
//调用userControlAuthPageCancel后方可使用
console.log("用户使用物理返回键,Android专用");
break;
}
},
customUiResult => {
//这里回调的是自定义控件的点击事件,通过 customUiResult.widgetId 来识别自定义控件,然后做一些自己的处理
}
);
quitLoginPage(退出授权页)
获取完登录token之后不会关闭授权页,需要主动调用该接口退出授权页。
调用示例
aLiSDKModule.quitLoginPage();
hideLoginLoading(关闭授权页Loading动画)
关闭获取Token过程中,页面的loading动画。
Android:获取Token结果回调后不会关闭loading,需要主动调用该接口关闭loading。
iOS:获取Token结果回调后会主动关闭loading,如果您想手动控制loading消失事件,需要在UI配置的uiConfig配置项里加autoHideLoginLoading: "false"
。
调用示例
aLiSDKModule.hideLoginLoading();
getVersion(获取号码认证SDK版本号)
参数说明:getVersion(callback)
参数 | 类型 | 说明 |
参数 | 类型 | 说明 |
callback(version) | Function | 回调函数。回调函数入参结构如下:
|
调用示例
aLiSDKModule.getVersion((version) => {
console.log("当前SDK版版本号为:" + version);
});
checkEnvAvailable(环境检查)
检查当前环境是否支持一键登录/本机号码校验。
参数说明:checkEnvAvailable(authType, callback)
参数 | 类型 | 说明 |
参数 | 类型 | 说明 |
authType | Number | 检查类型:
|
callback(args) | Function | 回调函数。回调函数入参结构如下:
|
调用示例
aLiSDKModule.checkEnvAvailable(2, (result) => {
if ("600000" == result.resultCode) {
uni.navigateTo({
animationDuration: 300,
url: "../login/login",
});
} else {
console.log("当前环境不支持一键登录,result = ", JSON.stringify(result));
uni.showToast({
icon: "none",
title: result.msg,
duration: 3000,
});
}
});
getCurrentCarrierName(获取默认上网卡运营商)
参数说明:getCurrentCarrierName(callback)
返回值 | 类型 | 说明 |
返回值 | 类型 | 说明 |
callback(carrierName) | Function | 回调函数。回调函数入参结构如下:
|
调用示例
aLiSDKModule.getCurrentCarrierName((carrierName) => {
console.log("当前运营商为:" + carrierName);
});
expandAuthPageCheckedScope(授权页扩展点选范围到协议前缀)
仅适用于Android,授权页扩展点选范围到协议前缀(如我已阅读并同意),true:拓展;false(默认值):不拓展。
调用示例
aLiSDKModule.expandAuthPageCheckedScope(true)
closeAuthPageReturnBack(授权页禁用物理返回键)
仅适用于Android,授权页禁用物理返回键,true:禁用;false(默认值):不禁用。
调用示例
aLiSDKModule.closeAuthPageReturnBack(true)
userControlAuthPageCancel(授权页区分界面返回和物理返回)
仅适用于Android,授权页区分界面返回和物理返回。
调用示例
aLiSDKModule.userControlAuthPageCancel()
setAuthPageUseDayLight(授权页区是否跟随系统深色/夜间模式)
仅适用于Android,授权页区是否跟随系统深色/夜间模式,true:跟随;false(默认值):不跟随。
调用示例
aLiSDKModule.setAuthPageUseDayLight(true)
附录:使用weex编译生成js文件并渲染到授权页
使用开发工具或
Weex Playground
编写nvue界面使用
weex compile
指令将vue文件编译成js文件(例如:$ weex compile src/index.vue build
)将编译好的js文件放到工程static目录下,修改一键登录修改授权页主题相关字段(
uiConfig
>setBackgroundUi
>weexJsPath
或者weexJsUrl
)来将编译好的js渲染到授权页背景上
- 本页导读 (1)
- 背景信息
- uni-app原生语言插件
- 在项目中引入插件
- 创建认证方案
- 交互流程详解
- 方法说明
- 引入方式
- setAuthSDKInfo(设置密钥)
- accelerateLoginPage(加速唤起授权页)
- getLoginToken(唤起一键登录授权页)
- quitLoginPage(退出授权页)
- hideLoginLoading(关闭授权页Loading动画)
- 修改授权页主题配置
- getVersion(获取号码认证SDK版本号)
- checkEnvAvailable(环境检查)
- getCurrentCarrierName(获取默认上网卡运营商)
- expandAuthPageCheckedScope(授权页扩展点选范围到协议前缀)
- closeAuthPageReturnBack(授权页禁用物理返回键)
- userControlAuthPageCancel(授权页区分界面返回和物理返回)
- setAuthPageUseDayLight(授权页区是否跟随系统深色/夜间模式)
- 附录:使用weex编译生成js文件并渲染到授权页