v wechat auth

v-wechat-auth

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. أعد تسمية 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
ssr	منطقية	لا		ما إذا كان سيتم استخدام العرض من جانب الخادم، لم يتم تنفيذه بعد

مثيل VWechatAuth

ملكية	يوضح
مستخدم	عندما يتم الحصول على معلومات المستخدم بنجاح، يتم تخزين معلومات المستخدم، وإلا فهي كائن فارغ.

طريقة	المعلمة	يعود	يوضح
يأذن	onSuccess، وظيفة رد الاتصال التي يتم تنفيذها بنجاح onFail، وظيفة رد الاتصال التي فشل تنفيذها	يعد	التفويض بالحصول على معلومات المستخدم ودعم وظيفة رد الاتصال والوعد

رخصة

معهد ماساتشوستس للتكنولوجيا