v wechat auth

v-wechat-인증

vue 2.0 WeChat 웹 페이지 인증 플러그인

설치하다

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 appid와 범위를 입력하고, authorize 메소드에서 백엔드 인터페이스를 호출하여 사용자 정보를 얻고 사용자 정보를 반환합니다.

3. host 파일을 수정하고 WeChat 인증 도메인 이름을 localhost 에 매핑합니다.

4. npm run example

5. WeChat 개발자 도구에서授权域名/examples/index.html 액세스합니다(호스트가 수정되었기 때문에 액세스는 실제로 로컬입니다).

6. 현재 사용자의 openid 표시할 수 있습니다.

옵션

재산	유형	져야 한다	기본	설명하다
자동 리디렉션	부울	아니요	진실	URL에 code 매개변수가 포함되어 있지 않거나 반환 결과에 openid가 포함되어 있지 않은 경우 자동으로 WeChat 인증 URL로 리디렉션할지 여부
앱 ID	끈	예		위챗 앱
범위	끈	예		WeChat 범위, snsapi_base 또는 snsapi_userinfo
상태	끈	아니요	''	위챗 상태
승인하다	기능	예		Ajax 요청은 WeChat 사용자 정보를 얻기 위해 백엔드 인터페이스를 호출합니다.
ssr	부울	아니요		아직 구현되지 않은 서버 측 렌더링 사용 여부

VWechatAuth 인스턴스

재산	설명하다
사용자	사용자 정보를 성공적으로 획득하면 사용자 정보가 저장되고, 그렇지 않으면 빈 개체입니다.

방법	매개변수	반품	설명하다
승인하다	onSuccess, 성공적으로 실행되는 콜백 함수 onFail, 실행에 실패한 콜백 함수	약속하다	사용자 정보 획득, 콜백 기능 지원, Promise 권한 부여

특허

MIT