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

    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】生成，粘贴以下代码：

    1. 'use strict';
    2. // const crypto = require('crypto')
    3. exports.main = async (event, context) => {
    4. 	//event为客户端上传的参数
    5. 	const res = await uniCloud.getPhoneNumber({
    6. 		appid: '__UNI__66AWES5', // 替换成自己开通一键登录的应用的DCloud appid，使用callFunction方式调用时可以不传（会自动取当前客户端的appid），如果使用云函数URL化的方式访问必须传此参数
    7. 		provider: 'univerify',
    8. 		apiKey: '******', // 在开发者中心开通服务并获取apiKey
    9. 		apiSecret: '******', // 在开发者中心开通服务并获取apiSecret
    10. 		access_token: event.access_token,
    11. 		openid: event.openid
    12. 	})
    13.  
    14. 	// 执行用户信息入库等操作，正常情况下不要把完整手机号返回给前端
    15. 	// 如果数据库在uniCloud上，可以直接入库
    16. 	// 如果数据库不在uniCloud上，可以通过 uniCloud.httpclient API，将手机号通过http方式传递给其他服务器的接口，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
    17. 	//返回数据给客户端
    18. 	return {
    19. 		code: 0,
    20. 		message: '获取手机号成功',
    21. 		data:res
    22. 	}
    23. }
    24.

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

    选择创建的云服务空间

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

    7、勾选一键登录（项目中的 manifest.json）

    8、一键登录本地方法

    1. // 手机号一键登录
    2. loginPhone() {
    3. 	uni.preLogin({
    4. 		provider: 'univerify',
    5. 		success(res) { //预登录成功
    6. 			// 显示一键登录选项
    7. 			console.log(res);
    8. 			console.log('999',2222);
    9. 			console.log('预登录成功');
    10. 			uni.login({
    11. 				provider: 'univerify',
    12. 				univerifyStyle: { // 自定义登录框样式
    13. 					//参考`univerifyStyle 数据结构`
    14.                     "fullScreen": true, // 是否全屏显示，默认值： false
    15. 					"title": '快速登录',
    16. 					"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
    17. 					"icon": {
    18. 						"path": "../../static/my/头像.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
    19. 					},
    20. 					"phoneNum": {
    21. 						"color": "#000000", // 手机号文字颜色 默认值：#000000
    22. 						"fontSize": "18" // 手机号字体大小 默认值：18
    23. 					},
    24. 					"slogan": {
    25. 						"color": "#8a8b90", //  slogan 字体颜色 默认值：#8a8b90
    26. 						"fontSize": "12" // slogan 字体大小 默认值：12
    27. 					},
    28.                     // 一键登录
    29. 					"authButton": {
    30. 						"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
    31. 						"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
    32. 						"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
    33. 						"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
    34. 						"title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
    35. 					},
    36.                     // 其他登录方式
    37. 					"otherLoginButton": {
    38. 						"visible": "true", // 是否显示其他登录按钮，默认值：true
    39. 						"normalColor": "#f8f8f8", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
    40. 						"highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值：#dedede
    41. 						"textColor": "#000000", // 其他登录按钮文字颜色 默认值：#000000
    42. 						"title": "密码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
    43. 						"borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
    44. 						"borderColor": "#c5c5c5" //边框颜色 默认值： #c5c5c5（仅ios支持）
    45. 					},
    46.                     // 自定义按钮登录方式
    47.                     "buttons": { // 仅全屏模式生效，配置页面下方按钮  （3.1.14+ 版本支持）  
    48. 						"iconWidth": "45px",        // 图标宽度（高度等比例缩放） 默认值：45px  
    49. 						"list": [{  
    50. 							    "provider": "apple",
    51. 							    "iconPath": "/static/test.jpg",  // 图标路径仅支持本地图片  
    52. 						    },  
    53. 							{  
    54. 								"provider": "weixin",
    55. 								"iconPath": "/static/test.jpg",  
    56. 							}  
    57. 						]  
    58. 					},
    59. 					"privacyTerms": {
    60. 						"defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true
    61. 						"textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90
    62. 						"termsColor": "#1d4788", //  协议文字颜色 默认值： #1d4788
    63. 						"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
    64. 						"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
    65. 						"fontSize": "12", // 字体大小 默认值：12,
    66. 						"privacyItems": [
    67. 							// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
    68. 							{
    69. 								"url": "https://", // 点击跳转的协议详情页面
    70. 								"title": "用户服务协议" // 协议名称
    71. 							}
    72. 						]
    73. 					}
    74. 				},
    75. 				success(res) { // 登录成功
    76. 					console.log(res);
    77. 					this.openid = res.authResult.openid;
    78. 					this.access_token = res.authResult.access_token;
    79.  
    80. 					console.log(this.openid);
    81. 					console.log("access_token",this.access_token);
    82.  
    83.  
    84.  
    85. 				// 客户端(调用云函数)  调用云函数来实现整个业务逻辑
    86. 				// 在得到access_token后，通过callfunction调用云函数
    87. 				uniCloud.callFunction({
    88. 					name:"getPhoneNumber",
    89. 					data:{
    90. 						'openid': this.openid,
    91. 						'access_token': this.access_token
    92. 					}
    93. 				}).then(res=>{
    94. 					console.log("获取成功");
    95. 					console.log(res); // res 内容则包含手机号码
    96. 					// 获取用户的手机号
    97. 					this.phoneNumber=res.result.data.phoneNumber;
    98. 					console.log(this.phoneNumber);
    99. 					console.log(res);
    100.  
    101. 					return utils.request(
    102. 						"/api/api.php?action=phonelogin", //接口
    103. 						"POST",
    104. 					 	{
    105. 					 		'参数'
    106. 					 	},
    107. 						false, true, true)
    108. 					 	.then(res => {
    109. 					 		uni.closeAuthView() //成功关闭授权页面
    110. 					 		console.log('登录成功', res)
    111. 					 		console.log(res.code);
    112. 					 		if (res.code == 1){
    113. 								setTimeout(() => {
    114. 					 				uni.redirectTo({
    115. 					 					url: '/pages/index/index'
    116. 					 				})
    117. 					 			}, 500)
    118. 							}
    119. 					 	})
    120.  
    121. 				}).catch((err)=>{
    122. 					// 执行失败
    123. 				})
    124. 				},
    125.                 // 当用户点击自定义按钮时，会触发uni.login的fail回调[点击其他登录方式，可以跳转页面]
    126. 				// 判断返回数据执行任意逻辑
    127. 				fail(res){  // 登录失败
    128. 					console.log(res.errCode)
    129. 					console.log(res.errMsg)
    130.                     if (res.code == "30002") {
    131. 						console.log('密码登录');
    132. 					}else if(res.code == "30008"){
    133. 						console.log('自定义按钮登录方式');
    134. 					}
    135. 				}
    136. 			})
    137. 		},
    138. 		fail(res) { // 预登录失败
    139. 			// 不显示一键登录选项（或置灰）
    140. 			// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
    141. 			console.log('失败',2222);
    142. 			console.log(res.errCode)
    143. 			console.log(res.errMsg)
    144. 		}
    145. 	});
    146. },

     

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

    两个注意点补充下：

    • 真机测试的时候选择标准基座，不可以选择自定义基座否则会提醒没添加oauth模块
    • 使用云函数做一键登录时，优先使用云端函数

  • 相关阅读:
    linux CentOs 安装docker 推荐生产环境使用
    Python OpenCV 视频抽帧处理并保存
    学会这个样生成性能测试报告，拿下20k轻轻松松
    c++ 学习 之 继承中静态成员函数和静态成员变量
    【ElasticSearch】基于 Java 客户端 RestClient 实现对 ElasticSearch 索引库、文档的增删改查操作，以及文档的批量导入
    【限时免费】20天拿下华为OD笔试之【单调栈】2023Q1A-天然蓄水池【欧弟算法】全网注释最详细分类最全的华为OD真题题解
    30天自制操作系统（第21天）
    【Java】初识IO流【附导航】
    二叉树的遍历(非递归版)
    Go语言GoFrame+Vue+ElementUI搭建的系统后台框架
  • 原文地址：https://blog.csdn.net/weixin_45990765/article/details/126872544