v wechat auth

v-wechat-認証

vue 2.0 WeChat Web ページ認証プラグイン

インストール

npm

npm install --save v-wechat-auth

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

スクリプトタグ経由

 <!-- 在 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変更し、WeChat アプリ ID とスコープを入力し、 authorizeメソッドでバックエンド インターフェイスを呼び出してユーザー情報を取得し、ユーザー情報を返します。

3. hostファイルを変更し、WeChat の承認済みドメイン名をlocalhostにマッピングします。

4. npm run example実行します

5. WeChat 開発者ツールで授权域名/examples/index.htmlにアクセスします (ホストが変更されているため、アクセスは実際にはローカルです)

6. 現在のユーザーのopenid表示できます

オプション

財産	タイプ	負けなければならない	デフォルト	説明する
自動リダイレクト	ブール値	いいえ	真実	URL に code パラメータが含まれていない場合、または返された結果に openid が含まれていない場合に、自動的に WeChat 認可 URL にリダイレクトするかどうか
アプリID	弦	はい		WeChatアプリ
範囲	弦	はい		WeChat スコープ、 snsapi_baseまたはsnsapi_userinfo
州	弦	いいえ	」	WeChatの状態
許可する	関数	はい		Ajax リクエストはバックエンド インターフェイスを呼び出して WeChat ユーザー情報を取得します
SSR	ブール値	いいえ		サーバー側レンダリングを使用するかどうか、まだ実装されていません

VWechatAuth インスタンス

財産	説明する
ユーザー	ユーザー情報の取得に成功した場合はユーザー情報が格納され、それ以外の場合は空のオブジェクトになります。

方法	パラメータ	戻る	説明する
許可する	onSuccess、正常に実行されたコールバック関数 onFail、実行に失敗したコールバック関数	約束	ユーザー情報の取得を許可し、コールバック関数とPromiseをサポート

ライセンス

マサチューセッツ工科大学