There are a few things you need to do. Create an OAuth client that will make token requests, and use this to get access tokens from the authentication server, which will allow you to access the web api endpoints. To do this, your OAuth client must have an implicit stream. You then make a login request to the Identity server, usually through a popup, so that your OAuth client can log in. You need to transfer your OAuth client data in the request line for the Idsrv login request, the OAuth client configuration is what you defined in your Idsrv admin panel for the OAuth client, you should parameterize this and add it to the oauth2 / authorzie url command:
getIdpOauthEndpointUrl: function () { return "https://192.168.1.9/issue/oauth2/authorize"; }, getOAuthConfig: function () { return { client_id: "Your Oauth CLient ID that you specifie din Identity Server", scope: "The scope of your RP", response_type: "token", redirect_uri: "https://..YourAngularAppUrl/AuthCallback.html" }; }
Then you open the login window:
var url = authService.getIdpOauthEndpointUrl() + "?" + $.param(authService.getOAuthConfig()); window.open(url, "Login", "height=500,width=350");
In your OAuth inIdsrv client, you need to specify the redirect URL, in our case:
https:
this is what you pass in the login request to the authentication server along with the OAuth client data. The AuthCallback.html page AuthCallback.html nothing but extract the access token returned by idsrv to this page in the query string and passes it to your angular application, as you do, but this token should be placed in your $http headers.
The access token can be retrieved on the AuthCallback.html page as follows:
<script src="/Scripts/jquery-2.0.3.js"></script> <script src="/Scripts/jquery.ba-bbq.min.js"></script> <script type="text/javascript"> var params = $.deparam.fragment(location.hash.substring(1)); window.opener.oAuthCallback(params); window.close(); </script>
The OAuthCallback function OAuthCallback defined on my wrapper page my index.html and is responsible for passing the token that it passed to my angular application and putting it in the $http headers.
function oAuthCallback(OAUTHTOKEN) { angular.element(window.document).scope().setHttpAuthHeaderAndAuthenticate(OAUTHTOKEN); }
The setHttpAuthHeaderAndAuthenticate() function is defined on my $rootScope , and it places the token in the $http authorizaiton headers:
$http.defaults.headers.common.Authorization = 'Bearer ' + OAUTHTOKEN["access_token"];
Check out this post by Christian Weyer. It does exactly what we do, but this knockout / web api app is another concept.
The next step is to tell the web api to accept the access token from idsrv, it's simple:
public static void Configure(HttpConfiguration config) { var authConfig = new AuthenticationConfiguration(); authConfig.AddJsonWebToken( YourIdsrvSiteId, YourRpsScope/Relam,YourRpsSymmetricSigningKey ); config.MessageHandlers.Add(new AuthenticationHandler(authNConfig)); }
Here you can also define ClaimsAuthenticationManager and ClaimsAuthorizationManager so that you can convert applications and provide grants / deny access to web api resources. Again, all this is covered by the post of Christian Weyer. Hope this helps.