微信网页开发授权微信网页开发这里我写个大概，具体还是要看文档，这里只写个scope为snsapi_base情况，不过s

微信网页开发

这里我写个大概，具体还是要看文档，这里只写个scope为snsapi_base情况，不过snsapi_userinfo也是差不多的

snsapi_base说明：scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的

snsapi_userinfo说明：scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息

JS-SDK说明文档：developers.weixin.qq.com/doc/offiacc…

步骤一：微信公众号绑定安全域名

步骤二：引入JS文件

npm install weixin-js-sdk

安装后在要使用的界面引入（或者全局也可以  ）
import wx from 'weixin-jsapi'

步骤三：通过config接口注入权限验证配置

一：用户同意授权，获取code

此时我们已经有appid（微信公众号-设置与开发-基本配置-开发者ID（AppID）），redirect_uri（自己获取），然后跳转授权地址，

const appId = "这是一个appId"//这里也可以让后端给你;
const redirectUri = location.href.split('#')[0]//重定向地址
if(code.value) return //如果有code 就不跳了
location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?
    appid=${appId}&
    redirect_uri=${encodeURIComponent(redirectUri)}&
    response_type=code&
    scope=snsapi_base&
    state=STATE
    #wechat_redirect`;

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

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

这时候我们需要在链接中取code，可以通过以下方法获取url携带的参数

export const getUrlParams = (name) => {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  const r = location.search.substring(1).match(reg)
  if (r != null) return decodeURI(r[2])
  return ''
}

const code = getUrlParams("code");

二：后面的操作

我们拿到code后，有两个必要操作如下

①请求接口将code传回给后端让他们设置浏览器cookie。

cookie说明：当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中

②将redirectUri传给后端让他们通过微信的接口拿wx.config密钥等信息

那后端是怎么做的呢，文档见微信JS-SDK使用权限签名算法

首先要通过微信拿Access token,需要用到两个参数APPID和APPSECRET，你可以通过微信提供的地址调试验证正确性

然后使用拿到的Access token去请求（GET）接口https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

使用获取到的ticket去生成签名，具体看文档，你可以通过微信提供的地址验证签名是否正确。

前端我们只要通过后端获取到wx.config需要的参数即可，失败的话见文档附录五

wx.config还涉及一个开放标签openTagList，见开放标签文档

 function wxConfig() {
    return new Promise((resolve, reject) => {
      wx.config({
        // debug: true,
        appId: 可以后端给, // 必填，公众号的唯一标识
        timestamp: 后端给, // 必填，生成签名的时间戳
        nonceStr: 后端给, // 必填，生成签名的随机串
        signature: 后端给, // 必填，签名，见附录1
        jsApiList: [
            "chooseImage", 
            "getLocalImgData", 
            "uploadImage", 
            "downloadImage"
        ]// 必填，需要使用的JS接口列表
      });
      wx.error(function (res) {
         resolve(false)
      });
      wx.ready(function (res) {
        resolve(true)
      });
    })
}

wxConfig().then((res)=>{
    if (res) {
       console.log("配置成功")
       router.push("/true");
    }else{
       console.log("配置失败")
       router.push("/false");
    }
})

注意：代公众号发起授权的情况，见这里，多了个`component_appid`，请求code的跳转链接加上component_appid即可

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

微信网页开发授权