­

基于.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();
}