【uni-app】2025最新uni-app一键登录保姆级教程(包含前后端获取手机号方法)(超强避坑指南)
前言：
最近在配置uni-app一键登录时遇到了不少坑，uni-app的配套文档较为混乱，并且有部分更新的内容也没有及时更改在文档上，导致部分开发者跟着uni-app配套文档踩坑！而目前市面上的文章质量也层次不齐，有的文章创作背景和时间太过久远，无法有效应对今日早已更新变化的一键登录功能的配置。在参考多篇前辈文章及uni-app文档后，我决定书写一篇2025年最新的uni-app一键登录教程，希望能给大家带来帮助！同时本教程也会涉及前后端获取用户手机号的方法，希望大家在开始教程前将HBuilder更新到最新版本。
温馨提示：
广电卡用户无法使用一键登录的功能！！！
测试一键登录功能时，手机需要有手机卡，并且开启数据流量！！！
电脑页面无法测试一键登录功能，请通过真机调试或其它方式进行测试！！！
1.开通服务空间
首先我们进入Dcloud开发者中心内，点击uniCloud云服务
随后我们点击新建服务空间
服务商选择阿里云，然后输入你的服务空间名称！如果你是第一次开通服务空间的话，那么你将会有开发版的免费套餐版本，我这里由于不是第一次开通所以无法演示。大家直接选择免费的开发版套餐就可以了，付费方式选择免费即可，最后点击立即购买开通即可！
开通完成后，你在服务空间列表就可以看到你所创建的服务空间了！
2.开通一键登录功能
先点击进入一键登录界面
随后同意协议开通一键登录功能，然后进入账户信息页面，我们对自己的账户进行充值
这里不用充值太多，充值1元测试一键登录功能即可！
充值完毕后，我们点击应用管理，随后点击添加应用
随后我们在DCloud AppId选择你想要开通一键登录的项目
选择之后你会发现，下面的信息无法填写
我们来到HBuilder中，找到自己想要开通一键登录的项目
随后点击发行，再点击云打包
我们选择安卓包，使用云端证书，打正式包，快速安心打包
记得把广告的选项全关掉，随后点击打包
我们耐心等待打包完成
打包完成后，我们先回到应用管理的我的应用中，随后点击自己想要开通一键登录的项目
点击Android云端证书 再点击证书详细
找到MD5、SHA1、SHA256这三项内容
然后我们点击各平台信息，随后点击修改
随后版本选择正式版，将上面获取的MD5、SHA1、SHA256填入下方，然后提交
随后回到一键登录添加应用
填写你的应用名称 选择Android平台 选择你的包名
选择后 MD5 及 SHA256会自动填充
然后点击提交申请 慢慢等待申请通过
你可以在列表上查看到应用的申请状态，当状态为审核已通过时即可
3.在项目中部署云服务
右键自己的项目，选择创建uniCloud云开发环境，再点击阿里云
右键uniCloud，随后点击关联云服务空间或项目s
随后关联你最开始开通的服务空间
关联成功后，右键cloudfunctions，点击新建云函数/云对象
填写你的云函数名称，选择云函数，模板选择默认即可，然后我们点击添加公共模板或扩展库依赖
选择uni-cloud-jql和uni-cloud-verify，然后点确定
云函数所有内容已经设置完成，点击创建
创建云函数成功后，点击进入云函数文件夹内的index.js
将下面的代码复制到index.js内
'use strict';
exports.main = async (event, context) => {
// event里包含着客户端提交的参数
console.log("event:"+event);
const res = await uniCloud.getPhoneNumber({
appid: '__UNI__XXXXXXX', //填写你自己的appid
provider: 'univerify',
access_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=httpclient
return {
code: 0,
message: '获取手机号成功',
data:res
}
}
在DCloud平台内的一键登录模块找到前面申请的项目，找到DCloud Appid填入上面代码的appid部分
云函数内index.js配置完成
然后右键云函数，点击上传部署
PS：云函数内往后有任何改动都必须重新上传部署
上传部署完成即可
4.具体登录场景代码编写
这里我在项目的index页面随便写一个按钮用于测试一键登录功能
一键登录的方法写在login()方法内
（1）前端获取手机号
复制这一串代码到login方法内
特别注意的是，在uniCloud.callFunction函数内的name参数需要填写前面你自己创建的云函数名称
此处一键登录登录框的样式为默认，如需自定义登录框，可前往uni-app官方文档查询：uni-app官网
login(){
//在这里写一键登录的代码
uni.preLogin({
provider: 'univerify',
success(){ //预登录成功
// 显示一键登录选项
uni.login({
provider: 'univerify',
univerifyStyle: {
// 自定义登录框样式
//参考`univerifyStyle 数据结构`
//具体样式设计请去uni-app文档查看
//不填写任何自定义登录框样式的话就会采取默认样式
},
success(res){ // 登录成功
console.log(res.authResult.access_token);
console.log(res.authResult.openid);
// 此处获取了openid和access_token
// {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
// 通过uniCloud.callFunction函数实现前端获取手机号
uniCloud.callFunction({
name: "testLogin", // 填写你自己的云函数名称
//传入上面获取的openid和access_token获取手机号
data: {
access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_token
openid: res.authResult.openid // 客户端一键登录接口返回的openid
}
})
.then((dataRes) => {
//此处已经成功获取手机号等信息
console.log("云函数返回的参数", dataRes)
let phone = dataRes.result.data.phoneNumber
// 获取手机号后根据自己的需求做后面的登录操作即可
//...
})
.catch((err) => {
console.log(err);
console.log("云函数报错", err)
uni.showToast({
title: err.errMsg,
icon: "none"
})
this_ = this
setTimeout(() => {
uni.closeAuthView() //关闭一键登录弹出窗口
this_.onClickMsgLogin()
}, 500)
})
},
fail(res){ // 登录失败
console.log(res.errCode)
console.log(res.errMsg)
}
})
},
fail(res){
// 预登录失败
// 不显示一键登录选项（或置灰）
// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
console.log(res.errCode)
console.log(res.errMsg)
}
})
}下方是由本人通过标准基座运行到真机进行测试的效果，这里只是为大家展示效果，后面会演示如何将一键登录功能打包至安装包安装到手机使用。
点击本机号码一键登录后，会将获取来的openid和access_token拿去申请获取手机号，成功后将返回具体的数据！这里需要注意的是，如果你也想运行到真机测试的话，请勾选"连接云端云函数"
下面是返回的具体数据，数据内就有我们需要的手机号，获取手机号后大家可以根据需求去进行后续操作。
（2）后端获取手机号
如果你想通过后端获取手机号，那么你先得重新配置一下云函数中的index.js
具体代码如下：
'use strict';
exports.main = async (event, context) => {
// event里包含着客户端提交的参数
console.log("event:"+event);
const res = await uniCloud.getPhoneNumber({
appid: '__UNI__D567DCD', //填写你自己的appid
provider: 'univerify',
access_token: event.queryStringParameters.access_token,
openid: event.queryStringParameters.openid
})
console.log(res);
return {
code: 0,
message: '获取手机号成功',
data:res
}
}
重新配置完index.js后记得再次上传部署云函数
接下来我们前往服务空间
点击函数/对象列表
在列表中找到你在前面创建的云函数，然后点击详细进入云函数详细界面
找到云函数url化，随后点击下面的编辑
随后自行修改后端获取手机号接口，修改完成后点击确定（这里的接口一定要修改后使用，否则失效）
确定后复制保存好新修改的后端获取手机号接口，后面在代码对应处填写即可
复制这一串代码到login方法内
特别注意的是，后端获取手机号接口请填写前面获取的接口地址
此处一键登录登录框的样式为默认，如需自定义登录框，可前往uni-app官方文档查询：uni-app官网
login(){
//在这里写一键登录的代码
uni.preLogin({
provider: 'univerify',
success(){ //预登录成功
// 显示一键登录选项
uni.login({
provider: 'univerify',
univerifyStyle: {
// 自定义登录框样式
//参考`univerifyStyle 数据结构`
//具体样式设计请去uni-app文档查看
//不填写任何自定义登录框样式的话就会采取默认样式
},
success(res){ // 登录成功
//此处已经获取了openid和access_token
console.log("一键登录调用返回的数据", res)
// 以nodejs为例
const crypto = require('crypto')
//这里请设置您自己的密钥
const secret = 'test' // 自己的密钥不要直接使用示例值，且注意不要泄露
const hmac = crypto.createHmac('sha256', secret);
// 自有服务器生成签名，并以GET方式发送请求
const params = {
access_token: res.authResult.access_token, // 客户端传到自己服务器的参数
openid: res.authResult.openid
}
// 字母顺序排序后拼接签名串
const signStr = Object.keys(params).sort().map(key => {
return `${key}=${params[key]}`
}).join('&')
hmac.update(signStr);
//获取sign值
const sign = hmac.digest('hex')
//利用前面获取到的openid，access_token，sign值通过后端接口获取手机号
uni.request({
//下面为后端获取手机号的接口，每个人的这个接口都不一样
url:`你自己的后端获取手机号接口?access_token=${res.authResult.access_token}&openid=${res.authResult.openid}&sign=${sign}`,
success:res=> {
console.log(res);
uni.showToast({
title:"登陆成功!",
duration:2000,
icon:'none'
})
uni.closeAuthView();
},
fail:res=> {
uni.showToast({
title:"网络请求超时，请检查网络配置!",
duration:2000,
icon:'none'
})
}
})
uni.showLoading({
title:"加载中...",
mask:true
})
uni.showToast({
title: res.authResult,
icon: "none"
})
},
fail(err) {
// 登录失败或者点击其他登录方式,自定义按钮等
console.log("一键登录uni.login失败", err)
uni.showToast({
title:"您已取消一键登录",
icon: "none"
})
setTimeout(() => {
uni.closeAuthView() //关闭一键登录弹出窗口
}, 500)
}
})
},
fail(res){
// 预登录失败
// 不显示一键登录选项（或置灰）
// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
console.log(res.errCode)
console.log(res.errMsg)
}
})
}这里特别声明一下，由于本处为了演示效果，所以我们在前端直接使用后端获取手机号的接口获取手机号。正常情况下，大家可以把获取openid，access_token，sign值传给后端，后端接收这些数据再根据后端获取手机号的接口获取手机号！
下方是由本人通过标准基座运行到真机进行测试的效果，这里只是为大家展示效果，后面会演示如何将一键登录功能打包至安装包安装到手机使用。
点击本机号码一键登录后，会将获取来的openid，access_token，sign拿去通过后端获取手机号接口获取手机号，成功后将返回具体的数据！这里需要注意的是，如果你也想运行到真机测试的话，请勾选"连接云端云函数"
下面是返回的具体数据，数据内就有我们需要的手机号，获取手机号后大家可以根据需求去进行后续操作。
5.云打包配置
本部分将涉及关联一键登录功能的云打包配置，具体一键登录功能的实现已经实现，可根据需求阅读本部分。
首先点击项目内的manifest.json，然后再点击安卓/IOS模块配置
在安卓/IOS模块配置列表中，找到OAuth并勾选，记得还要勾选一键登录
配置完成后进行打包操作即可
打包完成后，将安装包安装到手机上。点击一键登录按键，发现能正常调起一键登录登录框页面，说明云打包配置成功！
后记：
希望这篇文章能为大家带来帮助，这也是我在配置uni-app一键登录时踩过无数坑才整理出的一套教程和代码。请大家原谅我在2024年12月23日编写文章时标题采用2025年最新这类的标题党词语，虽然没有到2025年，但我这篇关于uni-app一键登录的文章应该算是目前最新的一篇教学文章的，内容具有很强的时效性和现实意义。最后，感谢您看完本教程，本文如果错误或不严谨之处，麻烦大佬评论区指正！