微信小程序第三方登录

目录

小程序第三方登录操作流程如下:

1.第一步

2.第二步

2.第三步

4.第四步

5.第五步


小程序第三方登录操作流程如下:

注意:如果第一步没打印出来,看看微信模拟器上的Id有没有更改,或则去源码试图,weixinId更改

1.第一步

进入uniapp官网=>Api=>第三方服务=>登录=>微信小程序登录

2.第二步

创建一个触发事件,获取头像和名称

uni.getUserProfile({
					desc: '需要用到昵称和图像',
					success: (a) => {
						console.log(a);
						this.nickName = a.userInfo.nickName
						this.avatarUrl = a.userInfo.avatarUrl
					// 	uni.login({
					// 		success: (res) => {
					// 			console.log(res);
					// 			this.code = res.code
					// 			if (res.code) {
					// 				uni.request({
					// 					url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.appid}&secret=${this.secret}&js_code=${this.code}&grant_type=authorization_code`,
					// 					success: (resq) => {
					// 						console.log(resq);
					// 						let openid = resq.data.openid
					// 						uni.request({
					// 							url: 'http://ceshi2.dishait.cn/api/v1/user/otherlogin',
					// 							method: 'POST',
					// 							data: {
					// 								provider: 'weixin',
					// 								openid: openid,
					// 								expires_in: '9999',
					// 								nickName: this.nickName,
					// 								avatarUrl: this.avatarUrl
					// 							},
					// 							success: (resp) => {
					// 								console.log(resp);
					// 								this.getUserInfo(resp.data.data)
					// 								uni.switchTab({
					// 									url: '../myfile/myfile'
					// 								})
					// 							}
					// 						})
					// 					}

					// 				})
					// 			}

					// 		}
					// 	})
					 }
				})

2.第三步

调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器

uni.getUserProfile({
					desc: '需要用到昵称和图像',
					success: (a) => {
						console.log(a);
						this.nickName = a.userInfo.nickName
						this.avatarUrl = a.userInfo.avatarUrl
						uni.login({
							success: (res) => {
								console.log(res);
								this.code = res.code
								// if (res.code) {
								// 	uni.request({
								// 		url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.appid}&secret=${this.secret}&js_code=${this.code}&grant_type=authorization_code`,
								// 		success: (resq) => {
								// 			console.log(resq);
								// 			let openid = resq.data.openid
								// 			uni.request({
								// 				url: 'http://ceshi2.dishait.cn/api/v1/user/otherlogin',
								// 				method: 'POST',
								// 				data: {
								// 					provider: 'weixin',
								// 					openid: openid,
								// 					expires_in: '9999',
								// 					nickName: this.nickName,
								// 					avatarUrl: this.avatarUrl
								// 				},
								// 				success: (resp) => {
								// 					console.log(resp);
								// 					this.getUserInfo(resp.data.data)
								// 					uni.switchTab({
								// 						url: '../myfile/myfile'
								// 					})
								// 				}
								// 			})
								// 		}

								// 	})
								// }

							}
						})
					}
				})

4.第四步

调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_key

获取小程序 appId和小程序 appSecret,在微信公众平台=>小程序信息=>开发/开发管理/开发设置

uni.getUserProfile({
					desc: '需要用到昵称和图像',
					success: (a) => {
						console.log(a);
						this.nickName = a.userInfo.nickName
						this.avatarUrl = a.userInfo.avatarUrl
						uni.login({
							success: (res) => {
								console.log(res);
								this.code = res.code
								if (res.code) {
									uni.request({
										url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.appid}&secret=${this.secret}&js_code=${this.code}&grant_type=authorization_code`,
										success: (resq) => {
											console.log(resq);
											let openid = resq.data.openid
											// uni.request({
											// 	url: 'http://ceshi2.dishait.cn/api/v1/user/otherlogin',
											// 	method: 'POST',
											// 	data: {
											// 		provider: 'weixin',
											// 		openid: openid,
											// 		expires_in: '9999',
											// 		nickName: this.nickName,
											// 		avatarUrl: this.avatarUrl
											// 	},
											// 	success: (resp) => {
											// 		console.log(resp);
											// 		this.getUserInfo(resp.data.data)
											// 		uni.switchTab({
											// 			url: '../myfile/myfile'
											// 		})
											// 	}
											// })
										}

									})
								}

							}
						})
					}
				})

5.第五步

讲收集到的数据传给接口,成功返回的数据就是登录所用的数据

uni.getUserProfile({
					desc: '需要用到昵称和图像',
					success: (a) => {
						console.log(a);
						this.nickName = a.userInfo.nickName
						this.avatarUrl = a.userInfo.avatarUrl
						uni.login({
							success: (res) => {
								console.log(res);
								this.code = res.code
								if (res.code) {
                                    //这里是找的接口请求,返回登录所用的数据
									uni.request({
										url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.appid}&secret=${this.secret}&js_code=${this.code}&grant_type=authorization_code`,
										success: (resq) => {
											console.log(resq);
											let openid = resq.data.openid
											uni.request({
												url: 'http://ceshi2.dishait.cn/api/v1/user/otherlogin',
												method: 'POST',
												data: {
													provider: 'weixin',
													openid: openid,
													expires_in: '9999',
													nickName: this.nickName,
													avatarUrl: this.avatarUrl
												},
												success: (resp) => {
													console.log(resp);
                                                    //reps.data.data就是用户信息等数据,传到页面使用
													//this.getUserInfo(resp.data.data)
													uni.switchTab({
														url: '../myfile/myfile'
													})
												}
											})
										}

									})
								}

							}
						})
					}
				})

你可能感兴趣的:(微信小程序,小程序)