作者:重庆互联网小徐 发布时间:2022-12-23 浏览:30054 赞(2312) 收藏 评论(0)
uni一键登录
是DCloud联合个推公司推出的,整合了三大运营商网关认证能力的服务。
通过运营商的底层SDK,实现App端无需短信验证码直接获取手机号,也就是很多主流App都提供的一键登录功能。
uni一键登录
是替代短信验证登录的下一代登录验证方式,能消除现有短信验证模式等待时间长、操作繁琐和容易泄露的痛点。
支持版本:HBuilderX 3.0+
支持项目类型:uni-app的App端,5+ App,Wap2App
支持系统平台: Android,iOS
支持运营商: 中国移动,中国联通,中国电信
HBuilderX3.1.6+版本授权登录界面支持全屏模式
调用uni.login时设置univerifyStyle中的fullScreen属性值为true即可:
uni.login({ provider: 'univerify', univerifyStyle: { fullScreen: true }})
全屏效果如下:
用户体验好
一键登录,无需等待和复制短信验证码,能有效降低用户流失率,提升用户注册量在App激活量中的转换率。
便宜
使用uni一键登录
,每次验证仅需2分!比短信验证码便宜数倍,也比市场上三方提供的一键登录要更便宜。
安全
采用运营商网关认证,避免短信劫持,有效提升安全性
开发体验好
无需原生插件,无需自定义基座(HBuilder标准基座就可以直接运行调试),简单快速完成上线。
App界面弹出请求授权,询问用户是否同意授权该App获取手机号。这个授权请求界面是运营商sdk弹出的,可以有限定制。
用户同意授权后,SDK底层访问运营商网关鉴权,获得当前设备access_token
等信息。
在服务器侧通过 uniCloud 将access_token
等信息 置换为当前设备的真实手机号码。然后服务器直接入库,避免手机号传递到前端发生的不可信情况。
前置条件:
手机安装有sim卡
手机开启数据流量(与wifi无关,不要求关闭wifi,但数据流量不能禁用。)
开通uniCloud服务(但不要求所有后台代码都使用uniCloud)
开发者需要登录DCloud开发者中心,申请开通一键登录服务。
详细步骤参考:开通一键登录服务的详细教程
开通成功后会得到 apiKey、apiSecret。这2个信息,后续需要配置在uniCloud的云函数里。同时注意保密,这2个信息也是计费凭证。
注意
应用开通uni一键登录服务后,需要等审核通过后才能正式使用。在审核期间可以使用HBuilder标准基座真机运行调用一键登录功能,调用时会从你的账户中扣费;但在审核期间不可以使用自定义基座调用一键登录功能,调用时会返回错误。
一键登录在客户端获取 access_token
后,必须在 uniCloud 换取手机号码。
在uniCloud的云函数中拿到手机号后,可以直接使用,也可以再转给传统服务器处理,也可以通过云函数url化方式生成普通的http接口给5+ App使用。
开通uniCloud是免费的,其中阿里云是全免费,腾讯云是提供一个免费服务空间。
注意: 虽然一键登录需要uniCloud,但并不要求开发者把所有的后台服务都迁移到uniCloud
服务器API详见:uniCloud云函数中使用一键登录
本文主要介绍uni-app的客户端调用方法。5+ App(Wap2App)请另行参考:5+ App一键登录使用指南
DCloud还提供了更易用的封装。在uni-id里已经预置了uni一键登录
,并基于uni-id
提供了前后一体登录模板(也可以在HBuilderX 3.0+ 新建项目界面选择“前后一体登录模板”),开发者可以拿去直接用
接下来继续介绍原始API的用法。
一键登录,和 uni.login 中的微信登录、QQ登录等provider是并列的。
其中一键登录对应的 provider ID为 'univerify',当获取provider列表时发现包含 'univerify' ,则说明当前环境打包了一键登录的sdk。
uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.provider)// ['qq', 'univerify'] }});
预登录操作可以判断当前设备环境是否支持一键登录,如果能支持一键登录,此时可以显示一键登录选项,同时预登录会准备好相关环境,显著提升显示授权登录界面的速度。
如果当前设备环境不支持一键登录,此时应该显示其他的登录选项。
如果手机没有插入有效的sim卡,或者手机蜂窝数据网络关闭,都有可能造成预登录校验失败。
uni.preLogin(options)
uni.preLogin({ provider: 'univerify', success(){ //预登录成功 // 显示一键登录选项 }, fail(res){ // 预登录失败 // 不显示一键登录选项(或置灰) // 根据错误信息判断失败原因,如有需要可将错误提交给统计服务器 console.log(res.errCode) console.log(res.errMsg) }})
弹出用户授权界面。根据用户操作及授权结果返回对应的回调,拿到 access_token
uni.login(options);
uni.login({ provider: 'univerify', univerifyStyle: { // 自定义登录框样式 //参考`univerifyStyle 数据结构` }, success(res){ // 登录成功 console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'} }, fail(res){ // 登录失败 console.log(res.errCode) console.log(res.errMsg) }})
uni一键登录
的授权弹出界面是默认是半屏的,也可以配置为全屏。这个界面本质是运营商sdk弹出的,它询问手机用户是否授权自己的手机号给这个App使用。
这个授权弹出界面可以通过 univerifyStyle 设置有限定制。
univerifyStyle 数据结构:
{ "fullScreen": false, // 是否全屏显示,默认值: false "backgroundColor": "#ffffff", // 授权页面背景颜色,默认值:#ffffff "backgroundImage": "", // 全屏显示的背景图片,默认值:"" (仅支持本地图片,只有全屏显示时支持) "icon": { "path": "static/xxx.png" // 自定义显示在授权框中的logo,仅支持本地图片 默认显示App logo }, "closeIcon": { "path": "static/xxx.png" // 自定义关闭按钮,仅支持本地图片。 HBuilderX3.3.7+版本支持 }, "phoneNum": { "color": "#202020" // 手机号文字颜色 默认值:#202020 }, "slogan": { "color": "#BBBBBB" // slogan 字体颜色 默认值:#BBBBBB }, "authButton": { "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值:#3479f5 "highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持) "disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持) "textColor": "#ffffff", // 授权按钮文字颜色 默认值:#ffffff "title": "本机号码一键登录", // 授权按钮文案 默认值:“本机号码一键登录” "borderRadius": "24px" // 授权按钮圆角 默认值:"24px" (按钮高度的一半) }, "otherLoginButton": { "visible": true, // 是否显示其他登录按钮,默认值:true "normalColor": "", // 其他登录按钮正常状态背景颜色 默认值:透明 "highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值:透明 "textColor": "#656565", // 其他登录按钮文字颜色 默认值:#656565 "title": "其他登录方式", // 其他登录方式按钮文字 默认值:“其他登录方式” "borderColor": "", //边框颜色 默认值:透明(仅iOS支持) "borderRadius": "0px" // 其他登录按钮圆角 默认值:"24px" (按钮高度的一半) }, "privacyTerms": { "defaultCheckBoxState":true, // 条款勾选框初始状态 默认值: true "uncheckedImage":"", // 可选 条款勾选框未选中状态图片(仅支持本地图片 建议尺寸 24x24px)(3.2.0+ 版本支持) "checkedImage":"", // 可选 条款勾选框选中状态图片(仅支持本地图片 建议尺寸24x24px)(3.2.0+ 版本支持) "checkBoxSize":12, // 可选 条款勾选框大小,仅android支持 "textColor": "#BBBBBB", // 文字颜色 默认值:#BBBBBB "termsColor": "#5496E3", // 协议文字颜色 默认值: #5496E3 "prefix": "我已阅读并同意", // 条款前的文案 默认值:“我已阅读并同意” "suffix": "并使用本机号码登录", // 条款后的文案 默认值:“并使用本机号码登录” "privacyItems": [ // 自定义协议条款,最大支持2个,需要同时设置url和title. 否则不生效 { "url": "https://", // 点击跳转的协议详情页面 "title": "用户服务协议" // 协议名称 } ] }, "buttons": { // 自定义页面下方按钮仅全屏模式生效(3.1.14+ 版本支持) "iconWidth": "45px", // 图标宽度(高度等比例缩放) 默认值:45px "list": [ { "provider": "apple", "iconPath": "/static/apple.png" // 图标路径仅支持本地图片 }, { "provider": "weixin", "iconPath": "/static/wechat.png" // 图标路径仅支持本地图片 } ] }}
univerifyStyle 属性对应配置的界面指示图
全屏效果 | 非全屏效果 |
---|---|
![]() | ![]() |
返回数据示例
{ "errMsg": "login:ok", "authResult": { "openid": "208E2FBE6EF64DF3B2D377D886EF2A14124262bfd7ae16465ea0f0634554dcee7636", "access_token": "ZGI4NjkxZWE4YjAyNGUzMjhiMmZiNDcwODBjYjc5MDF8fDJ8djJ8Mg==" }}
欢迎广大用户为此页面进行评价,评价成功将获得积分奖励!