Browse Source

✨ 微信公众号登录:获得 JS SDK 签名

YunaiV 1 year ago
parent
commit
2bfd7474cf

+ 0 - 28
project.config.json

@@ -1,28 +0,0 @@
-{
-  "appid": "wxd4da84f87dcafd80",
-  "compileType": "miniprogram",
-  "libVersion": "3.2.4",
-  "packOptions": {
-    "ignore": [],
-    "include": []
-  },
-  "setting": {
-    "coverView": true,
-    "es6": true,
-    "postcss": true,
-    "minified": true,
-    "enhance": true,
-    "showShadowRootInWxmlPanel": true,
-    "packNpmRelationList": [],
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
-    }
-  },
-  "condition": {},
-  "editorSetting": {
-    "tabIndent": "insertSpaces",
-    "tabSize": 2
-  }
-}

+ 0 - 7
project.private.config.json

@@ -1,7 +0,0 @@
-{
-  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "projectname": "uni3",
-  "setting": {
-    "compileHotReLoad": true
-  }
-}

+ 14 - 0
sheep/api/member/auth.js

@@ -37,6 +37,20 @@ const AuthUtil = {
       method: 'POST',
       method: 'POST',
     });
     });
   },
   },
+  // 创建微信 JS SDK 初始化所需的签名
+  createWeixinMpJsapiSignature: (url) => {
+    return request({
+      url: '/app-api/member/auth/create-weixin-jsapi-signature',
+      method: 'POST',
+      params: {
+        url
+      },
+      custom: {
+        showError: false,
+        showLoading: false,
+      },
+    })
+  },
 };
 };
 
 
 export default AuthUtil;
 export default AuthUtil;

+ 0 - 12
sheep/api/third.js

@@ -75,18 +75,6 @@ export default {
         },
         },
       }),
       }),
 
 
-    // 网页jssdk
-    jssdk: (data) =>
-      request({
-        url: 'third/wechat/jssdk',
-        method: 'GET',
-        data,
-        custom: {
-          showError: false,
-          showLoading: false,
-        },
-      }),
-
     // 小程序订阅消息
     // 小程序订阅消息
     subscribeTemplate: (params) =>
     subscribeTemplate: (params) =>
       request({
       request({

+ 1 - 1
sheep/components/s-auth-modal/s-auth-modal.vue

@@ -51,7 +51,7 @@
           <image
           <image
             class="auto-login-img"
             class="auto-login-img"
             :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
             :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
-          ></image>
+          />
         </button>
         </button>
 
 
         <!-- iOS登录 -->
         <!-- iOS登录 -->

+ 26 - 29
sheep/libs/sdk-h5-weixin.js

@@ -3,70 +3,67 @@
  * 更多微信网页开发sdk方法,详见:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
  * 更多微信网页开发sdk方法,详见:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
  */
  */
 
 
-import jweixin from 'weixin-js-sdk';
+import jweixin, { ready } from 'weixin-js-sdk';
 import $helper from '@/sheep/helper';
 import $helper from '@/sheep/helper';
 import third from '@/sheep/api/third';
 import third from '@/sheep/api/third';
+import AuthUtil from '@/sheep/api/member/auth';
 
 
 let configSuccess = false;
 let configSuccess = false;
 
 
 export default {
 export default {
-  //判断是否在微信中
+  // 判断是否在微信中
   isWechat() {
   isWechat() {
     const ua = window.navigator.userAgent.toLowerCase();
     const ua = window.navigator.userAgent.toLowerCase();
-    if (ua.match(/micromessenger/i) == 'micromessenger') {
-      return true;
-    } else {
-      return false;
-    }
+    // noinspection EqualityComparisonWithCoercionJS
+    return ua.match(/micromessenger/i) == 'micromessenger';
   },
   },
 
 
   isReady(api) {
   isReady(api) {
     jweixin.ready(api);
     jweixin.ready(api);
   },
   },
 
 
-  // 初始化JSSDK
+  // 初始化 JSSDK
   async init(callback) {
   async init(callback) {
     if (!this.isWechat()) {
     if (!this.isWechat()) {
       $helper.toast('请使用微信网页浏览器打开');
       $helper.toast('请使用微信网页浏览器打开');
       return;
       return;
     }
     }
 
 
+    // 调用后端接口,获得 JSSDK 初始化所需的签名
     const url = location.href.split('#')[0];
     const url = location.href.split('#')[0];
-
-    const { error, data } = await third.wechat.jssdk({
-      platform: 'officialAccount',
-      payload: encodeURIComponent(
-        JSON.stringify({
-          url,
-        }),
-      ),
-    });
-
-    if (error === 0) {
+    const { code, data } = await AuthUtil.createWeixinMpJsapiSignature(url);
+    if (code === 0) {
       jweixin.config({
       jweixin.config({
         debug: false,
         debug: false,
         appId: data.appId,
         appId: data.appId,
         timestamp: data.timestamp,
         timestamp: data.timestamp,
         nonceStr: data.nonceStr,
         nonceStr: data.nonceStr,
         signature: data.signature,
         signature: data.signature,
-        jsApiList: data.jsApiList,
-        openTagList: data.openTagList,
+        jsApiList: ['chooseWXPay'], // TODO 芋艿:后续可以设置更多权限;
+        openTagList: data.openTagList
       });
       });
     }
     }
 
 
+    // 监听结果
     configSuccess = true;
     configSuccess = true;
-
     jweixin.error((err) => {
     jweixin.error((err) => {
       configSuccess = false;
       configSuccess = false;
+      console.error('微信 JSSDK 初始化失败', err);
       // $helper.toast('微信JSSDK:' + err.errMsg);
       // $helper.toast('微信JSSDK:' + err.errMsg);
     });
     });
+    jweixin.ready(() => {
+      if (configSuccess) {
+        console.log('微信 JSSDK 初始化成功');
+      }
+    })
 
 
+    // 回调
     if (callback) {
     if (callback) {
       callback(data);
       callback(data);
     }
     }
   },
   },
 
 
-  //在需要定位页面调用
+  //在需要定位页面调用 TODO 芋艿:未测试
   getLocation(callback) {
   getLocation(callback) {
     this.isReady(() => {
     this.isReady(() => {
       jweixin.getLocation({
       jweixin.getLocation({
@@ -81,7 +78,7 @@ export default {
     });
     });
   },
   },
 
 
-  //获取微信收货地址
+  //获取微信收货地址 TODO 芋艿:未测试
   openAddress(callback) {
   openAddress(callback) {
     this.isReady(() => {
     this.isReady(() => {
       jweixin.openAddress({
       jweixin.openAddress({
@@ -97,7 +94,7 @@ export default {
     });
     });
   },
   },
 
 
-  // 微信扫码
+  // 微信扫码 TODO 芋艿:未测试
   scanQRCode(callback) {
   scanQRCode(callback) {
     this.isReady(() => {
     this.isReady(() => {
       jweixin.scanQRCode({
       jweixin.scanQRCode({
@@ -113,7 +110,7 @@ export default {
     });
     });
   },
   },
 
 
-  // 更新微信分享信息
+  // 更新微信分享信息 TODO 芋艿:未测试
   updateShareInfo(data, callback = null) {
   updateShareInfo(data, callback = null) {
     this.isReady(() => {
     this.isReady(() => {
       const shareData = {
       const shareData = {
@@ -137,7 +134,7 @@ export default {
     });
     });
   },
   },
 
 
-  // 打开坐标位置
+  // 打开坐标位置 TODO 芋艿:未测试
   openLocation(data, callback) {
   openLocation(data, callback) {
     this.isReady(() => {
     this.isReady(() => {
       jweixin.openLocation({
       jweixin.openLocation({
@@ -148,7 +145,7 @@ export default {
     });
     });
   },
   },
 
 
-  // 选择图片
+  // 选择图片 TODO 芋艿:未测试
   chooseImage(callback) {
   chooseImage(callback) {
     this.isReady(() => {
     this.isReady(() => {
       jweixin.chooseImage({
       jweixin.chooseImage({
@@ -162,7 +159,7 @@ export default {
     });
     });
   },
   },
 
 
-  //微信支付
+  //微信支付 TODO 芋艿:未测试
   wxpay(data, callback) {
   wxpay(data, callback) {
     this.isReady(() => {
     this.isReady(() => {
       jweixin.chooseWXPay({
       jweixin.chooseWXPay({

+ 6 - 0
sheep/platform/provider/wechat/officialAccount.js

@@ -20,6 +20,7 @@ async function load() {
 // 微信公众号登陆
 // 微信公众号登陆
 async function login(code = '') {
 async function login(code = '') {
   // 获取登陆地址
   // 获取登陆地址
+  debugger
   if (!code) {
   if (!code) {
     const loginResult = await getLoginUrl();
     const loginResult = await getLoginUrl();
     if (loginResult.error === 0 && loginResult.data.login_url) {
     if (loginResult.error === 0 && loginResult.data.login_url) {
@@ -38,6 +39,7 @@ async function login(code = '') {
 
 
 // 微信公众号绑定
 // 微信公众号绑定
 async function bind(code = '') {
 async function bind(code = '') {
+  debugger
   // 获取绑定地址
   // 获取绑定地址
   if (code === '') {
   if (code === '') {
     const loginResult = await getLoginUrl('bind');
     const loginResult = await getLoginUrl('bind');
@@ -57,6 +59,7 @@ async function bind(code = '') {
 
 
 // 微信公众号解除绑定
 // 微信公众号解除绑定
 async function unbind() {
 async function unbind() {
+  debugger
   const { error } = await third.wechat.unbind({
   const { error } = await third.wechat.unbind({
     platform: 'officialAccount',
     platform: 'officialAccount',
   });
   });
@@ -65,6 +68,7 @@ async function unbind() {
 
 
 // 获取公众号登陆地址
 // 获取公众号登陆地址
 function getLoginUrl(event = 'login') {
 function getLoginUrl(event = 'login') {
+  debugger
   let page = getRootUrl() + 'pages/index/login';
   let page = getRootUrl() + 'pages/index/login';
 
 
   return third.wechat.oauthLogin({
   return third.wechat.oauthLogin({
@@ -80,6 +84,7 @@ function getLoginUrl(event = 'login') {
 
 
 // 此处使用前端发送code在后端解密,防止用户在后端过长时间停留
 // 此处使用前端发送code在后端解密,防止用户在后端过长时间停留
 function loginByCode(code) {
 function loginByCode(code) {
+  debugger
   return third.wechat.login({
   return third.wechat.login({
     platform: 'officialAccount',
     platform: 'officialAccount',
     shareInfo: uni.getStorageSync('shareLog') || {},
     shareInfo: uni.getStorageSync('shareLog') || {},
@@ -93,6 +98,7 @@ function loginByCode(code) {
 
 
 // 此处使用前端发送code在后端解密,防止用户在后端过长时间停留
 // 此处使用前端发送code在后端解密,防止用户在后端过长时间停留
 function bindByCode(code) {
 function bindByCode(code) {
+  debugger
   return third.wechat.bind({
   return third.wechat.bind({
     platform: 'officialAccount',
     platform: 'officialAccount',
     payload: encodeURIComponent(
     payload: encodeURIComponent(

+ 1 - 1
sheep/platform/provider/wechat/openPlatform.js

@@ -1,5 +1,4 @@
 // 登录
 // 登录
-import { isEmpty } from 'lodash';
 import third from '@/sheep/api/third';
 import third from '@/sheep/api/third';
 
 
 const load = async () => {};
 const load = async () => {};
@@ -11,6 +10,7 @@ const login = () => {
       provider: 'weixin',
       provider: 'weixin',
       onlyAuthorize: true,
       onlyAuthorize: true,
     });
     });
+    debugger
     if (loginRes.errMsg == 'login:ok') {
     if (loginRes.errMsg == 'login:ok') {
       const res = await third.wechat.login({
       const res = await third.wechat.login({
         platform: 'openPlatform',
         platform: 'openPlatform',