From a84d20e7a6b7680d263588b58b677def437c29f8 Mon Sep 17 00:00:00 2001 From: ArrayDC Date: Thu, 10 Dec 2020 20:23:31 +0800 Subject: [PATCH] Update univerify.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重新整理内容 --- docs/univerify.md | 280 +++++++--------------------------------------- 1 file changed, 38 insertions(+), 242 deletions(-) diff --git a/docs/univerify.md b/docs/univerify.md index 54f1f7d8d..9c9ad74a7 100644 --- a/docs/univerify.md +++ b/docs/univerify.md @@ -1,92 +1,68 @@ -# 一键登录（univerify） 使用指南 +> HBuilderX 2.9.12+ 版本新增支持 `一键登录` -## 一 概述 - -### 1.1 简介 - -一键登录是DCloud联合个推公司推出的，整合了三大运营商网关认证能力的服务。 - +## 概述 +`一键登录`是DCloud联合个推公司推出的，整合了三大运营商网关认证能力的服务。 通过与运营商,个验深度合作，实现APP用户无需输入帐号密码，即可使用本机手机号码自动登录的能力。 - -一键登录 是替代短信验证登录的下一代登录验证方式，能消除现有短信验证模式等待时间长、操作繁琐和容易泄露的痛点。 - +`一键登录`是替代短信验证登录的下一代登录验证方式，能消除现有短信验证模式等待时间长、操作繁琐和容易泄露的痛点。 + 支持项目类型：uni-app，5+ App，Wap2App + 支持系统平台: Android，iOS + 支持运营商: 移动，联通，电信 -[attach]64141[/attach] +![](https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/client/doc/univerify/demo.png) -### 1.2 原理 - +### 原理 在用户同意授权的操作前提下，访问运营商网关鉴权，获取当前设备access_token等信息。 通过uniCloud 将access_token信息 置换为当前设备的真实手机号码 +![](https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/client/doc/univerify/process.png) 前置条件： - + 手机安装有sim卡 + 手机开启数据流量 + 开通uniCloud服务 -[attach]64512[/attach] - -### 1.3 产品优势 - -- ** 便捷 ** +### 产品优势 +- **便捷** 优化了现有短信验证方式，免短信验证一键免密登录APP，耗时极短，减轻用户记忆负担，能有效降低用户流失率，提升运营效果 -- ** 安全 ** +- **安全** 采用运营商网关认证，避免短信劫持，有效提升安全性 +## 开通使用 +### 开通服务 +开发者需要登录[DCloud开发者中心](https://dev.dcloud.net.cn/)，申请开通一键登录服务。 +具体文档：[开通一键登录的详细教程](https://ask.dcloud.net.cn/article/37965) -## 二 集成步骤 - - -### 2.1 开通服务 - -请参考：[开通一键登录指南](https://ask.dcloud.net.cn/article/37965) - -### 2.2 集成模块 - -+ 云端打包 - - manifest-->OAuth配置-->univerify配置 - -+ 离线打包 - - [android/ios 离线打包文档](https://nativesupport.dcloud.net.cn/AppDocs/README) - -### 2.3 开通uniCloud服务 - -一键登录，token换取手机号码需要基于uniCloud服务。 - -对于uni-app 应用： -直接开通当前应用的uniCloud服务，即可使用。 - -对于5+ 应用： -需要新建一个uni-app 应用，且开通uniCloud服务。 - -虽然一键登陆需要uniCloud，但并不要求开发者把所有的后台服务都迁移到uniCloud。 -在uniCloud的云函数中拿到手机号后，可以再转给传统服务器，也可以通过云函数url方式生成普通的http接口给5+app使用。 +### 集成模块 +- **云端打包** +在项目manifest.json页面“App模块配置”项的“OAuth(登录鉴权)”下勾选“一键登录(uni-verify)” +![](https://dcloud-img.oss-cn-hangzhou.aliyuncs.com/client/doc/univerify/hx.png) +- **离线打包** + + Android平台：[一键登录Android离线打包配置](https://nativesupport.dcloud.net.cn/AppDocs/usemodule/androidModuleConfig/oauth) + + iOS平台：[一键登录iOS离线打包配置](https://nativesupport.dcloud.net.cn/AppDocs/usemodule/iOSModuleConfig/oauth?id=%e4%b8%80%e9%94%ae%e7%99%bb%e5%bd%95%ef%bc%88univerify%ef%bc%89h) +### 开通uniCloud服务 +一键登录在客户端获取 token 后，必须在 uniCloud 换取手机号码。 +在uniCloud的云函数中拿到手机号后，可以再转给传统服务器，也可以通过云函数url方式生成普通的http接口给5+ App使用。 开通uniCloud是免费的，其中阿里云是全免费，腾讯云是提供一个免费服务空间。 -关于uniCloud的介绍和使用： [uniCloud说明文档](https://uniapp.dcloud.io/uniCloud/README) +注意: +**虽然一键登录需要uniCloud，但并不要求开发者把所有的后台服务都迁移到uniCloud** +关于uniCloud的介绍和使用： [uniCloud说明文档](https://uniapp.dcloud.io/uniCloud/README) -### 2.3 代码实现 for uni-app +### 使用一键登录 -#### 2.3.1 获取服务提供商 +#### 获取服务提供商 一键登录对应的服务提供商ID - - id 为 'univerify' ``` @@ -99,8 +75,7 @@ uni.getProvider({ ``` -#### 2.3.2 预登录 - +#### 预登录 （可选） 进行预登录操作，在预登录成功后有效时间内，进行登录操作 速度会显著提升 `uni.preLogin(options)` @@ -121,13 +96,13 @@ uni.preLogin({ ``` -#### 2.3.3 关闭一键登录页面 +#### 关闭一键登录页面 ``` uni.closeAuthView() ``` -#### 2.3.4 请求登录认证 +#### 请求登录认证 弹出用户授权界面。根据用户操作及授权结果返回对应的回调 @@ -218,198 +193,19 @@ univerifyStyle 数据结构 ``` -### 2.4 代码实现 for 5+ App、Wap2App - -#### 2.4.1 获取 AuthService - -一键登录对应的 AuthService 对象 - -- id 为 'univerify' -- description 为 '一键登录' - -``` -var auth = null -plus.oauth.getServices(function(services) { - - if (server.id = 'univerify'){ - auth = server; - //server.id = 'univerify' - //server.description = "一键登录" - } - -} - -``` - -#### 2.4.2 预登录 - -（可选） 进行预登录操作，在预登录成功后有效时间内，进行登录操作 速度会显著提升 - -`auth.preLogin(successCallback,errorCallback)` - -``` -auth.preLogin(function(){ - // 成功 -},function(error){ - // 失败 - error.status - error.message -}) -``` +### 换取手机号码 -#### 2.4.3 关闭一键登录页面 - -``` -auth.closeAuthView() -``` - -#### 2.4.4 请求登录认证 -弹出用户授权界面。根据用户操作及授权结果返回对应的回调 - -`auth.login(successCallback, errorCallback, AuthOptions);` - -``` -auth.login(function(event){ - { - openid : 'deviceIDlength+deviceID+gyuid', - access_token: '接口返回的 token', - } -},function(error){ - // 失败 - error.status - error.message -},{ - // 自定义页面参数 - AuthOptions : { - - } -}) -``` - -AuthOptions 数据结构 - -``` -{ - "backgroundColor": "页面背景颜色，默认白色 #ffffff", - "icon": { - "path": "可选 自定义本地图片 默认显示logo ", - "width": "可选 宽度 默认60", - "height": "可选 高度 默认60" - }, - "phoneNum": { - "color": "字体颜色 默认黑色 #000000", - "fontSize": "字体大小 默认 18加粗" - }, - "slogan": { - "color": "字体颜色 默认 #8a8b90", - "fontSize": "字体大小 默认 12" - }, - "authButton": { - "normalColor": "正常状态颜色 #3479f5", - "highlightColor": "按下状态颜色 #2861c5", - "disabledColor": "不可点击时颜色 #73aaf5",（仅ios支持） - "width": "宽度 默认 设备屏幕宽度左右各留 32px", - "height": "高度 默认 94px", - "textColor": "#ffffff", - "title": "本机号码一键登录" - }, - "otherLoginButton": { - "visible": "true 是否显示其他登录按钮，默认显示" - "normalColor": "正常状态颜色 #f8f8f8", - "highlightColor": "按下状态颜色 #dedede", - "width": "宽度 默认 设备屏幕宽度左右各留 32px", - "height": "高度 默认 94px", - "textColor": "#000000", - "title": "其他登录方式", - "borderWidth": "边框宽度 1px",（仅ios支持） - "borderColor": "边框颜色 #c5c5c5"（仅ios支持） - }, - "privacyTerms": { - "textColor": "#8a8b90 文字颜色", - "termsColor": "#1d4788 协议文字颜色" - "prefix": "我已阅读并同意", - "suffix": "并使用本机号码登录", - "fontSize": 12号字体, - "privacyItems": [ - { - "url": "https://", - "title": "用户服务协议" - } - ] - } -} -``` - -返回数据示例 - -``` - -{ - "target": { - "id": "univerify", - "description": "一键登录", - "authResult": { - "openid": "208E2FBE6EF64DF3B2D377D886EF2A14124262bfd7ae16465ea0f0634554dcee7636", - "access_token": "ZGI4NjkxZWE4YjAyNGUzMjhiMmZiNDcwODBjYjc5MDF8fDJ8djJ8Mg==" - } - } -} - -``` - -### 2.5 换取手机号码 - -通过uniCloud api 将返回的access_token置换为真实的手机号码。 +通过uniCloud 将返回的access_token置换为真实的手机号码。 ** 重要提示：正常情况下，用户的手机号码信息不应该返回给客户端 !!! ** - -#### 2.5.1 对于uni-app： - -支持两种调用方式： -1 直接调用云函数（推荐） - 2 将云函数 http服务化，然后调用http服务 - 我们这里以调用云函数为例： -直接新建云函数上传部署即可，代码实现可以参考： -[attach]65024[/attach] - - - - -#### 2.5.2 对于5+ App： - -只支持一种调用方式，即： 云函数 http服务化 - - -前置条件：已创建一个uni-app 应用，且开通uniCloud服务。 - -操作步骤： - -+ 新建云函数，实现一键登录功能并上传部署。 - -创建云函数,代码参考uni-app 实现 - -[attach]65033[/attach] - - -+ 将刚才上传的云函数，开通http服务状态。 - -[attach]65031[/attach] - - - - -+ 5+ 应用访问uni-app 应用的 http 服务 - - -[attach]65039[/attach] - - +新建云函数上传部署，代码实现可以参考： +![](https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20201125/81b289aace20942def2e98a4cd41b97e.png) 返回数据示例 ``` @@ -433,7 +229,7 @@ AuthOptions 数据结构 ``` -[关于uniCloud对一键登录功能的详细说明](https://uniapp.dcloud.net.cn/uniCloud/univerify) +[uniCloud对一键登录功能的详细说明](https://uniapp.dcloud.net.cn/uniCloud/univerify) ## Q&A @@ -457,7 +253,7 @@ AuthOptions 数据结构 |40053 |手机号校验失败| ### 提示 非移动网关ip地址 -大多数情况 是因为部分特定设备，不支持双卡双待的网络环境导致 +大多数情况 是因为部分特定设备，不支持双卡双待的网络环境 ### 代码 40201 提示 源IP鉴权失败 检查一下手机卡类型是否是正常运营商手机卡，关闭飞行模式后重新尝试 -- GitLab