微信公众号网页授权域名和JS接口安全域名配置攻略

这篇博文跟大家分享下如何配置微信公众号网页授权域名和JS接口安全域名配置。

打开微信公众平台 https://mp.weixin.qq.com/
登陆成功后进入微信公众平台后台管理，在最底部可以看到 开发—》接口权限

我们可以看到正如下图所示有两个非常常用的接口：微信登陆和微信分享。

关于使用分享接口和不使用分享接口的例子如下图所示：

可以看出使用分享接口是会看起来更美观，用户体验更好。
接下来讲解下这方面的重点配置网页授权域名和JS接口安全域名配置

我们在 设置-------》公众号设置 可以看到网页授权域名和JS接口安全域名配置

在配置之前先来说下不配置会出现什么错误：

JS接口安全域名如果不配置或配置不正确，那么会提示 config:invalid signature

网页授权域名如果不通，那么将无法微信登陆成功。

如何配置这两部分呢？

在Spring Boot 中如果配置了拦截器，那么需要配置如下两处地方：

import com.xxxx.interceptor.MyTokenAuthorityInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;/*** @author qing-feng.zhao* @description 静态资源处理* @date 2019/11/23 10:06*/
@Component
@Configuration
public class StaticResourceConfig extends WebMvcConfigurationSupport {/*** 添加自定义拦截器*/private final MyTokenAuthorityInterceptor myTokenAuthorityInterceptor;public StaticResourceConfig(MyTokenAuthorityInterceptor myTokenAuthorityInterceptor) {this.myTokenAuthorityInterceptor = myTokenAuthorityInterceptor;}@Overrideprotected void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(myTokenAuthorityInterceptor).addPathPatterns("/**").excludePathPatterns("/swagger-ui.html/**").excludePathPatterns("/webjars/**").excludePathPatterns("/v2/**").excludePathPatterns("/swagger-resources/**").excludePathPatterns("/static/**").excludePathPatterns("/actuator/**").excludePathPatterns("/csrf/**").excludePathPatterns("/home-page.do").excludePathPatterns("/toLoginPage.do").excludePathPatterns("/read-api-page.do").excludePathPatterns("/csrf/**").excludePathPatterns("/csrf").excludePathPatterns("/MP_verify_oO9gqu9Pv8fY06o0.txt").excludePathPatterns("/").order(1);}@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {//自定义框架资源处理registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");//Swagger 静态资源处理registry.addResourceHandler("/swagger-ui.html").addResourceLocations("classpath:/META-INF/resources/");registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");registry.addResourceHandler("/csrf/**").addResourceLocations("classpath:/META-INF/resources/webjars/");registry.addResourceHandler("/MP_verify_oO9gqu9Pv8fY06o0.txt").addResourceLocations("classpath:/MP_verify_oO9gqu9Pv8fY06o0.txt");}
}

如果是纯静态页面,那么我们可以用Jetty .

之所以推荐使用Jetty 而不是tomcat 是因为Jetty 更加简单，不需要繁琐的配置环境变量，直接java -jar start.jar 方式启动

Jetty 下载地址: https://www.eclipse.org/jetty/download.html

完事后我们需要在webapps 目录下创建一个ROOT文件夹，然后将MP_verify_********.txt 放进去。

这样才可以通过域名：http://xxx.com/MP_verify_********.txt 访问，验证通过视为这个域名可以正常访问。

当然，Jetty 默认是8080端口，而这里的配置是不支持IP或端口号以及短链域名。

为了解决这个问题，我们可以通过nginx 设置请求转发。

比如api.xxx.com 域名 80端口映射到这个端口上即可。

     server {listen       80;server_name  html5.xxx.com;large_client_header_buffers 4 16k;client_max_body_size 300m;client_body_buffer_size 128k;proxy_connect_timeout 600;proxy_read_timeout 600;proxy_send_timeout 600;proxy_buffer_size 64k;proxy_buffers   4 32k;proxy_busy_buffers_size 64k;proxy_temp_file_write_size 64k;location ^~ / {proxy_redirect off;proxy_set_header x-real-ip $remote_addr;proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;proxy_set_header host $http_host;proxy_pass   http://127.0.0.1:8085/;}}server {listen       80;server_name  api.xxx.com;large_client_header_buffers 4 16k;client_max_body_size 300m;client_body_buffer_size 128k;proxy_connect_timeout 600;proxy_read_timeout 600;proxy_send_timeout 600;proxy_buffer_size 64k;proxy_buffers   4 32k;proxy_busy_buffers_size 64k;proxy_temp_file_write_size 64k;location ^~ /api/ {proxy_redirect off;proxy_set_header x-real-ip $remote_addr;proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;proxy_set_header host $http_host;proxy_pass   http://127.0.0.1:8087/api/;}}

上面是HTML5映射，下面是Restful API 地址。

如果是请求api.xxx.com 就将http://api.xxx.com:80端口映射到 http://api.xxx.com:8087/api/

如果是请求html5.xxx.com 就将http://html5.xxx.com:80端口映射到 http://api.xxx.com:8085

最后按照JS-SDK 进行开发即可

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

本篇完～

微信公众号网页授权域名和JS接口安全域名配置攻略相关推荐

微信公众号网页授权--前端获取code及用户信息（vue）
前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的踩坑填坑之路. 一.测试号相关配置首先在你公司申请的测试号上配置好相关信息 ...
微信公众号网页授权登录的超简单实现步骤
微信开放平台为第三方移动程序提供分享.传播的接口, 使用户可将第三方程序的内容发布给好友或分享至朋友圈, 下面这篇文章主要给大家介绍了关于微信公众号网页授权登录的超简单实现方法, 需要的朋友可以参考下 ...
微信公众号网页授权--前端获取code及用户信息（vue）【简单详细版】
嗨喽大家好,前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的遇到的一些问题的见解,希望对你们有帮助. 一.测试号相关配置首 ...
微信公众号网页授权40163问题【php】
微信公众号网页授权40163问题 tp5为例,emmmm-一直报40163或40029问题,翻遍了各大网站都没找到合适我的办法. 如图: 解决之后如图: 因为重定向所以请求了两次code,所以一直报4 ...
php微信授权没有code返回,解决关于微信公众号网页授权获取code参数的问题
解决关于微信公众号网页授权获取code参数的问题发布时间:2018-07-24 23:21, 浏览次数:3327 , 标签: code * 在微信网页授权过程中,需要获取code参数,因为我用的是公 ...
微信公众号网页授权思路解析及具体代码
微信公众号网页授权思路解析及具体代码微信开发文档实现方式也是两种: 1.静默授权登录授权登录以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静 ...
微信公众号网页授权，获取用户信息以及openid -- PHP后台
微信公众号网页授权,获取用户信息以及openid 这几天做项目,想通过公众号的appid获取用户的openid就,然后在网上查资料,问朋友,最后找到了方法,就是这个网页授权. 起初一直很蒙,这个怎么弄 ...
微信公众号网页授权时序图
微信公众号网页授权时序图公众号网页授权时序图
微信公众号网页授权代码优化过程（一）
2019独角兽企业重金招聘Python工程师标准>>> 第一次更新写本系列博客的主要原因是,我在处理一个微信公众号项目时要做一个网页授权的操作(官方地址是https://mp.we ...
在做微信公众号网页授权的时候，有时会重定向两次网页（302问题）
在做微信公众平台网页授权时,发现每次请求授权链接 https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_ ...

微信公众号网页授权域名和JS接口安全域名配置攻略

微信公众号网页授权域名和JS接口安全域名配置攻略相关推荐

最新文章

热门文章