目录

一、官方给的获取openid步骤

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

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

第三步：刷新access_token（如果需要）

第四步：拉取用户信息(需scope为 snsapi_userinfo)

二、前端需要做的事

三、使用openid协助登录逻辑

四、获取openid部分的vue代码样例

---

 

微信官方文档——微信网页开发 /网页授权

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

一、官方给的获取openid步骤

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

在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面：

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

值得注意的是scope参数有两种，按需选择：

1.snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid）

2.snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

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

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

这里通过code换取的是一个特殊的网页授权access_token,与基础支持中的access_token（该access_token用于调用其他接口）不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base，则本步骤中获取到网页授权access_token的同时，也获取到了openid，snsapi_base式的网页授权流程即到此为止。

尤其注意：由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

所以这部分会由后端负责完成，如果使用snsapi_base只需要获取openId的话，流程其实到这里就结束了。

第三步：刷新access_token（如果需要）

由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。

第四步：拉取用户信息(需scope为 snsapi_userinfo)

如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。

二、前端需要做的事

简单地说，前端只需要引导关注者打开如下页面：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect ，获取到返回的code，传给后端，后端再将他获取到的openid返回给我们即可。

三、使用openid协助登录逻辑

我这里的业务需求是，客户本身有一套自己的登录系统，要跳转到他们的页面上。但是假如已经在微信上打开登过呢，就不再跳转他们的登录页，可以直接登录进去了。

所以大概逻辑就是

1.前端获取code，传给后端换取openid

2.调用后端的登录接口传openId尝试登录，如果没有绑定过账户会登录失败跳转到第三方登录页面，绑定过的话直接登录成功，存下token。

3.跳转到第三方登录，成功的话会返回一个第三方的code（非微信code）给我，与openid一同再传回给后端进行绑定。

4.再次调用那个需要openid的登录接口，成功之后存下token。

 

四、获取openid部分的vue代码样例

export default {
  data() {
    return {
      appid: process.env.VUE_APP_WECHAT_APP_ID,
      showLoginPic: true,
      openId:null,
    };
  },
  mounted() {
    let openId = storageDB.getItem("openId");
    var that = this;
    if (!openId) {
      this.getCode();
    } else {
      this.openId = openId;
    }
  },
  methods: {
    //静默授权
    getCode() {
      this.code = "";
      let local = window.location.href;
      let scope = "snsapi_base"; //静默授权 用户无感知
      this.code = this.getUrlCode().code;
      if (this.code == null || this.code === "") {
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${encodeURIComponent(
          local
        )}&response_type=code&scope=${scope}#wechat_redirect`;
      } else {
        this.getOpenId(this.code);
      }
    },
    getUrlCode() {
      let fullUrl = window.location.href;
      let theRequest = new Object();
      if (fullUrl.indexOf("?") != -1) {
        var temp = fullUrl.split("?");
        let str = temp[1];
        let strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
      }
      return theRequest;
    },
    getOpenId(code) {
      let that = this;
      this.$api.loginController.getWechatOpenId(code).then(res => {
        if (res.status == 1000) {
          that.openId = res.data.openId;
          storageDB.setItem("openId", that.openId);
        } else {
          Toast(res.message);
        }
      });
    },
  },
};