ajax 實(shí)現(xiàn)微信網(wǎng)頁(yè)授權(quán)登錄的方法
微信小程序開發(fā)是現(xiàn)在的熱門項(xiàng)目之一，其中很多小程序或者網(wǎng)頁(yè)第一步進(jìn)入時(shí)候都需要授權(quán)登錄，那么怎么實(shí)現(xiàn)這個(gè)功能呢?我們可以采用ajax實(shí)現(xiàn)，下面一起看看具體步驟!
項(xiàng)目背景
因?yàn)轫?xiàng)目采用前后端完全分離方案，所以，無(wú)法使用常規(guī)的微信授權(quán)登錄作法，需要采用 ajax 實(shí)現(xiàn)微信授權(quán)登錄。
需求分析
因?yàn)楸救耸且粋€(gè)phper ，所以，微信開發(fā)采用的是 EasyWeChat ，所以實(shí)現(xiàn)的方式是基于EW的。
其實(shí)實(shí)現(xiàn)這個(gè)也麻煩，在實(shí)現(xiàn)之前，我們需要了解一下微信授權(quán)的整個(gè)流程。
引導(dǎo)用戶進(jìn)入授權(quán)頁(yè)面同意授權(quán)，獲取code
通過code換取網(wǎng)頁(yè)授權(quán)access_token(與基礎(chǔ)支持中的access_token不同)
如果需要，開發(fā)者可以刷新網(wǎng)頁(yè)授權(quán)access_token，避免過期
通過網(wǎng)頁(yè)授權(quán)access_token和openid獲取用戶基本信息(支持UnionID機(jī)制)
其實(shí)說(shuō)白了，前端只需要干一件事兒，引導(dǎo)用戶發(fā)起微信授權(quán)頁(yè)面,然后得到code,然后跳轉(zhuǎn)到當(dāng)前頁(yè)面,然后再請(qǐng)求后端換取用戶以及其他相關(guān)信息。
功能實(shí)現(xiàn)
引導(dǎo)用戶喚起微信授權(quán)確認(rèn)頁(yè)面
這里需要我們做兩件事，第一去配置jsapi域名，第二配置微信網(wǎng)頁(yè)授權(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 我們從連接中看到有兩個(gè)變量，appId,以及 redirect_uri。appId 不用多說(shuō)，就是咱們將要授權(quán)的微信公眾號(hào)的appId,另一方個(gè)回調(diào)URL，其實(shí)就是我們當(dāng)前頁(yè)面的URL。
用戶微信登錄授權(quán)以后回調(diào)過來(lái)的URL 會(huì)攜帶兩個(gè)參數(shù) ，第一個(gè)是code,另一個(gè)就是 state。才是我們需要做的一件事兒就是將code獲取到然后傳給后端，染后端通過code 獲取用戶基本信息。
后端得到code 以后，獲取用戶基本信息，并返回相關(guān)其他信息給前端，前端獲取到然后做本地存儲(chǔ)或者其他。
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)
}
})
}
補(bǔ)充：微信使用小技巧
電腦登陸微信后，將手機(jī)調(diào)為靜音狀態(tài)：
登陸微信不僅可以使用手機(jī)登陸，而且還可以使用電腦登陸。首先點(diǎn)開電腦版微信，使用手機(jī)掃描二維碼登陸。
手機(jī)的微信和電腦的微信可以同時(shí)登陸的，而且接收到的信息，電腦和手機(jī)都可以收的到。
但是手機(jī)和電腦同時(shí)接收信息，兩個(gè)設(shè)備都有提示音，這會(huì)感覺讓人很煩。那么如何關(guān)掉手機(jī)端的聲音呢
當(dāng)你在pc端登陸微信之后，在手機(jī)微信聊天界面頂部會(huì)有一條狀態(tài)欄，點(diǎn)擊它，然后在該界面中選擇【手機(jī)靜音】即可。
也可以通過剛才的操作，快速的打開【文件傳輸助手】。
拉黑微信運(yùn)動(dòng)里的好友：
自從有了【微信運(yùn)動(dòng)】之后，每天都會(huì)為了占到榜首而去刷步數(shù)，但是你不想天天看到某人的封面、步數(shù)或是不想人某人看到你的步數(shù)，那么該如何操作。
首先最簡(jiǎn)單、直接的方法就是拉黑該好友，但這太不道義了。
你可以通過【微信運(yùn)動(dòng)】來(lái)拉黑好友。首先點(diǎn)開【微信運(yùn)動(dòng)】，然后點(diǎn)擊【微信運(yùn)動(dòng)】頁(yè)面右上角的【齒輪】圖標(biāo)。
找到并點(diǎn)開【隱私及提醒設(shè)置】>【不與他(她)排行】，再點(diǎn)擊【+】就可以把好友拉黑，你看不到ta的排行，ta也看不到你的排行。
相關(guān)閱讀：微信忘記了密碼怎么辦
通過手機(jī)號(hào)找回：用手機(jī)注冊(cè)或已綁定手機(jī)號(hào)的微信帳號(hào)，可用手機(jī)找回密碼，在微信軟件登錄頁(yè)面點(diǎn)擊“忘記密碼”=》通過手機(jī)號(hào)找回密碼=》輸入注冊(cè)的手機(jī)號(hào)，系統(tǒng)會(huì)下發(fā)一條短信驗(yàn)證碼至手機(jī)，打開手機(jī)短信中的地址鏈接(也可在電腦端打開)，輸入驗(yàn)證碼重設(shè)密碼即可。
通過郵箱找回：通過郵箱注冊(cè)或綁定郵箱、并已驗(yàn)證郵箱的微信帳號(hào)，可用郵箱找回密碼，在微信軟件登錄頁(yè)面點(diǎn)擊“忘記密碼”=》通過Email找回密碼=》填寫綁定的郵箱地址，系統(tǒng)會(huì)下發(fā)重設(shè)密碼郵件至注冊(cè)郵箱，點(diǎn)擊郵件的網(wǎng)頁(yè)鏈接地址，根據(jù)提示重設(shè)密碼即可。
通過注冊(cè)QQ號(hào)找回：用QQ號(hào)注冊(cè)的微信，微信密碼同QQ密碼是相同的，請(qǐng)?jiān)谖⑿跑浖卿涰?yè)面點(diǎn)擊“忘記密碼”=》通過QQ號(hào)找回密碼=》根據(jù)提示找回密碼即可，也可以點(diǎn)擊這里進(jìn)入QQ安全中心找回QQ密碼。
微信網(wǎng)頁(yè)授權(quán)登錄的方法相關(guān)文章：