什么？cursor帮我完成微信公众号登录的接口开发全流程

什么？cursor帮我完成微信公众号登录的nest接口开发

前言

在当前数字化浪潮中，微信公众号已成为众多企业和开发者拓展业务、积累用户的重要平台。随着用户需求的不断增长和业务的日益复杂，传统的登录方式已难以满足用户对便捷性和安全性的要求，网页接入微信公众号登录功能应运而生。

微信公众号登录不仅为用户提供了快速、安全的登录体验，还为开发者提供了丰富的用户信息和强大的社交能力，成为提升用户粘性和活跃度的关键手段。

接下来，本文将为您详细介绍网页接入微信公众号登录的实现方案。

首先，登录微信公众号平台，找到开发者设置，在这里填写对应的服务器信息，先可以本地调试，这里的url要后端去编写一个接口去响应，token要跟环境变量一致才会校验成功

url可以使用vscode的端口转发，不用去折腾其他，简单高效，当然你也可以选择你熟悉的方式去进行接口转发~

打印最终的结果

创建一个接口wechat/check来响应微信公众号上配置服务器响应token

在原本的user上写，比较乱，让cursor重新创建一个目录，按照nest的命令创建的代码目录和规范去创建

创建的目录如下，还是比较清晰的

踩坑点

微信公众号一直报token无效，这是由于nest项目，统一返回的数据格式，微信校验跟他返回的不一致，这里希望微信可以返回对应的提示，对接体验确实不好（大家都应该这样认为的）

最终正确的返回结果，不要踩坑了

解决方案：

在拦截器将这个路径不按照项目统一的返回格式，这样就没有问题啦~

接下来就是完成二维码返回，提供给前端扫码使用

typescript 复制代码

// 返回微信公众号登录的二维码  
    async getWechatQrcode(sceneStr: string) {

        const appId = this.configService.get<string>('WECHAT_APP_ID');  
        const appSecret = this.configService.get<string>('WECHAT_APP_SECRET');

        // 获取 access_token  
        const tokenUrl = `<https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid>=${appId}&secret=${appSecret}`;  
        const tokenRes = await axios.get(tokenUrl);  
        const accessToken = [tokenRes.data](http://tokenRes.data).access_token;  
        console.log("🚀 ~ WechatService ~ getWechatQrcode ~ appId:", appId, appSecret, accessToken)

        // 创建二维码  
        const payload = {  
            expire_seconds: 300,  
            action_name: 'QR_STR_SCENE',  
            action_info: {  
                scene: {  
                    scene_str: sceneStr,  
                },  
            },  
        };

        const qrRes = await [axios.post](http://axios.post)(  
            `<https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token>=${accessToken}`,  
            payload  
        )  
        const ticket = [qrRes.data](http://qrRes.data).ticket;  
        console.log("🚀 ~ WechatService ~ getWechatQrcode ~ ticket:", [qrRes.data](http://qrRes.data))

        return {  
            qrCodeUrl: `<https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket>=${encodeURIComponent(ticket)}`,  
            sceneStr,  
        };  
    }

后续的流程就是轮询二维码，微信接口回调，拿到唯一的openId，nest后端创建账户并把账户信息返回，完成登录

总结

熟悉微信公众号登录的，可以轻松接入，不熟悉的小白，可能第一步配置服务器就劝退了，大致的流程就是这样，如果还有不清楚的地方可以在评论区留下你的评论~