v wechat auth

v-wechat-auth

vue 2.0 WeChat web page authorization plug-in

Install

npm

npm install --save v-wechat-auth

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

via script tag

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

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

use

initialization

 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
        } )
    }
  } )
} )

call

 this . $wechatAuth . authorize ( ) 

Run the example

1. Rename config.example.js in the examples folder to config.js

2. Modify config.js , fill in the WeChat appid and scope, and call the backend interface in the authorize method to obtain user information and return the user information.

3. Modify the host file and map the WeChat authorized domain name to localhost

4. Run npm run example

5. Access授权域名/examples/index.html in the WeChat developer tools (because the host has been modified, the access is actually local)

6. Can display openid of the current user

options

property	type	must lose	default	illustrate
autoRedirect	boolean	no	true	When the URL does not contain the code parameter or the return result does not contain openid, whether to automatically redirect to the WeChat authorization URL
appId	string	yes		WeChat appid
scope	string	yes		WeChat scope, snsapi_base or snsapi_userinfo
state	string	no	''	WeChat state
authorize	function	yes		Ajax request calls the backend interface to obtain WeChat user information
ssr	boolean	no		Whether to use server-side rendering, not yet implemented

VWechatAuth instance

property	illustrate
user	When the user information is successfully obtained, the user's information is stored, otherwise it is an empty object.

method	parameter	return	illustrate
authorize	onSuccess, the callback function that executes successfully onFail, callback function that fails to execute	Promise	Authorize to obtain user information, support callback function and Promise

License

MIT