登录页扫码登录关闭第三方登录弹窗

背景

登录页面，需要嵌入第三方登录，比如点击微信登录，将弹出一个新的浏览器窗口，扫码成功后，在关闭微信登录窗口，然后登录页显示登录成功跳转。

问题

1.解决两个窗口的通信问题 2.能够拿到扫码成功或者失败的反馈

方案

通信问题：基本上首先想到的是postmessage，这是前端最常规的方案 扫码结果：后端会直接重定向url，redirect到我们的落地页，然后在落地页直接判断即可，不需要二外的请求。
因此直接在落地页写如下代码

if (window.opener && window.opener !== window) {
    window.opener.postMessage(window.location.href, '*');
    window.addEventListener('beforeunload', () => {
        window.opener.postMessage(window.location.href, '*');
    });
    window.addEventListener('hashchange', () => {
        window.opener.postMessage(window.location.href, '*');
    });
}

登录页的逻辑如下，如果弹窗显示的是我们自己的url，则代表登录成功，我们就可以从登录页直接跳转

                const openWin = window.open(url, displayName, params);
                window.addEventListener('message', evt => {
                    if (evt.data?.indexOf(window.location.host) >= 0 && !openWin.closed) {
                        openWin.close();
                        message.success('登录成功');
                        window.location.href = '/';
                    }
                });

结果

最终实现了一个扫马登录的效果