• Uni-App 快捷登录

    uniapp 实现一键登录前置条件: 开通uniCloud, 开通一键登录功能参考的文档 :
    官网 - 一键登录uniapp指南 : https://uniapp.dcloud.net.cn/univerify.html#%E6%A6%82%E8%BF%B0
    官网 - 一键登录开通指南 : https://ask.dcloud.net.cn/article/37965
    官网 - unicloud使用指南 https://uniapp.dcloud.net.cn/uniCloud/quickstart.html#
    官网 - 一键登录uniCloud使用说明 https://uniapp.dcloud.net.cn/uniCloud/univerify.html#

    一、开通阿里云服务

    二、新建云函数getPhoneNumber

    由于一键登录依赖 verify

     

    编写云函数代码

    1. 'use strict'
    2. const crypto = require('crypto')
    3. exports.main = async (event, context) => {
    4. 	const res = await uniCloud.getPhoneNumber({
    5. 		provider: 'univerify',
    6. 		apiKey: '', // 在开发者中心开通服务并获取apiKey
    7. 		apiSecret: '', // 在开发者中心开通服务并获取apiSecret
    8. 		access_token: event.access_token,
    9. 		openid: event.openid
    10. 	})
    11. 	if(res.phoneNumber){
    12. 		return {
    13. 			code: 0,
    14. 			message: '获取手机号成功',
    15. 			data: res.phoneNumber
    16. 		}
    17. 	} else {
    18. 		return {
    19. 			code: result.data.code,
    20. 			message: result.data.msg,
    21. 			data: result.data.data
    22. 		}
    23. 	}
    24. }

    三、配置 uni-app项目

     

     

    四、编写getPhoneLogin.js

    1. export default{
    2. 	methods:{
    3. 		async oneClickLogin() {
    4. 			await this.preLogin(true)
    5. 			uni.login({
    6. 				provider: 'univerify',
    7. 				univerifyStyle: {
    8. 					fullScreen: false,
    9. 					backgroundColor: '#ffffff',
    10. 					otherLoginButton: {
    11. 						// 是否显示其他登录按钮
    12. 						visible: false
    13. 					},
    14. 					icon: {
    15. 						"path":"static/logo.png",
    16. 						"width":  "60px",
    17. 						"height": "60px" 
    18. 					},
    19. 					authButton: {
    20. 						normalColor: '#2dc8a1'
    21. 					},
    22. 					privacyTerms: {
    23. 						defaultCheckBoxState: false
    24. 					}
    25. 				},
    26. 				success(res) {
    27. 					uniCloud.callFunction({
    28. 						name: 'getPhoneNumber',
    29. 						data: {
    30. 							access_token: res.authResult.access_token,
    31. 							openid: res.authResult.openid
    32. 						}
    33. 					}).then(async (dataRes) => {
    34. 						if (dataRes.result.code == 0) {
    35. 							setTimeout(async () => {
    36. 								uni.closeAuthView()
    37. 							}, 1000)
    38. 						} else {
    39. 		                    uni.showToast({
    40. 								title: dataRes.result.message,
    41. 								icon: 'none'
    42. 							})
    43. 						}
    44. 					}).catch((err) => {
    45. 						uni.showModal({
    46. 							title: '登录失败',
    47. 							content: err.errMsg,
    48. 							showCancel: false,
    49. 							success() {
    50. 								uni.closeAuthView()
    51. 							}
    52. 						})
    53. 					})
    54. 				},
    55. 				fail(err) {
    56. 					if (err.errCode != 30002 && err.errCode != '30003' && err.errCode != '30006') {
    57. 						uni.showModal({
    58. 							title: '登录失败',
    59. 							content: err.errMsg,
    60. 							showCancel: false,
    61. 							success() {
    62. 								// 客户端关闭一键登录授权界面
    63. 								uni.closeAuthView()
    64. 							}
    65. 						})
    66. 					}
    67. 				}
    68. 			})
    69. 		},
    70. 		
    71. 		/**
    72. 		 * 预登录
    73. 		 * 1、预登录操作可以判断当前设备环境是否支持一键登录，如果能支持一键登录，此时可以显示一键登录选项，同时预登录会准备好相关环境，显著提升显示授权登录界面的速度。
    74. 		 * 2、如果当前设备环境不支持一键登录，此时应该显示其他的登录选项。
    75. 		 * 3、如果手机没有插入有效的sim卡，或者手机蜂窝数据网络关闭，都有可能造成预登录校验失败。
    76. 		 * @param Boolean isShowMsg: 是否显示错误提示
    77. 		 */
    78. 		preLogin(isShowMsg = false) {
    79. 			return new Promise((resolve, reject) => {
    80. 				uni.preLogin({
    81. 					provider: 'univerify',
    82. 					success() {
    83. 		                this.isOneClickLogin = true
    84. 						resolve(true)
    85. 					},
    86. 					fail(err) {
    87. 						// 如果手机没有插入有效的sim卡，或者手机蜂窝数据网络关闭，都有可能造成预登录校验失败。
    88. 		                this.isOneClickLogin = false
    89. 						if (isShowMsg && err.errMsg != 'login:ok') {
    90. 							// 不同运营商 返回的报错字段不同
    91. 							uni.showModal({
    92. 								title: '当前设备环境不支持一键登录',
    93. 								content: err.errMsg || err.metadata.resultMsg || err.metadata.error_data || err.metadata.resultDesc ||
    94. 									'请检查是否插入有效sim卡及开启蜂窝数据网络',
    95. 								showCancel: false
    96. 							})
    97. 						}
    98. 						resolve(false)
    99. 					}
    100. 				})
    101. 			})
    102. 		}
    103. 	}
    104. }

    也可成功后自己请求自己的 后台接口

    1. async oneClickLogin() {
    2. 				await this.preLogin(true)
    3.  
    4. 				uni.login({
    5. 					provider: 'univerify',
    6. 					univerifyStyle: {
    7. 						fullScreen: true,
    8. 						backgroundColor: '#ffffff',
    9. 						otherLoginButton: {
    10. 							// 是否显示其他登录按钮
    11. 							visible: false
    12. 						},
    13. 						authButton: {
    14. 							normalColor: '#2dc8a1'
    15. 						},
    16. 						privacyTerms: {
    17. 							// 条款勾选框初始状态
    18. 							defaultCheckBoxState: false,
    19. 							privacyItems: [{
    20. 									url: 'https://xxx/agreement.html',
    21. 									title: '用户服务协议'
    22. 								},
    23. 								{
    24. 									url: 'https://xxx/privacypolicy.html',
    25. 									title: '隐私政策'
    26. 								}
    27. 							]
    28. 						}
    29. 					},
    30. 					success(res) {
    31. 						uniCloud.callFunction({
    32. 							name: 'login',
    33. 							data: {
    34. 								access_token: res.authResult.access_token,
    35. 								openid: res.authResult.openid,
    36. 								serversUrl: '这里上传你的接口地址'
    37. 							}
    38. 						}).then(async (dataRes) => {
    39. 							if (dataRes.result.code == 0) {
    40.                                 // 这里写你登录成功后的逻辑 ...
    41.  
    42. 								uni.showToast({
    43. 									title: '登录成功',
    44. 									icon: 'success'
    45. 								})
    46.  
    47. 								uni.setStorageSync('token', dataRes.result.data.access_token)
    48.  
    49. 								setTimeout(async () => {
    50. 									uni.closeAuthView()
    51. 									uni.navigateBack()
    52. 								}, 1000)
    53. 							} else {
    54.                                 uni.showToast({
    55. 									title: dataRes.result.message,
    56. 									icon: 'none'
    57. 								})
    58. 							}
    59. 						}).catch((err) => {
    60. 							uni.showModal({
    61. 								title: '登录失败',
    62. 								content: err.errMsg,
    63. 								showCancel: false,
    64. 								success() {
    65. 									uni.closeAuthView()
    66. 								}
    67. 							})
    68. 						})
    69. 					},
    70. 					fail(err) {
    71. 						if (err.errCode != 30002 && err.errCode != '30003' && err.errCode != '30006') {
    72. 							uni.showModal({
    73. 								title: '登录失败',
    74. 								content: err.errMsg,
    75. 								showCancel: false,
    76. 								success() {
    77. 									// 客户端关闭一键登录授权界面
    78. 									uni.closeAuthView()
    79. 								}
    80. 							})
    81. 						}
    82. 					}
    83. 				})
    84. 			},

    四、配置参数（可自行配置）

    1. {  
    2.     "fullScreen": false, // 是否全屏显示，默认值： false
    3.     "backgroundColor": "#ffffff",  // 授权页面背景颜色，默认值：#ffffff
    4.     "backgroundImage": "", // 全屏显示的背景图片，默认值："" （仅支持本地图片，只有全屏显示时支持）  
    5.     "icon": {  
    6.         "path": "static/xxx.png", // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
    7.         "width":  "60px",  //图标宽度 默认值：60px
    8.         "height": "60px"   //图标高度 默认值：60px
    9.     },  
    10.     "closeIcon": {  
    11.         "path": "static/xxx.png" // 自定义关闭按钮，仅支持本地图片。 HBuilderX3.3.7+版本支持
    12.     },  
    13.     "phoneNum": {  
    14.         "color": "#202020"  // 手机号文字颜色 默认值：#202020  
    15.     },  
    16.     "slogan": {  
    17.         "color": "#BBBBBB"  //  slogan 字体颜色 默认值：#BBBBBB  
    18.     },  
    19.     "authButton": {  
    20.         "normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5  
    21.         "highlightColor": "#2861c5",  // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  
    22.         "disabledColor": "#73aaf5",  // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  
    23.         "textColor": "#ffffff",  // 授权按钮文字颜色 默认值：#ffffff  
    24.         "title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”  
    25.         "borderRadius": "24px"	// 授权按钮圆角 默认值："24px" （按钮高度的一半）
    26.     },  
    27.     "otherLoginButton": {  
    28.         "visible": true, // 是否显示其他登录按钮，默认值：true  
    29.         "normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明 
    30.         "highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明 
    31.         "textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565  
    32.         "title": "其他登录方式", // 其他登录方式按钮文字 默认值：“其他登录方式”  
    33.         "borderColor": "",  //边框颜色 默认值：透明（仅iOS支持）  
    34.         "borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
    35.     },  
    36.     "privacyTerms": {  
    37.         "defaultCheckBoxState":true, // 条款勾选框初始状态 默认值： true
    38.         "isCenterHint":false, //未勾选服务条款时点击登录按钮的提示是否居中显示 默认值: false (3.7.13+ 版本支持)
    39.         "uncheckedImage":"", // 可选 条款勾选框未选中状态图片（仅支持本地图片 建议尺寸 24x24px）(3.2.0+ 版本支持)   
    40.         "checkedImage":"", // 可选 条款勾选框选中状态图片（仅支持本地图片 建议尺寸24x24px）(3.2.0+ 版本支持)   
    41.         "checkBoxSize":12, // 可选 条款勾选框大小
    42.         "textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB  
    43.         "termsColor": "#5496E3", //  协议文字颜色 默认值： #5496E3  
    44.         "prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”  
    45.         "suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”  
    46.         "privacyItems": [  // 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效  
    47.             {  
    48.                 "url": "https://", // 点击跳转的协议详情页面  
    49.                 "title": "用户服务协议" // 协议名称  
    50.             }  
    51.         ]  
    52.     },
    53.     "buttons": {  // 自定义页面下方按钮仅全屏模式生效（3.1.14+ 版本支持）
    54.         "iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px
    55.         "list": [
    56.             {
    57.                 "provider": "apple",
    58.                 "iconPath": "/static/apple.png" // 图标路径仅支持本地图片
    59.             }, 
    60.             {
    61.                 "provider": "weixin",
    62.                 "iconPath": "/static/wechat.png" // 图标路径仅支持本地图片
    63.             }
    64.         ]
    65.     }
    66. }

    注意：写完后这个uniClound目录是跟我们前端代码放在一起的。云函数代码写完后需要上传部署到云服务空间。 

  • 相关阅读:
    MySQL SQL语法基础
    【无标题】
    应用决策树批量化自动生成【效果好】【非过拟合】的策略集
    美创科技亮相第三届国际零信任峰会，零信任实践获安全革新奖
    专用神经网络处理器芯片,神经网络芯片的单片机
    Ubuntu&win11双系统
    Android位置服务和应用权限
    1157：哥德巴赫猜想
    Jenkins kubernetes(k8s)滚动发布实战
    企业云成本管控，你真的做对了吗？
  • 原文地址：https://blog.csdn.net/qq_42717015/article/details/134180682