項目背景

因為項目采用前后端完全分離方案，所以，無法使用常規的微信授權登錄作法，需要采用 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。appId 不用多說，就是咱們將要授權的微信公眾號的appId,另一方個回調URL，其實就是我們當前頁面的URL。

用戶微信登錄授權以后回調過來的URL 會攜帶兩個參數 ，第一個是code,另一個就是 state。才是我們需要做的一件事兒就是將code獲取到然后傳給后端，染后端通過code 獲取用戶基本信息。

后端得到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)

}

})

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的ajax 微信code获取_ajax 实现微信网页授权登录的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。