uni-app授权第三方登录(微信授权登录)

APP微信授权登录需要到微信开放平台申请,在HBuilderX配置APP SDK中微信登录的appId,另外需要跟小程序、公众号授权账号互通的话也需要在微信开放平台申请,这是需要付费的呦(300元)

官方手册地址: https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo

1、在微信公众平台申请应用,获取相应的appid和appsecret

2、在HBuilderX配置APP SDK中微信登录的appId和appsecret
uni-app授权第三方登录(微信授权登录)_第1张图片

App端登陆相关的SDK需要在manifest中配置:

  1. 打开 manifest.json -> App模块权限配置,勾选 OAuth(登陆鉴权)。
  2. 打开 manifest.json -> App
    SDK配置,查看到登陆鉴权。在说明中有蓝色链接,其中包括向微信、QQ、微博等平台申请sdk的链接。
  3. 向微信、QQ、微博等平台申请到sdk的信息后,回填到manifest里。
  4. 这些配置需要打包生效,真机运行仍然是HBuilder基座的设置,可使用自定义基座包。离线打包请参考离线打包文档在原生工程中配置。
  5. 配置并打包后,通过uni.getProvider可以得到配置的结果列表,注意这里返回的是manifest配置的,与手机端是否安装微信、QQ、微博无关。

如果手机端未安装QQ、微信、微博 调用时会启动这些平台的wap页面登陆,如果已安装相应客户端,会启动它们的客户端登陆。

实例

uni.getProvider({
     
			service: 'oauth',
			success: function(res) {
     
				console.log(res.provider);
				// 手机app支持微信、qq和微博等
				if (~res.provider.indexOf('weixin')) {
     
					console.log('weixin');
					uni.login({
     
						provider: 'weixin',
						success: function(loginRes) {
     
							console.log(JSON.stringify(loginRes));
							// 获取用户信息
							uni.getUserInfo({
     
								provider: 'weixin',
								success: function(infoRes) {
     
									console.log('-------获取微信用户所有-----');
									console.log(JSON.stringify(infoRes.userInfo));
									const userInfo = infoRes.userInfo
									getApp().globalData.userInfo = userInfo;
									getApp().globalData.wxCode = userInfo.nickName;
									console.log(getApp().globalData.userInfo);
									uni.switchTab({
     
										url: '/pages/my/my'
									})
								}
							});
						},
						fail: function(res) {
     
							console.log(res)
							uni.showToast({
     
								icon: 'none',
								title: '登陆失败,请确保已安装或已登录微信',
								//title: res.errMsg,
								duration: 2000
							});
							setTimeout(function() {
     
								uni.switchTab({
     
									url: '/pages/my/my'
								})
							}, 2000)
						}
					});
				}
			}
		});

你可能感兴趣的:(uniapp,第三方登录,vue,vue.js,javascript,前端)