Spring REST API용 OAuth2 – AngularJS(레거시 OAuth 스택)에서 새로 고침 토큰 처리

1. 개요

이 예제에서 우리는 이전 기사 에서 더 많은 것을 통합하기 시작한 OAuth 비밀번호 흐름을 계속 탐색 할 것이며 AngularJS 앱에서 새로 고침 토큰을 처리하는 방법에 초점을 맞출 것입니다.

참고 : 이 기사는 Spring OAuth 레거시 프로젝트를 사용하고 있습니다.  새로운 Spring Security 5 스택을 사용하는 이 기사 버전은 Spring REST API용 OAuth2 – Angular에서 새로 고침 토큰 처리 기사를 참조하십시오 .

2. 액세스 토큰 만료

먼저, 사용자가 애플리케이션에 로그인할 때 클라이언트가 액세스 토큰을 얻었음을 기억하십시오.

function obtainAccessToken(params) {
    var req = {
        method: 'POST',
        url: "oauth/token",
        headers: {"Content-type": "application/x-www-form-urlencoded; charset=utf-8"},
        data: $httpParamSerializer(params)
    }
    $http(req).then(
        function(data) {
            $http.defaults.headers.common.Authorization= 'Bearer ' + data.data.access_token;
            var expireDate = new Date (new Date().getTime() + (1000 * data.data.expires_in));
            $cookies.put("access_token", data.data.access_token, {'expires': expireDate});
            window.location.href="index";
        },function() {
            console.log("error");
            window.location.href = "login";
        });   
}

액세스 토큰이 토큰 자체가 만료되는 시점에 따라 만료되는 쿠키에 저장되는 방식에 유의하십시오.

이해하는 것이 중요한 것은 쿠키 자체가 저장용으로만 사용 되며 OAuth 흐름에서 다른 어떤 것도 구동하지 않는다는 것입니다. 예를 들어 브라우저는 요청과 함께 쿠키를 서버에 자동으로 보내지 않습니다.

Also note how we actually call this obtainAccessToken() function:

$scope.loginData = {
    grant_type:"password", 
    username: "", 
    password: "", 
    client_id: "fooClientIdPassword"
};

$scope.login = function() {   
    obtainAccessToken($scope.loginData);
}

3. The Proxy

We're now going to have a Zuul proxy running in the front-end application and basically sitting between the front-end client and the Authorization Server.

Let's configure the routes of the proxy:

zuul:
  routes:
    oauth:
      path: /oauth/**
      url: http://localhost:8081/spring-security-oauth-server/oauth

What's interesting here is that we're only proxying traffic to the Authorization Server and not anything else. We only really need the proxy to come in when the client is obtaining new tokens.

If you want to go over the basics of Zuul, have a quick read of the main Zuul article.

4. A Zuul Filter That Does Basic Authentication

The first use of the proxy is simple – instead of revealing our app “client secret” in javascript, we will use a Zuul pre-filter to add an Authorization header to access token requests:

@Component
public class CustomPreZuulFilter extends ZuulFilter {
    @Override
    public Object run() {
        RequestContext ctx = RequestContext.getCurrentContext();
        if (ctx.getRequest().getRequestURI().contains("oauth/token")) {
            byte[] encoded;
            try {
                encoded = Base64.encode("fooClientIdPassword:secret".getBytes("UTF-8"));
                ctx.addZuulRequestHeader("Authorization", "Basic " + new String(encoded));
            } catch (UnsupportedEncodingException e) {
                logger.error("Error occured in pre filter", e);
            }
        }
        return null;
    }

    @Override
    public boolean shouldFilter() {
        return true;
    }

    @Override
    public int filterOrder() {
        return -2;
    }

    @Override
    public String filterType() {
        return "pre";
    }
}

Now keep in mind that this doesn't add any extra security and the only reason we're doing it is because the token endpoint is secured with Basic Authentication using client credentials.

From the point of view of the implementation, the type of filter is especially worth noticing. We're using a filter type of “pre” to process the request before passing it on.

5. Put the Refresh Token in a Cookie

On to the fun stuff.

What we're planning to do here is to have the client get the Refresh Token as a cookie. Not just a normal cookie, but a secured, HTTP-only cookie with a very limited path (/oauth/token).

We'll set up a Zuul post-filter to extract Refresh Token from the JSON body of the response and set it in the cookie:

@Component
public class CustomPostZuulFilter extends ZuulFilter {
    private ObjectMapper mapper = new ObjectMapper();

    @Override
    public Object run() {
        RequestContext ctx = RequestContext.getCurrentContext();
        try {
            InputStream is = ctx.getResponseDataStream();
            String responseBody = IOUtils.toString(is, "UTF-8");
            if (responseBody.contains("refresh_token")) {
                Map<String, Object> responseMap = mapper.readValue(
                  responseBody, new TypeReference<Map<String, Object>>() {});
                String refreshToken = responseMap.get("refresh_token").toString();
                responseMap.remove("refresh_token");
                responseBody = mapper.writeValueAsString(responseMap);

                Cookie cookie = new Cookie("refreshToken", refreshToken);
                cookie.setHttpOnly(true);
                cookie.setSecure(true);
                cookie.setPath(ctx.getRequest().getContextPath() + "/oauth/token");
                cookie.setMaxAge(2592000); // 30 days
                ctx.getResponse().addCookie(cookie);
            }
            ctx.setResponseBody(responseBody);
        } catch (IOException e) {
            logger.error("Error occured in zuul post filter", e);
        }
        return null;
    }

    @Override
    public boolean shouldFilter() {
        return true;
    }

    @Override
    public int filterOrder() {
        return 10;
    }

    @Override
    public String filterType() {
        return "post";
    }
}

A few interesting things to understand here:

• We used a Zuul post-filter to read response and extract refresh token
• We removed the value of the refresh_token from JSON response to make sure it's never accessible to the front end outside of the cookie
• We set the max-age of the cookie to 30 days – as this matches the expire time of the token

In order to add an extra layer of protection against CSRF attacks, we'll add a Same-Site cookie header to all our cookies.

For that, we'll create a configuration class:

@Configuration
public class SameSiteConfig implements WebMvcConfigurer {
    @Bean
    public TomcatContextCustomizer sameSiteCookiesConfig() {
        return context -> {
            final Rfc6265CookieProcessor cookieProcessor = new Rfc6265CookieProcessor();
            cookieProcessor.setSameSiteCookies(SameSiteCookies.STRICT.getValue());
            context.setCookieProcessor(cookieProcessor);
        };
    }
}

Here we're setting the attribute to strict, so that any cross site transfer of cookies is strictly withheld.

6. Get and Use the Refresh Token from the Cookie

Now that we have the Refresh Token in the cookie, when the front-end AngularJS application tries to trigger a token refresh, it's going to send the request at /oauth/token and so the browser, will, of course, send that cookie.

So we'll now have another filter in the proxy that will extract the Refresh Token from the cookie and send it forward as a HTTP parameter – so that the request is valid:

public Object run() {
    RequestContext ctx = RequestContext.getCurrentContext();
    ...
    HttpServletRequest req = ctx.getRequest();
    String refreshToken = extractRefreshToken(req);
    if (refreshToken != null) {
        Map<String, String[]> param = new HashMap<String, String[]>();
        param.put("refresh_token", new String[] { refreshToken });
        param.put("grant_type", new String[] { "refresh_token" });
        ctx.setRequest(new CustomHttpServletRequest(req, param));
    }
    ...
}

private String extractRefreshToken(HttpServletRequest req) {
    Cookie[] cookies = req.getCookies();
    if (cookies != null) {
        for (int i = 0; i < cookies.length; i++) {
            if (cookies[i].getName().equalsIgnoreCase("refreshToken")) {
                return cookies[i].getValue();
            }
        }
    }
    return null;
}

And here is our CustomHttpServletRequest – used to inject our refresh token parameters:

public class CustomHttpServletRequest extends HttpServletRequestWrapper {
    private Map<String, String[]> additionalParams;
    private HttpServletRequest request;

    public CustomHttpServletRequest(
      HttpServletRequest request, Map<String, String[]> additionalParams) {
        super(request);
        this.request = request;
        this.additionalParams = additionalParams;
    }

    @Override
    public Map<String, String[]> getParameterMap() {
        Map<String, String[]> map = request.getParameterMap();
        Map<String, String[]> param = new HashMap<String, String[]>();
        param.putAll(map);
        param.putAll(additionalParams);
        return param;
    }
}

Again, a lot of important implementation notes here:

• The Proxy is extracting the Refresh Token from the Cookie
• It's then setting it into the refresh_token parameter
• It's also setting the grant_type to refresh_token
• If there is no refreshToken cookie (either expired or first login) – then the Access Token request will be redirected with no change

7. Refreshing the Access Token from AngularJS

Finally, let's modify our simple front-end application and actually make use of refreshing the token:

Here is our function refreshAccessToken():

$scope.refreshAccessToken = function() {
    obtainAccessToken($scope.refreshData);
}

And here our $scope.refreshData:

$scope.refreshData = {grant_type:"refresh_token"};

Note how we're simply using the existing obtainAccessToken function – and just passing different inputs to it.

Also notice that we're not adding the refresh_token ourselves – as that's going to be taken care of by the Zuul filter.

8. Conclusion

In this OAuth tutorial, we learned how to store the Refresh Token in an AngularJS client application, how to refresh an expired Access Token, and how to leverage the Zuul proxy for all of that.

The full implementation of this tutorial can be found in the github project.

Generic footer banner

Spring으로 API를 빌드하는 방법을 배우 십니까?

전자책 다운로드

참고

• https://docs.spring.io/spring-framework/docs/current/reference/html
• https://www.baeldung.com/spring-security-oauth2-refresh-token-angular-js-legacy