資訊專欄INFORMATION COLUMN
摘要：項目背景因為項目采用前后端完全分離方案，所以，無法使用常規(guī)的微信授權(quán)登錄作法，需要采用實現(xiàn)微信授權(quán)登錄。其實實現(xiàn)這個也麻煩，在實現(xiàn)之前，我們需要了解一下微信授權(quán)的整個流程。用戶微信登錄授權(quán)以后回調(diào)過來的會攜帶兩個參數(shù)，第一個是另一個就是。
項目背景
因為項目采用前后端完全分離方案，所以，無法使用常規(guī)的微信授權(quán)登錄作法，需要采用 ajax 實現(xiàn)微信授權(quán)登錄。
需求分析因為本人是一個phper ，所以，微信開發(fā)采用的是 EasyWeChat ，所以實現(xiàn)的方式是基于EW的。
其實實現(xiàn)這個也麻煩，在實現(xiàn)之前，我們需要了解一下微信授權(quán)的整個流程。
引導用戶進入授權(quán)頁面同意授權(quán)，獲取code
通過code換取網(wǎng)頁授權(quán)access_token（與基礎(chǔ)支持中的access_token不同）
如果需要，開發(fā)者可以刷新網(wǎng)頁授權(quán)access_token，避免過期
通過網(wǎng)頁授權(quán)access_token和openid獲取用戶基本信息（支持UnionID機制）
其實說白了，前端只需要干一件事兒，引導用戶發(fā)起微信授權(quán)頁面,然后得到code,然后跳轉(zhuǎn)到當前頁面,然后再請求后端換取用戶以及其他相關(guān)信息。
功能實現(xiàn)引導用戶喚起微信授權(quán)確認頁面
這里需要我們做兩件事，第一去配置jsapi域名，第二配置微信網(wǎng)頁授權(quán)的回調(diào)域名
構(gòu)建微信授權(quán)的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 不用多說，就是咱們將要授權(quán)的微信公眾號的appId,另一方個回調(diào)URL，其實就是我們當前頁面的URL。
用戶微信登錄授權(quán)以后回調(diào)過來的URL 會攜帶兩個參數(shù) ，第一個是code,另一個就是 state。才是我們需要做的一件事兒就是將code獲取到然后傳給后端，染后端通過code 獲取用戶基本信息。
后端得到code 以后，獲取用戶基本信息，并返回相關(guān)其他信息給前端，前端獲取到然后做本地存儲或者其他。
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)
}
})
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/28324.html
摘要：功能介紹微信網(wǎng)頁端顧名思義就是在微信瀏覽器上看的啦，本系統(tǒng)使用微信測試號條件有限授權(quán)登錄，可以查看網(wǎng)頁端所發(fā)的文章，對文章進行評論，回復，點贊，可修改個人的資料，可以發(fā)表說說，也是可對說說進行回復點贊評論。 本系統(tǒng)是基于Spring Boot 技術(shù)實現(xiàn)的文章發(fā)布系統(tǒng)，該系統(tǒng)是我和我朋友一起做的，本文僅介紹自己的這部分，他的那部分會在本文發(fā)布后在評論里貼上鏈接，微信網(wǎng)頁上的操作為我所負責...
摘要：功能介紹微信網(wǎng)頁端顧名思義就是在微信瀏覽器上看的啦，本系統(tǒng)使用微信測試號條件有限授權(quán)登錄，可以查看網(wǎng)頁端所發(fā)的文章，對文章進行評論，回復，點贊，可修改個人的資料，可以發(fā)表說說，也是可對說說進行回復點贊評論。 本系統(tǒng)是基于Spring Boot 技術(shù)實現(xiàn)的文章發(fā)布系統(tǒng)，該系統(tǒng)是我和我朋友一起做的，本文僅介紹自己的這部分，他的那部分會在本文發(fā)布后在評論里貼上鏈接，微信網(wǎng)頁上的操作為我所負責...
摘要：微信登錄用戶可使用微信帳號快速登錄你的網(wǎng)站，同一用戶使用微信登錄你的不同應用和公眾帳號，會對應同一個，以便進行不同業(yè)務間的帳號統(tǒng)一微信授權(quán)登錄可分為掃碼登錄一般用于網(wǎng)頁微信開放平臺跳轉(zhuǎn)授權(quán)登錄第三方使用微信開放平臺微信內(nèi)置瀏覽器內(nèi)登錄一 微信登錄： 用戶可使用微信帳號快速登錄你的網(wǎng)站，同一用戶使用微信登錄你的不同應用和公眾帳號，會對應同一個UnionID，以便進行不同業(yè)務間的帳號統(tǒng)一 ...
閱讀 2850·2021-09-24 09:47
閱讀 4466·2021-08-27 13:10
閱讀 3091·2019-08-30 15:44
閱讀 1358·2019-08-29 12:56
閱讀 2649·2019-08-28 18:07
閱讀 2701·2019-08-26 14:05
閱讀 2712·2019-08-26 13:41
閱讀 1328·2019-08-26 13:33
