微信公衆號網頁授權域名和JS接口安全域名配置攻略

這篇博文跟大家分享下如何配置微信公衆號網頁授權域名和JS接口安全域名配置。

---

1. 打開微信公衆平臺 https://mp.weixin.qq.com/

2. 登陸成功後進入微信公衆平臺後臺管理，在最底部可以看到 開發—》接口權限
   
   我們可以看到正如下圖所示有兩個非常常用的接口：微信登陸和微信分享。
   
   關於使用分享接口和不使用分享接口的例子如下圖所示：
   
   可以看出使用分享接口是會看起來更美觀，用戶體驗更好。

3. 接下來講解下這方面的重點配置 網頁授權域名和JS接口安全域名配置

我們在 設置-------》公衆號設置 可以看到網頁授權域名和JS接口安全域名配置

在配置之前先來說下不配置會出現什麼錯誤：

JS接口安全域名如果不配置或配置不正確，那麼會提示 config:invalid signature

網頁授權域名如果不通，那麼將無法微信登陸成功。

4. 如何配置這兩部分呢？

在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

本篇完～