利用ajax实现微信网页授权登录的方法介绍

网页授权登录是一个很常见的功能，为了帮助你学习。本文主要介绍了利用ajax实现微信网页授权登录的方法。我觉得小编挺好的。现在分享给大家，给大家一个参考。用小编来看看吧

项目背景

由于项目采用前端与后端完全分离的方案，无法使用常规的微信授权登录方式，需要ajax实现微信授权登录。

需求分析

因为我是phper，所以用EasyWeChat开发微信，所以实现方法是基于EW的。

其实意识到这一点也很麻烦。在实现之前，我们需要了解微信授权的全过程。

将用户引导至授权页面，同意授权，并获取代码。

网页授权access_token的交换代码(不同于基本支持中的access_token)

如有必要，开发人员可以刷新web authorization access_token以避免其过期。

Access_token和openid通过网页授权获取用户的基本信息(支持UnionID机制)

其实说白了，前端只需要做一件事，引导用户启动微信授权页面，然后获取代码，然后跳转到当前页面，然后要求后端交换用户等相关信息。

功能实现

引导用户唤起微信授权确认页面。

这里需要做两件事，第一是配置jsapi域名，第二是配置微信网页授权的回调域名。

建立微信授权的网址“https://open.weixin.qq.com/connect/oauth2/authorize? appid = ；+appId+ ； redirect _ uri = +location . href . split( # 39；#')[0]+ ； 代码 scope = snsapi _ userinfo State=STATE#wechat_redirect我们从连接中看到有两个变量，appId和redirect_uri。appId就不用说了，就是我们将要授权的微信微信官方账号的appId，另一个回调的URL其实就是我们当前页面的URL。

用户登录并授权微信后回调的URL会携带两个参数，第一个是代码，第二个是状态。我们只需要做一件事，就是获取代码，然后传给后端，后端就可以通过代码获取用户的基本信息。

后端代码获取后，获取用户的基本信息，其他相关信息返回前端，前端获取后存储在本地或其他地方。

函数getUrlParam(name){ var reg = new RegExp( ；(^|；) +name+ ；=([^；]*)( ；| $) ；);var r = window . location . search . substr(1)。匹配(reg)；if (r！= null)返回unescape(r[2])；返回null}函数wxLogin(回调){ var appId = # 39xxxxxxxxxxxxxxxxxxxxxx # 39；；var oauth _ url = # 39xxxxxxxxxxxxxxxxxxxx/oauth # 39；；var url = https://open.weixin.qq.com/connect/oauth2/authorize? appid = ；+appId+ ； redirect _ uri = +location . href . split( # 39；#')[0]+ ； 代码 scope = snsapi _ userinfo state = STATE #微信_重定向 var code = getUrlParam( ；代码 );如果(！code){ window . location = URL；} else { $。Ajax({ type: # 39；获取 # 39；，url: oauth_url，数据类型: # 39；json # 39，数据:{ code: code }，成功:function(data){ if(data . code = = = 200){ callback(data . data)} }，错误:function(Error){ throw new Error(Error)})}

这就是本文的全部内容。希望对大家的学习有帮助，也希望大家多多支持主机参考。

推荐:微信网页授权登录安卓失败！IOS端成功了！以上就是ajax实现微信网页授权登录的方法的细节。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 帝国ECMS如何实现无需刷新即可加入购物车的AJAX（帝国CMS用户手册）

本文由主机参考刊发，转载请注明：利用ajax实现微信网页授权登录的方法介绍 https://zhujicankao.com/81000.html