uniapp 云开发APP手机号码一键登录

univerify 是DCloud 推出的一键登录产品，通过与运营商深度合作，实现APP用户无需输入帐号密码，即可使用本机手机号码自动登录的能力。univerify是替代短信验证登录的下一代登录验证方式，能消除现有短信验证模式等待时间长、操作繁琐和容易泄露的痛点。
详细请参考官方文档：https://uniapp.dcloud.io/uniCloud/univerify

1.开通uniCloud服务

申请开通服务地址https://unicloud.dcloud.net.cn/login

2.开通uni一键登录服务

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

3.建立云函数并上传部署

'use strict';const db = uniCloud.database()exports.main = async (event, context) => {const res = await uniCloud.getPhoneNumber({appid: '', // 替换成自己开通一键登录的应用的DCloud appid，使用callFunction方式调用时可以不传（会自动取当前客户端的appid），如果使用云函数URL化的方式访问必须传此参数provider: 'univerify',apiKey: 'f6**************ab', // 在开发者中心开通服务并获取apiKeyapiSecret: '38c************a8', // 在开发者中心开通服务并获取apiSecretaccess_token: event.access_token,openid: event.openid});console.log(res); // res里的数据格式  { code: 0, success: true, phoneNumber: '186*****078' }// 执行入库等操作，正常情况下不要把完整手机号返回给前端    return await db.collection('regUser').add({       openid: event.openid, //前端提交过来的数据PhoneNumber:res.phoneNumber,createTime: Date.now()     })
};

在云数据库建立regUser数据表，用于保存登录成功的手机号与openid

4.前端代码

<template><view><view v-if="isSupport" class="content"><image class="logo" src="/static/logo.png" @click="oneLogin()"></image><view class="text-area"><text class="title">{{title}}</text></view></view><view v-if="!isSupport"><input placeholder="账号" /><input placeholder="密码" /></view></view>
</template><script>export default {data() {return {title: '点击图片一键登录',isSupport: true}},methods: {oneLogin() {uni.getProvider({ //获取可用的服务提供商service: 'oauth',success: function(res) {console.log(res.provider) // ['weixin', qq', 'univerify']}});uni.preLogin({ //预登录provider: 'univerify', //用手机号登录success() {console.log('预登录成功')uni.login({ //正式登录，弹出授权窗provider: 'univerify',univerifyStyle: { // 自定义登录框样式"fullScreen": true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff "phoneNum": {"color": "#ff00ff", // 手机号文字颜色 默认值：#000000   },"authButton": {"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5  "highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  "disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  "textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff  "title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”  }},success(res) { // 正式登录成功console.log(res.authResult); // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}// 在得到access_token后，通过callfunction调用云函数uniCloud.callFunction({name: 'getPhoneNumber', // 云函数名称data: { //传给云函数的参数'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token'openid': res.authResult.openid // 客户端一键登录接口返回的openid},success(callRes) {console.log('调用云函数成功'+ callRes)                                     },fail(callErr) {console.log('调用云函数出错'+ callErr)},complete() {uni.closeAuthView() //关闭授权登录界面}})},fail(err) { // 正式登录失败console.log(err.errCode)console.log(err.errMsg)uni.closeAuthView() //关闭授权登录界面}})},fail(err) { //预登录失败console.log('错误码：' + err.errCode)console.log(err.errMsg)}})}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>

5.要注意的事项

5-1. 代码要运行到手机才能成功获取手机号

5-2. 手机如果是双卡，要把其中一张卡取出来，在手机里停用也不行，否则预登录的时候会报错：30005–预登录失败。

5-3. App模块配置勾选一键登录。

6.调试的效果

uniapp 云开发APP手机号码一键登录相关推荐

uniapp app端一键登录
使用云函数,添加一键登录模块然后在相应的云函数index中编写 'use strict'; const crypto = require('crypto') //下载crypto,引入 npm in ...
uniapp云开发云函数获取微信openid
产品类型:目前只有微信小程序. 目标:授权登录,建立用户体系. 框架:uniapp+云开发+云函数. 方案一:通过官方提供的 univerify 插件官方文档:uni一键登录 - uni-app官网 ...
十分钟搞懂手机号码一键登录
手机号码一键登录是最近两三年出现的一种新型应用登录方式,比之前常用的短信验证码登录又方便了不少.登陆时,应用首先向用户展示带有本机号码掩码的授权登录页面,用户点击"同意授权"的按钮 ...
uni-app框架开发app发布流程
uni-app框架开发app发布流程 1.首先公司申请软著步骤:申请软著详细流程 - 阿长*长 - 博客园 (cnblogs.com) 一.安卓端 1,点击发行>原生-app云打包正式包和自 ...
uni-app云开发基础保姆级教程
什么是uni-app云开发 uni-app云开发,也叫uniCloud,uniCloud是由Dcloud联合阿里云,腾讯云推出的,基于serverless的,跨全端的.用js开发服务端的云产品 uni ...
uni-app云开发的网盘助手微信小程序源码
这是一款uni-app开发的一款网盘小助手小程序源码安装教程: 我们首先使用HBuilderx导入您的源码,然后点击manifest.json基础配置然后重新获取一下uni-app应用标识然后我们 ...
微信小程序：uni-app云开发的网盘助手
这是一款uni-app开发的一款网盘小助手小程序源码该源码主要用于用户输入关键词然后全网抓取百度网盘资源内容另外呢该小程序还可以免费领取百度网盘七天会员,所以用来引流特别的不错该小程序还有外卖系 ...
uni-app云开发的网盘助手微信小程序源码抓取网盘资源引流好助手
uni-app云开发的网盘助手微信小程序源码抓取网盘资源引流好助手这是一款uni-app开发的一款网盘小助手小程序源码该源码主要用于用户输入关键词然后全网抓取百度网盘资源内容另外呢该小程序还可以 ...
【小程序源码】uni-app云开发的网盘助手抓取网盘资源
这是一款uni-app开发的一款网盘小助手小程序源码安装教程: 我们首先使用HBuilderx导入您的源码,然后点击manifest.json基础配置然后重新获取一下uni-app应用标识然后我们 ...