关于微信公众号网页授权流程详细步骤

由于本人经验不足，后端不做事，只能到处找教程，拼接成完整流程供大家参考

1.由于后端不肯给我公众号的后台，我不知道域名，所以我通过内网穿透模拟了一个外网域名

我是通过natapp内网穿透工具，注册用户可以有两个免费通道用来测试，画框的那个教程里讲了详细步骤，具体大家有需要可以根据步骤实现

2.然后我们在微信公众平台申请一个测试号

我们需要通过公众号的appID还有公众号的密码(appsecret)跟微信服务器交互

根据下面我填写的格式，填写上我们内网穿透获取的域名

这里需要点击网页账号右侧的修改按钮进去修改域名

完成以上步骤后我们就可以编写代码了

3.用户进入授权页面同意授权，获取code

通过按钮或者链接引导用户点击，跳转到微信的用户授权页面，用户点击以后通过我们的公众号和回调地址给微信服务器发送请求，微信会返回给我们一个code

xml 复制代码

<body>
<button id="wx_login">微信授权登录</button>
<script>
    document.getElementById('wx_login').onclick = function() {
        var appid = ''; // 替换为你的公众号的APPID
        var redirect_uri = encodeURIComponent('你的授权回调页面地址'); // 替换为你的授权回调页面地址
        var state = 'STATE'; // 用于保持请求和回调的状态，防止csrf攻击（可选）

        // 用户同意授权后，会跳转到redirect_uri所在的页面，并带上code和state参数
        var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;

        // 引导用户跳转到授权页面
        window.location.href = url;
    };

    // 页面加载完成后检查URL中是否包含code参数（用户同意授权后会重定向回带有code的URL）
    window.onload = function() {
        var url = new URL(window.location.href);
        var code = url.searchParams.get('code');

        if (code) {
            // TODO: 将code发送到你的服务器端，由服务器端去调用微信接口获取access_token和openid
            console.log("获取到的code: ", code);
            // 可以使用AJAX发送code到服务器或者直接在页面上提示用户
        }
    };
</script>

4.通过code换取网页授权access_token

接收到返回的code以后，我们才能进行下一步，由于我这没有后端，只能通过postman测试把appid，appsecret和刚刚获取的code填写到postman上用get发送给微信服务器请求

bash 复制代码

`https://api.weixin.qq.com/sns/oauth2/access_tokenappid=${appId}&secret=${appsecret}&code=${code}&grant_type=authorization_code`

我们就可以获取到access_token 后面要用到这个请求用户信息

5.通过access_token获取用户信息

通过获取到的access_token和openid 来获取用户的信息我们主要用到微信昵称和微信头像

ini 复制代码

`https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN`

总结

通过以上步骤可以拿到用户信息的json，可以通过获取到的openid进行交互

第一次写文章，写的不好请见谅，由于只让我前端做，我刚工作满一年经验不足，通过查找教程和demo，最后通过B站UP主前端小技巧的视频和代码，通过他的node实现了一些功能，后端不做事实在太痛苦了