基于.net5 wtm框架、uni-app微信公众号开发一、公众号授权

• 2021 年 1 月 22 日
• 筆記

前端公众号授权

公众号设置

0、首先用IIS创建一个空目录的网站用于公众号域名验证，接着把该网站内网穿透出去，推荐用utools工具，官网：//u.tools/ 下载安装好后搜索内网穿透并做好配置

1、进入公众号管理后台：开发-基本配置，把公众号开发信息里对的AppSecret、IP白名单设置好（记得保存好AppSecret因为配置好后会不可见）
2、进入公众号后台菜单：开发-接口权限-网页授权-网页授权获取用户基本信息-修改，配置好业务域名、JS接口安全域名、网页授权域名（配置域名填写域名目录的话，只有该目录下生效，并不是该域名所有目录生效，例如：配置www.qq.com/wx，那么www.qq.com和www.qq.com/qq都不会生效）

公众号授权

看了官方的文档，我们都知道，公众号授权有两种方式，一种是静默授权，用户无感知，但无法获取用户的基础信息，如果要想拉取到用户信息，则需要使用另一种授权方式，由于这种方式涉及到隐私，所以需要用户同意才行。

// 新建util.js
export default {
	wxAuthorize() {
		let link = window.location.href;
		let params = this.getUrlParams(link);  // 地址解析
		   // 已经授权登录过的就不用再授权了
		//if (store.state.token) return;

		// 如果拿到code，调用授权接口，没有拿到就跳转微信授权链接获取
		if (params.code) {
			 // 调用后台接口，授权
		} else {
			let appid = '公众号的appid';
			let uri = encodeURIComponent(link);
			let authURL = `//open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
			window.location.href = authURL;
		}
	},
	
	getUrlParams(name) {
	    var params = {};
	    location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (str, key, value) {
	        params[key] = value;
	    });
	
	    return params[name] || params;
	}
}

// 在main.js引入util.js
import util from "./util/util.js"
Vue.prototype.util = util

// 在App.vue中的启动方法中开启授权，打开任意页面都会获得授权
onLaunch: function() {
	console.log('App Launch');
	this.util.wxAuthorize();
}