围绕signature,timestamp,nonce,echostr取值都为null的问题折腾了许久的坑。

订阅号不能认证，所以在公众号设置中，没有网页授权域名这一项。不过微信提供了测试号供开发者使用。
1、根据大神 https://blog.csdn.net/chmod_R_755/article/details/75554735 的文章，他最后的checkSignature方法和写的Controller接口可以都直接cv过来，代码时亲测可行的。


2、URL不能用本地localhost这种，我这里是使用了natapp，有免费隧道，但是域名随机分配。于是买了最便宜的隧道和3块钱的二级域名就可以使用了。看官方是说要80端口，所以在natapp里与本地项目中都修改成80端口。然后域名后面就是和平时跑项目接口一样的写法。
3、Token要与你项目里写的一致。
4、然后把项目跑起来。然后。。。。。。我就进坑了

我一直是在浏览器地址栏输入该URL，访问后再点提交，提示我接口配置失败，也尝试过用微信打开该链接，然后再提交也失败，反复进行了好多次。
断点一下发现request请求中参数都是null，signature,timestamp,nonce,echostr都获取不到。然后网上各种搜啊，都没找到我的这个问题。
后来我脑子一闪，又重新跑了下项目，直接点了提交（根本不用自己发起请求，在点提交时，它就会向该URL发送请求来验证Token了），然后就成功了。。。



据说如果是体验测试，不需要填这两项，直接在下面体验接口权限表的网页账号，网页授权获取用户信息那里，点修改，填上自己的外网地址就可以了。。

将下面的代码加标点复制进去。将define("TOKEN", "weixin")这句话中的weixin改成你自己的token，例如zijidetoken;然后点击右上角的全部保存。
/**
* wechat php test
*/
//define your token
define("TOKEN", "weixin");
$wechatObj = new wechatCallbackapiTest();
$wechatObj->valid();
class wechatCallbackapiTest
{
public function valid()
{
$echoStr = $_GET["echostr"];
//valid signature , option
if($this->checkSignature()){
echo $echoStr;
exit;
}
}
public function responseMsg()
{
//get post data, May be due to the different environments
$postStr = $GLOBALS["HTTP_RAW_POST_DATA"];
//extract post data
if (!empty($postStr)){
$postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
$fromUsername = $postObj->FromUserName;
$toUsername = $postObj->ToUserName;
$keyword = trim($postObj->Content);
$time = time();
$textTpl = "
%s
0
";
if(!empty( $keyword ))
{
$msgType = "text";
$contentStr = "Welcome to wechat world!";
$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);
echo $resultStr;
}else{
echo "Input something...";
}
}else {
echo "";
exit;
}
}
private function checkSignature()
{
$signature = $_GET["signature"];
$timestamp = $_GET["timestamp"];
$nonce = $_GET["nonce"];
$token = TOKEN;
$tmpArr = array($token, $timestamp, $nonce);
sort($tmpArr);
$tmpStr = implode( $tmpArr );
$tmpStr = sha1( $tmpStr );
if( $tmpStr == $signature ){
return true;
}else{
return false;
}
}
}
?>

目录
用户登陆,发送手机号码和验证码
后台接收参数,查找用户,用户存在就生成token,返回给前端
前端登陆成功,把token存到vuex(做持久化)
使用axios拦截器,读取vuex中的token,并放入请求头
请求其他接口,就会带上token
后台在需要登陆的接口上,获取token,解密token获得userId,返回前端需要的数据
用户在下次使用app,如果token还在有效期内,不需要重新登陆
(一) 用户登陆,发送手机号码和验证码
async login() {
// 发送请求,用post方式
let url = "/login";
// 请求参数
let data = {
phone: this.phone,
smsCode: this.smsCode
};
let res = await this.$axios.post(url, data);
console.log('res',res);
}
(二) 后台接收参数,查找用户,用户存在就生成token,返回给前端
// 获取前端传过来的参数phone,smsCode
let {
phone,
smsCode
} = ctx.params;
// 查找用户
let result = findUser(phone, smsCode);
// 找不到
if (!result) {
ctx.body = {
code: 604,
msg: '用户名或密码错误'
}
} else {
// 把userId和其它相关信息加密成一个token,返回给前端
let userInfo = {
userId: result.userId,
phone: result.phone
}
// 生成token
let token = jwt.sign(userInfo, "web03-server", {
// expiresIn: "1000h"
expiresIn: "10s"
});
ctx.body = {
code: 666,
msg: '登陆成功',
user: {
phone,
token
}
}
}
(三) 前端登陆成功,把token存到vuex(做持久化)
login() {
// 发送请求,用post方式
let url = "/login";
// 请求参数
let data = {
phone: this.phone,
smsCode: this.smsCode
};
this.$axios.post(url, data).then(res => {
// 修改登陆状态
this.$store.commit("updateLogin", true);
// 把token存入store
this.$store.commit("updateToken", res.user.token);
// 把用户名存入store
this.$store.commit("updateUsername", res.user.phone);
this.$router.push("/my");
}).catch(err=> {
console.log('登陆失败')
});
}
(四) 使用axios拦截器,读取vuex中的token,并放入请求头
// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
config => {
console.log('config',config);
// 从vuex读取token的值,给请求头添加laohu-token
if (store.state.token) {
config.headers['laohu-token'] = store.state.token;
}
return config
},
error => {
console.log(error) // for debug
Promise.reject(error)
}
)
(五) 请求其他接口,就会带上token
image.png
(六) 后台在需要登陆的接口上,获取token,解密token获得userId,返回前端需要的数据
const jwt = require("jsonwebtoken");
const util = require("util");
const verify = util.promisify(jwt.verify);
module.exports = async ctx=> {
// 检查token
const token = "Bearer " + ctx.header["laohu-token"];
// 解密token
try {
let payload = await verify(token.split(" ")[1], "web03-server");
console.log('token信息', payload);
let userId = payload.userId;
// 根据userId去数据库查询购物车的列表
ctx.body = {
code: 666,
msg: 'success',
list: [
{
name: '青轴键盘',
price: 300
},
{
name: '茶轴键盘',
price: 400
},
{
name: '红轴键盘',
price: 600
},
]
}
} catch (error) {
console.log('error',error);
ctx.body = {
code: 603,
msg: 'token不存在或者已失效'
}
}
}
(七) ps: 因为我们对vuex做了持久化,用户在下次使用app,发送请求也会带上token,如果token还在有效期内,不需要重新登陆

HTTP 是一个无状态的协议，一次请求结束后，下次在发送服务器就不知道这个请求是谁发来的了(同一个 IP 不代表同一个用户)，在 Web 应用中，用户的认证和鉴权是非常重要的一环，实践中有多种可用方案，并且各有千秋。
基于 Session 的会话管理
在 Web 应用发展的初期，大部分采用基于 Session 的会话管理方式，逻辑如下。
客户端使用用户名密码进行认证
服务端生成并存储 Session，将 SessionID 通过 Cookie 返回给客户端
客户端访问需要认证的接口时在 Cookie 中携带 SessionID
服务端通过 SessionID 查找 Session 并进行鉴权，返回给客户端需要的数据
基于 Session 的方式存在多种问题。
服务端需要存储 Session，并且由于 Session 需要经常快速查找，通常存储在内存或内存数据库中，同时在线用户较多时需要占用大量的服务器资源。
当需要扩展时，创建 Session 的服务器可能不是验证 Session 的服务器，所以还需要将所有 Session 单独存储并共享。
由于客户端使用 Cookie 存储 SessionID，在跨域场景下需要进行兼容性处理，同时这种方式也难以防范 CSRF 攻击。
基于 Token 的会话管理
鉴于基于 Session 的会话管理方式存在上述多个缺点，无状态的基于 Token 的会话管理方式诞生了，所谓无状态，就是服务端不再存储信息，甚至是不再存储 Session，逻辑如下。
客户端使用用户名密码进行认证
服务端验证用户名密码，通过后生成 Token 返回给客户端
客户端保存 Token，访问需要认证的接口时在 URL 参数或 HTTP Header 中加入 Token
服务端通过解码 Token 进行鉴权，返回给客户端需要的数据
基于 Token 的会话管理方式有效解决了基于 Session 的会话管理方式带来的问题。
服务端不需要存储和用户鉴权有关的信息，鉴权信息会被加密到 Token 中，服务端只需要读取 Token 中包含的鉴权信息即可
避免了共享 Session 导致的不易扩展问题
不需要依赖 Cookie，有效避免 Cookie 带来的 CSRF 攻击问题
使用 CORS 可以快速解决跨域问题
JWT 介绍
JWT 是 JSON Web Token 的缩写，JWT 本身没有定义任何技术实现，它只是定义了一种基于 Token 的会话管理的规则，涵盖 Token 需要包含的标准内容和 Token 的生成过程。
一个 JWT Token 长这样。
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NDQ1MTE3NDMsImp0aSI6IjYxYmVmNjkyLTE4M2ItNGYxYy1hZjE1LWUwMDM0MTczNzkxOSJ9.CZzB2-JI1oPRFxNMaoFz9-9cKGTYVXkOC2INMoEYNNA
仔细辨别会发现它由 A.B.C 三部分组成，这三部分依次是头部(Header)、负载(Payload)、签名(Signature)，头部和负载以 JSON 形式存在，这就是 JWT 中的 JSON，三部分的内容都分别单独经过了 Base64 编码，以 . 拼接成一个 JWT Token。
JWT 的 Header 中存储了所使用的加密算法和 Token 类型。
{ "alg": "HS256