前后端分离前端使用uniapp手机号一键登录

博主项目前后端分离,前面部分教程:

首先需要登录DCloud开发者中心,申请开通一键登录服务。

 开通后会得到ApiKey和Apisecret,和计费有关,扣费凭证,请勿泄露此信息!

点击应用管理——我的应用——创建应用,填写信息,appid在manifest.json的基础配置中,Android 应用签名可以使用云打包的公共证书签名,也可以生成自有证书。

添加应用后点击一键登录-基础配置-添加应用(不创建应用应用签名无法填入)等待审核……
(原文链接:https://blog.csdn.net/IDycy/article/details/128949597)

但是并没有使用云函数和云服务空间,而是交给自己的服务器处理,因为虽然云函数可以直接拿到手机号传给后端登录,但是为了安全考虑,还是没有直接前端拿手机号

把access_token和openid交给后端处理,后端使用云函数处理,具体看官网教程

uni.preLogin({
						//预登录                
						provider: 'univerify', //用手机号登录                
						success() {
							console.log('预登录成功')
							uni.login({
								//正式登录,弹出授权窗                
								provider: 'univerify',
								univerifyStyle: {
									// 自定义登录框样式                    
									"fullScreen": true, // 是否全屏显示,true表示全屏模式,false表示非全屏模式,默认值为false。                    
									"backgroundColor": "#ffffff", // 授权页面背景颜色,默认值:#ffffff                    
									"phoneNum": {
										"color": "#000000", // 手机号文字颜色 默认值:#000000                       
									},
									"authButton": {
										"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值:#3479f5                          
										"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值:#2861c5(仅ios支持)                          
										"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值:#73aaf5(仅ios支持) 
										"textColor": "#ffffff", // 授权按钮文字颜色 默认值:#ffffff                          
										"title": "本机号码一键登录", // 授权按钮文案 默认值:“本机号码一键登录”                     
									},
									"buttons": {
										"iconWidth": "30px",
										"list": [{
												"provider": "sinaweibo",
												"iconPath": "/static/sina.png"
											},
											{
												"provider": "weixin",
												"iconPath": "/static/wechat.png"
											},
											{
												"provider": "qq",
												"iconPath": "/static/qq.png"
											}
										]
									},
								},
								async success(res) {
									// 正式登录成功 
									console.log(res, 50);
												let params = {
													url: `/App/OneClickLogin?accessToken=${res.authResult.access_token}&openId=${res.authResult.openid}`,
													method: 'POST',
												};
												const result =await request(params);
												console.log(result)
												if (result.statusCode === 200 && result.data
													.success) {
													if(result.data.data){
														this.userdata = JSON.parse(JSON.stringify(result.data.data))
														if (result.data.data.userOrCustomer === 1) {
															uni.reLaunch({
																url: '/shoppages/shopindex/shopindex',
																success(res) {
																	console.log
																},
																fail(err) {
																	console.log(err)
																}
															})
														} else {
															uni.redirectTo({
																url: '/pages/index/index',
																success(res) {
																	console.log(res)
																},
																fail(err) {
																	console.log(err)
																}
															})
														}
														uni.closeAuthView() //关闭授权登录界面
														try {
															uni.setStorageSync('Token', result.data.data.token);
															that.$store.commit('setuserinfo', this.userdata);
														} catch (e) {
															console.log(e)
														}
													}else{
														uni.closeAuthView() //关闭授权登录界面
													}
												} else {
													uni.showModal({
														content: result.data.errMsg,
														showCancel: false,
														success:function(res){
															if (res.confirm) {
																uni.closeAuthView() //关闭授权登录界面
																console.log('关闭授权登录界面');
																	}
														}
													})
												}              
								},
								fail(err) {
									// 正式登录失败                    
									console.log(`一键登录失败(${err.errCode})`, err.errMsg)
									uni.closeAuthView()
									//关闭授权登录界面              
								}
							})
						},
						fail(err) {
							// 预登录失败                    
							console.log(`预登录失败`, err.errMsg)             
						}
					})

 

猜你喜欢

转载自blog.csdn.net/IDycy/article/details/129303188