v wechat auth

v-wechat-auth

vue 2.0 微信網頁授權插件

安裝

npm

npm install --save v-wechat-auth

 import Vue from 'vue'
import VWechatAuth from 'v-wechat-auth'

透過script 標籤

 <!-- 在 Vue 之后 -->
<!-- 从本地文件 -->
< script src =" v-wechat-auth/dist/v-wechat-auth.min.js " > </ script >

<!-- 从 CDN -->
< script src =" https://unpkg.com/v-wechat-auth " > </ script > 

使用

初始化

 Vue . use ( VWechatAuth )

// 必须在 root 实例上注入 wechatAuth
new Vue ( {
  el : '#app' ,
  ... ,
  wechatAuth : new VWechatAuth ( {
    appId : 'your wechat appid' ,
    scope : 'snsapi_base or snsapi_userinfo'
    authorize ( ) {
      return axios . get ( 'your backend api here' , { params : { code : code } } )
        . then ( function ( res ) {
          var data = ( res && res . data ) || { } // response data should at least contain openid
          return data
        } )
    }
  } )
} )

呼叫

 this . $wechatAuth . authorize ( ) 

運行例子

1. 將examples資料夾中的config.example.js重新命名為config.js

2. 修改config.js , 填入微信appid 和scope, 並在authorize方法中呼叫後端介面取得使用者信息，並將使用者資訊傳回

3. 修改host文件，將微信授權網域對應為localhost

4. 運行npm run example

5. 在微信開發者工具中存取授权域名/examples/index.html （因為修改了host，這時存取的實際上是本地）

6. 能顯示目前使用者的openid

options

屬性	類型	必輸	預設	說明
autoRedirect	boolean	否	true	當url 中不包含code 參數或傳回結果中不包含openid時，是否自動重定向到微信授權url
appId	string	是		微信appid
scope	string	是		微信scope, snsapi_base或snsapi_userinfo
state	string	否	''	微信state
authorize	function	是		ajax 請求呼叫後端介面取得微信用戶訊息
ssr	boolean	否		是否使用服務端渲染，尚未實現

VWechatAuth 實例

屬性	說明
user	當獲取用戶資訊成功後，儲存了用戶的信息，否則為一個空對象

方法	參數	返回	說明
authorize	onSuccess，執行成功的回呼函數 onFail，執行失敗的回呼函數	Promise	授權獲取使用者訊息，支援回呼函數和Promise

License

MIT