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

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

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

相关推荐
小墨宝18 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED34 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿38 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子38 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet