本文共 3058 字，大约阅读时间需要 10 分钟。

微信网页开发 - 网页授权

一、获取openid的步骤

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

在确保微信公众账号具有授权作用域（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参数有两种选择：
  • snsapi_base：不弹出授权页面，直接跳转。
  • snsapi_userinfo：弹出授权页面，可获取openid、昵称、性别、所在地等信息。

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

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

这里获取的是特殊的网页授权access_token，与基础支持中的access_token不同。公众号可通过以下接口获取网页授权access_token：

https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID

特别注意：

• access_token和secret的安全级别高，必须只存储在服务器，不允许传递给客户端。
• 后续刷新access_token及获取用户信息的步骤必须从服务器执行。

说明：

• 若使用snsapi_base，只需获取openid，流程到此结束。
• 若使用snsapi_userinfo，需进行后续步骤。

第三步：刷新access_token（可选）

由于access_token有效期较短，可以使用refresh_token刷新。refresh_token有效期为30天，如失效需用户重新授权。

第四步：拉取用户信息（需scope为snsapi_userinfo）

在获取了access_token和openid后，可以通过以下接口拉取用户信息：

https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=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，传递给后端。
• 后端用code换取openid，返回给前端。

三、openid协助登录逻辑

业务需求：用户有自己的登录系统，若已在微信上登录，则直接跳转至内部页面，否则跳转至登录页。

登录逻辑：

四、获取openid的Vue代码示例

export default {
  data() {
    return {
      appid: process.env.VUE_APP_WECHAT_APP_ID,
      openId: null
    };
  },
  mounted() {
    var that = this;
    const openIdStorage = storageDB.getItem('openId');
    if (openIdStorage) {
      this.openId = openIdStorage;
    } else {
      this.getCode();
    }
  },
  methods: {
    getCode() {
      const scope = 'snsapi_base'; // 静默授权
      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=${scope}#wechat_redirect`;
      if (window.location.href.includes('?')) {
        window.location.href = url;
      } else {
        const theRequest = this.getUrlCode();
        const state = theRequest['state'];
        if (!state) {
          window.location.href = url;
        }
      }
    },
    getUrlCode() {
      const fullUrl = window.location.href;
      const theRequest = {};
      if (fullUrl.includes('#')) {
        const hash = fullUrl.split('#')[1];
        const param = hash.split('&')[0];
        const key = param.split('=')[0];
        const value = param.split('=')[1] || '';
        theRequest[key] = value;
      } else if (fullUrl.includes('?')) {
        const query = fullUrl.split('?')[1];
        const params = query.split('&');
        for (let param of params) {
          const [key, value] = param.split('=');
          if (key) {
            theRequest[key] = value;
          }
        }
      }
      return theRequest;
    }
  }
};

五、注意事项

• 代码示例中变量如storageDB需根据实际情况配置。
• API接口参数如ACCESS_TOKEN、OPENID需妥善处理。

转载地址：http://thqwk.baihongyu.com/