v wechat auth

v-wechat-auth

vue 2.0 WeChat-Webseiten-Autorisierungs-Plug-in

Installieren

npm

npm install --save v-wechat-auth

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

über Skript-Tag

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

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

verwenden

Initialisierung

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

Anruf

 this . $wechatAuth . authorize ( ) 

Führen Sie das Beispiel aus

1. Benennen Sie config.example.js im examples in config.js um

2. Ändern Sie config.js , geben Sie die WeChat-App-ID und den WeChat-Bereich ein und rufen Sie die Backend-Schnittstelle in der authorize auf, um Benutzerinformationen abzurufen und die Benutzerinformationen zurückzugeben.

3. Ändern Sie die host und ordnen Sie den von WeChat autorisierten Domänennamen localhost zu

4. Führen Sie npm run example aus

5. Greifen Sie in den WeChat-Entwicklertools授权域名/examples/index.html zu (da der Host geändert wurde, ist der Zugriff tatsächlich lokal).

6. Kann openid des aktuellen Benutzers anzeigen

Optionen

Eigentum	Typ	muss verlieren	Standard	veranschaulichen
autoRedirect	Boolescher Wert	NEIN	WAHR	Wenn die URL den Codeparameter nicht enthält oder das Rückgabeergebnis keine openid enthält, wird festgelegt, ob automatisch zur WeChat-Autorisierungs-URL umgeleitet werden soll
appId	Zeichenfolge	Ja		WeChat-App
Umfang	Zeichenfolge	Ja		WeChat-Bereich, snsapi_base oder snsapi_userinfo
Zustand	Zeichenfolge	NEIN	''	WeChat-Status
autorisieren	Funktion	Ja		Eine Ajax-Anfrage ruft die Backend-Schnittstelle auf, um WeChat-Benutzerinformationen abzurufen
ssr	Boolescher Wert	NEIN		Ob serverseitiges Rendering verwendet werden soll, ist noch nicht implementiert

VWechatAuth-Instanz

Eigentum	veranschaulichen
Benutzer	Wenn die Benutzerinformationen erfolgreich abgerufen wurden, werden die Benutzerinformationen gespeichert, andernfalls handelt es sich um ein leeres Objekt.

Verfahren	Parameter	zurückkehren	veranschaulichen
autorisieren	onSuccess, die Rückruffunktion, die erfolgreich ausgeführt wird onFail, Rückruffunktion, die nicht ausgeführt werden kann	Versprechen	Autorisieren Sie, Benutzerinformationen abzurufen, die Rückruffunktion und das Versprechen zu unterstützen

Lizenz

MIT