公众号 H5 测试号 注册 和 授权 获取code 前端部分

html5 文章 2022-07-15 14:17 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; //返回参数值},
-EOF-

三叔工具箱

今日百度页面总收录:

第三方支付技术请加QQ群

随便看看
小程序测试号解绑之后,扫一扫小程序登录又回来了 852
微信公众号openid? 907
微信开放平台跟公众平台有什么区别? 1142
怎么添加小程序支付功能? 1146
教育科技公司申请微信支付被拒绝? 1228
微信公众号免300认证教程 1640
小程序已经上线,作为管理员无法在小程序数据助手查看数据? 1234
小程序广告组件通过审核,但是小程序内没有显示广告? 1308
企业微信通讯录账号被管理员误/恶意删除,怎么办? 2904
问题? 3692