通过微信公众号实现H5登录授权

一、相关配置

1、配置参数测试公众平台信息（测试号相关配置示例）

2、配置JS接口安全域名

3、扫码关注公众号

4、添加网页授权地址

这里是指微信授权回调页面，同时发现可以前端页面可以配置127.0.01不需要在使用穿透。如果使用本地ip会提示Url错误，因为连接上因特网的每一台计算机都会有一个IP地址, 在linux下可以使用命令ifconfig来查看本机的ip地址（windows为ipconfig）, 而127.0.0.1被称为本地环回地址(loopback), 本地环回地址主要用于网络软件测试以及本地机进程间通信，无论什么程序，一旦使用环回地址发送数据，协议软件立即返回，不进行任何网络传输, 127.0.0.1可以认为是计算机上的一个虚拟网卡的ip地址

5、测试
微信开发者工具=》公众号网页项目=》输入地址

二、微信授权登录

相关代码如下

1.判断是否在微信浏览器环境中

onLoad() {let flag = this.is_weixin();if (flag) {this.checkWeChatCode()} else {window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+this.appid}
},

2.跳转url，获取code,登录授权

// 判断是否是微信浏览器
is_weixin() {var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger") {return true;} else {return false;}
}
checkWeChatCode() {let code = this.getUrlCode('code')if (code) {this.getOpenidAndUserinfo(code)} else {this.getCode()}
},
// 获取code
// 先判断url中有没有code，如果有code，表明已经授权，如果没有code，跳转微信授权链接
getCode () {// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openIdlet code = this.getUrlCode('code')if (code === null || code === '') {//encodeURIComponent对链接进行处理window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appid +'&redirect_uri=' + this.callbackurl + '&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=1#wechat_redirect';} else {this.code = code; }
},
getUrlCode (name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
},
// 授权登录
getOpenidAndUserinfo(code) {axios('GET',"/wx/login?code="+code,code,"login").then(res=>{console.log(res)  //获取用户数据})
},

over: 对初级开发者来说应该够用了，高级开发者如果路过欢迎提出问题，很荣幸得到大佬指点。

通过微信公众号实现H5登录授权相关推荐

微信公众号（H5）授权登录
拿到临时code 获取临时CODE网址:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri ...
微信公众号网页OAuth2.0授权登录并获取用户信息（SpringBoot实现）
微信公众号网页OAuth2.0授权登录并获取用户信息(SpringBoot实现) 文章目录微信公众号网页OAuth2.0授权登录并获取用户信息(SpringBoot实现) 准备工作开发思路具体代 ...
关于微信公众号搭建H5网页时网页授权域名配置问题
问题出现: 在搭建微信公众号网页时(框架:thinkphp) 出现如下报错 invalid appsecret rid: 61ab2ec3-328bb682-28f44296 即微信公众号搭建H5网页 ...
微信公众号开发系列-网页授权获取用户基本信息
OAuth2.0网页授权这个也是在做微信公众平台用到最多的,可以利用授权接口对自己平台内用户进行绑定,实现用户扫描码和微信分享.微信签到.微信商城购物等: 1.高级接口OAuth2.0网页授权设置 a ...
手把手教程用Java实现微信公众号扫码登录功能
文章目录前言一.环境准备二.使用步骤 1. 使用微信工具包 2. 创建数据表 3. 登录页面代码逻辑 4. 验证微信公众号登录总结前言微信现今是我们必不可少的社交工具了,围绕微信这个生态实 ...
Java微信公众号开发之网页授权获取用户基本信息
本篇博客讲解的网页授权只需要前端传递一个backUrl(回调地址) 到后台接口,后台接口会完成整个授权流程,无需前端做更多工作: 一. 前言微信公众号开发,需要用到网页授权获取用户信息,通过OAut ...
微信公众号开发Django-网页授权
原文链接对于基础的微信公众号开发,网页授权,JSSDK,图片处理应该是最重要的三部分了根本上也是按照文档开发,技术含量并不高. (选Django=很多权限控制模块已经做好了,比较省力) 在开始之前 ...
ASP.NET MVC4 微信公众号开发之网页授权（一）：搭建基础环境
首先你得注册并认证一个个人或企业的微信公众号===服务号从而确保获得以下接口权限: 然后打开公众号设置里的功能设置里找到业务域名和网页授权域名分别填上你的域名(注:已备案的域名),如下图所示: 到这里 ...
微信公众号网页 H5 video 标签自动播放
目录微信公众号网页 H5 video 标签自动播放问题描述解决方案微信公众号网页 H5 video 标签自动播放环境:微信公众号网页需求:H5 video 标签自动播放视频 video 标 ...

通过微信公众号实现H5登录授权

通过微信公众号实现H5登录授权

一、相关配置

二、微信授权登录

相关代码如下

通过微信公众号实现H5登录授权相关推荐

最新文章

热门文章