通過(guò)前端怎樣在vue中進(jìn)行微信網(wǎng)頁(yè)授權(quán)登錄

laoLiueizo 發(fā)布于2019-08-26 10:57 / 3255人閱讀

摘要：通過(guò)前端怎樣在中進(jìn)行微信網(wǎng)頁(yè)授權(quán)登錄背景公司目前上一個(gè)新項(xiàng)目，需要使用微信授權(quán)登錄，和后端商量了一下，決定使用微信登錄的第一種方法進(jìn)行授權(quán)登錄，就是后臺(tái)給一個(gè)接口，由前端直接執(zhí)行，跳轉(zhuǎn)到一個(gè)新頁(yè)面，新頁(yè)面中生成一個(gè)二維碼來(lái)進(jìn)行授權(quán)登錄。

通過(guò)前端怎樣在vue中進(jìn)行微信網(wǎng)頁(yè)授權(quán)登錄 背景：

公司目前上一個(gè)新項(xiàng)目，需要使用微信授權(quán)登錄，和后端商量了一下，決定使用微信登錄的第一種方法進(jìn)行授權(quán)登錄，就是后臺(tái)給一個(gè)接口， 
由前端直接執(zhí)行，跳轉(zhuǎn)到一個(gè)新頁(yè)面，新頁(yè)面中生成一個(gè)二維碼來(lái)進(jìn)行授權(quán)登錄。雖然，這種方式很多公司都在用，但產(chǎn)品說(shuō)這種方式的體驗(yàn) 
不夠好，所以使用了下面的授權(quán)方法，也就是第二種的微信授權(quán)登錄方案：

步驟實(shí)現(xiàn)：

在vue中，能夠用輪子的就用輪子，于是在npm中找到了一個(gè)微信登錄的包vue-wxlogin

接下來(lái)在組件中引入：

    import wxlogin from "vue-wxlogin";

組件中使用，可以聲明一個(gè)對(duì)象來(lái)保存生成二維碼的信息，為了數(shù)據(jù)的安全，我們不能直接在前端頁(yè)面寫(xiě)死，生成二維碼的信息，可以讓后端通過(guò)接口來(lái)獲取生成二維碼的信息，接著就是以組件屬性的參數(shù)傳給wxlogin

屬性參數(shù)詳解

   屬性名   類(lèi)型           描述
   appid    String        應(yīng)用唯一標(biāo)識(shí)，在微信開(kāi)放平臺(tái)提交應(yīng)用審核通過(guò)后獲得
   scope    String        應(yīng)用授權(quán)作用域，擁有多個(gè)作用域用逗號(hào)（,）分隔，網(wǎng)頁(yè)應(yīng)用目前僅填寫(xiě)snsapi_login即可
   redirect_uri    String        重定向地址，需要進(jìn)行UrlEncode
   state    String        用于保持請(qǐng)求和回調(diào)的狀態(tài)，授權(quán)請(qǐng)求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊（跨站請(qǐng)求偽造攻擊），建議第三方帶上該參數(shù)，可設(shè)置為簡(jiǎn)單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn)
   theme    String        提供"black"、"white"可選，默認(rèn)為黑色文字描述。
   href    String        自定義樣式鏈接，第三方可根據(jù)實(shí)際需求覆蓋默認(rèn)樣式。

需要注意的屬性，

   1.redirect_uri（回調(diào)地址）必須要進(jìn)行**UrlEncode轉(zhuǎn)碼**，這是一個(gè)巨坑啊，本人在這個(gè)問(wèn)題卡了一個(gè)下午
   2.href （自定義二維碼樣式的鏈接），必須是https的鏈接而且要帶有證書(shū)才可以，如果不用鏈接的方式可以使用data_url的方法來(lái)進(jìn)行樣式的傳遞
   例如：`data:text/css;base64,`+你自己的樣式內(nèi)容把它轉(zhuǎn)為base64然后拼接在一起就可以了，更具體的可閱讀[自定義微信登錄掃碼樣式解決辦法][2]

最后，有不明白的可加我qq: 1350488130