ajax抓取网页内容(开发者配置微信网页授权的整个流程(1)_社会万象_光明网(图) )

　　ajax抓取网页内容(开发者配置微信网页授权的整个流程(1)_社会万象_光明网(图)

)

　　微信授权全流程：

　　引导用户进入授权页面同意授权，获取code并兑换web授权access_token的code（与基础支持中的access_token不同） 如有需要，开发者可以刷新web授权access_token，避免过期。通过web授权access_token和openid获取用户基本信息（支持UnionID机制​​）

　　其实说白了，前端只需要做一件事，引导用户发起微信授权页面，然后获取code，然后跳转到当前页面，然后请求后端换取用户和其他相关信息。

　　功能实现

　　引导用户调出微信授权确认页面

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

　　构造微信授权url"" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 从连接中可以看出有两个变量， appId，redirect_uri，不用说，appId就是我们要授权的微信公众号的appId，而对方的回调URL其实就是我们当前页面的URL。

　　用户微信登录授权后，回调URL会携带两个参数，第一个是code，一个是state。我们唯一需要做的就是获取代码并传递给后端，后端通过代码获取基本的用户信息。后端获取code后，获取用户的基本信息，并将相关的其他信息返回给前端，由前端获取，然后存储在本地或其他地方。

　　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;

}

function wxLogin(callback) {

var appId = 'xxxxxxxxxxxxxxxxxxx';

var oauth_url = 'xxxxxxxxxxxxxxxxxxx/oauth';

var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"

var code = getUrlParam("code");

if (!code) {

window.location = url;

} else {

$.ajax({

type: 'GET',

url: oauth_url,

dataType: 'json',

data: {

code: code

},

success: function (data) {

if (data.code === 200) {

callback(data.data)

}

},

error: function (error) {

throw new Error(error)

}

})

}