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

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

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实现了一些功能,后端不做事实在太痛苦了

相关推荐
树上有只程序猿19 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队2 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯