經過前端怎樣在vue中進行微信網頁受權登陸

經過前端怎樣在vue中進行微信網頁受權登陸

---

背景：

公司目前上一個新項目，須要使用微信受權登陸，和後端商量了一下，決定使用微信登陸的第一種方法進行受權登陸，
就是後臺給一個接口， 
由前端直接執行，跳轉到一個新頁面，新頁面中生成一個二維碼來進行受權登陸。雖然，這種方式不少公司都在用，
但產品說這種方式的體驗 
不夠好，因此使用了下面的受權方法，也就是第二種的微信受權登陸方案，能在當前頁生成二維碼登陸：

步驟實現：

• 在vue中，可以用輪子的就用輪子，因而在npm中找到了一個微信登陸的包vue-wxlogin

• 接下來在組件中引入：

  import wxlogin from 'vue-wxlogin';

• 組件中使用，能夠聲明一個對象來保存生成二維碼的信息，爲了數據的安全，咱們不能直接在前端頁面寫死，生成二維碼的信息，可讓後端經過接口來獲取生成二維碼的信息，接着就是以組件屬性的參數傳給wxlogin

  <wxlogin style="margin-left: 25px" :href="wx.href" :state="wx.state" :appid="wx.appid" :scope="wx.scope"
                     :redirect_uri="wx.redirect_uri"></wxlogin>

• 屬性參數詳解

  屬性名   類型           描述
     appid    String        應用惟一標識，在微信開放平臺提交應用審覈經過後得到
     scope    String        應用受權做用域，擁有多個做用域用逗號（,）分隔，網頁應用目前僅填寫snsapi_login便可
     redirect_uri    String        重定向地址，須要進行UrlEncode
     state    String        用於保持請求和回調的狀態，受權請求後原樣帶回給第三方。該參數可用於防止csrf攻擊（跨站請求僞造攻擊），建議第三方帶上該參數，可設置爲簡單的隨機數加session進行校驗
     theme    String        提供"black"、"white"可選，默認爲黑色文字描述。
     href    String        自定義樣式連接，第三方可根據實際需求覆蓋默認樣式。

• 須要注意的屬性，

  1.redirect_uri（回調地址）必需要進行**UrlEncode轉碼**，這是一個巨坑啊，本人在這個問題卡了一個下午
     2.href （自定義二維碼樣式的連接），必須是https的連接並且要帶有證書才能夠，若是不用連接的方式可使用data_url的方法來進行樣式的傳遞
     例如：`data:text/css;base64,`+你本身的樣式內容把它轉爲base64而後拼接在一塊兒就能夠了，更具體的可閱讀[自定義微信登陸掃碼樣式解決辦法][2]

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