refresh token with bearer token authentication on asp.net vnext

Question

I have an angularJS application that uses asp.net vnext which authenticates using JwtBearerAuthentication. To authenticate the application I use AspNet.Security.OpenIdConnect.Server. When I login, I receive a json response that contains the access_token that I can use for authorized requests. I would like, to also receive the refresh token. How is this possible?

Startup.cs

public void Configure(IApplicationBuilder app) {
    app.UseJwtBearerAuthentication(options => {
        options.AutomaticAuthenticate = true;
        options.AutomaticChallenge = true;
        options.TokenValidationParameters.ValidateAudience = false;
        options.Authority = Configuration.Get<string>("OAuth:Authority");
        options.ConfigurationManager = new ConfigurationManager<OpenIdConnectConfiguration>(
            metadataAddress: options.Authority + ".well-known/openid-configuration",
            configRetriever: new OpenIdConnectConfigurationRetriever(),
            docRetriever: new HttpDocumentRetriever() { RequireHttps = false });
    });

    app.UseOpenIdConnectServer(configuration => {
        configuration.Issuer = new Uri(Configuration.Get<string>("OpenId:Issuer"));
        configuration.AllowInsecureHttp = true;
        configuration.AuthorizationEndpointPath = PathString.Empty;
        configuration.AuthenticationScheme = OpenIdConnectServerDefaults.AuthenticationScheme;
        configuration.Provider = new AuthorizationProvider();
    });
}

AuthorizationProvider.cs

public class AuthorizationProvider : OpenIdConnectServerProvider {
    public override Task ValidateClientAuthentication(ValidateClientAuthenticationContext context) {
        context.Skipped();

        return Task.FromResult<object>(null);
    }

    public override Task GrantResourceOwnerCredentials(GrantResourceOwnerCredentialsContext context) {
        string username = context.UserName;
        string password = context.Password;

        UserManager<ApplicationUser> userManager = context.HttpContext.RequestServices.GetRequiredService<UserManager<ApplicationUser>>();
        ApplicationUser user = userManager.FindByNameAsync(username).Result;

        if (userManager.CheckPasswordAsync(user, password).Result) {
            ClaimsIdentity identity = new ClaimsIdentity(OpenIdConnectServerDefaults.AuthenticationScheme);
            identity.AddClaim(ClaimTypes.Name, username, "token id_token");

            List<string> roles = userManager.GetRolesAsync(user).Result.ToList();
            foreach (string role in roles) {
                identity.AddClaim(ClaimTypes.Role, role, "token id_token");
            }

            ClaimsPrincipal principal = new ClaimsPrincipal(identity);
            context.Validated(principal);
        } else {
            context.Rejected("invalid credentials");
        }

        return Task.FromResult<object>(null);
    }
}

AngularJS login code

$http({
    method: 'POST',
    url: 'connect/token',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    data: $.param({
        grant_type: 'password',
        username: email,
        password: password
    })
}).then(function (response) {
    if (response.status == 200) {
        var token = response.data.access_token;
        localStorage.setItem('token', token);
    }
});

Answer 1

Unlike OAuthAuthorizationServerMiddleware, ASOS offers built-in support for refresh tokens: you don't have to create your own token provider for that.

Note that starting with ASOS beta3 (released in October 2015), you now have to ask and grant the offline_access scope to retrieve a refresh token, as recommended by the OpenID Connect specs: https://github.com/aspnet-contrib/AspNet.Security.OpenIdConnect.Server/issues/128

You'll need to update your GrantResourceOwnerCredentials to allow ASOS to issue a refresh token to your client application:

public override async Task GrantResourceOwnerCredentials(GrantResourceOwnerCredentialsContext context) {
    string username = context.UserName;
    string password = context.Password;

    UserManager<ApplicationUser> userManager = context.HttpContext.RequestServices.GetRequiredService<UserManager<ApplicationUser>>();
    ApplicationUser user = await userManager.FindByNameAsync(username);

    if (await userManager.CheckPasswordAsync(user, password)) {
        ClaimsIdentity identity = new ClaimsIdentity(
            context.Options.AuthenticationScheme);

        identity.AddClaim(ClaimTypes.Name, username,
            OpenIdConnectConstants.Destinations.AccessToken,
            OpenIdConnectConstants.Destinations.IdentityToken);

        foreach (string role in await userManager.GetRolesAsync(user)) {
            identity.AddClaim(ClaimTypes.Role, role,
                OpenIdConnectConstants.Destinations.AccessToken,
                OpenIdConnectConstants.Destinations.IdentityToken);
        }

        AuthenticationTicket ticket = new AuthenticationTicket(
            new ClaimsPrincipal(identity),
            new AuthenticationProperties(),
            context.Options.AuthenticationScheme);

        // Call SetResources with the list of resource servers
        // the access token should be issued for.
        ticket.SetResources("resource_server_1");

        // Only grant the "offline_access" scope
        // if it was requested by the client application:
        List<string> scopes = new List<string>();
        if (context.Request.HasScope("offline_access")) {
            scopes.Add("offline_access");
        }

        // Call SetScopes with the list of scopes you want to grant.
        ticket.SetScopes(scopes);

        context.Validate(ticket);
    } else {
        context.Reject("invalid credentials");
    }

    return Task.FromResult(0);
}

... and your Angular code to specify the scope parameter:

$http({
    method: 'POST',
    url: 'connect/token',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    data: $.param({
        grant_type: 'password',
        username: email,
        password: password,
        scope: 'offline_access'
    })
}).then(function (response) {
    if (response.status == 200) {
        var token = response.data.access_token;
        var refreshToken = response.data.refresh_token;
        localStorage.setItem('token', token);
        localStorage.setItem('refresh_token', refreshToken);
    }
});

To retrieve a new access token, use the refresh_token grant:

$http({
    method: 'POST',
    url: 'connect/token',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    data: $.param({
        grant_type: 'refresh_token',
        refresh_token: refreshToken
    })
}).then(function (response) {
    if (response.status == 200) {
        var token = response.data.access_token;
        localStorage.setItem('token', token);
    }
});

Answer 2

Create your refresh token provider and include it to your auth options. Here you can find full example of how it's used in similar environment:

http://bitoftech.net/2014/07/16/enable-oauth-refresh-tokens-angularjs-app-using-asp-net-web-api-2-owin/