mama-box: 共享授权规范闭环 — box_app UserAuth + /api/mp/public/auth/profile；wx-h5-demo 用 wx-auth.js 演示标准流程

2026-09-07 19:57:57 +08:00
parent bc3531e83c
commit e8e577b621
2 changed files with 121 additions and 69 deletions
--- a/wx-auth.js
+++ b/wx-auth.js
@@ -0,0 +1,83 @@
+/* ============================================================
+   wx-auth.js · H5 应用通用授权 + 跳商城 共享助手（各 H5 应用引用即可）
+   ------------------------------------------------------------
+   依赖：页面引入 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
+   用法：在 H5 页面里
+     <script src="wx-auth.js"></script>
+     然后：
+       wxAuth.init();                       // 检测环境 + 读取已授权资料(hash) + 回填
+       wxAuth.isAuthorized();               // 是否已授权（手机号/昵称/头像任一非空）
+       wxAuth.requestProfile();             // 点「授权登录」→ postMessage 通知宿主页
+       wxAuth.goMall();                     // 点「进商城」→ 跳小程序商城 tabBar 页
+   回传协议：宿主页授权成功后更新 web-view src 为
+     <H5地址>?t=<ts>#openid=..&phone=..&nickname=..&avatar=..
+   （微信 webview 丢 query、不丢 hash，故授权结果放 hash）
+   ============================================================ */
+(function (g) {
+  'use strict';
+  function readHash(name) {
+    try {
+      var h = location.hash.slice(1) + '&' + location.search.slice(1);
+      var m = h.match(new RegExp('(?:^|[&#])' + name + '=([^&#]*)(?:$|[&#])'));
+      return m ? decodeURIComponent(m[1]) : '';
+    } catch (e) { return ''; }
+  }
+  var wxAuth = {
+    MODE: 'browser', // 'webview' | 'wechat-browser' | 'browser'
+    inWebview: false,
+    onReady: null,
+    /* ① 环境检测 + 读回传资料（授权后宿主更新 src，本页重载读到 hash） */
+    init: function (cb) {
+      this.onReady = cb || null;
+      var self = this;
+      var isWechat = /MicroMessenger/i.test(navigator.userAgent);
+      function setMode(m) {
+        self.MODE = m; self.inWebview = (m === 'webview');
+        if (self.onReady) self.onReady(self);
+      }
+      if (window.wx && window.wx.miniProgram) {
+        var responded = false;
+        window.wx.miniProgram.getEnv(function (r) {
+          responded = true;
+          setMode(r && r.miniprogram ? 'webview' : (isWechat ? 'wechat-browser' : 'browser'));
+        });
+        setTimeout(function () { if (!responded) setMode(isWechat ? 'wechat-browser' : 'browser'); }, 800);
+      } else {
+        setMode(isWechat ? 'wechat-browser' : 'browser');
+      }
+    },
+    /* ② 读取授权结果（hash 里的 phone/nickname/avatar） */
+    readAuth: function () {
+      return { phone: readHash('phone'), nickname: readHash('nickname'), avatar: readHash('avatar') };
+    },
+    /* ③ 是否已授权 */
+    isAuthorized: function () {
+      var a = this.readAuth();
+      return !!(a.nickname || a.avatar || a.phone);
+    },
+    /* ④ 请求授权：postMessage → 通用宿主页(annex/web_view)弹原生授权面板 */
+    requestProfile: function () {
+      if (!(window.wx && window.wx.miniProgram)) { this.toast('请在微信小程序中打开'); return; }
+      window.wx.miniProgram.postMessage({ data: { action: 'requestProfile' } });
+      this.toast('请在弹出的小程序面板授权');
+    },
+    /* ⑤ 跳小程序商城（tabBar 页用 switchTab；非 tabBar 用 navigateTo） */
+    goMall: function (url) {
+      if (!(window.wx && window.wx.miniProgram)) { this.toast('请在微信小程序中打开商城'); return; }
+      window.wx.miniProgram.switchTab({ url: url || '/pages/goods_cate/goods_cate' });
+    },
+    /* ⑥ 展示授权结果到指定元素（可选便捷方法） */
+    fillAuth: function (nameEl, avatarEl) {
+      var a = this.readAuth();
+      if (nameEl && a.nickname) nameEl.textContent = a.nickname;
+      if (avatarEl && a.avatar) avatarEl.src = a.avatar;
+    },
+    toast: function (m) {
+      var t = document.getElementById('toast');
+      if (!t) return;
+      t.textContent = m; t.classList.add('show');
+      clearTimeout(t._tt); t._tt = setTimeout(function () { t.classList.remove('show'); }, 1800);
+    }
+  };
+  g.wxAuth = wxAuth;
+})(window);