v wechat auth

v-wechat-auth

vue 2.0 ปลั๊กอินการอนุญาตหน้าเว็บ WeChat

ติดตั้ง

เวลา 22.00 น

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. เปลี่ยนชื่อ config.example.js ในโฟลเดอร์ examples เป็น config.js

2. แก้ไข config.js กรอกรหัสแอป WeChat และขอบเขต และเรียกอินเทอร์เฟซแบ็กเอนด์ในวิธี authorize เพื่อรับข้อมูลผู้ใช้และส่งคืนข้อมูลผู้ใช้

3. แก้ไขไฟล์ host และแมปชื่อโดเมนที่ได้รับอนุญาตของ WeChat กับ localhost

4. รัน npm run example

5. เข้าถึง授权域名/examples/index.html ในเครื่องมือสำหรับนักพัฒนา WeChat (เนื่องจากโฮสต์ได้รับการแก้ไข การเข้าถึงจึงเป็นแบบท้องถิ่น)

6. สามารถแสดง openid ของผู้ใช้ปัจจุบันได้

ตัวเลือก

คุณสมบัติ	พิมพ์	จะต้องสูญเสีย	ค่าเริ่มต้น	แสดงให้เห็น
เปลี่ยนเส้นทางอัตโนมัติ	บูลีน	เลขที่	จริง	เมื่อ URL ไม่มีพารามิเตอร์รหัสหรือผลลัพธ์ที่ส่งคืนไม่มี openid ไม่ว่าจะเปลี่ยนเส้นทางไปยัง URL การอนุญาต WeChat โดยอัตโนมัติ
รหัสแอป	เชือก	ใช่		แอพ WeChat
ขอบเขต	เชือก	ใช่		ขอบเขต WeChat, snsapi_base หรือ snsapi_userinfo
สถานะ	เชือก	เลขที่	-	สถานะวีแชท
อนุญาต	การทำงาน	ใช่		คำขอ Ajax เรียกอินเทอร์เฟซแบ็กเอนด์เพื่อรับข้อมูลผู้ใช้ WeChat
สสส	บูลีน	เลขที่		จะใช้การแสดงผลฝั่งเซิร์ฟเวอร์หรือไม่ ยังไม่ได้นำมาใช้

อินสแตนซ์ VWechatAuth

คุณสมบัติ	แสดงให้เห็น
ผู้ใช้	เมื่อได้รับข้อมูลผู้ใช้เรียบร้อยแล้ว ข้อมูลของผู้ใช้จะถูกจัดเก็บ ไม่เช่นนั้นจะเป็นออบเจ็กต์ว่างเปล่า

วิธี	พารามิเตอร์	กลับ	แสดงให้เห็น
อนุญาต	onSuccess ฟังก์ชันโทรกลับที่ดำเนินการได้สำเร็จ onFail ฟังก์ชันโทรกลับที่ล้มเหลวในการดำเนินการ	สัญญา	อนุญาตให้รับข้อมูลผู้ใช้ รองรับฟังก์ชั่นการโทรกลับ และสัญญา

ใบอนุญาต

เอ็มไอที