微信登录功能--网站应用

1. 微信开发平台注册https://open.weixin.qq.com/

2. 账号中心-填写基本资料（最好是公司注册）

3. 账号中心-开发者资质认证（充钱，300）

4. 审核通过之后，管理中心-网站应用-创建网站应用（AppSecret一定一定得记下来，不能放在前端，放在后端）
   
   4步骤完成后会生成应用的appid

5. 资源中心-网站应用（查看方法）
   

6. 在umi+react项目中扫码登录方法及踩坑：微信登录二维码内嵌到自己页面

   6.1 内置 js 文件（config.js）
   6.1.1能连网的情况下

export default defineConfig({
 ...，
 headScripts: [`http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'],
});

6.1.2 如果是内网环境，能连网时，在浏览器打开http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
复制打开的内容；在 public 目录下新建wxLogin.js，将内容放进wxLogin.js

export default defineConfig({
 ...，
 headScripts: [`./wxLogin.js'],
});

6.2 配置实例化调用方法并在登录页面 useEffect 生命周期调用

var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", //你要放二维码的dom节点div的id
 appid: "", 
 scope: "", 
 redirect_uri: "",
  state: "",
 style: "",
 href: ""
 });

其中 state 动态生成（后端接口返回），可以防止cfrs攻击 什么是 cfrs？
其中 href 可以修改二维码页面的样式 （写好 css 使用 Base64 在线编码）工具

可以使用base64对css样式进行编码，前面拼接"data:text/css;base64,"
示例："data:text/css;base64,LmltcG93ZXJCb3h7IHRleHQtYWxpZ246bGVmdH0KLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4OyBtYXJnaW46MH0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="

6.3 https网站时： iframe 报错 Unsafe attempt to initiate navigation for frame with origin
原因：这个错误通常是因为在安全性方面的限制而产生的，这是浏览器的一种安全特性，用来防止恶意网站通过 iframe 或其他方式导航到其他网站。
解决方案：修改下载下来的 wxLogin.js

!function (e, t) {
 e.WxLogin = function (e) {
 var r = "default";
       !0 === e.self_redirect? r = "true" :!1 === e.self_redirect && (r = "false");
 var n = t.createElement("iframe"),
 i = "https://open.weixin.qq.com/connect/qrconnect?appid=" + e.appid + "&scope=" + e.scope + "&redirect_uri=" + e.redirect_uri + "&state=" + e.state + "&login_type=jssdk&self_redirect=" + r + "&styletype=" + (e.styletype || "") + "&sizetype=" + (e.sizetype || "") + "&bgcolor=" + (e.bgcolor || "") + "&rst=" + (e.rst || "");
 i += e.style? "&style=" + e.style : "",
 i += e.href? "&href=" + e.href : "",
 i += "en" === e.lang? "&lang=en" : "",
 n.src = i,
 n.frameBorder = "0",
 n.allowTransparency = "true",
 n.sandbox = "allow-scripts allow-top-navigation allow-same-origin", // 添加这行代码！！
 n.scrolling = "no",
 n.width = "300px",
 n.height = "400px";
 var s = t.getElementById(e.id);
 s.innerHTML = "",
 s.appendChild(n)
    }
}(window, document);

6.4 hash路由出现 localhost:8000/?code=code&state=state/#/user/login

function fixUrl(url) {
 // 使用正则表达式提取IP、参数和哈希路由
 const matches = url.match(/^([^?#]+)(\?[^#]*)?(#.*)?$/);
 if (!matches) {
 return url; // 如果匹配失败，返回原始 URL
  }
 const [, baseUrl, queryParams, hashRoute] = matches;
 // 重新拼接 URL
 let fixedUrl = baseUrl + '#';
 if (hashRoute) {
 fixedUrl += hashRoute.replace(/^#/, ''); // 去除哈希路由前的 #
  }
 if (queryParams) {
 fixedUrl += '?' + queryParams.replace(/^\?/, ''); // 去除参数前的 ?
  }
 return fixedUrl;
}

function fixHashUrlAndJump() {
 if (location.href.includes(`/?code`)) {
 const currectpath = fixUrl(location.href);
 location.href = currectpath;
 return true;
  } else {
 return false;
  }
}


 useEffect(async () => {
   if (fixHashUrlAndJump()) {
     return;
   }
   const arrays = location?.hash?.split('?');
   const params = new URLSearchParams(arrays[1]);
   const code = params.get('code');
   const state = params.get('state');
   if (!code || !state) {
     return;
   }
},[]);