uni-app实现一键登录

冷不防 2023-01-11 09:10 102阅读 0赞

### uni-app实现一键登录 ###

*  uni-app实现一键登录
 *  步骤
 *   *  1、开通uni一键登录服务
     *  2、uni-app项目开通uniCloud服务
     *  3、项目开发

# uni-app实现一键登录 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70_pic_center]

# 步骤 #

## 1、开通uni一键登录服务 ##

1）需要登录[DCloud开发者中心][DCloud]，申请开通一键登录服务。（注：已在开发者中心开发了项目应用获取appid）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70]

2）进入基础配置配置相关的信息，我这个是已经配置好了，在获取用户手机号码时需要云服务用到的**ApiKey**和**ApiSecret**可在这里获取  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 1]  
真机调试无需添加应用，如需打包使用请添加。一键登录应用ID为离线打包时配置的appid  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 2]

3）添加服务空间  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 3]

## 2、uni-app项目开通uniCloud服务 ##

1）在uni-app项目中创建云开发环境，可阿里云或者腾讯云（我的是阿里云）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 4]  
2）创建云函数，右键云开发环境创建  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 5]  
3）[云函数使用][Link 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 6]

'use strict';
    exports.main = async (event, context) => { 
    	// event里包含着客户端提交的参数
    	const res = await uniCloud.getPhoneNumber({ 
    		appid: 'xxxxxx', // 替换成自己开通一键登录的应用的DCloud appid，使用callFunction方式调用时可以不传（会自动取当前客户端的appid），如果使用云函数URL化的方式访问必须传此参数
    		provider: 'univerify',
    		apiKey: 'xxxxx', // 在开发者中心开通服务并获取apiKey
    		apiSecret: 'xxxxx', // 在开发者中心开通服务并获取apiSecret
    		access_token: event.access_token,
    		openid: event.openid
    	})
    
    	console.log('res',res); // res里包含手机号
    	// 执行用户信息入库等操作，正常情况下不要把完整手机号返回给前端
    	// 如果数据库在uniCloud上，可以直接入库
    	// 如果数据库不在uniCloud上，可以通过 uniCloud.httpclient API，将手机号通过http方式传递给其他服务器的接口，详见：https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=httpclient
    	return { 
    		code: 0,
    		message: '获取手机号成功',
    		data:res
    	}
    }

4）将云函数上传到云服务器（点击云函数右键上传）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 7]  
5）项目配置（manifest.json中app模块的一键登录勾选）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 8]

## 3、项目开发 ##

1）页面点击一键登录（客户端-预登录）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 9]

<button class="loginPhone" @click="loginPhone">手机号一键登录</button>

// 手机号一键登录
    			loginPhone() { 
    				uni.preLogin({ 
    					provider: 'univerify',
    					success(res) {  //预登录成功
    						// 显示一键登录选项
    						console.log(res);
    						console.log('999',2222);
    						uni.login({ 
    							provider: 'univerify',
    							univerifyStyle: {  // 自定义登录框样式
    								//参考`univerifyStyle 数据结构`
    								"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff 
    								"icon": { 
    									"path": "/static/logo/logo.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支持） 
    								},
    								"privacyTerms": { 
    									"defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true 
    									"textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90 
    									"termsColor": "#1d4788", // 协议文字颜色 默认值： #1d4788 
    									"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意” 
    									"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录” 
    									"fontSize": "12", // 字体大小 默认值：12, 
    									"privacyItems": [
    										// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效 
    										{ 
    											"url": "https://", // 点击跳转的协议详情页面 
    											"title": "用户服务协议" // 协议名称 
    										}
    									]
    								}
    							},
    							success(res) {  // 登录成功
    								this.openid = res.authResult.openid;
    								this.access_token = res.authResult.access_token;
    								console.log(res.authResult); // {openid:'deviceIDlength+deviceID+gyuid',access_token:'接口返回的 token'}
    								console.log(this.openid);
    								console.log("access_token",this.access_token);
    								// 客户端(调用云函数) 调用云函数来实现整个业务逻辑
    								// 在得到access_token后，通过callfunction调用云函数
    								uniCloud.callFunction({ 
    								  name: 'login', // 你的云函数名称
    								  data: { 
    								  	access_token: this.access_token, // 客户端一键登录接口返回的access_token
    								  	openid: this.openid // 客户端一键登录接口返回的openid
    								  }
    								}).then(res => { 
    									console.log("获取成功");
    									console.log(res);
    									// 获取用户的手机号
    									this.phoneNumber=res.result.data.phoneNumber;
    									console.log(this.phoneNumber);
    								  // res.result = { 
    								  // code: '',
    								  // message: ''
    								  // }
    								  // 登录成功，可以关闭一键登陆授权界面了
    								}).catch(err=>{ 
    								  // 处理错误
    								  console.log("获取失败");
    								  console.log(err);
    								})
    							},
    							fail(res) {  // 登录失败
    							// console.log('失败',2222);
    								console.log(res.errCode)
    								console.log(res.errMsg)
    							}
    						})
    					},
    					fail(res) {  // 预登录失败
    						// 不显示一键登录选项（或置灰）
    						// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
    						console.log('失败',2222);
    						console.log(res.errCode)
    						console.log(res.errMsg)
    					}
    				});
    
    
    			},

2）预登录成功后点击一键登录成功后调用云函数获取用户的手机号码  
（一键登录成功后获取得到access\_token和openid,使用uniCloud.callFunction的方式调用云函数，获取用户手机号）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 10]

// 客户端(调用云函数) 调用云函数来实现整个业务逻辑
    								// 在得到access_token后，通过callfunction调用云函数
    								uniCloud.callFunction({ 
    								  name: 'login', // 你的云函数名称
    								  data: { 
    								  	access_token: this.access_token, // 客户端一键登录接口返回的access_token
    								  	openid: this.openid // 客户端一键登录接口返回的openid
    								  }
    								}).then(res => { 
    									console.log("获取成功");
    									console.log(res);
    									// 获取用户的手机号
    									this.phoneNumber=res.result.data.phoneNumber;
    									console.log(this.phoneNumber);
    								  // res.result = { 
    								  // code: '',
    								  // message: ''
    								  // }
    								  // 登录成功，可以关闭一键登陆授权界面了
    								}).catch(err=>{ 
    								  // 处理错误
    								  console.log("获取失败");
    								  console.log(err);
    								})

3）运行时可在云函数中查看日志（判断是否请求成功）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 11]

注）如果手机没有插入有效的sim卡，或者手机蜂窝数据网络关闭，都有可能造成预登陆校验失败。（所以运行测试时需要在有sim卡的真机上测试，使用数据线连接电脑和手机，将项目运行在手机上）  
连接后可自动检测  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 12]

提示：[uni-app官网][uni-app]也有详细的介绍，我只是对我初次学习uni-app的一键登录做个笔记，有错的地方希望各位能够指出来，我及时更正。谢谢支持。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/be5fed07ce764104a84ccb00b94d62ff.png
[DCloud]: https://dev.dcloud.net.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70]: /images/20221119/36a6b1478d1e46ab93c080ab58a27bad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 1]: /images/20221119/a7862511c3b0427192f46c8ca7616456.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 2]: /images/20221119/133fb01f0fff4a519d1af9b5a3f6b950.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 3]: /images/20221119/fa53ab1489d540238000ca25729b172a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 4]: /images/20221119/288aced7ff3f412dad488b2ef3896676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 5]: /images/20221119/20c988a1ac6c4cc2b8de9c5cd6ffb3a9.png
[Link 1]: https://uniapp.dcloud.net.cn/uniCloud/univerify
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 6]: /images/20221119/66c1b007612848fc80ac02346eec413b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 7]: /images/20221119/e5bf9a1b12894f9f8627aa3d9589f9d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 8]: /images/20221119/c09aa8c91ff846aeac7a3f080acf810c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 9]: /images/20221119/cb11407b3f1a4b068d30543105295c44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 10]: /images/20221119/c57ebd2c2e0f4e3da60d2d26658bc4db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 11]: /images/20221119/7fe91068638242dd81f5b4588e5058bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3MzQ4OA_size_16_color_FFFFFF_t_70 12]: /images/20221119/a37eafe8432c40c589068a265d0b951f.png
[uni-app]: https://uniapp.dcloud.io/univerify?id=%E6%A6%82%E8%BF%B0