I am adding ADFS authentication to an Angular SPA web site with a WebApi back end. To accomplish this I have set up the ADFS instance with a client and a RP.
In order to log into the SPA the user is redirected to the sts.domain/adfs/oauth2/authorize endpoint. The user authenticates on the webpage and is redirected to a page within the application - www.domain/token/redirect.html?code=SOMECODE&state=URL
This page extracts the token from the URL parameters and calls the sts.domain/adfs/oauth2/token endpoint to get the JWT token for the WebApi back end.
var url = "https://sts.domain/adfs/oauth2/token";
$.ajax(url, {
type: "POST",
data: {
grant_type: "authorization_code",
client_id: client,
redirect_uri: redirect,
code: token
}
})
The application then saves the WebApi token and adds it to the Angular $http.defaults.headers.common.Authorization so that it will be used to communicate with the WebApi backend. It then redirects back to the SPA.
This all works correctly in IE but it fails in Firefox and Chrome with the standard CORS error message when calling the /token OAuth endpoint.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.domain' is therefore not allowed access.
It seems like I should add the SPA URL to the CORS configuration of the ADFS instance, but I can't find a way to configure the CORS configuration of the ADFS instance. How do I configure CORS in ADFS 3.0 OAuth? Is there a different way to accomplish this task that is more standard?
