uni-app之APP和小程序微信授权

左手的ㄟ右手 2021-10-06 03:10 285阅读 0赞

### uni-app之APP和小程序微信授权 ###

*  uni-app 介绍
 *  APP微信授权
 *   *  检测服务商
     *  授权登录
     *  获取用户信息
     *  示例代码
 *  小程序微信授权
 *   *  获取用户基本信息
     *  微信登录
     *  微信登录状态监测

# uni-app 介绍 #

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。  
适用平台：Android、iOS、微信小程序。实现了一套代码，同时发布到Android、iOS、微信小程序。  
参考官方：[https://uniapp.dcloud.io/][https_uniapp.dcloud.io]

# APP微信授权 #

## 检测服务商 ##

检测手机上是否安装微信、QQ、新浪微博等。

uni.getProvider({
        service: 'oauth',
        success: function (res) {
            console.log(res.provider);
        }
    });

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

## 授权登录 ##

获取openid，(unionid)等
    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));
    	}
    });

## 示例代码 ##

<button class="" @click="appLogin">APP微信授权登录</button>
    
    		
    appLogin: function() {
    	uni.getProvider({
    		service: 'oauth',
    		success: function(res) {
    			console.log(res.provider);
    			//支持微信、qq和微博等
    			if (~res.provider.indexOf('weixin')) {
    				uni.login({
    					provider: 'weixin',
    					success: function(loginRes) {
    						console.log('-------获取openid(unionid)-----');
    						console.log(JSON.stringify(loginRes));
    						// 获取用户信息
    						uni.getUserInfo({
    							provider: 'weixin',
    							success: function(infoRes) {
    								console.log('-------获取微信用户所有-----');
    								console.log(JSON.stringify(infoRes.userInfo));
    							}
    						});
    					}
    				});
    			}
    		}
    	});
    },

# 小程序微信授权 #

## 获取用户基本信息 ##

为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息。  
小程序使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。  
参考官方：[https://developers.weixin.qq.com/miniprogram/dev/component/button.html][https_developers.weixin.qq.com_miniprogram_dev_component_button.html]  
示例代码：

<button class="" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">微信授权获取用户信息</button>
    
    
    wxGetUserInfo:function(res){
    	if (!res.detail.iv) {
    		uni.showToast({
    			title: "您取消了授权,登录失败",
    			icon: "none"
    		});
    		return false;
    	}
    	console.log('-------用户授权，并获取用户基本信息和加密数据------')
    	console.log(res.detail);
    },

## 微信登录 ##

参考官方：[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html][https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_login.html]  
（1）页面uni.login获取code  
（2）后端通过code获取sessionKey、openid(unionid)等，后端调用接口如下：  
[https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js\_code=JSCODE&grant\_type=authorization\_code][https_api.weixin.qq.com_sns_jscode2session_appid_APPID_secret_SECRET_js_code_JSCODE_grant_type_authorization_code]  
（3）示例代码

<button class="" @click="wxLogin">微信登录</button>
    
    
    wxLogin: function() {
    	uni.login({
    		provider: 'weixin',
    		success: function(loginRes) {
    			console.log('-------获取code-------')
    			console.log(loginRes.code);
    			wx.request({
    				url: 'https://xxxxx'+loginRes.code,
    				success: function(info) {
    					console.log('-------获取sessionKey、openid(unionid)-------')
    					console.log(info);
    				},
    				fail: function(e) {
    					console.log(e)
    				}
    			})
    		}
    	});
    }

## 微信登录状态监测 ##

<button class="" @click="checkLogin">微信登录检测</button>
    
    
    checkLogin: function() {
    	wx.checkSession({
    		success() {
    			console.log('ok');
    			// session_key 未过期，并且在本生命周期一直有效
    		},
    		fail() {
    			// session_key 已经失效，需要重新执行登录流程
    			//wx.login() // 重新登录
    			console.log('expire');
    		}
    	})
    },

[https_uniapp.dcloud.io]: https://uniapp.dcloud.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70]: /images/20211006/23856286a76a4850b34953b328497b74.png
[https_developers.weixin.qq.com_miniprogram_dev_component_button.html]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_login.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
[https_api.weixin.qq.com_sns_jscode2session_appid_APPID_secret_SECRET_js_code_JSCODE_grant_type_authorization_code]: https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code