微信網頁授權登入是非常常用的功能，為了幫助大家學習。這篇文章主要介紹了ajax 實現微信網頁授權登入的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
專案背景
因為專案採用前後端完全分離方案，所以，無法使用常規的微信授權登入作法，需要採用ajax 實現微信授權登入。
需求分析
因為本身就是一個phper ，所以，微信開發採用的是 EasyWeChat ，所以實作的方式是基於EW的。
其實實作這件事也很麻煩，在實作之前，我們需要先了解微信授權的整個流程。
引導使用者進入授權頁面同意授權，取得code
透過code換取網頁授權access_token（與基礎支援中的access_token不同）
如果需要，開發者可以刷新網頁授權access_token，避免過期
透過網頁授權access_token和openid獲取使用者基本資訊（支援UnionID機制）
其實說白了，前端只需要乾一件事兒，引導用戶發起微信授權頁面,然後得到code,然後跳到當前頁面,然後再請求後端換取使用者以及其他相關資訊。
功能實作
引導使用者喚起微信授權確認頁面
這裡需要我們做兩件事，第一去配置jsapi域名，第二配置微信網頁授權的回調域名
構建微信授權的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 我們從連線中看到有兩個變數，appId,以及redirect_uri。回呼過來的URL 會攜帶兩個參數，第一個是code,另一個就是state。資訊。
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)
}
})
}以上是ajax 實作微信網頁授權登入的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
