【uni-app】uniapp 实现一键登录 超详细记录~
uniapp 实现一键登录
一. 前置条件: 开通uniCloud, 开通一键登录功能
二. 一键登录代码 & 云函数代码
三. 其他条件
四. 遇到过什么问题, 如何处理(本地函数同个局域网, 错误码)
五. 官网给出的错误码
参考的文档 :
官网 - 一键登录uniapp指南 : https://uniapp.dcloud.net.cn/univerify.html#%E6%A6%82%E8%BF%B0
官网 - 一键登录开通指南 : https://ask.dcloud.net.cn/article/37965
官网 - unicloud使用指南 https://uniapp.dcloud.net.cn/uniCloud/quickstart.html#
官网 - 一键登录uniCloud使用说明 https://uniapp.dcloud.net.cn/uniCloud/univerify.html#
一.前置条件: 开通uniCloud, 开通一键登录功能
官网 - 一键登录开通指南 : https://ask.dcloud.net.cn/article/37965
二. 一键登录代码 & 云函数代码
1. 一键登录对于用户的前提
- 必须开启移动网络
- 手机有sim卡
2. 一键登录代码
fastLoginFn() {console.log("手机号一键登录")var this_ = this// 预登陆uni.preLogin({provider: "univerify",success: () => {uni.login({provider: "univerify",univerifyStyle: {fullScreen: false,// 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。backgroundColor: "#ffffff", // 授权页面背景颜色，默认值：#ffffffphoneNum: {color: "#333", // 手机号文字颜色 默认值：#000000fontSize: "22" // 手机号字体大小 默认值：18},slogan: {color: "#707070", // slogan 字体颜色 默认值：#8a8b90fontSize: "12"},icon: {path: "static/pic/xx.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo},authButton: {normalColor: "#FFBB24", // 授权按钮正常状态背景颜色 默认值：#3479f5highlightColor: "#FFBB24", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）disabledColor: "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）textColor: "#ffffff", // 授权按钮文字颜色 默认值：#fffffftitle: "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”},otherLoginButton: {visible: "false", // 是否显示其他登录按钮，默认值：true"visible": "true", // 是否显示其他登录按钮，默认值：truenormalColor: "#fff", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8highlightColor: "#fff", // 其他登录按钮按下状态背景颜色 默认值：#dededetextColor: "#333", // 其他登录按钮文字颜色 默认值：#000000title: "其他方式登录", // 其他登录方式按钮文字 默认值：“其他登录方式”"borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）borderColor: "#707070", //边框颜色 默认值： #c5c5c5（仅ios支持）borderWidth: "1px" // 边框宽度 默认值：1px（仅ios支持）},privacyTerms: {defaultCheckBoxState: "false", // 条款勾选框初始状态 默认值： truetextColor: "#707070", // 文字颜色 默认值：#8a8b90termsColor: "#FFBB24", // 协议文字颜色 默认值： #1d4788prefix: "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”suffix: "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”fontSize: "12", // 字体大小 默认值：12,uncheckedImage: "static/pic/elliptical.png", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)checkedImage: "static/pic/elliptical-1.png", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)privacyItems: [// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效{url: "https://xxx", // 点击跳转的协议详情页面title: "用户协议" // 协议名称},{url: "https://xxx", // 点击跳转的协议详情页面title: "隐私政策" // 协议名称}]}},success: (res) => {console.log("一键登录调用返回的数据", res)uniCloud.callFunction({name: "login", // 云函数名称data: {access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_tokenopenid: res.authResult.openid // 客户端一键登录接口返回的openid}}).then((dataRes) => {console.log("云函数返回的参数", dataRes)let phone = dataRes.result.data.phoneNumberthis.userPhone = dataRes.result.data.phoneNumber// 这里进行登录操作this.loginFast({ phone })}).catch((err) => {console.log("云函数报错", err)uni.showToast({title: err.errMsg,icon: "none"})this_ = thissetTimeout(() => {uni.closeAuthView() //关闭一键登录弹出窗口this_.onClickMsgLogin()}, 500)})uni.showToast({title: res.authResult,icon: "none"})// console.log("云函数调用返回数据", dataRes)},fail(err) {// 登录失败或者点击其他登录方式,自定义按钮等console.log("一键登录uni.login失败", err)uni.showToast({title: res.errMsg || err.metadata?.resultDesc,icon: "none"})setTimeout(() => {uni.closeAuthView() //关闭一键登录弹出窗口this_.onClickMsgLogin()}, 500)}})},fail(res) {console.log("一键登录uni.preLogin失败", res)if (res.errMsg != "login:ok") {// 这里注意有个小坑: 不同运营商,返回的报错字段不同, 经过测试, 以下几乎包含了三大运营商报错字段uni.showToast({title: res.errMsg || res.metadata.resultMsg || res.metadata.error_data || res.metadata.resultDesc || "请检查是否插入有效sim卡及开启蜂窝数据网络",icon: "none"})}//如果手机没有插入有效的sim卡，或者手机蜂窝数据网络关闭，//都有可能造成预登录校验失败。setTimeout(() => {// 预登陆失败, 做其他操作this_.onClickMsgLogin()}, 500)}})}
2. 云函数代码
// demo-uniapp/uniCloud-aliyun/cloudfunctions/login/index.js
'use strict';
exports.main = async (event, context) => {// event里包含着客户端提交的参数const res = await uniCloud.getPhoneNumber({// appid: '__UNI__xxx', // 替换成自己开通一键登录的应用的DCloud appidprovider: 'univerify',apiKey: 'xxx', // 在开发者中心开通服务并获取apiKeyapiSecret: 'xxx', // 在开发者中心开通服务并获取apiSecretaccess_token: event.access_token,openid: event.openid})console.log(res); // res里包含手机号// 执行用户信息入库等操作，正常情况下不要把完整手机号返回给前端// 如果数据库在uniCloud上，可以直接入库// 如果数据库不在uniCloud上，可以通过 uniCloud.httpclient API，将手机号通过http方式传递给其他服务器的接口，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclientreturn {code: 0,message: '获取手机号成功',data:res}
}
三. 其他条件
1. 云函数使用一键登录扩展库
官网 : https://uniapp.dcloud.net.cn/uniCloud/univerify.html#
步骤 : 右键选中云函数login目录 - 选择"管理公共模块或扩展库依赖" - 选择"手机号一键登录"- 生成demo-uniapp/uniCloud-aliyun/cloudfunctions/login/package.json
注意 : 这只是在你本地云函数生成, 不要忘记把云函数上传部署上去服务空间!!!
2. 云函数上传和部署
步骤 : 右键选中云函数login目录 - 选中"上传部署"
注意 : 这里很重要, 在本地云函数改了, 必须部署上去关联的服务空间, 不然打包后连接的云函数没有修改的代码, 自然就报错了~
3. 关联服务空间
在uniCloud创建了服务空间,
步骤 : 右键选中uniCloud目录 - 选中"关联云服务空间或项目" - 选择关联的空间
此后这个项目的云函数上传, 云函数日志查看都可以来这看
4. manifest.json OAuth登录鉴权打开
勾选上就可以啦~
四. 遇到过什么问题, 如何处理
1. 连接本地云函数时, 要在同个局域网
测试的时候, 如果连的是本地云函数, 那么你的电脑和测试手机需在一个局域网, 不然是访问不了本地云函数哒~
2. yidong号码一键登录不稳定
- 运营商返回的错误字段不一致, 抛出提示语时需拿不同运营商卡做测试
- yidong号码一键登录不稳定
至今遇到最大的坑, 测试了yidong号码, liantong号码, 同样的环境, liantong号码可以正常登录, yidong号码还看人(枯了.jpg), 有时候同事的yidong号码正常登录, 我的yidong号码不正常登录…同样的代码和环境噢, 至今未找到解决办法
只能在交互上优化, 失败则自动跳转去验证码登录了
3. 查看云函数日志
uniCloud 开发后台 : https://unicloud.dcloud.net.cn/home
在手机测试时, 给出的错误信息往往有限, 这时候就可以来开发后台查看具体报错信息了, 看是否调起云函数, 进一步排查问题
4. 【报Bug】云函数报错 : 获取手机号码失败：gyuid不合法
一般是云函数login.js的appid 和项目的appid不一致, 解决办法:
- 核对云函数login.js appid
- 核对menifest.json appid
- 核对服务空间关联是否正确
- 核对打包的apk appid/证书/包名等参数是否正确, 今天再次遇到这个问题, 排查半天, 发现是打的包出现了问题, 多了无用的一些配置文件, 导致一直报这个错
5. yidong 号码报错40101/40102/3006等问题
结合第2条问题来看, 之前yidong号码一直报这个错, 提示网关鉴权, 非法请求之类的bug, 但liantong号正常, 偶尔同事的yidong号也正常, 看了文档, 尝试开启飞行模式, 一阵子后再打开, yidong号码正常一键登录了 !
( 题外话, 突发奇想一个我yidong之所以出现类似的问题, 有没有可能是我的sim卡太久了氧化导致?? )
五. 官网给出的错误码
喜大普奔~
4月那时刚做功能时, 文档还没更新错误码, 遇到报错有时不知道什么情况, 网上也没看到相关解说帖子
现在更新出来了, 真是开发者的福音~
写在最后, 一键登录还是小坑不断的, 而且文档在不断更新, 所以遇到问题还是要多看文档, 说不定哪天又更新了新条款, 比如有项"重要调整 云函数使用一键登录扩展库", 记得我4月做的时候是没有的, 后面查看文档才发现的~
【uni-app】uniapp 实现一键登录 超详细记录~相关推荐
- uniapp手机号一键登录
uniapp手机号一键登录 先讲几个坑避免操作完以后会出bug无效喷我 部分机型会因为第一次在手机上编译普通基座无法触发手机号一键登录的弹框,这里当然是重启了,重启可以解决百分之八十的问题!!! 然后 ...
- 初用vue2写一个超简陋知乎日报(不与知乎日报api交互)超详细记录
刚学vue,文档还没看全,写一个超简陋版知乎练手记录,因为css不太会所以很难看 会计量超详细记录,主要为做记录 包含左抽屉式导航,下拉更新,上拉加载,轮播 用到: Font Awesome muse ...
- 【Python爬虫实例学习篇】——5、【超详细记录】从爬取微博评论数据（免登陆）到生成词云
[Python爬虫实例学习篇]--5.[超详细记录]从爬取微博评论数据(免登陆)到生成词云 个人博客地址:ht/tps://www.asyu17.cn/ 精彩部分提醒: (1)微博评论页详情链接为一个 ...
- uni-app手机号一键登录
提示:手机号一键登录有两种方式. 第一种通过调用自有服务器,然后服务器调用云函数登录. 第二种可以前端直接调用云函数进行登录(暂不介绍). 提示:在我的项目中使用的是自由服务器登录,下面的案例可供参考 ...
- uniapp微信一键登录微信授权
前言 现在小程序逐渐成为主流,常用的微信授权登录很重要很常见的一个功能,今天自己总结了一下. 准备工作 1.如果你想自己想试一下这个功能首先你需要有一个开发中的项目并且你在开发成员里面. 2.配置自己 ...
- uniapp微信一键登录
详细步骤: 1. 安装uni-login插件 打开HBuilderX,点击左侧工具栏里的"插件市场",在搜索框中输入"uni-login"进行搜索,找到该插件并 ...
- uniapp消息推送超详细（从开通uniPush到测试成功）
前段时间开发app的时候要开始做消息推送功能了,刚开始选择的是个推,最后由于.....,em还是用了uniapp自带的uniPush,其实uniapp的推送就是集成版的个推,下面讲解详细的步骤 这里是 ...
- XHbuilder 运行到 Ios APP 需要 ipa 签名，超详细的教程，你不看吃亏的是自己！
今天使用 hbuilder 运行到 ios 真机的时候,突然发现还需要 ipa 签名,这是什么东东呢? 1.IPA 签名是什么? 因苹果公司禁止企业证书用于非企业内部开发者.所以开发者无法再使用DCl ...
- uniapp手机一键登录，微信授权登陆
之前前端可以通过微信的接口获取openid,现在不允许了,所以把code传给后端后端反数据给我们, <template><view class="content yd-ce ...
最新文章
- 200万注册开发者，13亿张全景图片，90%数据生产环节AI化，百度地图生态全景升级2.0
- a*算法的时间复杂度_算法基础——时间复杂度amp;空间复杂度
- DeepMind激起千层浪的这篇论文，并非无所不能
- [LeetCode]: 62: Unique Paths
- Bootstrap的引用文件
- Android改变字体方法——Typeface
- [buaa-SE-2017]个人作业-Week1
- linux环境ubuntu： pushd: not found
- 《算法竞赛进阶指南》 荷马史诗
- Linu系统——基础知识1
- python粒子风暴_气象雷达应用中常见的名词解释
- 三极管 NPN 开关电路
- 如何给老师写信？收到斯坦福/UCL/CMU/NYU/UW的博士offer的经验
- SpringSecurity 学习笔记分享 记录历程开篇
- 使用原始套接字Raw Socket实现数据包嗅探
- 华为、OPPO、美的能逆势成长的本质和核心是什么？
- jupyter解压缩文件
- ios振动选择_如何设置将振动但不会发出声音的iOS警报
- Virtualbox安装增强功能时显示【未能加载虚拟光盘】
- 2345王牌输入法的卸载