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

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

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

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

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

步驟實現(xiàn)：

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

接下來在組件中引入：

    import wxlogin from "vue-wxlogin";

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

屬性參數(shù)詳解

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

需要注意的屬性，

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

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