上云无忧 > 文档中心 > 天翼云一键登录使用教程 - UniApp接入
一键登录
天翼云一键登录使用教程 - UniApp接入

文档简介:
本文将为您介绍一键登录产品UniApp接入相关内容。 1.Uni SDK接入指南。 1.1 注意事项。 使用一键登录服务用户须打开蜂窝数据流量,取号过程中会消耗用户少量的流量; SDK中自带有授权页面的UI逻辑,开发者可通过SDK接口暴露参数修改部分UI界面样式;
*产品来源:中国电信天翼云。免费试用 咨询热线:400-826-7010,为您提供专业的售前咨询,让您快速了解云产品,助您轻松上云! 微信咨询
  免费试用、价格特惠

1.Uni SDK接入指南

1.1 注意事项

  1. 使用一键登录服务用户须打开蜂窝数据流量,取号过程中会消耗用户少量的流量;
  2. SDK中自带有授权页面的UI逻辑,开发者可通过SDK接口暴露参数修改部分UI界面样式;
  3. 如果用户使用双卡手机,sdk会使用当前设备上网的流量卡进行预取号操作;
  4. 开发者需要具备一定的原生开发能力。

2.Uni SDK使用方法

2.1 环境配置

1.把DCAbilityLoginUniPlugin拖入工程nativeplugins文件夹中。

2.在mainfest.json / App原生插件配置 ,选择本地插件。

2.2 初始化接口

应用调用此方法初始化sdk,初始化会校验应用标识是否存在,回调成功后进行下一步预取号操作。

参数定义

参数名称 含义
appId 用户申请应用的id
appsecret 用户申请应用的secret

成功响应

参数名称 类型 含义
code NSString 200
msg NSString success
userId NSString 用户userId
operatorType NSString 运营商类型

代码示例:

abilityPlugin.initFunc({
			'appId': appId,
			'appsecret': secret
		},
		(ret) => {
			console.log('init: ' + JSON.stringify(ret));
		});复制

2.3 预取号接口

应用调用预取号接口校验应用签名,校验成功后接口会返回运营商类型和状态信息,回调成功后进行调起授权页面操作。

abilityPlugin.preLoginFunc()复制

成功响应

参数名称 类型 含义
resultCode NSString 0
resultMsg NSString 获取accessCode成功
operatorType NSString 运营商类型

代码示例:

abilityPlugin.preLoginFunc(
	(ret) => {
		   console.log('prelogin: ' + JSON.stringify(ret));
	}
);复制

2.4 调起授权页接口

应用调用该方法会拉起用户授权页面,当用户点击确认授权后接口会返回运营商类型和token;用户授权页支持部分页面样式自定义,开发者可以设置响应的参数调整页面样式。

参数定义

参数名称 含义
jsonMap 页面配置json,自定义授权页(详细参照授权页面自定义UI参数)

成功响应

参数名称 类型 含义
resultCode NSString 0
resultMsg NSString 登录成功
operatorType NSString 运营商类型
token NSString 返回登录加密串

代码示例:

abilityPlugin.getLoginTokenFunc(authPageMap,
		 (ret) => {
			console.log('getLoginTokenFunc: ' + JSON.stringify(ret));
			//取号请求
		 });复制

2.5 点击其它登录方式回调

globalEvent.addEventListener('otherLoginClick', function(e) {
		console.log('otherLoginClick' + JSON.stringify(e));
	});复制

2.6 点击关闭授权页按钮回调

globalEvent.addEventListener('closeButtonClick', function(e) {
		console.log('closeButtonClick' + JSON.stringify(e));
		abilityPlugin.quitAuthPage({});
	});复制

2.7 点击授权登录未同意隐私协议回调

globalEvent.addEventListener('uncheckPrivacy', function(e) {
		console.log('uncheckPrivacy' + JSON.stringify(e));
	});复制

2.8 点击隐私协议勾选框回调

globalEvent.addEventListener('privacyBoxStatusChange', function(e) {
		console.log('privacyBoxStatusChange' + JSON.stringify(e));
	});复制

2.9 点击登录按钮回调

globalEvent.addEventListener('abilityLoginClick', function(e) {
		console.log('abilityLoginClick' + JSON.stringify(e));
	});复制

2.10 其他能力接口

1.蜂窝网络是否打开

abilityPlugin.isCellularNetworkFunc()复制

2.获取插件版本号

abilityPlugin.getPluginVersionFunc()复制

3.获取运营商类型

abilityPlugin.getCellularTypeFunc()
CM:移动 CU:联通 CT:电信 UN:未知复制

2.11 添加图片资源

ios: 在DCAbilityLoginUniPlugin/ios/BundleResources/AbilityResource.bundle下的static文件夹中放入自定义的图片资源;

注:选择bundle文件,右击显示包内容

android: 建议将需要使用的图片资源包含到aar文件中

在DCAbilityLoginUniPlugin/android/DCAbilityLoginUniPlugin下的res/drawabl文件夹下放入自定义的图片资源;

注:先将aar后缀设置为zip,解压后放入自定义图片到指定文件夹,然后压缩当前文件夹为zip,再把文件后缀改为aar。

2.12 授权页面自定义UI参数

2.12.1 iOS属性

参数名 描述
logIsPopup(必填) 授权登录页面是否弹窗
config_isBottom(必填) 是否底部弹窗
config_statusBarStyle 状态栏样式
config_backgroundColor 授权页背景颜色
config_navBackColor 导航栏背景颜色
config_navText 导航栏标题文本内容
config_navTextSize 导航栏标题字体大小
config_navTextColor 导航栏标题字体颜色
config_navIsHide 导航栏标题是否隐藏
config_navReturnImg 返回按钮图片
config_navReturnOffsetX 返回按钮图片x轴偏移量
config_navReturnOffsetY 返回按钮图片y轴偏移量
config_navReturnWidth 返回按钮图片宽
config_navReturnHeight 返回按钮图片高
config_navPruvacyBackColor 进入隐私协议导航栏背景颜色
config_navPruvacyTextSize 进入隐私协议导航栏标题字体大小
config_navPruvacyTextColor 进入隐私协议导航栏标题字体颜色
config_navPruvacyReturnImg 进入隐私协议导航栏返回图片
config_logoImg LOGO图片
config_logoOffsetX LOGO图片x轴偏移量
config_logoOffsetY LOGO图片y轴偏移量
config_logoWidth LOGO的宽
config_logoHeight LOGO的高
config_logoIsHiddle LOGO是否隐藏
config_numberColor 手机号码字体颜色
config_numberTextSize 手机号码字体大小
config_numberTextBold 手机号码字体是否加粗
config_numFieldOffsetX 手机号码MidX距离视图MidX轴的偏移
config_numFieldOffsetY 手机号码Y轴距离顶部偏移
config_brandLabelTextSize 认证品牌字体大小
config_brandLabelTextColor 认证品牌字体颜色
config_brandLabelOffsetX 认证品牌MidX距离视图MidX轴的偏移
config_brandLabelOffsetY 认证品牌Y轴距离顶部偏移
config_logBtnText 登录按钮文本内容
config_logBtnTextSize 登录按钮字体大小
config_logBtnTextColor 登录按钮文本颜色
config_logBtnOriginL 登录按钮距离视图的左边距
config_logBtnOriginR 登录按钮距离视图的右边距
config_logBtnHeight 登录按钮高
config_logBtnOffsetY 登录按钮Y轴位置
config_logBtnImgs 登录按钮背景图片数组,[激活状态的图片,高亮状态的图片]
config_otherWayLogBtnHidden 其他登录方式是否隐藏
config_otherWayLogBtnText 其他登录方式文本内容
config_otherWayLogBtnTextColor 其他登录方式字体颜色
config_otherWayLogBtnTextSize 其他登录方式字体大小
config_otherWayLogBtnOffsetX 其他登录方式x轴位置
config_otherWayLogBtnOffsetY 其他登录方式y轴位置
config_otherWayLogBtnOffWidth 其他登录方式宽
config_otherWayLogBtnOffHeight 其他登录方式高
config_uncheckedImg 勾选框未勾选图片
config_checkedImg 勾选框已勾选图片
config_checkedStatus 勾选框是否勾选
config_checkedWH 勾选框宽高
config_pruvacyOffsetL 隐私条款左边距
config_pruvacyOffsetR 隐私条款右边距
config_pruvacyOffsetY_B 隐私条款底部 距离 屏幕底部偏移量
config_pruvacyTextSize 隐私条款字体大小
config_norTruvacyTextColor 隐私条款正常文字颜色
config_pruTruvacyTextColor 隐私条款协议文字颜色
config_defaultPruvacyPosition 运营商默认隐私协议显示位置,第一个或最后一个
config_pruvacyBeforText 隐私条款最前面的文字
config_pruvacyLinksText 第二个协议和第三个协议之间连接文字
config_pruvacyAfterText 隐私条款最后面的文字
config_pruvacyBookMark 运营商隐私条款是否带书名号,默认不带书名号
config_pruvacyTitleAndUrlArr 自定义隐私条款标题和url数组
config_popupScaleW 弹窗的宽度比例,底部弹窗时popupScaleW设置无效
config_popupScaleH 弹窗的高度比例
config_popupCornerRadius 弹窗的圆角,底部弹窗时只对弹窗顶部两个角生效
config_customUIHandler 自定义控件数组
注:自定义参数示例请参考uni demo中.json文件

2.12.2 Android属性

注:所用到的背景,图片资源,都将资源包含到aar的 res/drawable文件下,参数值填为不加后缀的资源名称(可参考demo)

参数名 描述
logIsPopup(必填) 授权登录页面是否弹窗
config_isBottom(必填) 是否底部弹窗
setAuthBGImgPath 授权页背景
statusBar 状态栏颜色(包括协议web状态栏颜色)
navReturnImage 返回按钮图片
navReturnImageHeight 返回按钮图片高度
navReturnImageWeight 返回按钮图片宽度
navReturnImageOffsetX 返回按钮X轴距离
navText 导航栏标题文本
navHeight 导航栏高度
navTextSize 导航栏字体大小
navTextColor 导航栏标题字体颜色
logoImage Logo图片
logoImageWeight Logo图片宽度
logoImageHeight Logo图片高度
logoImgOffsetY LogoY轴偏移量
logoImgOffsetY_B Logo居屏幕底部偏移量
logoImgOffsetX LogoX轴偏移量(0默认居中)
sloganColor 认证品牌颜色
sloganTextSize 认证品牌字体大小
sloganOffsetX 认证品牌X轴偏移量(0默认居中)
sloganTexOffsetY 认证品牌Y轴偏移量
numberColor 手机号掩码字体颜色
numberSize 手机号掩码字体大小
numberOffsetX 手机号掩码X轴偏移量(0默认居中)
numberThickness 手机号掩码字体是否加粗
numberOffsetY 手机号掩码字体Y轴偏移量
logBtnImgPath 登录按钮背景
logBtnText 登录按钮文本
logBtnTextColor 登录按钮文本字体颜色
logBtnTextSize 登录按钮文本字体大小
logBtnOffsetY 登录按钮Y轴偏移量
logBtnMarginLeft 距离手机屏幕左间距
logBtnMarginRight 距离手机屏幕右间距
logBtnHeight 登录按钮高度
switchText 其他方式登录文本
switchTextColor 其他方式文本颜色
switchTextSize 文本字体大小
switchTextOffsetY 文本Y轴偏移量
checkBoxPicStr 勾选框 选中图片
unCheckBoxPicStr 勾选框 未选中图片
checkBoxWeight 勾选框宽度
checkBoxHeight 勾选框高度
privacyStateSelect 默认勾选框是否选中
privacyBookSymbol 协议名称是否加书名号
privacyTextBefore 协议前缀
clause1 自定义协议1名称
clauseUrl1 自定义协议1 URL
clause2 自定义协议2名称
clauseUrl2 自定义协议2 URL
clause3 自定义协议3名称
clauseUrl2 自定义协议3 URL
clause4 自定义协议4名称
clauseUrl4 自定义协议4 URL
privacyTextAfter 协议条款后缀
privacySplit1 协议条款连接语
privacySplit2 协议条款连接语
privacyTextSize 协议条款字体大小
clauseBaseColor 协议文本颜色
clauseColor 协议标题颜色
privacyMarginLeft 协议距离屏幕左边距
privacyMarginRight 设置协议距离屏幕右边距
privacyOffsetY_B 协议距离底部y轴距离 如不设置 填值为0
privacyOffsetY 协议距离顶部y轴距离 如不设置Y 填值为0
popuHeight 弹窗高度
popuWeight 弹窗宽度
custom_view 1)自定义view组件
2)Type(自定义组件对应的Android原生类型,支持 TextView, Button ,ImgView)
3)viewId(自定义组件id)
4)Top(组件距离顶部的偏移)
5)Left(组件距离左侧的偏移)
6)backgroundImage(组件的背景图片路径)
7)Height(组件高度)
8)Width(组件宽度)
9)text(文本)
10)titleColor(文本内容)
11)titleFont(文本字体大小)
12)backgroundColor(view背景颜色)
注:自定义参数示例请参考uni demo中.json文件

3.获取手机号能力

详见《一键登录服务端接入文档》

3.1 本机号码校验

参数定义

参数名称 含义
phoneNumber 手机号

成功响应

参数名称 类型 含义
resultCode NSString 0
resultMsg NSString 校验成功
operatorType NSString 运营商类型
token NSString 返回校验加密串

代码示例:

abilityModule.getVerifyTokenFunc({
			'phoneNumber': this.inputValue, 
		},
		 (ret) => {
			console.log('verification :'+JSON.stringify(ret));
			//校验手机号请求
		});
相似文档
官方微信
联系客服
400-826-7010
7x24小时客服热线
分享
  • QQ好友
  • QQ空间
  • 微信
  • 微博
返回顶部