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

ops/2024/12/29 7:28:10/

前言:

最近在配置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/ops/145573.html

相关文章

Binoculars——分析证实大语言模型生成文本的检测和引用量按学科和国家明确显示了使用偏差的多样性和对内容类型的影响

摘要 论文地址:https://www.biorxiv.org/content/10.1101/2024.03.25.586710v2.full.pdf 人工智能技术的进步正在改变数字内容生产和消费的格局。尤其值得注意的是生成式人工智能的快速发展,包括大规模语言模型,如 ChatGPT,它出现…

ffmpeg源码分析(九)解协议

本文将聚焦于FFmpeg协议处理模块,以avformat_open_input函数为核心,详细剖析其在最新FFmpeg源码中的实现。 音视频处理流程简介 avformat_open_input概述 avformat_open_input是FFmpeg用于打开输入多媒体数据的关键函数。它通过统一的接口处理多种协议…

嵌入式学习-QT-Day01

嵌入式学习-QT-Day01 Qt简介 1、Qt是什么? 2、新建项目 3、构建目录和工作目录 3.1、构建目录 3.2 工作目录 4、项目结构 4.1 项目配置文件.pro 4.2 用户文件.user 4.3 主文件 main.cpp 4.4 头文件dialog.h 4.5 源文件dialog.cpp 5、帮助文档 6、调试…

centos 释放系统预留内存并关闭Kdump服务

背景:Kdump是Linux系统的一种内核崩溃转储机制,它允许在系统发生内核崩溃(例如内核panic)时,捕获内存的转储信息,从而帮助事后分析故障原因。该过程需要一块预留内存(称为crashkernel内存&#…

finalshell密码解密

finalshell密码解密 在线网站运行java https://c.runoob.com/compile/10/ import java.io.ByteArrayOutputStream; import java.io.DataOutputStream; import java.io.IOException; import java.math.BigInteger; import java.security.MessageDigest; import java.security.N…

最优二叉搜索树【东北大学oj数据结构10-4】C++

题面 最优二叉搜索树是由 n 个键和 n1 个虚拟键构造的二叉搜索树,以最小化搜索操作的成本期望值。 给定一个序列 Kk1​,k2​,...,kn​,其中 n 个不同的键按排序顺序 ,我们希望构造一个二叉搜索树。 对于每个关键 ki​,我们有一个…

基于Spring Boot的旅游推荐系统

一、系统背景与意义 随着旅游业的快速发展,旅游信息在种类和数量上不断增多,管理难度也在增大。基于Spring Boot的旅游推荐系统旨在解决这一问题,通过收集、处理和分析旅游数据,为用户推荐符合其偏好和需求的旅游线路&#xff0c…

如何使用 Django 框架创建简单的 Web 应用?

Django是一个高级的Python Web框架,它鼓励快速开发和干净、实用的设计。 下面,我将详细介绍如何使用Django创建一个简单的Web应用,并提供一些日常开发中的合理化使用建议及注意事项。 一、创建Django项目和应用 安装Django 首先&#xff…