uniapp手机号一键登录保姆级教程（包含前端和后端）

news2025/6/13 11:14:27

目录

  • 前置条件
  • 创建uniapp项目并关联uniClound云空间
  • 开启一键登录模块并开通一键登录服务
  • 编写云函数并上传部署
  • 获取手机号流程
    • (第一种) 前端直接调用云函数获取手机号
    • （第三种）后台调用云函数获取手机号
  • 错误码
  • 常见问题

前置条件

  1. 手机安装有sim卡
  2. 手机开启数据流量（与wifi无关，不要求关闭wifi，但数据流量不能禁用。）
  3. 开通uniCloud服务（但不要求所有后台代码都使用uniCloud）

创建uniapp项目并关联uniClound云空间

新建uniapp项目，勾选下面“启用uniClound”，选择其中一个云服务商即可。
在这里插入图片描述
如果在已有项目中启用uniClound，可直接右键项目文件夹，选择“创建uniClound云开发环境”。
在这里插入图片描述
创建好uniClound云开发环境后，会在项目目录中增加一个“uniClound”的文件夹，右键该文件夹，选择“关联云服务空间或项目”。
在这里插入图片描述
如果还没有相应的云服务空间，可以选择新建云服务空间
在这里插入图片描述
打开uniClound官网开发者后台，选择“新建服务空间”
在这里插入图片描述
目前阿里云还是免费的，直接选择“立即购买”，
在这里插入图片描述
购买之后，在前端再次刷新云服务空间，即可看到新购的服务空间，选择并关联即可。
在这里插入图片描述

开启一键登录模块并开通一键登录服务

打开项目的“manifest.json”，选择“App模块配置”，勾选“OAuth（登录授权）”
在这里插入图片描述
在uniClound官网开发者后台开通一键登录服务，然后选择“账户信息”，并完成充值。
在这里插入图片描述
余额充值
在这里插入图片描述
充值之后，打开“应用管理”，点击添加应用
在这里插入图片描述
填写应用相关信息后，点击“提交申请”，审核可能会需要几个小时时间
在这里插入图片描述
如果还没有Android包名，按图点击前往创建。
在这里插入图片描述
会跳到应用列表页，点击自己的应用名称进入详情。
在这里插入图片描述
选择“Android云端证书”，选择创建证书
在这里插入图片描述
点击证书详情，记住“MD5”，“SHA1”和“SHA256”。
在这里插入图片描述
点击“各平台信息”，完善上面的“MD5”，“SHA1”和“SHA256”等信息即可。
在这里插入图片描述

编写云函数并上传部署

回到项目，右键“cloundfunctions”,新建云函数/云对象，取名“getPhoneNumber”(函数名可自定义）。
在这里插入图片描述
打开“getPhoneNumber”文件夹下的“index.js”,编写如下代码。
在这里插入图片描述
复制下面代码，修改成自己的DClound appid即可

'use strict';
exports.main = async (event, context) => {
	// event里包含着客户端提交的参数
	let data = await uniCloud.getPhoneNumber({
		appid: '__UNI__AAAAAA', // 替换成自己开通一键登录的应用的DCloud appid，使用callFunction方式调用时可以不传（会自动取当前客户端的appid），如果使用云函数URL化的方式访问必须传此参数
		provider: 'univerify',
		access_token: event.access_token,
		openid: event.openid
	})
	return data//返回的data里包含手机号
}

自HBuilderX
3.4.0起，一键登录相关功能移至扩展库uni-cloud-verify内。在一段时间内无论开发者是否使用扩展库云函数都可以正常使用uniCloud.getPhoneNumber。HBuilderX 3.4.0及之后的版本上传云函数时如果没有指定使用uni-cloud-verify扩展库的云函数将无法调用uniCloud.getPhoneNumber接口。

关于扩展库的说明见：云函数扩展库

在云函数的package.json内添加uni-cloud-verify的引用即可为云函数启用此扩展，无需做其他调整，完整的package.json示例如下：

{
  "name": "univerify",
  "extensions": {
    "uni-cloud-verify": {} // 启用一键登录扩展，值为空对象即可
  }
}

写完后，右键“cloudfunctions”，上传所有云函数。
在这里插入图片描述

获取手机号流程

在这里插入图片描述

(第一种) 前端直接调用云函数获取手机号

这里写一个简单的登录功能。

<template>
	<view>
		<button @tap="goLogin">手机号一键登录</button>
	</view>
</template>

<script setup>
	//手机号一键登录事件
		function goLogin() {
			uni.login({
				provider: 'univerify',
				univerifyStyle: { // 自定义登录框样式
					//参考`univerifyStyle 数据结构`
					"fullScreen": true, // 是否全屏显示，默认值： false
					"title": '快速登录',
					"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
					"icon": {
						"path": "../../static/my/头像.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
					},
					"phoneNum": {
						"color": "#000000", // 手机号文字颜色 默认值：#000000
						"fontSize": "18" // 手机号字体大小 默认值：18
					},
					"slogan": {
						"color": "#8a8b90", //  slogan 字体颜色 默认值：#8a8b90
						"fontSize": "12" // slogan 字体大小 默认值：12
					},
					// 一键登录
					"authButton": {
						"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
						"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
						"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
						"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
						"title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
					},
					// 其他登录方式
					"otherLoginButton": {
						"visible": "true", // 是否显示其他登录按钮，默认值：true
						"normalColor": "#f8f8f8", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
						"highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值：#dedede
						"textColor": "#000000", // 其他登录按钮文字颜色 默认值：#000000
						"title": "密码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
						"borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
						"borderColor": "#c5c5c5" //边框颜色 默认值： #c5c5c5（仅ios支持）
					},
					// 自定义按钮登录方式
					"buttons": { // 仅全屏模式生效，配置页面下方按钮  （3.1.14+ 版本支持）  
						"iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px  
						"list": [{
								"provider": "apple",
								"iconPath": "/static/test.jpg", // 图标路径仅支持本地图片  
							},
							{
								"provider": "weixin",
								"iconPath": "/static/test.jpg",
							}
						]
					},
					"privacyTerms": {
						"defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true
						"textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90
						"termsColor": "#1d4788", //  协议文字颜色 默认值： #1d4788
						"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
						"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
						"fontSize": "12", // 字体大小 默认值：12,
						"privacyItems": [
							// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
							{
								"url": "https://", // 点击跳转的协议详情页面
								"title": "用户服务协议" // 协议名称
							}
						]
					}
				},
				success(res) { // 登录成功
					console.log(res);
					let openid = res.authResult.openid; //拿到openid
					let access_token = res.authResult.access_token; //拿到access_token
					console.log(openid)
					console.log(access_token)
					
					// 在得到access_token和openid后，通过callfunction调用云函数
					uniCloud.callFunction({
						name: "getPhoneNumber",
						data: {
							openid,
							access_token
						}
					}).then(res1 => {
						console.log("获取成功");
						console.log(res1);
						// 获取用户的手机号
						let phoneNumber = res1.result.phoneNumber;
						//接下来就进行你自己的操作
						//...
						//...
					}).catch((err) => {
						// 执行失败后的操作
						//...
						//...
					})
				},
				// 当用户点击自定义按钮时，会触发uni.login的fail回调[点击其他登录方式，可以跳转页面，或执行事件]
				fail(res) { // 登录失败
					console.log(res.code)
					if (res.code == "30002") {
						console.log('账号密码登录');
					}
				}
			})
		}
</script>

（第三种）后台调用云函数获取手机号

后台代码

// 以nodejs为例
const crypto = require('crypto')

const secret = 'your-secret-string' // 自己的密钥不要直接使用示例值，且注意不要泄露
const hmac = crypto.createHmac('sha256', secret);

// 自有服务器生成签名，并以GET方式发送请求
const params = {
  access_token: 'xxx', // 客户端传到自己服务器的参数
  openid: 'xxx'
}
// 字母顺序排序后拼接签名串
const signStr = Object.keys(params).sort().map(key => {
  return `${key}=${params[key]}`
}).join('&')
hmac.update(signStr);
const sign = hmac.digest('hex')
// 最终请求如下链接，其中https://xxxx/xxx为云函数Url化地址
// https://xxxx/xxx?access_token=xxx&openid=xxx&sign=${sign} 其中${sign}为上一步得到的sign值

云函数Url化地址设置可修改。
在这里插入图片描述
在这里插入图片描述

对应云函数“index.js”，修改如下：

// 云函数验证签名，此示例中以接受GET请求为例作演示
const crypto = require('crypto')
exports.main = async function (event){

  const secret = 'your-secret-string' // 自己的密钥不要直接使用示例值，且注意不要泄露
  const hmac = crypto.createHmac('sha256', secret);

  let params = event.queryStringParameters
  const sign = params.sign
  delete params.sign
  const signStr = Object.keys(params).sort().map(key => {
    return `${key}=${params[key]}`
  }).join('&')

  hmac.update(signStr);

  if(sign!==hmac.digest('hex')){
    throw new Error('非法访问')
  }

  const {
    access_token,
    openid
  } = params
  const res = await uniCloud.getPhoneNumber({
    provider: 'univerify',
    appid: 'xxx', // DCloud appid
    access_token: event.queryStringParameters.access_token,
    openid: event.queryStringParameters.openid
  })
  // 返回手机号给自己服务器
  return res
}

注意：云函数修改之后，右键“getPhoneNumber”，上传部署才能生效。

前端代码：

uni.login({
		provider: 'univerify', 
		success: function(res) {
			console.log('LOGINres----', res);
			let data = {
				accessToken: res.authResult.access_token,
				openId: res.authResult.openid
			}
			console.log('data----', data);
			uni.request({
				url: 'https://xxxxx/xxx', //自己应用服务器的请求地址
				data: {
					data: JSON.stringify(data)
				},
				method: "POST",
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				success: function(r) {
					console.log('结果---', r)
					//获取登录成功的token，并保存在前端
				},
				fail: function(err) {
					console.log('err--', err);
				}
			})
		},
		fail: function(err) {
			console.log('err', err);
		}
	})

错误码

在这里插入图片描述
30004

login:fail -20102其他错误 Android：
1.确认开发者中心一键登录已添加应用并审核通过
2.检查开通一键登录时使用的签名证书和云打包时使用的签名证书一致

常见问题

  1. 后台请求云函数获取手机号报错：Error: Parameter access_token is required
    (1)首先检查后端是否传了access_token。
    (2)检查前端云函数的“index.js”的openid和access_token的获取方式要加上“queryStringParameters”。并确保修改“index.js”文件后要右键上传部署才生效。
    在这里插入图片描述

参考：
1.官网：https://uniapp.dcloud.net.cn/univerify.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2407204.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Linux】Linux 系统默认的目录及作用说明

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…
阅读更多...
RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…
阅读更多...
搭建DNS域名解析服务器(正向解析资源文件)

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…
阅读更多...
mac 安装homebrew (nvm 及git)

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…
阅读更多...
【C++进阶篇】智能指针

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…
阅读更多...
接口自动化测试：HttpRunner基础

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…
阅读更多...
STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…
阅读更多...
【JVM】Java虚拟机（二）——垃圾回收

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…
阅读更多...
并发编程 - go版

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…
阅读更多...
免费数学几何作图web平台

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…
阅读更多...
基于Springboot+Vue的办公管理系统

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…
阅读更多...
Linux nano命令的基本使用

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …
阅读更多...
Razor编程中@Html的方法使用大全

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …
阅读更多...
Windows安装Miniconda

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客
阅读更多...
iview框架主题色的应用

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…
阅读更多...
Golang——6、指针和结构体

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…
阅读更多...
三分算法与DeepSeek辅助证明是单峰函数

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…
阅读更多...
宇树科技，改名了！

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…
阅读更多...
【网络安全】开源系统getshell漏洞挖掘

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…
阅读更多...
uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023