v wechat auth

v-wechat-auth

vue 2.0 Plug-in d'autorisation de page Web WeChat

Installer

npm

npm install --save v-wechat-auth

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

via la balise de script

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

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

utiliser

initialisation

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

appel

 this . $wechatAuth . authorize ( ) 

Exécutez l'exemple

1. Renommez config.example.js dans le dossier examples en config.js

2. Modifiez config.js , remplissez l'ID et la portée WeChat, et appelez l'interface backend dans la méthode authorize pour obtenir les informations utilisateur et renvoyer les informations utilisateur.

3. Modifiez le fichier host et mappez le nom de domaine autorisé WeChat à localhost

4. Exécuter npm run example

5. Accédez授权域名/examples/index.html dans les outils de développement WeChat (l'hébergeur ayant été modifié, l'accès est en réalité local)

6. Peut afficher openid de l'utilisateur actuel

choix

propriété	taper	doit perdre	défaut	illustrer
Redirection automatique	booléen	Non	vrai	Lorsque l'URL ne contient pas le paramètre code ou que le résultat renvoyé ne contient pas openid, s'il faut rediriger automatiquement vers l'URL d'autorisation WeChat
identifiant d'application	chaîne	Oui		Application WeChat
portée	chaîne	Oui		Portée WeChat, snsapi_base ou snsapi_userinfo
État	chaîne	Non	''	État WeChat
autoriser	fonction	Oui		La requête Ajax appelle l'interface backend pour obtenir les informations utilisateur de WeChat
ssr	booléen	Non		S'il faut utiliser le rendu côté serveur, pas encore implémenté

Instance VWechatAuth

propriété	illustrer
utilisateur	Lorsque les informations utilisateur sont obtenues avec succès, les informations utilisateur sont stockées, sinon il s'agit d'un objet vide.

méthode	paramètre	retour	illustrer
autoriser	onSuccess, la fonction de rappel qui s'exécute avec succès onFail, fonction de rappel qui ne parvient pas à s'exécuter	Promesse	Autoriser à obtenir des informations sur l'utilisateur, prendre en charge la fonction de rappel et la promesse

Licence

MIT