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

Java EE 修炼日记 专栏收录该内容
6 篇文章 0 订阅

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


  1. 打开微信公众平台 https://mp.weixin.qq.com/

  2. 登陆成功后进入微信公众平台后台管理,在最底部可以看到 开发—》接口权限
    在这里插入图片描述
    我们可以看到正如下图所示有两个非常常用的接口:微信登陆和微信分享。
    在这里插入图片描述
    关于使用分享接口和不使用分享接口的例子如下图所示:
    在这里插入图片描述
    可以看出使用分享接口是会看起来更美观,用户体验更好。

  3. 接下来讲解下这方面的重点配置 网页授权域名和JS接口安全域名配置

我们在 设置-------》公众号设置 可以看到网页授权域名JS接口安全域名配置
在这里插入图片描述
在配置之前先来说下不配置会出现什么错误:

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

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

  1. 如何配置这两部分呢?

在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或端口号以及短链域名。
在这里插入图片描述
为了解决这个问题,我们可以通过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

本篇完~

  • 2
    点赞
  • 0
    评论
  • 10
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:终极编程指南 设计师:CSDN官方博客 返回首页

打赏作者

技术宅星云

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值