微信小程序跨端开发之uniapp开发指南(5)-uni一键登录,重庆网站建设,重庆网站开发,重庆网络营销,重庆APP制作培训,重庆互联网

微信小程序跨端开发之uniapp开发指南(5)-uni一键登录

作者：重庆互联网小徐发布时间：2022-12-23 浏览：30670 赞（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）

#开通

#开通uni一键登录服务

开发者需要登录DCloud开发者中心，申请开通一键登录服务。

详细步骤参考：开通一键登录服务的详细教程

开通成功后会得到 apiKey、apiSecret。这2个信息，后续需要配置在uniCloud的云函数里。同时注意保密，这2个信息也是计费凭证。

注意

应用开通uni一键登录服务后，需要等审核通过后才能正式使用。在审核期间可以使用HBuilder标准基座真机运行调用一键登录功能，调用时会从你的账户中扣费；但在审核期间不可以使用自定义基座调用一键登录功能，调用时会返回错误。

#开通uniCloud服务

一键登录在客户端获取 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=="
	}}

#

网友留言评论

我要评论