微信公众号静默网页授权(前端开发、本地调试及上线)图文教程

 更新时间:2024年09月03日 11:14:42   作者:诗思雅  
这篇文章主要给大家介绍了关于微信公众号静默网页授权(前端开发、本地调试及上线)的相关资料,静默授权不需要用户确认,只需要用户访问某个网页,属于嵌套在普通网页里的授权形式,但是只能获取到用户的唯一标示openid,无法获取用户的个人信息,需要的朋友可以参考下

首页,要在公众号后台进行配置

用管理员/开发人员的账号,登录“微信公众平台”:https://mp.weixin.qq.com/

1、打开 【设置与开发】 -【开发者工具】 -【web开发者工具】

2、配置网站域名,就是上线后的后端接口域名,下方图片中的业务域名、js接口安全域名、网页授权域名 ,都需要配置

3、添加开发者微信号,然后必须在“微信开发者工具”登录这个账号,才能进行本地调试

要求要关注“公众平台安全助手”公众号,且不能开免打扰

本地调试(微信开发者工具)

配置公众号平台的测试账号、调试

在【设置与开发】-【开发者工具】-【公众平台测试账号】,点进去。

在这里,微信官方提供了一个测试号,本地调试的话,先这个测试号来调网页授权功能。后期部署到线上,再换成自己的公众号的appId和配置线上后端的域名,这是后面本地调试没问题了,再放到线上到这一步。

在下方找到【网站授权获取用户基本信息】,点修改,输入你本地启动的项目IP地址了,注意,只输入IP,不要输入http://,也不要端口,默认端口是80

这是因为微信重定向不支持带端口的访问域名,配置80端口,就可以只输入网址,所以启动的项目端口也必须设置成80端口

最后一步,调试:打开微信开发者工具 -> 公众号网页项目 -> 在地址栏中输入启动后的地址

代码

window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=测试号的appid&redirect_uri=" +
        "http://192.168.03.130/${这里可以拼你要跳转的路由,不拼则默认跳到首页,例如/pages/home}" +
        "&response_type=code&scope=snsapi_base#wechat_redirect";
参数说明
appid公众号的appid
redirect_uri授权后重定向的回调链接地址,例如授权成功后,希望进入到绑定手机号的页面(假设是/pages/bindPhone),就可以写http://192.168.03.130/pages/bindPhone
response_type返回类型,就填code就可以了号
scope应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
state重定向会带上state参数,可填a-zA-Z0-9,就是路由参数,例如state=123,那么在/pages/bindPhone 页面中就可以拿到这个参数了
#wechat_redirect必带

到最后会跳转到 /pages/bindPhone?code=CODE&state=123我们做这些授权的目的就是为了得到code,code这个玩意就是得到access_token的敲门砖,code每次授权都不一样,每次的code只能使用一次,5分钟过期

拿到code之后,就可以跟后端换token了~

一般会把获取code 和 授权跳转到 https://open.weixin.qq.com 写在同一个页面的第一个生命周期里,有code时,就去换token,没有code就去授权

总结 

到此这篇关于微信公众号静默网页授权(前端开发、本地调试及上线)的文章就介绍到这了,更多相关微信公众号静默网页授权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • DeepSeek本地部署+可视化WebUI的实现(图文教程)

    DeepSeek本地部署+可视化WebUI的实现(图文教程)

    本文主要介绍了在本地部署DeepSeek并使用可视化WebUI进行AI辅助,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-02-02
  • 一文教你在现有Vue项目中嵌入Blazor项目

    一文教你在现有Vue项目中嵌入Blazor项目

    目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在Vue的现有项目中嵌入使用Blazor项目。文中的方法讲解详细,感兴趣的小伙伴可以了解一下
    2023-01-01
  • 伪静态技术介绍与优缺点分析(较完整篇)

    伪静态技术介绍与优缺点分析(较完整篇)

    伪静态太适合用在普通的企业网站上了——既不要求高并发,但同时又很在乎seo(搜索引擎优化),而且也要求后台可动态更新。
    2009-11-11
  • antd通过 filterDropdown 自定义按某天时间搜索功能

    antd通过 filterDropdown 自定义按某天时间搜索功能

    这篇文章主要介绍了antd通过 filterDropdown 自定义按某天时间搜索功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 详解SHA-256算法的原理以及C#和JS的实现

    详解SHA-256算法的原理以及C#和JS的实现

    SHA-256 是 SHA-2 下细分出的一种算法。截止目前(2023-03)未出现“碰撞”案例,被视为是绝对安全的加密算法之一,本文主要介绍了SHA-256算法的原理以及C#和JS的实现,希望对大家有所帮助
    2023-03-03
  • 解决Jrebel用户名中文导致用不了的问题

    解决Jrebel用户名中文导致用不了的问题

    这篇文章主要介绍了解决Jrebel用户名中文导致用不了的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-10-10
  • 解决使用IDE Run运行出错package pack/test is not in GOROOT (/usr/local/go/src/pack/test)

    解决使用IDE Run运行出错package pack/test is not in GOROOT (/usr/loca

    这篇文章主要介绍了解决使用IDE Run运行出错package pack/test is not in GOROOT (/usr/local/go/src/pack/test),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • git版本库创建拓展添加文件到版本库教程

    git版本库创建拓展添加文件到版本库教程

    这篇文章主要为大家介绍了git版本库创建拓展添加文件到版本库教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • visualstudio的.sln文件和.vcxproj文件的区别

    visualstudio的.sln文件和.vcxproj文件的区别

    .sln 文件和 .vcxproj 文件是两个常用的项目文件,本文主要介绍了visualstudio的.sln文件和.vcxproj文件的区别,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • C++,C#,Rust,Go,Java,Python,JavaScript的性能对比全面讲解

    C++,C#,Rust,Go,Java,Python,JavaScript的性能对比全面讲解

    这篇文章主要介绍了C++,C#,Rust,Go,Java,Python,JavaScript性能对比全面讲解的相关资料,这些语言各有特点,适用于不同的开发需求,C++和Rust在系统级和高性能任务中表现出色,而Python和JavaScript则更适合快速原型和Web开发,需要的朋友可以参考下
    2025-12-12

最新评论