微信小程序第三方登录

这篇具有很好参考价值的文章主要介绍了微信小程序第三方登录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

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

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.第五步

讲收集到的数据传给接口,成功返回的数据就是登录所用的数据文章来源地址https://www.toymoban.com/news/detail-538698.html

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'
													})
												}
											})
										}

									})
								}

							}
						})
					}
				})

到了这里,关于微信小程序第三方登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序第三方插件申请

    记录下小程序申请插件的页面,之前自己找了很久,方便后续使用 1. 先找到自己需要的第三方插件的appid 2. 登录微信公众平台后台(mp.weixin.qq.com) 3. 打开小程序插件页面          https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=插件appid         如小程序直播的页面就是:http

    2024年02月09日
    浏览(30)
  • 微信小程序跳转第三方页面

    使用web-view,官方说明web-view 承载网页的容器。会自动铺满整个小程序页面, 个人类型的小程序暂不支持使用 具体实现思路: 1、首先需要配置小程序的公众平台当中的开发管理选项的业务域名,具体看官方指引 2、在小程序当中新建一个页面文件来单独存放web-view组件,sr

    2024年02月11日
    浏览(37)
  • app第三方支付,微信小程序支付

    最近公司开发一个app,需要从app跳转到小程序去微信支付,当时在网上看了好长时间没有看到适合自己的,在这里记录一下,也方便自己以后可以再复习一下,毕竟本人脑子不太好使,只能记下来。 app跳转页面携带参数到小程序 小程序接收参数,拉起微信支付

    2024年02月16日
    浏览(46)
  • 微信小程序使用 npm 安装第三方包

    微信小程序支持使用 npm 安装第三方包。 在小程序根目录下执行 npm install 第三方包名 安装 npm 包。 点击开发者工具中的菜单栏: 工具 -- 构建 npm 完成构建。 就可以使用 npm 包了。

    2024年02月11日
    浏览(39)
  • uniapp微信小程序引入第三方广告插件

      以Slime广告插件为例。 一、微信小程序后台申请相关插件   二、manifest.json文件 三、pages.json文件 四、要使用该插件的vue页面 引用插件后就可以使用插件的相关方法。 附:Slime插件文档 Slime | 小程序插件 | 微信公众平台

    2024年02月11日
    浏览(47)
  • 微信小程序使用第三方ui组件库

    第三方的ui组件有很多,本篇文章主要介绍Vant Weapp。 https://vant-contrib.gitee.io/vant-weapp/#/quickstart 先在微信开发者工具终端通过命令安装vant weapp: 通过 npm 安装 npm i @vant/weapp -S --production 通过 yarn 安装 yarn add @vant/weapp --production 安装 0.x 版本 npm i vant-weapp -S --production 安装vant weap

    2024年02月12日
    浏览(36)
  • 微信小程序使用webview打开第三方地址

    1、在page下创建一个webview目录文件包含index.js index.wxml,配置好路由 2、index.js 3、index.wxml 4、跳转 (地址后拼接参数需要转码) 注意:webview页面的title 取得是第三方地址的title标签的内容,且webview页面不支持自定义标题

    2024年02月10日
    浏览(37)
  • 如何为微信小程序添加第三方支付功能

    随着微信小程序的普及和应用,越来越多的商家希望在小程序中接入第三方支付功能,以提高用户购买体验和支付安全性。本文将详细介绍如何为微信小程序添加第三方支付功能,并提供具体的开发流程及注意事项。 一、什么是第三方支付 第三方支付平台是指一种网上支付

    2024年02月07日
    浏览(53)
  • 微信小程序使用nginx跳转第三方url

    先在微信公众平台配置号域名   服务器域名和业务域名都配置好 然后微信小程序使用 web-view标签进行跳转 nginx配置:域名必须有ssl证书,不然还是访问不了 sub_filter如果nginx没装的话需要装一下 首先需要git安装 ngx_http_substitutions_filter_module git没安装:yum -y install git 安装了:

    2024年02月10日
    浏览(33)
  • 微信小程序跳转第三方H5的方法

    使用web-view标签进行跳转 首先建立一个新的页面,这个页面就是为了第三方H5页面准备的。 在index.wxml中,写以下代码 在index.js中,写一下代码 在需要点击跳转第三方页面的地方,js文件中用以下代码实现跳转 以上代码就实现了跳转第三方链接/H5页面 项目中大部分时候,需要

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包