公众号测试号 进行H5授权获取code《前端部分》

36 篇文章 0 订阅
1 篇文章 0 订阅


Tips:因为申请公众号需要 ¥300。 so 我用的是测试号。【白嫖永远不亏】

需要注意的是 测试号是和个人微信号关联起来的,不是公众号主体关联。。也就是每个人都可以申请,而不是必须有公众号主题才可以。测试号和公众号是独立的。

一、前置准备-注册配置测试账号

1.注册测试号

微信公众平台注册一个测试号。注意这是测试账号【白嫖的快乐】你会进入到这个界面。会生成测试用的appid 让你测试授权。记下来等会要用。
在这里插入图片描述

2、配置网页回掉域名

还是这个界面往下滑 你会看到 一个。体验接口权限表
在这里插入图片描述
在这个表的 【网页服务】- 【网页账号】- 【网页授权获取用户基本信息】这一项 点击【修改】按钮
在这里插入图片描述点击按钮会让你 设置网页回调域名 无需以"http://"开头,直接写域名就可以,例如 “aa.bb.com”。

因为是开发调试, 所以我们需要用手机连接电脑启动的H5服务。你可以把这个路径写成自己启动的H5 项目的服务地址,然后在手机上访问。具体怎么访问的流程之后会讲。我这边填写的就是我启动的H5服务地址。

在这里插入图片描述
**end:**到这里就已经可以进行授权了,其他的一些功能就不叽歪了。

二、H5 获取授权信息

1、微信授权分为静默授权(snsapi_base)和非静默授权(snsapi_userinfo)

我选择的是静默授权

静默授权流程:以snsapi_base为scope发起网页授权得到code,再用公众号的appid和secret获取微信公众号的全局唯一凭证access_token,然后用拿到的access_token调用公众号的“用户管理接口”中的“获取用户信息接口”获得unionID。

前端需要做的是以snsapi_base为scope发起网页授权得到code,调用后台接口获取unionId

2、代码实现

废话不多说上代码:

URl就是你上面配置的 那个路径 这里 是使用当前获取授权的 界面地址。我们用的是测试号, 所以你上面 配置了什么路径就在这里用什么路径。这样直接获取当前界面的路径 我没试也不知道测试号行不行。小伙伴们可以尝试一下

getBaseInfos() {
  if (this.isWeiXin()) {
    const code = this.getUrlParam("code"); // 截取路径中的code
    if (code == null || code === "") {

      let url = sessionStorage.getItem("originUrl");
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=你申请的appkey&redirect_uri=" +
        encodeURIComponent(url) +
        "&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
    } else {
    ///
    ///暂时不知道怎么写不是微信浏览器怎么搞。
    ///
    }

    if (code != "" && code != null) {
      this.wxCode = code;
      console.log(code)
      //这里就是把code给服务端了,没我们的事啦。【撒花】
      this.getOpenid(code)
    }
  } else {
  }
},
//判断是不是微信浏览器。
isWeiXin() {
  var ua = window.navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
},
// 编码函数
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; //返回参数值
},
  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值