微信扫码登录统一封装 - Byte的独立内容站

709 字

4 分钟

微信扫码登录统一封装

2025-11-12

无标签

微信扫描登录#

在网页中嵌入微信的登录二维码，会在login_container 下嵌入一个iframe ，iframe 的地址其实就是 “https://open.weixin.qq.com/connect/qrconnect?`appid`=APPID&`redirect_uri`=REDIRECT_URI&`response_type`=code&`scope`=SCOPE&`state`=STATE#wechat_redirect” ，URL中对应的参数就是WxLogin的构造参数。

1
var obj = new WxLogin({
2
  self_redirect:true,
3
  id:"login_container",
4
  appid: "",
5
  scope: "",
6
  redirect_uri: "",
7
  state: "",
8
  style: "",
9
  href: "",
10
  onReady: function(isReady){
11
    console.log(isReady);
12
  }
13
});

在扫码完成登录后，该iframe就会重定向到redirect_uri ，并在url的参数中拼接code参数。 redirect_uri 是微信登录成功界面。此页面可以获取到code，在页面加载后，读取code 通过window.postMessage ，将code传递给上一级网页。

统一的重定向地址#

扩展实现一个支持多种方式回传code与state的网页：

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
    <title>Redirect...</title>
9

10
</head>
11

12
<body>
13
<div class="container">
14
    <div class="loading">
15
        加载中...
16
    </div>
17
    <script>
18
        var urlParams = new URLSearchParams(window.location.search);
19
        var code = urlParams.get('code')
20
        var state = urlParams.get('state')
21
        var key = urlParams.get('key')
22
        var redirect = urlParams.get('redirect')
23
        /*
24
        回传 JSON.stringfy({ code, state }) 的方式：
25
        pm: parent.postMessage
26
        ss: 直接将值设置到 sessionStorage.setItem(key, ... )
27
        r: 重定向：调整到 redirect 的地址，拼接参数 code与state，redirect需要解码
28
        */
29
        var ct = urlParams.get('ct');
30

31
        function main() {
32
            // 根据 ct 参数值执行不同的操作
33
            const data = {code, state};
34
            const dataStr = JSON.stringify(data);
35

36
            switch (ct) {
37
                case 'pm':
38
                    // 使用 parent.postMessage 回传数据
39
                    if (window.parent && window.parent !== window) {
40
                        let targetOrigin;
41
                        try {
42
                            targetOrigin = window.parent.origin;
43
                        } catch (error) {
44
                            console.log('读取 window.parent.origin 失败，使用默认 targetOrigin:', error);
45
                            targetOrigin = location.origin
46
                        }
47
                        window.parent.postMessage({action: 'WECHAT_LOGIN_SUCCESS', data}, targetOrigin);
48
                    }
49
                    break;
50
                case 'ss':
51
                    // 使用 sessionStorage.setItem 回传数据
52
                    if (key) {
53
                        sessionStorage.setItem(key, dataStr);
54
                    }
55
                    break;
56
                case 'r':
57
                    // 重定向：调整到 redirect 的地址，拼接参数 code 与 state
58
                    if (redirect) {
59
                        const decodedRedirect = decodeURIComponent(redirect);
60
                        const redirectUrl = new URL(decodedRedirect);
61
                        redirectUrl.searchParams.set('code', code);
62
                        redirectUrl.searchParams.set('state', state);
63
                        window.location.href = redirectUrl.toString();
64
                    }
65
                    break;
66
                default:
67
                    // 如果未指定或指定错误的 ct 值，默认使用 postMessage
68
                    if (window.parent && window.parent !== window) {
69
                        let targetOrigin = '*';
70
                        try {
71
                            targetOrigin = window.parent.origin;
72
                        } catch (error) {
73
                            console.log('读取 window.parent.origin 失败，使用默认 targetOrigin:', error);
74
                        }
75
                        window.parent.postMessage(data, targetOrigin);
76
                    }
77
                    break;
78
            }
79
        }
80

81
        main();
82
    </script>
83
</div>
84
</body>
85
</html>

例如使用：#

预期使用同源的postMessage来传递消息：本地、开发、测试、线上域名都不一样。而微信的验证回调只能填写一个地址。所以预期的方案是由这个唯一的地址根据参数进行不同的操作，将参数回传。假设验证回调为：https://q.xxxx.com/wxcb?ct=r&redirect=${redirect} 本地是localhost:9000 ，用户扫描登陆后会触发回调https://q.xxxx.com/wxcb?ct=r&redirect=${redirect}&code=x&state=x ，将 redirect 调整为本地的localhost:9000/wxcb.html?ct=pm ，就会再跳转到localhost:9000/wxcb.html?ct=pm&code=x&state=x再由此网页通过同源postMessage将code传递给当前网页去完成登陆。这样当前网页就不用刷新了，几个步骤的网页都在当前网页的iframe中刷新

1
  const initWechatLogin = useCallback(() => {
2
    try {
3
      const redirect = encodeURIComponent(
4
        `${location.protocol}//${location.host}/wxcb.html?ct=pm`
5
      )
6
      // 创建微信登录实例
7
      new window.WxLogin({
8
        id: 'wechat-login-container',
9
        self_redirect: true,
10
        appid: APP_ID,
11
        scope: 'snsapi_login',
12
        redirect_uri: encodeURIComponent(
13
          `https://q.xxxx.com/wxcb?ct=r&redirect=${redirect}`
14
        ),
15
        state: 'lite',
16
        style: '',
17
      })
18
    } catch (error) {
19
      onError?.(error)
20
    }
21
  }, [])