fix: add wx-login check

2025-04-09 01:23:08 +08:00
parent 197d6415d3
commit e5111227fd
9 changed files with 188 additions and 18 deletions
--- a/mini-web/envision/config.js
+++ b/mini-web/envision/config.js
@@ -3,9 +3,15 @@ export const config = {
  appid: 'wxff97d569b1db16b6',
  appid_open: 'wx9378885c8390e09b', // 公众开放平台， 逸文设计 //
  redirect_uri: 'https://kevisual.xiongxiao.me/root/mini-web/callback.html',
-  scope: 'snsapi_userinfo',
+  scope: 'snsapi_userinfo', // 授权作用域, 默认是snsapi_base
 };

 export const loginUrl = `https://kevisual.xiongxiao.me/root/mini-web/login.html`;

 export const loginSuccessUrl = `/apps/wallnote/`;
+
+export const openidConfig = {
+  appid: config.appid,
+  redirect_uri: 'https://kevisual.xiongxiao.me/root/mini-web/wx-get-openid.html',
+  scope: 'snsapi_base',
+};
--- a/mini-web/envision/utils.js
+++ b/mini-web/envision/utils.js
@@ -0,0 +1,57 @@
+import { openidConfig } from './config.js';
+
+export const isWechat = () => {
+  const ua = navigator.userAgent.toLowerCase();
+  return /micromessenger/i.test(ua);
+};
+
+export const getOpenid = async () => {
+  const url = new URL(window.location.href);
+  const state = url.searchParams.get('state');
+  const code = url.searchParams.get('code');
+  const orgin = url.origin;
+  const res = await fetch(`${orgin}/api/router?path=wx&key=mp-get-openid&state=${state}&code=${code}`)
+    .then((res) => res.json())
+    .catch((err) => {
+      console.error(err);
+      alert('登录失败，请稍后再试');
+      document.body.append('登录失败，请稍后再试');
+      // closePage();
+    });
+  if (res.code === 200) {
+    document.body.append(JSON.stringify(res.data, null, 2));
+  }
+};
+
+export const checkHasCode = () => {
+  const url = new URL(window.location.href);
+  const code = url.searchParams.get('code');
+  return code;
+};
+
+export const initGetOpenidEvent = () => {
+  if (!isWechat()) {
+    document.body.append('请在微信中打开');
+    return;
+  }
+  const hasCode = checkHasCode();
+  if (hasCode) {
+    getOpenid();
+  } else {
+    // 没有code，则跳转获取code
+    getCodeRedirect();
+  }
+};
+
+const randomString = () => {
+  return Math.random().toString(36).substring(2, 15);
+};
+export const getCodeRedirect = () => {
+  const defaultURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect`;
+  const appid = openidConfig.appid;
+  const redirect_uri = encodeURIComponent(openidConfig.redirect_uri);
+  const scope = openidConfig.scope;
+  const state = randomString();
+  const link = defaultURL.replace('APPID', appid).replace('REDIRECT_URI', redirect_uri).replace('SCOPE', scope).replace('STATE', state);
+  window.location.href = link;
+};
--- a/mini-web/envision/wx-get-openid.html
+++ b/mini-web/envision/wx-get-openid.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1, user-scalable=no">
+  <title>登录</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+  </style>
+  <style>
+    .loading {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(255, 255, 255, 0.8);
+      z-index: 9999;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 1.5em;
+      /* Adjust font size for mobile */
+    }
+
+    @media (max-width: 600px) {
+      .loading {
+        font-size: 1em;
+        /* Smaller font size for smaller screens */
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="loading"></div>
+  <div class="openid"></div>
+  <script type="module">
+    import { initGetOpenidEvent, isWechat } from './utils.js';
+    const loading = document.querySelector('.loading');
+    loading.textContent = !isWechat() ? '微信打开当前页面获取openid' : '';
+    initGetOpenidEvent();
+  </script>
+</body>
+
+</html>