Spring Security中實現微信網頁授權

碼農小胖哥發表於2021-08-15
Spring網頁

微信公眾號提供了微信支付、微信優惠券、微信H5紅包、微信紅包封面等等促銷工具來幫助我們的應用拉新保活。但是這些福利要想正確地發放到使用者的手裡就必須拿到使用者特定的（微信應用）微信標識openid甚至是使用者的微信使用者資訊。如果使用者在微信客戶端中訪問我們第三方網頁，公眾號可以通過微信網頁授權機制，來獲取使用者基本資訊，進而實現業務邏輯。今天就結合Spring Security來實現一下微信公眾號網頁授權。

環境準備

在開始之前我們需要準備好微信網頁開發的環境。

微信公眾號服務號

請注意，一定是微信公眾號服務號，只有服務號才提供這樣的能力。像胖哥的這樣公眾號雖然也是認證過的公眾號，但是隻能發發文章並不具備提供服務的能力。但是微信公眾平臺提供了沙盒功能來模擬服務號，可以降低開發難度，你可以到微信公眾號測試賬號頁面申請，申請成功後別忘了關注測試公眾號。

微信公眾號服務號只有企事業單位、政府機關才能開通。

內網穿透

因為微信伺服器需要回撥開發者提供的回撥介面，為了能夠本地除錯，內網穿透工具也是必須的。啟動內網穿透後，需要把內網穿透工具提供的虛擬域名配置到微信測試帳號的回撥配置中

點選修改配置測試賬戶回撥域名

開啟後只需要填寫域名，不要帶協議頭。例如回撥是https://felord.cn/wechat/callback，只能填寫成這樣：

然後我們就可以開發了。

OAuth2.0客戶端整合

基於 Spring Security 5.x

微信網頁授權的文件在網頁授權，這裡不再贅述。我們只聊聊如何結合Spring Security的事。微信網頁授權是通過OAuth2.0機制實現的，在使用者授權給公眾號後，公眾號可以獲取到一個網頁授權特有的介面呼叫憑證（網頁授權access_token），通過網頁授權獲得的access_token可以進行授權後介面呼叫，如獲取使用者的基本資訊。

我們需要引入Spring Security提供的OAuth2.0相關的模組：

       <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-oauth2-client</artifactId>
        </dependency>

由於我們需要獲取使用者的微信資訊，所以要用到OAuth2.0 Login；如果你用不到使用者資訊可以選擇OAuth2.0 Client。

微信網頁授權流程

接著按照微信提供的流程來結合Spring Security。

獲取授權碼code

微信網頁授權使用的是OAuth2.0的授權碼模式。我們先來看如何獲取授權碼。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

這是微信獲取code的OAuth2.0端點模板，這不是一個純粹的OAuth2.0協議。微信做了一些引數上的變動。這裡原生的client_id被替換成了appid，而且末尾還要加#wechat_redirect 。這無疑增加了整合的難度。

這裡先放一放，我們目標轉向Spring Security的code獲取流程。

Spring Security會提供一個模版連結：

{baseUrl}/oauth2/authorization/{registrationId}

當使用該連結請求OAuth2.0客戶端時會被OAuth2AuthorizationRequestRedirectFilter攔截。機制這裡不講了，在我個人部落格felord.cn中的Spring Security 實戰乾貨：客戶端OAuth2授權請求的入口一文中有詳細闡述。

攔截之後會根據配置組裝獲取授權碼的請求URL，由於微信的不一樣所以我們針對性的定製，也就是改造OAuth2AuthorizationRequestRedirectFilter中的OAuth2AuthorizationRequestResolver。

自定義URL

因為Spring Security會根據模板連結去組裝一個連結而不是我們填引數就行了，所以需要我們對構建URL的處理器進行自定義。

/**
 * 相容微信的oauth2 端點.
 *
 * @author n1
 * @since 2021 /8/11 17:04
 */
public class WechatOAuth2AuthRequestBuilderCustomizer {
   private static final String WECHAT_ID= "wechat";

    /**
     * Customize.
     *
     * @param builder the builder
     */
    public static void customize(OAuth2AuthorizationRequest.Builder builder) {
       String regId = (String) builder.build()
               .getAttributes()
               .get(OAuth2ParameterNames.REGISTRATION_ID);
       if (WECHAT_ID.equals(regId)){
           builder.authorizationRequestUri(WechatOAuth2RequestUriBuilderCustomizer::customize);
       }
    }

    /**
     * 定製微信OAuth2請求URI
     *
     * @author n1
     * @since 2021 /8/11 15:31
     */
    private static class WechatOAuth2RequestUriBuilderCustomizer {

        /**
         * 預設情況下Spring Security會生成授權連結：
         * {@code https://open.weixin.qq.com/connect/oauth2/authorize?response_type=code
         * &client_id=wxdf9033184b238e7f
         * &scope=snsapi_userinfo
         * &state=5NDiQTMa9ykk7SNQ5-OIJDbIy9RLaEVzv3mdlj8TjuE%3D
         * &redirect_uri=https%3A%2F%2Fmovingsale-h5-test.nashitianxia.com}
         * 缺少了微信協議要求的{@code #wechat_redirect}，同時 {@code client_id}應該替換為{@code app_id}
         *
         * @param builder the builder
         * @return the uri
         */
        public static URI customize(UriBuilder builder) {
            String reqUri = builder.build().toString()
                    .replaceAll("client_id=", "appid=")
                    .concat("#wechat_redirect");
            return URI.create(reqUri);
        }
    }
}

配置解析器

把上面個性化改造的邏輯配置到OAuth2AuthorizationRequestResolver:

/**
 * 用來從{@link javax.servlet.http.HttpServletRequest}中檢索Oauth2需要的引數並封裝成OAuth2請求物件{@link OAuth2AuthorizationRequest}
 *
 * @param clientRegistrationRepository the client registration repository
 * @return DefaultOAuth2AuthorizationRequestResolver
 */
private OAuth2AuthorizationRequestResolver oAuth2AuthorizationRequestResolver(ClientRegistrationRepository clientRegistrationRepository) {
    DefaultOAuth2AuthorizationRequestResolver resolver = new DefaultOAuth2AuthorizationRequestResolver(clientRegistrationRepository,
            OAuth2AuthorizationRequestRedirectFilter.DEFAULT_AUTHORIZATION_REQUEST_BASE_URI);
    resolver.setAuthorizationRequestCustomizer(WechatOAuth2AuthRequestBuilderCustomizer::customize);
    return resolver;
}

配置到Spring Security

適配好的OAuth2AuthorizationRequestResolver配置到HttpSecurity,虛擬碼:

    httpSecurity.oauth2Login()
                //  定製化授權端點的引數封裝
                .authorizationEndpoint().authorizationRequestResolver(authorizationRequestResolver)

通過code換取網頁授權access_token

接下來第二步是用code去換token。

構建請求引數

這是微信網頁授權獲取access_token的模板：

GET https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

其中前半段https://api.weixin.qq.com/sns/oauth2/refresh_token可以通過配置OAuth2.0的token-uri來指定；後半段引數需要我們針對微信進行定製。Spring Security中定製token-uri的工具由OAuth2AuthorizationCodeGrantRequestEntityConverter這個轉換器負責，這裡需要來改造一下。

我們先拼接引數：

    private MultiValueMap<String, String> buildWechatQueryParameters(OAuth2AuthorizationCodeGrantRequest authorizationCodeGrantRequest) {
        // 獲取微信的客戶端配置
        ClientRegistration clientRegistration = authorizationCodeGrantRequest.getClientRegistration();
        OAuth2AuthorizationExchange authorizationExchange = authorizationCodeGrantRequest.getAuthorizationExchange();
        MultiValueMap<String, String> formParameters = new LinkedMultiValueMap<>();
        // grant_type
        formParameters.add(OAuth2ParameterNames.GRANT_TYPE, authorizationCodeGrantRequest.getGrantType().getValue());
        // code
        formParameters.add(OAuth2ParameterNames.CODE, authorizationExchange.getAuthorizationResponse().getCode());
        // 如果有redirect-uri
        String redirectUri = authorizationExchange.getAuthorizationRequest().getRedirectUri();
        if (redirectUri != null) {
            formParameters.add(OAuth2ParameterNames.REDIRECT_URI, redirectUri);
        }
        //appid
        formParameters.add("appid", clientRegistration.getClientId());
        //secret
        formParameters.add("secret", clientRegistration.getClientSecret());
        return formParameters;
    }

然後生成RestTemplate的請求物件RequestEntity:

    @Override
    public RequestEntity<?> convert(OAuth2AuthorizationCodeGrantRequest authorizationCodeGrantRequest) {
        ClientRegistration clientRegistration = authorizationCodeGrantRequest.getClientRegistration();
        HttpHeaders headers = getTokenRequestHeaders(clientRegistration);


        String tokenUri = clientRegistration.getProviderDetails().getTokenUri();
        // 針對微信的定製  WECHAT_ID表示為微信公眾號專用的registrationId
        if (WECHAT_ID.equals(clientRegistration.getRegistrationId())) {
            MultiValueMap<String, String> queryParameters = this.buildWechatQueryParameters(authorizationCodeGrantRequest);
            URI uri = UriComponentsBuilder.fromUriString(tokenUri).queryParams(queryParameters).build().toUri();
            return RequestEntity.get(uri).headers(headers).build();
        }
        // 其它 客戶端
        MultiValueMap<String, String> formParameters = this.buildFormParameters(authorizationCodeGrantRequest);
        URI uri = UriComponentsBuilder.fromUriString(tokenUri).build()
                .toUri();
        return new RequestEntity<>(formParameters, headers, HttpMethod.POST, uri);
    }

這樣相容性就改造好了。

相容token返回解析

微信公眾號授權token-uri的返回值雖然文件說是個json，可它喵的Content-Type是text-plain。如果是application/json，Spring Security就直接接收了。你說微信坑不坑？我們只能再寫個適配來正確的反序列化微信介面的返回值。

Spring Security 中對token-uri的返回值的解析轉換同樣由OAuth2AccessTokenResponseClient中的OAuth2AccessTokenResponseHttpMessageConverter負責。

首先增加Content-Type為text-plain的適配；其次因為Spring Security接收token返回的物件要求必須顯式宣告tokenType，而微信返回的響應體中沒有，我們一律指定為OAuth2AccessToken.TokenType.BEARER即可相容。程式碼比較簡單就不放了，有興趣可以去看我給的DEMO。

配置到Spring Security

先配置好我們上面兩個步驟的請求客戶端：

    /**
     * 呼叫token-uri去請求授權伺服器獲取token的OAuth2 Http 客戶端
     *
     * @return OAuth2AccessTokenResponseClient
     */
    private OAuth2AccessTokenResponseClient<OAuth2AuthorizationCodeGrantRequest> accessTokenResponseClient() {
        DefaultAuthorizationCodeTokenResponseClient tokenResponseClient = new DefaultAuthorizationCodeTokenResponseClient();
        tokenResponseClient.setRequestEntityConverter(new WechatOAuth2AuthorizationCodeGrantRequestEntityConverter());

        OAuth2AccessTokenResponseHttpMessageConverter tokenResponseHttpMessageConverter = new OAuth2AccessTokenResponseHttpMessageConverter();
        // 微信返回的content-type 是 text-plain
        tokenResponseHttpMessageConverter.setSupportedMediaTypes(Arrays.asList(MediaType.APPLICATION_JSON,
                MediaType.TEXT_PLAIN,
                new MediaType("application", "*+json")));
        // 相容微信解析
        tokenResponseHttpMessageConverter.setTokenResponseConverter(new WechatMapOAuth2AccessTokenResponseConverter());

        RestTemplate restTemplate = new RestTemplate(
                Arrays.asList(new FormHttpMessageConverter(),
                        tokenResponseHttpMessageConverter
                ));

        restTemplate.setErrorHandler(new OAuth2ErrorResponseErrorHandler());
        tokenResponseClient.setRestOperations(restTemplate);
        return tokenResponseClient;
    }

再把請求客戶端配置到HttpSecurity：

   // 獲取token端點配置  比如根據code 獲取 token               
httpSecurity.oauth2Login()
   .tokenEndpoint().accessTokenResponseClient(accessTokenResponseClient)

根據token獲取使用者資訊

微信公眾號網頁授權獲取使用者資訊需要scope包含snsapi_userinfo。

Spring Security中定義了一個OAuth2.0獲取使用者資訊的抽象介面：

@FunctionalInterface
public interface OAuth2UserService<R extends OAuth2UserRequest, U extends OAuth2User> {

	U loadUser(R userRequest) throws OAuth2AuthenticationException;

}

所以我們針對性的實現即可，需要實現三個相關概念。

OAuth2UserRequest

OAuth2UserRequest是請求user-info-uri的入參實體，包含了三大塊屬性：

  • ClientRegistration 微信OAuth2.0客戶端配置
  • OAuth2AccessToken 從token-uri獲取的access_token的抽象實體
  • additionalParameters 一些token-uri返回的額外引數，比如openid就可以從這裡面取得

根據微信獲取使用者資訊的端點API這個能滿足需要，不過需要注意的是。如果使用的是 OAuth2.0 Client 就無法從additionalParameters獲取openid等額外引數。

OAuth2User

這個用來封裝微信使用者資訊，細節看下面的註釋：

/**
 * 微信授權的OAuth2User使用者資訊
 *
 * @author n1
 * @since 2021/8/12 17:37
 */
@Data
public class WechatOAuth2User implements OAuth2User {
    private String openid;
    private String nickname;
    private Integer sex;
    private String province;
    private String city;
    private String country;
    private String headimgurl;
    private List<String> privilege;
    private String unionid;


    @Override
    public Map<String, Object> getAttributes() {
        // 原本返回前端token 但是微信給的token比較敏感 所以不返回
        return Collections.emptyMap();
    }

    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        // 這裡放scopes 或者其它你業務邏輯相關的使用者許可權集 目前沒有什麼用
        return null;
    }

    @Override
    public String getName() {
        // 使用者唯一標識比較合適，這個不能為空啊，如果你能保證unionid不為空，也是不錯的選擇。
        return openid;
    }
}

注意： getName()一定不能返回null。

OAuth2UserService

引數OAuth2UserRequest和返回值OAuth2User都準備好了，就剩下去請求微信伺服器了。借鑑請求token-uri的實現，還是一個RestTemplate呼叫，核心就這幾行：

LinkedMultiValueMap<String, String> queryParams = new LinkedMultiValueMap<>();
// access_token
queryParams.add(OAuth2ParameterNames.ACCESS_TOKEN, userRequest.getAccessToken().getTokenValue());
// openid
queryParams.add(OPENID_KEY, String.valueOf(userRequest.getAdditionalParameters().get(OPENID_KEY)));
// lang=zh_CN
queryParams.add(LANG_KEY, DEFAULT_LANG);
// 構建 user-info-uri端點
URI userInfoEndpoint = UriComponentsBuilder.fromUriString(userInfoUri).queryParams(queryParams).build().toUri();
// 請求
return this.restOperations.exchange(userInfoEndpoint, HttpMethod.GET, null, OAUTH2_USER_OBJECT);

配置到Spring Security

// 獲取使用者資訊端點配置  根據accessToken獲取使用者基本資訊
httpSecurity.oauth2Login()
      .userInfoEndpoint().userService(oAuth2UserService);

這裡補充一下，寫一個授權成功後跳轉的介面並配置為授權登入成功後的跳轉的url。

// 預設跳轉到 /  如果沒有會 404 所以弄個了介面
httpSecurity.oauth2Login().defaultSuccessUrl("/weixin/h5/redirect")

在這個介面裡可以通過@RegisteredOAuth2AuthorizedClient和@AuthenticationPrincipal分別拿到認證客戶端的資訊和使用者資訊。

@GetMapping("/h5/redirect")
public void sendRedirect(HttpServletResponse response,
                         @RegisteredOAuth2AuthorizedClient("wechat") OAuth2AuthorizedClient authorizedClient,
                         @AuthenticationPrincipal WechatOAuth2User principal) throws IOException {
    //todo 你可以再這裡模擬一些授權後的業務邏輯 比如使用者靜默註冊 等等

    // 當前認證的客戶端 token 不要暴露給前臺
    OAuth2AccessToken accessToken = authorizedClient.getAccessToken();
    System.out.println("accessToken = " + accessToken);
    // 當前使用者的userinfo
    System.out.println("principal = " + principal);
    response.sendRedirect("https://felord.cn");
}

到此微信公眾號授權就整合到Spring Security中了。

相關配置

application.yaml相關的配置：

spring:
  security:
    oauth2:
      client:
        registration:
          wechat:
            # 可以去試一下沙箱
            # 公眾號服務號 appid
            client-id: wxdf9033184b2xxx38e7f
            # 公眾號服務號 secret
            client-secret: bf1306baaa0dxxxxxxb15eb02d68df5
            # oauth2 login 用 '{baseUrl}/login/oauth2/code/{registrationId}' 會自動解析
            # oauth2 client 寫你業務的連結即可
            redirect-uri:  '{baseUrl}/login/oauth2/code/{registrationId}'
            authorization-grant-type: authorization_code
            scope: snsapi_userinfo
        provider:
          wechat:
            authorization-uri: https://open.weixin.qq.com/connect/oauth2/authorize
            token-uri: https://api.weixin.qq.com/sns/oauth2/access_token
            user-info-uri: https://api.weixin.qq.com/sns/userinfo

關注公眾號：Felordcn 獲取更多資訊

個人部落格：https://felord.cn

相關文章