微信公众号获取授权登录机制

小灰灰 2023-03-13 05:22 266阅读 0赞

[https://zhuanlan.zhihu.com/p/86246328][https_zhuanlan.zhihu.com_p_86246328]  微信公众号添加开发者

[https://www.cnblogs.com/pangguoming/p/9520610.html][https_www.cnblogs.com_pangguoming_p_9520610.html]

配置授权回调的页面  
在JS接口安全域名中，点击修改来设置网页的域名。安全域名只需要填写域名或IP地址即可，不需要添加http，如www.xxxx.com或127.0.0.1，则在该域名下的页面都能够得到授权，而相关的二级或三级域名（aaa.xxxx.com）则无法获得授权。   
注 若填写时增加了协议，如 http://www.xxxx.com 或 http://127.0.0.1，页面同样可以获得授权，但是会带来一些未知的状况，如用户请求微信二次分享时，分享出来的描述和图片无法正确显示。   
当填写的网址通过了微信公众平台的安全监测时，即说明该域名已经配置成功了。

1、首先你要成为所要开发的公众号的开发者，在微信公众平台--开发者工具--web开发者工具中将自己的微信号绑定为开发者；  
2、然后在微信公众平台--基本配置中，启用开发者密码(AppSecret)，然后将开发者ID和密码都保存好；ip白名单按照要求配置好就行；  
3、在微信公众平台--公众号设置--功能设置中按照要求配置好js接口安全域名和网页授权域名，注意js接口安全域名，每个月只能改3次，配置的时候一点要注意，最好一次把开发环境、测试环境和线上环境都配置好，然后把网页授权域名配置为开发环境，方便调试；

授权登录方式有两个，一种为静默授权登录（scope=snsapi\_base），一种为非静默授权登录（scope=snsapi\_userinfo），区别为静默授权是静默授权并自动跳转到回调页的。  
用户感知的就是直接进入了回调页（往往是业务页面）特点：用户无感知,但是只能获取到用户的唯一标示openid和union id，无法拿到用户的微信头像、微信名称等个人信息；  
非静默授权这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

网页授权流程分为四步：   
1、引导用户进入授权页面同意授权，获取code   
2、通过code换取网页授权access\_token（与基础支持中的access\_token不同）   
3、如果需要，开发者可以刷新网页授权access\_token，避免过期   
4、通过网页授权access\_token和openid获取用户基本信息（支持UnionID机制）

注释：官方  
APPID ：就是通过后端获取回来的公众号appId。  
REDIRECT\_URI：就是当前页面地址，前端可以使用encodeURIComponent(window.location.href.split("\#")\[0\])方法获取。  
response\_type：默认code方式  
scope：有snsapi\_base，snsapi\_userinfo两种。  
snsapi\_base：不弹出授权页面，只能获取openid。  
snsapi\_userinfo：弹出授权弹窗，可以通过openid获取到相关信息。  
state：重定向之后会带上state参数  
\#wechat\_redirect: 页面直接打开还是做页面302都必须带此参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQ4NzY5NA_size_16_color_FFFFFF_t_70][]

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

[https://blog.csdn.net/hxf6060/article/details/88171869?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase][https_blog.csdn.net_hxf6060_article_details_88171869_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase]  vue 代码

[https://www.jianshu.com/p/b7e2100b56e4][https_www.jianshu.com_p_b7e2100b56e4] vue 代码

跳转第三方回调地址加问号：

let len = window.location.href.indexOf("Realname");

let href = window.location.href;

href = href.substring(0, len)+ "Loadingcallback?a";

用微信开发者工具调试 host里面设置代理

127.0.0.1 localhost
    localhost 127.0.0.1
    127.0.0.1       www.rioyi.com //你想要的代理地址

文件目录中config下的index.js修改

dev: {
        host: 'wx.aserxxx.com', // 写成0.0.0.0的话 你既可已localhost 访问也可以ip访问
        port: 80, //80相当于没有端口
    }

修改后运行

![20200812185421766.png][]

记得把文中的 window.APPID改为自己公众号的APPID

const local = ‘http://www.rioyi.com’; //微信公众号后台设置的地址(也就是拿到code之后跳转到的页面 例如: http://www.rioyi.com/wj) 一定要加http://

export function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

参考代码

<template>
      <div class="wx_login">
        <van-loading type="spinner" v-if="loading" />
      </div>
    </template>
    
    <script>
    import { Loading, Toast, Dialog } from "vant";
    import { getURLParameter } from "../../utils/tools.js";
    export default {
      data() {
        return {
          loading: false,
        };
      },
      created() {
        this.loading = true;
        this.getCode();
      },
      methods: {
        getCode() {
          this.loading = true;
          // 非静默授权，第一次有弹框
          const AppId = "wx341284962c9cfb25";
          const local =
            "https://cs.asercloud.com?webType=" + (webtype ? webtype : "login"); 
          const url =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            AppId +
            "&redirect_uri=" +
            encodeURIComponent(local) +
            "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
          const Asstoken = window.sessionStorage.getItem("BuyerAccessToken");
          const code = getURLParameter("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
          const webtype = getURLParameter("webType");
          console.log(local, "local");
          if (webtype == "login") {
            //微信获取code回调
            this.getOpenId(code);
          } else if (webtype == "Mycontract") {
            //签署回调
            if (Asstoken) {
              this.$router.push({
                path: "/Mycontract",
              });
            }
          } else if (webtype == "LMycontract") {
            //公众号推送跳回
            if (code) {
              this.getOpenId(code);
            } else {
              window.location.href = url;
            }
          } else if (webtype == "Myacceptance") {
            //签署回调
            if (Asstoken) {
              this.$router.push({
                path: "/Myacceptance",
              });
            }
          } else if (webtype == "LMyacceptance") {
            //公众号推送跳回
            if (code) {
              this.getOpenId(code);
            } else {
              window.location.href = url;
            }
          } else if (code == null || code === "") {
            window.location.href = url;
          }
        },
        getOpenId(code) {
          // 通过code获取 openId等用户信息
          let _this = this;
          _this.loading = true;
          let params = _this.$qs.stringify({
            Code: code,
            ClientType: 9,
          });
          _this.$http
            .getCodenum(params)
            .then((res) => {
              if (res.Success) {
                let ResultCode = res.Result.ResultCode;
                let AserId = res.Result.AserIdentityID;
                this.aserid = AserId;
                if (ResultCode == 2) {
                  _this.$router.push({
                    path: "/phoneLogin",
                    query: {
                      AuthenticateInfo: res.Result.AuthenticateInfo,
                    },
                  });
                  _this.loading = false;
                } else if (ResultCode == 1) {
                  window.sessionStorage.removeItem("userInfos");
                  window.sessionStorage.setItem(
                    "userInfos",
                    JSON.stringify(res.Result) || {}
                  );
                  //调用买家登录
                  _this.buyerlogin(AserId, res.Result);
                }
              } else {
                Toast("请求失败");
                _this.loading = true;
              }
            })
            .catch((err) => {
              console.log(err, "err");
              Toast("错误002:" + err);
              _this.loading = false;
            });
        },
        
        //url中解析code
        getUrlParam: function (name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]);
          return null;
        },
      },
      components: {
        [Loading.name]: Loading,
      },
    };

[https_zhuanlan.zhihu.com_p_86246328]: https://zhuanlan.zhihu.com/p/86246328
[https_www.cnblogs.com_pangguoming_p_9520610.html]: https://www.cnblogs.com/pangguoming/p/9520610.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQ4NzY5NA_size_16_color_FFFFFF_t_70]: /images/20230312/50433ca6aa5147cc9f3a899c7b9656d9.png
[https_blog.csdn.net_hxf6060_article_details_88171869_utm_medium_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase_depth_1-utm_source_distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase]: https://blog.csdn.net/hxf6060/article/details/88171869?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase
[https_www.jianshu.com_p_b7e2100b56e4]: https://www.jianshu.com/p/b7e2100b56e4
[20200812185421766.png]: /images/20230312/360cccd6a9174f6094a9768d594403ae.png