-
微信开发平台注册https://open.weixin.qq.com/
-
账号中心-填写基本资料（最好是公司注册）
-
账号中心-开发者资质认证（充钱，300）
-
审核通过之后，管理中心-网站应用-创建网站应用（AppSecret一定一定得记下来，不能放在前端，放在后端）
4步骤完成后会生成应用的appid -
资源中心-网站应用（查看方法）
-
在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;
}
},[]);
