微信公众号网页开发授权流程

落日映苍穹つ 2023-06-17 12:52 16阅读 0赞

公众号网页开发，首先需要授权。具体的可以查看[微信公众号官方文档][Link 1]。

授权方式有两种：

（1）静默授权。**scope：**snsapi\_base

（2）非静默授权。**scope：**snsapi\_userinfo

下面是我在开发项目中使用的流程：【项目中使用的是非静默授权】

首先：重定向是后端那边完成的，前端这边不需要做任何处理，只需要得到重定向过来链接里面的参数即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

这样做可以省去很多不必要的麻烦。

const config = {
      USERhttpURL: 'xxx',
      nurl: 'ddd.do?',   // 重定向的地址
    
      // 网络请求中
      ajaxIng(url, data, method, resolve, sessionVal) {
        data.session = sessionVal;
        $.ajax({
          type: method,
          url: config.USERhttpURL + url,
          contentType: 'application/x-www-form-urlencoded;charset=utf-8',
          data: data,
          dataType: "json",
          success: res => {
            console.log(url + '返回的数据：', res);
            if (res.success) {
              resolve(res); // 成功
            }
          }
        })
      },
      // 封装数据请求
      /**
       * url   请求的api               必传
       * data  请求参数{}              非必传
       * method  请求方法  get、post   非必传
       */
      RequestData: (url, data = {}, method = 'post', isSession = true) => {
        return new Promise((resolve, reject) => {
          config.getSession().then(sessionVal => {
    
            if (config.getCookie('userSession')) { // 个人中心
              config.ajaxIng(url, data, method, resolve, sessionVal);
            }
          })
        })
      },
      /*
       * 获取session
       */
      getSession: function() {
        return new Promise(res_session => {
          if (config.paramsAnalysis(window.location.href).from) { // 分享的
            console.log('分享链接', config.paramsAnalysis(window.location.href))
            var sessionUrl = config.paramsAnalysis(window.location.href).session;
            if (config.getCookie('userSession') != sessionUrl) {
              window.location.replace(config.nurl);
            }
          } else { // 不是分享的，从链接里面获取参数   链接里面的session 用于后端对比，sessionReq用于接口请求
            if (config.paramsAnalysis(window.location.href).session) {
              var sessionUrl = config.paramsAnalysis(window.location.href).session;
              var sessionReq = config.paramsAnalysis(window.location.href).sessionReq;
              config.setCookie('userSession', sessionReq)   // sessionReq用户接口请求
              config.setCookie('session',sessionUrl)   // session 用于后端对比
              res_session(sessionReq) // session
            } else {
              if (config.getCookie('userSession')) {
                res_session(config.getCookie('userSession'))
              } else {
                window.location.replace(conifg.nurl);
              }
            }
          }
        })
      },
      // 设置cookie
      setCookie: function(name, value) {
        var Days = 2;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
      },
      // 读取cookie
      getCookie: function(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
          return unescape(arr[2]);
        else
          return null;
      },
      //删除cookie
      delCookie: function(name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = getCookie(name);
        if (cval != null)
          document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
      },
    
      // 参数解析
      paramsAnalysis: function(url) {
        if (url.indexOf('#') != -1) {
          url = url.replace(/\#\//ig, '')
        }
        console.log('当前页面的url', url)
        var params = {};
        var urls = url.split("?");
        if (urls[1]) {
          var arr = urls[1].split("&");
          for (var i = 0, l = arr.length; i < l; i++) {
            var a = arr[i].split("=");
            params[a[0]] = a[1];
          }
          return params;
        } else {
          return urls[0]
        }
      }
    }

ღ( ´･ᴗ･\` )❤完。

[Link 1]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191128231431394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关微信公众号网页开发授权流程

公众号网页开发，首先需要授权。具体的可以查看[微信公众号官方文档][Link 1]。授权方式有两种：（1）静默授权。scope：snsapi\_base （2）非静默

落日映苍穹つ/ 2023年06月17日 12:52/ 0 赞/ 17 阅读

相关微信公众号网页授权问题nginx

在这里插入图片描述 !\[123![\](https://img-blog.csdnimg.cn/20200703112753822.png?x-oss-process=i

Myth丶恋晨/ 2023年02月22日 12:11/ 0 赞/ 275 阅读

相关微信公众号开发之微信网页授权errcode:48001

<table> <tbody> <tr> <td>48001</td> <td>api 功能未授权，请确认公众号已获得该接口，可以在公众平台官网 -

柔情只为你懂/ 2023年01月12日 10:12/ 0 赞/ 509 阅读

相关 uniapp开发微信公众号之网页授权

目录 > 公众号网页授权的步骤网页授权步骤献上官网地址参考：[公众号网页授权][Link 1] 1. 先要拥有`微信公众号`，注意此处的公众号是`服务号`

矫情吗；*/ 2022年09月04日 05:54/ 0 赞/ 440 阅读

相关微信公众号开发-微信网页授权获取用户openid

文档链接：[https://mp.weixin.qq.com/wiki?t=resource/res\_main&id=mp1421140842][https_mp.weixi

痛定思痛。/ 2022年05月17日 10:35/ 0 赞/ 403 阅读

相关微信公众号开发流程

\\\\微信公众号分类服务号：为企业和组织提供更强大的业务服务与用户管理能力，主要偏向服务类交互（功能类似12315，114，银行，提供绑定信息，服务交互的）；适用人

àì夳堔傛蜴生んèń/ 2022年04月27日 22:12/ 0 赞/ 390 阅读

相关微信-----公众号>微信网页授权

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hla2V3

╰半橙微兮°/ 2022年04月12日 14:14/ 0 赞/ 532 阅读

相关微信公众号开发之微信网页授权获取用户个人信息

说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！一丶概述微信网页授权如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机

电玩女神/ 2022年04月01日 03:58/ 0 赞/ 2946 阅读

相关微信公众号开发流程

前段时间做了微信公众号的小项目，最近有空整理一下文档，其实微信的官方文档[https://mp.weixin.qq.com/wiki?t=resource/res\_m

野性酷女/ 2022年01月22日 12:23/ 0 赞/ 537 阅读

相关微信公众号开发-网页授权——配置测试账号

思路分析： 1.创建测试账号并且配置测试账号的授权回调域名。 2.由前端发起授权请求，微信收到请求后(若是首次打开，并且未关注公众号，微信会弹出授权页，提示用户授权）将重定

约定不等于承诺〃/ 2021年12月23日 22:59/ 0 赞/ 1410 阅读