【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', //填写你自己的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官网

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

具体代码如下:

'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官网

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.rhkb.cn/news/494746.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

干货分享:ISO 20000认证的适用范围、认证资料清单、认证流程等问题详解

编辑:石芸姗 审核:贺兆普 在当今这个数字化时代,信息技术(IT)已成为企业运营与发展的核心驱动力。随着技术的不断进步和业务需求的日益复杂,企业对IT服务的质量、效率及安全性提出了更高要求。 信息技术服…

Element-plus表格使用总结

这里我使用的是Vue工程进行开发学习,安装需要通过包管理器进行下载 npm install element-plus --save 然后在main.js中配置文件即可使用,如果在引入index.css时没有提示,无需担心,直接写index.css即可导入样式。 Table表格 表格…

CNN和Transfomer介绍

文章目录 CNN和Transfomer介绍CNN和Transfomer的区别1. **基本概念**2. **数据处理方式**3. **模型结构差异**4. **应用场景区别** 自注意力机制1. **自注意力机制的概念**2. **自注意力机制的实现步骤**3. **自注意力机制的优势** Transformer结构组成1. **多头注意力层&#…

如何解决 ‘adb‘ 不是内部或外部命令,也不是可运行的程序或批处理文件的问题

在cmd中输入 adb ,显示 ‘adc‘ 不是内部或外部命令,也不是可运行的程序或批处理文件的问题 解决办法:在环境变量中添加adb所在的路径 1、找到 adb.exe 的所在的文件路径,一般在 Android 安装目录下 \sdk\platform-tools\adb.exe…

数据结构---------二叉树前序遍历中序遍历后序遍历

以下是用C语言实现二叉树的前序遍历、中序遍历和后序遍历的代码示例&#xff0c;包括递归和非递归&#xff08;借助栈实现&#xff09;两种方式&#xff1a; 1. 二叉树节点结构体定义 #include <stdio.h> #include <stdlib.h>// 二叉树节点结构体 typedef struct…

网络架构与IP技术:4K/IP演播室制作的关键支撑

随着科技的不断发展&#xff0c;广播电视行业也在不断迭代更新&#xff0c;其中4K/IP演播室技术的应用成了一个引人注目的焦点。4K超高清技术和IP网络技术的结合&#xff0c;不仅提升了节目制作的画质和效果&#xff0c;还为节目制作带来了更高的效率和灵活性。那么4K超高清技术…

MySQL 8.0:explain analyze 分析 SQL 执行过程

介绍 MySQL 8.0.16 引入一个实验特性&#xff1a;explain formattree &#xff0c;树状的输出执行过程&#xff0c;以及预估成本和预估返 回行数。在 MySQL 8.0.18 又引入了 EXPLAIN ANALYZE&#xff0c;在 formattree 基础上&#xff0c;使用时&#xff0c;会执行 SQL &#…

观察者模式(sigslot in C++)

大家&#xff0c;我是东风&#xff0c;今天抽点时间整理一下我很久前关注的一个不错的库&#xff0c;可以支持我们在使用标准C的时候使用信号槽机制进行观察者模式设计&#xff0c;sigslot 官网&#xff1a; http://sigslot.sourceforge.net/ 本文较为详尽探讨了一种观察者模…

【已解决】黑马点评项目Redis版本替换过程中误删数据库后前端显示出现的问题

为了实现基于Redis的Stream结构作为消息队列&#xff0c;实现异步秒杀下单的功能&#xff0c;换Redis版本 Redis版本太旧了&#xff0c;所以从3.2.1换成了5.0.14 此时犯了一个大忌&#xff0c;因为新的Redis打开后&#xff0c;没有缓存&#xff0c;不知道出了什么问题&#xf…

基于Spring Boot的九州美食城商户一体化系统

一、系统背景与目标 随着美食城行业的快速发展&#xff0c;传统的管理方式已经难以满足日益增长的管理需求和用户体验要求。因此&#xff0c;九州美食城商户一体化系统应运而生&#xff0c;旨在通过信息化、智能化的管理方式&#xff0c;实现美食城的商户管理、菜品管理、订单…

springboot vue 会员营销系统

springboot vue 会员营销系统介绍 演示地址&#xff1a; 开源版本&#xff1a;http://8.146.211.120:8083/ 完整版本&#xff1a;http://8.146.211.120:8086/ 移动端 http://8.146.211.120:8087/ 简介 欢迎使用springboot vue会员营销系统。本项目包含会员储值卡、套餐卡、计…

HarmonyOS NEXT 技术实践-基于意图框架服务实现智能分发

在智能设备的交互中&#xff0c;如何准确理解并及时响应用户需求&#xff0c;成为提升用户体验的关键。HarmonyOS Next 的意图框架服务&#xff08;Intents Kit&#xff09;为这一目标提供了强大的技术支持。本文将通过一个项目实现的示例&#xff0c;展示如何使用意图框架服务…

sfnt-pingpong -测试网络性能和延迟的工具

sfnt-pingpong 是一个用于测试网络性能和延迟的工具&#xff0c;通常用于测量不同网络环境下的数据包传输性能、吞吐量、延迟等指标。 它通常是基于某种网络协议&#xff08;如 TCP&#xff09;执行“ping-pong”式的测试&#xff0c;即客户端和服务器之间相互发送数据包&…

前端下载文件的几种方式使用Blob下载文件

前端下载文件的几种方式 使用Blob下载文件 在前端下载文件是个很通用的需求&#xff0c;一般后端会提供下载的方式有两种&#xff1a; 1.直接返回文件的网络地址&#xff08;一般用在静态文件上&#xff0c;比如图片以及各种音视频资源等&#xff09; 2.返回文件流&#xff08;…

智能座舱进阶-应用框架层-Jetpack主要组件

Jetpack的分类 1. DataBinding&#xff1a;以声明方式将可观察数据绑定到界面元素&#xff0c;通常和ViewModel配合使用。 2. Lifecycle&#xff1a;用于管理Activity和Fragment的生命周期&#xff0c;可帮助开发者生成更易于维护的轻量级代码。 3. LiveData: 在底层数据库更…

知乎 PB 级别 TiDB 数据库集群管控实践

以下文章来源于知乎技术专栏 &#xff0c;作者代晓磊 导读 在现代企业中&#xff0c;数据库的运维管理至关重要&#xff0c;特别是面对分布式数据库的复杂性和大规模集群的挑战。作为一款兼容 MySQL 协议的分布式关系型数据库&#xff0c;TiDB 在高可用、高扩展性和强一致性方…

SpringBoot 自动装配原理及源码解析

目录 一、引言 二、什么是 Spring Boot 的自动装配 三、自动装配的核心注解解析 3.1 SpringBootApplication 注解 &#xff08;1&#xff09;SpringBootConfiguration&#xff1a; &#xff08;2&#xff09;EnableAutoConfiguration&#xff1a; &#xff08;3&#xf…

C++中的字符串实现

短字符串优化(SSO) 实现1 实现2 写时复制 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<cstdio> #include<cstring> #include<cstring> using std::cout; using std::endl;// 引用计数存放的位置 // 1. 存放在栈上 --- 不行 // 2. 存…

Linux 基本使用和程序部署

1. Linux 环境搭建 1.1 环境搭建方式 主要有 4 种&#xff1a; 直接安装在物理机上。但是Linux桌面使用起来非常不友好&#xff0c;所以不建议。[不推荐]。使用虚拟机软件&#xff0c;将Linux搭建在虚拟机上。但是由于当前的虚拟机软件(如VMWare之类的)存在一些bug&#xff…

环网冗余CAN转光纤 CAN光端机在风电项目应用

在风力发电项目中&#xff0c;所有的风机内部的状态都需要能够在中控室备被监控到&#xff0c;不论是风机的工作状态还是风机内部的消防状态&#xff0c;以便中控室的工作人员都够根据观测到的信息及时的做出反应&#xff0c;避免造成重大损失。 通常风机的工作信息通过将网口…