网站应用微信登录-内嵌二维码-开发问题记录

1. 问题背景

系统之前只有密码登录和短信验证码登录。前2天，接入了微信扫码登录，这是微信的官方文档：网站应用微信登录开发指南

一开始我们使用了第一种获取code的方式，即在pc端打开以下链接：https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect。
这种方式没什么好说的，配置好redirect_uri，然后在当前页面跳转或跳转新页面都可以，我们使用了刷新当前页面。很多网站的微信登录也使用了这种方式

但是后面产品要求我们使用第二种获取code的方式，即将“微信登录二维码内嵌到自己页面”，理由是“第一种方式，用户点击以后发现点错了，还要点击浏览器左上角的返回才能回去”

在使用内嵌微信二维码的时候，遇到了几个问题，记录一下。这些问题“恰好”在文档里面都没有明确说明

2. style=“white” 无效

生成的二维码默认是黑色描述文字。
如果我们的背景色是深色，就需要配置成白色描述文字。
在这里插入图片描述
我们本来是从第一种方式换到了第二种方式，所以直接把第一种方式的链接接参数对比填入到了第二种方式：

        var obj = new WxLogin({
    
    
            self_redirect: false,
            id: "login_container",
            appid: "你的用户id",
            scope: "snsapi_login",
            redirect_uri: "你的跳转地址",
            state: "STATE#wechat_redirect",
            style: "white",
            href: ""
        });

我们是打算配置白色文字描述，但是使用上面的代码运行以后，即使配置了style: "white"出来的二维码仍然是黑色文字描述。

从微信网页授权文档这里，可以知道#wechat_redirect 是一个独立的参数。所以修改上述配置后，可以出现正常的白色文字描述。

        var obj = new WxLogin({
    
    
            self_redirect: false,
            id: "login_container",
            appid: "你的用户id",
            scope: "snsapi_login",
            redirect_uri: "你的跳转地址",
            state: "STATE",
            style: "white",
            href: ""
        });

3. self_redirect=false 重定向被禁止

使用self_redirect:false 配置，手机微信扫码确认以后，发现没有谷歌浏览器没有反应，再看右上角显示重定向被禁止。

在网上搜了一下，很多人说修改wxLogin.js的源码，但是感觉应该没有这么low。

最后在微信扫码登录本地测试时地址栏弹出已禁止重定向这篇里面看到，提到说是跨域问题导致的，就试了一下，完美解决。我是本地测试的，测试地址是192.168.x.xxx，而且配置的扫码域名是www.xxx.com。

4. href使用base64

href字段文档里面说是要使用css文件地址，来覆盖样式：
在这里插入图片描述

但是我看见很多人说可以使用base64，不知道他们都是从哪儿知道的。使用base64的过程如下：

① 有一组样式：

.impowerBox #wx_default_tip p:nth-last-child(1)  { display: none; }

② 转base64：
base64.us
在这里插入图片描述
Base64 编码或解码的结果：LmltcG93ZXJCb3ggI3d4X2RlZmF1bHRfdGlwIHA6bnRoLWxhc3QtY2hpbGQoMSkgIHsgZGlzcGxheTogbm9uZTsgfQ==

③ 写入到herf字段：

格式如下：

href: "data:text/css;base64,后面是base串"

所以上述的覆盖样式最终配置是：

 href: "data:text/css;base64,LmltcG93ZXJCb3ggI3d4X2RlZmF1bHRfdGlwIHA6bnRoLWxhc3QtY2hpbGQoMSkgIHsgZGlzcGxheTogbm9uZTsgfQ=="

5. 二维码过期时间

通过new WxLogin 这种内嵌方式生产的二维码是会自动更新的，不需要开发者做定时刷新。

网站应用的微信登录二维码有效期是多久，会自动刷新么？这里有提到是5分钟更新一下
在这里插入图片描述
具体是不是5分钟，我没有试。但是过一段时间的确是会更新，比如我们一开始通关f12把二维码图片的复制下来：

https://open.weixin.qq.com/connect/qrcode/0718bOKc3Aabml2S

等过几分钟，就会发现，通过f12看到的二维码图片地址变成了

https://open.weixin.qq.com/connect/qrcode/031wng7X0tyNFa1Z

如果你闲的没事，一直盯着二维码，就会发现它过一会儿会自己闪一下。