微信网页授权及使用微信jssdkredirect_uri的地址配置：公众平台官网中的“开发 - 接口权限 - 网页服务

微信网页授权

开发场景：公众号商城

网页授权有两种方式一种为以snsapi_base为scope的网页授权，即静默授权，

优点：用户无感知缺点：用户需关注公众

另一种为以snsapi_userinfo为scope的授权方式

优点：用户无需观众公众号缺点：用户需手动统一授权

本场景使用第二种方式

前端部分

第一步：获取code

引导用户打开如下链接：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

APPID：公众号的唯一标识 redirect_uri：授权后重定向的回调链接地址

redirect_uri的地址配置：公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；

授权页面：

用户同意授权后

如果用户同意授权后，页面将跳转至 redirect_uri/?code=CODE&state=STATE

通过截取url获取code，由于公众号的secret和获取到的access_token安全级别都非常高，因此将code传给后端，由后端处理接下来的流程，包括刷新access_token、通过access_token获取用户信息等步骤。

code说明： code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

后端部分

第二步：通过code换取网页授权access_token

拿到前端传的code后，请求以下链接获取access_token：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

#### 第三步：拉取用户信息拿到第二步接口返回的access_token和openid后，请求一下链接拉取用户信息：

GET： https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

使用微信jssdk（分享，支付）

绑定域名

在公众号的“公众号设置”的“功能设置”里填写“JS接口安全域名” 注意：不需要 http:// 或 https:// ，只填域名或路径即可 要下载MP_verify_EZhQkscUv44pvLNO.txt文件到项目根目录下，本项目是使用nginx代理，项目放在服务器某个文件夹下的dist目录，所以MP_verify_EZhQkscUv44pvLNO.txt放在dist目录下即可

引入JS文件

可直接下载官方源码，在使用的地方引用即可本项目使用npm 安装：

npm install weixin-js-sdk

使用

import wx from 'weixin-js-sdk';

通过config接口注入权限验证配置

1.后端签名

（1）获取 access_token

https请求方式: GET

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET

注意： access_token的有效期目前为2个小时，需定时刷新

（2）获取jsapi_ticket

用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket

https请求方式: GET

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

注意： jsapi_ticket的有效期目前为2个小时，需定时刷新

（3）生成签名

签名算法

参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分，一般由前端传给后端）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

官方实例

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名，得到signature：

//安装
npm install jssha --save
//使用
var jsSHA = require('jssha');

var shaObj = new jsSHA(string1, "TEXT");
signature = shaObj.getHash('SHA-1', 'HEX');

0f9de62fce790f9a083d5c99e95740ceb90c27ed

2.前端拿到签名后注入权限验证配置

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','chooseWXPay'] // 必填，需要使用的JS接口列表(本项目用到的分享和支付)
});

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

调用支付接口

支付签名方式与上面的验证config签名方式类似

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串，不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
  paySign: '', // 支付签名
  success: function (res) {
    // 支付成功后的回调函数
  },
  cancel: function (res) {
  	// 取消支付的回调函数
  }
});