目录
前言
1.开发前准备工作
2.后台开发工作
3.前端开发工作
4.调试工作
先回顾一下微信开发中涉及的各种概念以及微信网页授权的流程图
【微信开发】常见的openid/unionid/session_key/access_token究竟是个啥?
官方API文档:微信网页开发-网页授权
开发前的准备工作很简单,登录微信公众号后台
(1)配置授权回调域名:在公众号 “开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。
(2)获取公众号的 APPID
(3)获取公众号的AppSecret
准备工作完成,进入后台接口开发 app.js
后台接口的开发工作十分的简单,有两个 ① /wechat_login ② /user
① 前端请求 /wechat_login ,代表需要申请微信授权,此时,后台重定向至微信授权页面,携带参数 APPID + redirect_uri + scope
② 前端请求 /user, 携带参数code,code即临时登录凭证,后台使用code调微信接口,换取微信用户信息。这一步稍稍有一丢丢复杂,需要拆分成一下几个步骤:
code + AppID + Appsecret → 调微信接口sns/oauth2 → 获取 acccess_token + openid → 调微信接口sns/userinfo - 获取微信用户基本信息userinfo
到这里,后台的接口开发工作就结束了。
const path = require('path')
const bodyParser = require('body-parser')
const express = require('express')
const app = new express()
const request = require('request')
const port = process.env.PORT || 80;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ //解析post请求数据
extended: false
}));
app.use(express.static('public'));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'views', 'index.html'));
})
const AppID = 'wx8a*********9c03f';
const AppSecret = '255325a***********0db6ce3da8';
const redirect_uri = 'http%3a%2f%2fwww.chunling.online'; // url记得先用encodeURI编码
const scope = 'snsapi_userinfo';
app.get('/wechat_login', (req, res) => {
// 第一步,重定向到微信授权页面
res.redirect('https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + AppID + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=' + scope + '&state=STATE#wechat_redirect');
})
app.get('/user', function (req, res, next) {
// 第二步:通过code换取网页授权access_token和用户openid
var code = req.query.code;
request.get({
url: 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + AppID + '&secret=' + AppSecret + '&code=' + code + '&grant_type=authorization_code',
}, function (error, response, body) {
if (response.statusCode == 200) {
var data = JSON.parse(body);
var access_token = data.access_token;
var openid = data.openid;
// 第三步:用access_token和openid获取用户信息
request.get({
url: 'https://api.weixin.qq.com/sns/userinfo?access_token=' + access_token + '&openid=' + openid + '&lang=zh_CN',
}, function (error, response, body) {
if (response.statusCode == 200) {
// 第四步:根据获取的用户信息进行对应操作
var userinfo = JSON.parse(body);
console.log('获取微信信息成功!');
res.send({
name: userinfo.nickname, // 用户微信昵称
result: true
});
} else {
console.log('获取微信信息失败!', response.statusCode);
res.send({
name: '',
result: false
})
}
});
} else {
console.log('获取微信信息失败!', response.statusCode);
res.send({
name: '',
result: false
})
}
})
});
app.listen(port, (error) => {
if (error) {
console.error(error);
} else {
console.info('==> Listening on port %s. Open up http://localhost:%s/ in your browser.', port, port);
}
});
前端要做的工作十分简单,只有两步。
① 没有微信用户信息则请求后台接口【/wechat_login】申请微信授权,有则继续使用本地存储的信息,不再重复授权。
② 请求后台接口【/user】获取微信用户信息,将信息进行本地存储。
特别注意,为了避免频繁地授权,当第一次获取微信用户信息成功时,记得将信息存储起来【localStorage/cookie/sessionStorage均可】。先判断是否有信息,有则无需申请授权,没有再去申请授权。
如果网页需要兼容非微信内打开的情况,记得先判断是否微信打开,再申请微信授权
/** 获取当前网页url的参数 */
function getQueryStringArgs() {
var qs = (location.search.length > 0 ? location.search.substring(1) : "");
var args = {};
var items = qs.length ? qs.split("&") : [];
var item = null;
var name = null;
var value = null;
len = items.length;
for (var i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
const args = getQueryStringArgs();
/** 微信授权 */
function loginWechat() {
if (args['code']) { // 已经授权并回调成功
let wechatCode = args['code'];
$.get('/user?code=' + wechatCode, function (res) {
if (res.result) {
$('#res-name').text(res.name);
localStorage.name = res.name;
} else {
if (localStorage.name) {
$('#res-name').text(localStorage.name);
}
}
})
} else {
if (localStorage.name) {
$('#res-name').text(localStorage.name);
} else {
location.href = 'http://www.chunling.online/wechat_login'; // 申请微信授权
}
}
}
/** 判断网页是否是微信内打开,是则申请微信授权 */
var wx = (function () {
return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
})();
if (wx) {
console.log('微信内打开');
loginWechat(); // 申请微信授权
} else {
console.log('非微信内打开');
}
因为微信授权需要配置回调域名,当我们使用localhost本机调试时,是没办法申请授权的,会返回 redirect_uri 错误的信息。为方便本机测试,需要将域名映射成我们的本机ip地址
打开 C:\Windows\System32\drivers\etc\hosts中的hosts文件,增加一行记录,如下
此时,再用微信开发者工具开发 www.chunling.online ,就可以访问我们的 localhost:80 项目,微信授权回调域名的问题也解决了。