使用第三方微信登录

对外的网站难免会出现使用第三方登录的需求，比如微信，刚好它也有一些相关的文档，可以单独跳出扫码页面，也可以嵌入自己的项目，详情参考下面：

准备工作 | 微信开放文档

下面工作以react项目为例

1.引入weixin对外提供API的JS文件

在public文件夹下的index.html中引入：

2.声明对象

文档中介绍如下：

但在使用中并不能找到这个对象，错误如下：

在网上找到了一个方法，直接将对象挂载在windows下，并新建一个global.d.ts文件，对这个方法进行声明：

export {};

declare global {
  interface Window {
    WxLogin: Function;
  }
}

使用：

const params = new URL(res?.redirect_url).searchParams;
              window.WxLogin({
                self_redirect: true,
                id:"qrCode",
                appid: params.get('appid'),
                scope: params.get('scope'),
                redirect_uri: params.get('redirect_uri'),
                response_type: params.get('response_type')
              });

 我的参数是后台同事接口返回的，这个参数就视自己的情况而定；

3.自定义样式

herf属性提供我们自定义二维码的样式，比如改变大小或隐藏，默认文字并不能改写，但是你隐藏后可以自己给二维码加描述文字，官网上这样描述：

href接受的格式是这样的：‘data:text/css;base64,样式的BASE64格式’，样式的base64格式可以使用在线转码工具实现，例如这样：

base64进行转码

替换掉（‘data:text/css;base64,样式的BASE64格式’）红字，赋值给href即可。

4.问题

开发中可能会遇到的问题

1）cdn引入js文件的话注意在目标网站使用https链接，因为我本地使用nginx代理所以，开始用的http导致上线以后无法加载出二维码。错误如下：

2）扫描二维码之后无法跳转

观察看到应该是在浏览器打开二维码，但现在显示的是在iframe里面，查询参数参数self_redirect原来是设置了true：

去掉即可（默认为false）

还有其他二维码无法显示的情况，请自己对应：