I'm creating a test app for working with IdentityServer 3 and i'm using AngularJs, Angular Ui Router and oauth-ng library for creating this. My app needs to work with OpenID connect Authorization Code Flow in the Client side. So i have made quite small changes to the oauth-ng library. I am using oauth-ng lib to retrieve the authorization code from the IdentityServer3 and i'm using $http.post() to send that code to the token-endpoint and get the access_token.
The following is my code..
JavaScript
.controller('LoginController', function ($scope, $http, $timeout, $location) {
var getParamsFromUrl = function(url) {
var splitted = url.split('?');
splitted = splitted[1].split('&');
var params = {};
for (var i = 0; i < splitted.length; i++) {
var param = splitted[i].split('=');
var key = param[0];
var value = param[1];
params[key] = value
}
return params;
};
var getToken = function (url, data) {
return $http.post(url, data);
};
if($location.absUrl().split('?')[1]) {
$scope.params = getParamsFromUrl($location.absUrl());
var tokenData = {};
tokenData.grant_type = 'authorization_code';
tokenData.code = $scope.params.code;
tokenData.redirect_uri = 'http://localhost:8000/login.html';
var tokenEndpoint = 'https://localhost:44333/core/connect/token';
getToken(tokenEndpoint, tokenData)
.then(function (data, status, headers, config) {
console.log(data);
console.log(status);
console.log(headers);
console.log(config);
});
}
});
The authorization code is successfully retrieved and when i try to connect to the token endpoint it throws the following error on the browser.
OPTIONS https://localhost:44333/core/connect/token b @ angular.min.js:87n @ angular.min.js:82$get.f @ angular.min.js:80(anonymous function) @ angular.min.js:112$get.n.$eval @ angular.min.js:126$get.n.$digest @ angular.min.js:123$get.n.$apply @ angular.min.js:126(anonymous function) @ angular.min.js:17e @ angular.min.js:36d @ angular.min.js:17uc @ angular.min.js:18Jd @ angular.min.js:17(anonymous function) @ angular.min.js:250n.Callbacks.j @ jquery.min.js:2n.Callbacks.k.fireWith @ jquery.min.js:2n.extend.ready @ jquery.min.js:2I @ jquery.min.js:2
XMLHttpRequest cannot load https://localhost:44333/core/connect/token . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:8000 ' is therefore not allowed access. The response had HTTP status code 405.
Then i tried with configuring the $httpProvider in app config with this line of code.. My config looks like this.
.config(function ($locationProvider, $httpProvider) {
$locationProvider.html5Mode(true);
$httpProvider.defaults.withCredentials = true; // <= Added this
});
Still get the same issue. How can i fix this issue from the Client side? can i fix this from client side?
The service you are requesting is not allowing CORS (no Access-Control are sent as part of the response). You would need to include the header Access-Control-Allow-Origin: * as part of the response.
See this : http://www.html5rocks.com/en/tutorials/cors/
Also refer this: http://better-inter.net/enabling-cors-in-angular-js/
Pretty sure the code grant flow is for server-side applications. you should only use the code grant if you can keep the client secret "secret"!
Is their a reason to not use the implicit flow? This way you would get the token fight in the redirect, instead of the token.
On this page are the flows explained. http://connect2id.com/learn/openid-connect
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.