微信公众号网页授权域名和JS接口安全域名配置攻略 |
您所在的位置：网站首页 › 公众号怎么弄白名单 › 微信公众号网页授权域名和JS接口安全域名配置攻略 |
微信公众号网页授权域名和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; } @Override protected 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); } @Override public 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或端口号以及短链域名。 比如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 本篇完～ |
我们可以看到正如下图所示有两个非常常用的接口：微信登陆和微信分享。 
关于使用分享接口和不使用分享接口的例子如下图所示： 
可以看出使用分享接口是会看起来更美观，用户体验更好。
在配置之前先来说下不配置会出现什么错误：
为了解决这个问题，我们可以通过nginx 设置请求转发。【本文地址】
今日新闻 |
推荐新闻 |