在uni-app中使用手机号一键登录

news2025/2/28 6:36:32

1、首先需要在dcloud开发者控制台开通一键登录

https://dev.dcloud.net.cn/uniLogin

开通一键登录服务, 获取关键最关键的两个参数 ApiKey 和 ApiSecret

 

真机调试无需添加应用,如需打包使用请添加。一键登录应用ID为离线打包时配置的appid

 2、登录云服务空间,创建服务空间,选择云服务商等

https://unicloud.dcloud.net.cn/home

3、在uni-app项目中开通uniCloud服务【关联云空间选择阿里云或腾讯云】

 

4、新建云函数  创建 getPhoneNumber

 

 新建云函数后会有一个index.js【getPhoneNumber/index.js】生成,粘贴以下代码:

'use strict';
// const crypto = require('crypto')
exports.main = async (event, context) => {
	//event为客户端上传的参数
	const res = await uniCloud.getPhoneNumber({
		appid: '__UNI__66AWES5', // 替换成自己开通一键登录的应用的DCloud appid,使用callFunction方式调用时可以不传(会自动取当前客户端的appid),如果使用云函数URL化的方式访问必须传此参数
		provider: 'univerify',
		apiKey: '******', // 在开发者中心开通服务并获取apiKey
		apiSecret: '******', // 在开发者中心开通服务并获取apiSecret
		access_token: event.access_token,
		openid: event.openid
	})

	// 执行用户信息入库等操作,正常情况下不要把完整手机号返回给前端
	// 如果数据库在uniCloud上,可以直接入库
	// 如果数据库不在uniCloud上,可以通过 uniCloud.httpclient API,将手机号通过http方式传递给其他服务器的接口,详见:https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
	//返回数据给客户端
	return {
		code: 0,
		message: '获取手机号成功',
		data:res
	}
}

5、项目右键关联云服务空间  

选择创建的云服务空间

6、关联后上传部署到云空间 

7、勾选一键登录(项目中的 manifest.json)

8、一键登录本地方法

// 手机号一键登录
loginPhone() {
	uni.preLogin({
		provider: 'univerify',
		success(res) { //预登录成功
			// 显示一键登录选项
			console.log(res);
			console.log('999',2222);
			console.log('预登录成功');
			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);
					this.openid = res.authResult.openid;
					this.access_token = res.authResult.access_token;

					console.log(this.openid);
					console.log("access_token",this.access_token);



				// 客户端(调用云函数)  调用云函数来实现整个业务逻辑
				// 在得到access_token后,通过callfunction调用云函数
				uniCloud.callFunction({
					name:"getPhoneNumber",
					data:{
						'openid': this.openid,
						'access_token': this.access_token
					}
				}).then(res=>{
					console.log("获取成功");
					console.log(res); // res 内容则包含手机号码
					// 获取用户的手机号
					this.phoneNumber=res.result.data.phoneNumber;
					console.log(this.phoneNumber);
					console.log(res);

					return utils.request(
						"/api/api.php?action=phonelogin", //接口
						"POST",
					 	{
					 		'参数'
					 	},
						false, true, true)
					 	.then(res => {
					 		uni.closeAuthView() //成功关闭授权页面
					 		console.log('登录成功', res)
					 		console.log(res.code);
					 		if (res.code == 1){
								setTimeout(() => {
					 				uni.redirectTo({
					 					url: '/pages/index/index'
					 				})
					 			}, 500)
							}
					 	})

				}).catch((err)=>{
					// 执行失败
				})
				},
                // 当用户点击自定义按钮时,会触发uni.login的fail回调[点击其他登录方式,可以跳转页面]
				// 判断返回数据执行任意逻辑
				fail(res){  // 登录失败
					console.log(res.errCode)
					console.log(res.errMsg)
                    if (res.code == "30002") {
						console.log('密码登录');
					}else if(res.code == "30008"){
						console.log('自定义按钮登录方式');
					}
				}
			})
		},
		fail(res) { // 预登录失败
			// 不显示一键登录选项(或置灰)
			// 根据错误信息判断失败原因,如有需要可将错误提交给统计服务器
			console.log('失败',2222);
			console.log(res.errCode)
			console.log(res.errMsg)
		}
	});
},

 

可以查看点击一键登录时返回的参数

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

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

相关文章

HTML零基础入门教程(详细)

首先我们先介绍一下网页: 网页时构成网站的基本元素,它通常由图片,链接,文字,声音,视频等元素组成。通常我们看到的网页,常见以.htm或.html后缀结尾的文件,因此我们把它俗称为HTML文…

webpack看这一篇就够了

文章目录今日学习目标1. webpack基本概念webpack能做什么2. webpack的基本使用2.0 创建项目2.1 解决多次引入资源文件2.2 webpack使用2.3_webpack 更新打包3. webpack的配置3.0_webpack-入口和出口3.1_打包流程图3.2_插件-自动生成html文件3.3_mode模式3.3_webpack开发服务器-为…

微信小程序转uniapp的迁移步骤及遇到的问题

目录 前言 一、迁移步骤 第一步:安装miniprogram-to-uniapp 插件 第二步:查看是否安装成功 第三步:使用插件进行转换

vue实现input输入模糊查询(三种方式)

vue实现input输入模糊查询(三种方式) 目录 vue实现input输入模糊查询(三种方式) 1 计算属性实现模糊查询 演示: 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询 演示: 1 计算属性实现模糊查询 vue 中通过计算属性实现模糊查询,创建 html …

微信小程序面试题大全(持续更新)

1.请谈谈微信小程序主要目录和文件的作用? project.config.json:项目配置文件,用的最多的就是配置是否开启https校验App.js:设置一些全局的基础数据等App.json:底部tab,标题栏和路由等设置App.wxss&#x…

呕心沥血 JavaScript知识点梳理大全,超详细 建议收藏!!!

呕心沥血 JavaScript知识点梳理大全,超详细 建议收藏!!! ✴️大家好,我是王同学,爆肝三天三夜王同学把JavaScript 知识点梳理了一遍,文章没有一点套路,只有满满的干货 ✴️如果对你有帮助就给我…

vite.config.js配置-解决跨域问题,以及@vitejs/plugin-vue等报错

开发环境 在配置的过程中踩了很多坑,还是太菜,有些东西弄不明白什么意思。 运行项目时的报错可直接到最下面看vite.config.js文件的注释 目前项目用到的模块并不多,package.json文件如下 {"name": "PsWebV3Abb",&quo…

Vue vue.config.js 的详解与配置

Vue vue.config.js 的详解与配置 1. 为什么要配置 vue.config.js 由于 vue-cli 3 也学习了 rollup 的零配置思路,所以项目初始化后,没有了以前熟悉的 build 目录,也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod…

HTML中的表格和表单(含有示例代码)

表格表格的基本构成标签 table标签&#xff1a;表格标签 caption标签&#xff1a;表格标题tr标签&#xff1a;表格中的行 th标签:表格的表头 td标签&#xff1a;表格单元格表格的基本结构 <table>定义表格 <caption>表格标题</caption><tr>定义表行 &l…

vue3 + vite 性能优化 ( 从5s -> 0.5s )

Ⅰ、Vue Vite 构建项目性能优化 vite 相比于 webpack 优势显著&#xff1b;然而 社区&#xff0c;却 不够成熟 &#xff0c;参考资料较少&#xff1b;如何让vue vite 构建项目变的 访问秒开 &#xff08;要想足够快&#xff0c;就是让首次加载足够小&#xff09;&#xff0c…

安装nvm,并使用nvm安装nodejs及配置环境变量

一、安装nvm 1.下载nvm 解压后点击exe文件进行安装&#xff1a; 2、点击下一步安装到 D:\NVM 下 3、先在D:\NVM 下创建nodejs文件夹&#xff0c;然后将路径设置如下&#xff1a; 4、点击next 一直点击 完成安装&#xff1b; 5、找到指定nvm打开后&#xff1a; 给该文件添加这…

关于 Token 过期问题的两种解决方案

对于token过期&#xff0c;我们有两种方案&#xff1a; 方案一&#xff1a;当我们操作某个需要token作为请求头的接口时&#xff0c;返回的数据错误error.response.status 401&#xff0c;说明我们的token已经过期了。 我们希望当响应返回的数据是401身份过期时&#xff0c;让…

【学Vue就跟玩一样】如何使用vue中的消息订阅与发布,如何使用vue实现动画效果

一&#xff0c;消息订阅与发布1.什么是消息订阅与发布消息订阅与发布是一种组件间通信的方式&#xff0c;适用于任意组件间通信。能更好的实现组件间通信&#xff08;消息订阅与发布就像是送报员一样。好比小a向报社订阅了一份报纸&#xff0c;然后在报社留下了自己的信息&…

Web 开发与搜索引擎优化,你应该选择哪一个?

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】** 目录什么是搜索引…

什么是BFC,他有什么用?

1、什么是BFC BFC - Block Formatting Context 块级格式化上下文 BFC的定义&#xff0c;在官方文档到中是这么介绍的&#xff1a;一个BFC区域包含创建该上下文元素的所有子元素&#xff0c;但是不包括创建了新的BFC的子元素的内部元素&#xff0c;BFC是一块块独立的渲染区域&a…

【Three.js基础】创建场景、渲染场景、创建轨道控制器(一)

&#x1f431; 个人主页&#xff1a;不叫猫先生 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4ab;系列专栏&#xff1a;vue3从入门…

Web服务器配置管理

作者&#xff1a;敲代码の流川枫 博客主页&#xff1a;流川枫的博客 专栏&#xff1a;和我一起学java 语录&#xff1a;Stay hungry stay foolish 工欲善其事必先利其器&#xff0c;给大家介绍一款超牛的斩获大厂offer利器——牛客网 点击免费注册和我一起刷题吧 文章目录…

CSS,HTML,JS 以及Vue前端面试题八股文总结【看完你就变高手】

■ 符号说明&#x1f498; 主题&#x1f31f; 常见重要&#x1f31b; 需要有印象的&#x1f195; v3新特性■ 杂谈&#x1f31b; SEO优化合理的title、description、keywords&#xff1a;搜索对着三项的权重逐个减小&#xff0c;title值强调重点即可&#xff1b;description把页…

vue3面试题:2022 最新前端 Vue 3.0 面试题及答案(持续更新中……)

1、 Vue2.0 和 Vue3.0 有什么区别&#xff1f; 响应式系统的重新配置&#xff0c;使用代理替换对象.define属性&#xff0c;使用代理优势&#xff1a; 可直接监控阵列类型的数据变化监听的目标是对象本身&#xff0c;不需要像Object.defineProperty那样遍历每个属性&#xff0…

20分钟上手ES6,不会ES6好意思说自己会JS ?

✍&#x1f3fc;作者&#xff1a;周棋洛&#xff0c;大二计算机学生 ♉星座&#xff1a;金牛座 &#x1f3e0;主页&#xff1a;点击查看更多 &#x1f310;关键&#xff1a;ES6 javascript 前端 文章目录理解ES6ES6 块级作用域 letES6 解构数组ES6 解构对象ES6 模板字符串ES6 判…