php 做服务端 vue 做客户端,对接微信授权及 jssdk 微信分享

开发环境:

1,同域

  • a,服务端首页http://blog.brotherjh.com
  • b,客户端首页http://blog.brotherjh.com/dist/index.html

2,vue 使用反向代理调服务端接口

开始使用如下图方式开发:(图片转载自Vue微信公众号开发踩坑记录

授权连接(静默授权): https://open.weixin.qq.com/connect/oauth2/authorize?appid=123456&redirect_uri=http://blog.brotherjh.com/dist/index.html&response_type=code&scope=snsapi_base&state=1#wechat_redirect 访问该链接,服务器打印日志如下:

array (
  'accept' => 'application/json, text/plain, */*',
  'accept-encoding' => 'gzip',
  'accept-language' => 'zh-CN,en-US;q=0.8',
  'connection' => 'close',
  'content-length' => '57',
  'content-type' => 'application/json',
  'host' => 'blog.brotherjh.com',
  'origin' => 'http://blog.brotherjh.com',
  'referer' => 'http://blog.brotherjh.com/dist/index.html?code=061zIt8e2F8B7E0lt0ae2GGy8e2zIt8z&state=1',
  'user-agent' => 'Mozilla/5.0 (Linux; Android 8.0; MI 6 Build/OPR1.170623.027; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/044030 Mobile Safari/537.36 MicroMessenger/6.6.6.1300(0x26060637) NetType/WIFI Language/zh_CN',
  'x-forwarded-for' => '219.140.231.34',
  'x-forwarded-for-pound' => '219.140.231.34',
  'x-requested-with' => 'com.tencent.mm',
)

可以看到 referer链接上, code 已经授权到回调链接上了,而 vue 客户端这边并不知道这个连接,不管怎么截取都截取不到 code,从而进行不了下一步,最终这种方式被放弃。

下图是经过验证,可实行的方案,再次感谢作者:


小提示

如有侵权请邮件通知