【uni-app】2025最新uni-app一键登录保姆级教程(包含前后端获取手机号方法)(超强避坑指南)

news/2024/12/25 15:04:13/

前言:

最近在配置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内

javascript">'use strict';
exports.main = async (event, context) => {// event里包含着客户端提交的参数console.log("event:"+event);const res = await uniCloud.getPhoneNumber({appid: '__UNI__XXXXXXX', //填写你自己的appidprovider: '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=httpclientreturn {code: 0,message: '获取手机号成功',data:res}
}

在DCloud平台内的一键登录模块找到前面申请的项目,找到DCloud Appid填入上面代码的appid部分

云函数内index.js配置完成

 然后右键云函数,点击上传部署

PS:云函数内往后有任何改动都必须重新上传部署

 上传部署完成即可

4.具体登录场景代码编写

这里我在项目的index页面随便写一个按钮用于测试一键登录功能

 一键登录的方法写在login()方法内

(1)前端获取手机号

复制这一串代码到login方法内

特别注意的是,在uniCloud.callFunction函数内的name参数需要填写前面你自己创建的云函数名称

此处一键登录登录框的样式为默认,如需自定义登录框,可前往uni-app官方文档查询:uni-app官网

javascript">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_tokenopenid: 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_ = thissetTimeout(() => {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

具体代码如下:

javascript">'use strict';
exports.main = async (event, context) => {// event里包含着客户端提交的参数console.log("event:"+event);const res = await uniCloud.getPhoneNumber({appid: '__UNI__D567DCD', //填写你自己的appidprovider: '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官网

javascript">login(){//在这里写一键登录的代码uni.preLogin({provider: 'univerify',success(){  //预登录成功// 显示一键登录选项uni.login({provider: 'univerify',univerifyStyle: { // 自定义登录框样式//参考`univerifyStyle 数据结构`//具体样式设计请去uni-app文档查看//不填写任何自定义登录框样式的话就会采取默认样式},success(res){ // 登录成功//此处已经获取了openid和access_tokenconsole.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一键登录的文章应该算是目前最新的一篇教学文章的,内容具有很强的时效性和现实意义。最后,感谢您看完本教程,本文如果错误或不严谨之处,麻烦大佬评论区指正!


http://www.ppmy.cn/news/1558024.html

相关文章

基于Spring Boot的动漫交流与推荐平台

一、开发背景与意义 动漫产业的蓬勃发展:随着动漫产业的不断壮大,动漫文化逐渐深入人心,吸引了大量爱好者。这一趋势推动了动漫作品的多样化和创新,同时也促进了相关产业的发展。 传统交流方式的局限性:传统的动漫交流…

ffmpeg.exe 命令使用

1. 视频分片:裁剪分割视频成小片段, ffmpeg Documentation Seeking – FFmpeg 1.指定持续时间 使用-t命令。前者要比后者快。 ffmpeg -ss [start] -i [input] -t [duration] -c copy [output] ffmpeg -i [input] -ss [start] -t [duration] -c cop…

告别卡顿:CasaOS轻NAS设备安装Gopeed打造高效下载环境

文章目录 前言1. 更新应用中心2.Gopeed安装与配置3. 本地下载测试4. 安装内网穿透工具5. 配置公网地址6. 配置固定公网地址 前言 无论你是需要大量文件传输的专业人士,还是只是想快速下载电影或音乐的普通用户,都会使用到下载工具。如果你对现有的下载工…

便签软件哪个好用 新款多功能便签软件哪个好?

在快节奏的现代生活中,便签软件已成为我们不可或缺的工具。无论是工作计划、生活琐事,还是灵感闪现,我们都需要一个可靠的助手来记录和提醒。面对市场上众多的便签软件,选择一个多功能且实用的便签软件显得尤为重要。 敬业签正是…

HTTPS协议原理与CA认证

目录 引言 HTTPS 是什么 1.什么是"加密" 2. 为什么要加密 3. 常⻅的加密⽅式 对称加密 ⾮对称加密 4.数据摘要 && 数据指纹 5. 数字签名 HTTPS 的⼯作过程探究 ⽅案 1 - 只使⽤对称加密 ⽅案 2 - 只使⽤⾮对称加密 ⽅案 3 - 双⽅都使⽤⾮对称加密…

微软在AI时代的战略布局和挑战

微软的CEO萨提亚纳德拉(Satya Nadella)在与投资人比尔格里(Bill Gurley)和布拉德格斯特纳(Brad Gerstner)的一场深度对话中,详细回顾了微软在AI时代的战略布局与所面临的挑战。这场对话不仅总结…

Hive 部署

1 下载并安装 1.1 Hadoop安装 参考另一篇博客:Hadoop 部署 1.2 安装包下载 可通过下面网站下载: 官网:https://dlcdn.apache.org/hive/。清华源:https://mirrors.tuna.tsinghua.edu.cn/apache/hive/。 比如下载apache-hive-4…

springBoot Maven 剔除无用的jar引用

目录 Used undeclared dependencies found Unused declared dependencies found 当项目经过一段时间的开发和维护后,经常会遇到项目打包速度变慢的问题。这通常与项目中包含大量的jar依赖有关,这些依赖之间的关系错综复杂。这种情况在项目维护过程中是…