I'm having much trouble getting OAuth2 to work with a generic OAuth2 provider. Here's the situation.
A service provides an OAuth2 authentication method to where I want to authorize with. I've created an AngularJS app that has the following configuration for satellizer:
authProvider.baseUrl = 'http://localhost:3030/user/authorize';
$authProvider.oauth2({
name: 'customname',
url: '/token',
clientId: 'someapp',
requiredUrlParams: ['scope'],
scope: ['profile'],
authorizationEndpoint: 'http://location.to.oathserver',
redirectUri: 'http://localhost:3000'
});
The baseUrl points to my node server that should handle the middleware part.
I've also the following code that triggers the authentication part.
$scope.authenticate = function(provider) {
$auth.authenticate(provider)
.then(function(response) {
console.log(response);
})
.catch(function() {
//something went wrong
});
}
So far this all seems to work great and looks very similar to what is documented by Satellizer! Now once I start the angular app and start the authentication I see requests coming by that target my Node service.
Next I've my node.js service that hooks to the 'user/authorize/token' URL. Here's the code:
router.options('/authorize/token', function(req, res, next) {
//var token = req.header('Authorization').split(' ')[1];
res.end();
});
and:
router.post('/authorize/token', function(req, res, next) {
var authCode = req.param('code');
var cliendId = req.param('clientId');
var payload = jwt.decode(authCode, 'mySecret');
});
Here's where it all seems to go wrong. First I seem to get an OPTIONS request. I've not really an idea what to do with it as I can't seem to find anything in the documentation about an OPTIONS request. I thought it would might contain the 'Authorization' header but that doesn't seem the case so I close the connection with a res.end();
I also inspected the request in Chrome but I can't seem to find a header that has this exact name.
Next I get a POST request. This does seem to contain some things, hooray! I get the following object:
{
code: "ZFFeat9pWfHzw4rGmjFYwucPRMFnBOkd2odEObvo",
cliendId: "someapp",
redirectiUri: "http://localhost:3000"
}
This looks to me like the authorization code that I should have to decode. That's what you see me trying as well in the code above. Unfortunately this seems to throw me an error
Error: Not enough or too many segments
This tells me I'm doing probably something wrong, and I got stuck.
I do have some PHP code that seems to work for someone else but I don't fully understand and can't really relate the code to my code since PHP is not my speciality and node.js/JavaScript not his. So here goes the PHP code:
handle_cors(); // Handle CORS for cross domain requests
// Get JSON data
$input = json_decode(file_get_contents("php://input"), true);
// Create Provider
$provider = new SomeApp\OAuth2\Client\Provider\SomeApp([
'clientId' => 'someapp',
'clientSecret' => 'mySecret',
'redirectUri' => $input['redirectUri'],
]);
// Optional: Now you have a token you can look up a users profile data
try {
// Try to get an access token (using the authorization code grant)
$token = $provider->getAccessToken('authorization_code', [
'code' => $input['code']
]);
// We got an access token, let's now get the user's details
$user = $provider->getResourceOwner($token);
header('Content-Type: application/json');
$result = $user->toArray();
$result['token'] = create_token('my-example-key', $user->getId());
echo json_encode($result);
exit();
} catch (Exception $e) {
// Failed to get user details
exit('Oh dear...' . $e->getMessage());
}
Hopefully someone can help me out! Thanks in advance.
Sorry guys, I've been able to solve it myself. I found out that I was missing some URL's to POST to and GET from. After that the examples from Satellizer became clear and was able to use them almost as a carbon copy.
Related
I am currently building an application using token based authentication with Angular and Laravel. I initially set things up just to test the API by creating a BookController . At first I was getting a Cross Origin Request Block error when I tried to call this data from Angular. However I managed to resolve this by adding the headers to my routes/web.php file. Here is the whole file. NB: After adding these headers I was succesfully able to use the API even from another domain
<?php
header('Access-Control-Allow-Origin: *');
header( 'Access-Control-Allow-Headers: Authorization, Content-Type' );
//Route::get('/', 'BookController#show');
//Route::resource('book/create', 'BookController#create');
Auth::routes();
Route::get('/', 'HomeController#index');
Route::resource('book', 'BookController');
Route::resource('authenticate', 'AuthenticateController', ['only' => ['index']]);
Route::post('authenticate', 'AuthenticateController#authenticate');
However I am currently following this tutorial to set up token based authentication. https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps
To summarise , my issue is when I submit the form containing username and password I am getting the following errors. Below I will try elaborate a bit more but it is quite difficult as there is alot to it.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://www.example.local/authenticate/.
(Reason: CORS header 'Access-Control-Allow-Origin' missing).
And
Possibly unhandled rejection:
{"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://www.example.local/authenticate/","data":{"email":"dasdas#Dasa.com","password":"fsdfd"},"withCredentials":false,"headers":{"Accept":"application/json,
text/plain,
/","Content-Type":"application/json;charset=utf-8"}},"statusText":""}
I am using Angular UI Router V 0.4.2 and satellizer. My Angular version is 1.6.2 It using a different domain than the API. Much like the working example above.
On the laravel side I also followed this tutorial to add middleware to attempt to resolve this but no luck.
http://en.vedovelli.com.br/2015/web-development/Laravel-5-1-enable-CORS/
I will also include my AuthenticateController.php file..
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use JWTAuth;
use Tymon\JWTAuth\Exceptions\JWTException;
use App\User;
class AuthenticateController extends Controller
{
public function __construct()
{
// Apply the jwt.auth middleware to all methods in this controller
// except for the authenticate method. We don't want to prevent
// the user from retrieving their token if they don't already have it
$this->middleware('jwt.auth', ['except' => ['authenticate']]);
$this->middleware('cors');
}
public function index()
{
// Retrieve all the users in the database and return them
$users = User::all();
return $users;
}
public function authenticate(Request $request)
{
$credentials = $request->only('email', 'password');
try {
// verify the credentials and create a token for the user
if (! $token = JWTAuth::attempt($credentials)) {
return response()->json(['error' => 'invalid_credentials'], 401);
}
} catch (JWTException $e) {
// something went wrong
return response()->json(['error' => 'could_not_create_token'], 500);
}
// if no errors are encountered we can return a JWT
return response()->json(compact('token'));
}
}
My issue is I do not even know if the "possibly unhandled rejection" is related to the "Cross-Origin Request Blocked" error. But I have to assume it is.
Can you recognise anything from my routes files that may be allowing one and not another?
EDIT:
I have noticed the difference between one request and another is that one is a GET request while another is an OPTIONS request. This may be the cause.
I have since added Header set Access-Control-Allow-Origin "*" to both the virtual hosts config file in Apache and to a .htaccess file in the root of the Laravel project. Still no change.
I am wondering is this related something in Angular
Your server code needs to handle that OPTIONS request by sending a headers-only response to it that includes the Access-Control-Allow-Methods: GET, POST, PUT, DELETE header and Access-Control-Allow-Headers: Authorization, Content-Type header.
Or you can just try using https://github.com/barryvdh/laravel-cors which makes all this easier.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests has general info you might want to read up on.
I've been trying to accomplish this task for quite some time but haven't got any breakthrough yet. I would be really thankful if anyone can help me out in this.
Current Situation:
I've two applications that I'm running in two sub-domains as
st.localhost:8080 and acm.localhost:8080
When a user tries to access either of the URLs, I search for a cookie named 'auth' using Angular $cookies service. If the cookie is defined or present, the user is redirected to original application. However, if the cookie is undefined, user is redirected to a login page(the login page resides in both the applications).
From the login page, after successful credentials check, I set the 'auth' cookie again with a random value. This cookie is supposed to be shared between the two sub-domains.
Express:
var express = require('express');
var httpProxy = require('http-proxy');
var vhost = require('vhost');
var app = express();
var proxy = httpProxy.createProxyServer();
app.get('/login', function(req, res) {
var randomNumber=Math.random().toString();
randomNumber=randomNumber.substring(2,randomNumber.length);
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 1);
res.cookie('auth', randomNumber, { maxAge: 90000000, domain: 'localhost', httpOnly: false });
console.log('cookie created successfully');
res.send('Login successful');
});
app.use('/api', function(req, res) {
req.headers[ 'Authorization' ] = 'Basic dXNlcjpwYXNzd29yZA==';
console.log("Request cookies: " + req.cookie);
proxy.web(req, res, { target: 'restApiTarget' });
});
// ST application
app.use(vhost('st.localhost', express.static('./st')));
// ACM application
app.use(vhost('acm.localhost', express.static('./acm')));
app.listen(8080, function () {
console.log('Fweb server running on port 8080!');
});
Angular
Below login function is shared by both ST and ACM applications
$scope.login = function(formValid){
$scope.incorrectCredentials = false;
if(formValid){
$http.get('/login',
{
params: {
username: $scope.username,
password: $scope.password
},
headers : {
'Accept' : 'application/json'
}
}
).then(function(response){
$scope.incorrectCredentials = false;
var obj = $cookies.getObject('auth');
console.log("auth is: " + obj);
$state.go($stateParams.origin);
}, function(response){
$scope.incorrectCredentials = true;
});
}
}
Express is able to successfully create the cookie 'auth' as I can see the Set-Cookie header in the /login service response. However, the browser is not attaching this cookie to the subsequent API requests that I'm making from my application(say st.localhost). I'm not able to read this cookie through Angular as well.
var obj = $cookies.getObject('auth');
console.log("auth is: " + obj);
results in obj being undefined.
I've a feeling that there is something wrong in the way I'm setting the domain of the cookie as 'localhost' from one of the sub-domains.
Any suggestions on what I may be doing wrong?
Thanks in advance.
This is the second time I'm providing an answer to my own question. I guess I need to be more patient next time onwards before posting a question. Anyways, I hope this answer is helpful for people who are stuck in a similar situation like I was.
Firstly, I found out that it is possible to share a cookie between subdomains even if you create it in one of the subdomains. However, there were some posts/answers which said otherwise.
What one needs to do while creating a cookie in one of the subdomains is that the parameter 'domain' needs to be set as the parent domain value. For example, if you are creating a cookie in say st.testserver.com then while setting a sharable cookie in it, the 'domain' parameter must be set as '.testserver'.
However, if your parent domain is also the Top Level Domain(TLD), then you won't be able to create a shared cookie in the subdomain. This is exactly what was happening to me earlier when I posted this question.
When I was using st.localhost and trying to create a cookie with 'domain' as '.localhost', it wasn't allowing me to do so because localhost here is the TLD. But when I renamed my domain name to st.testserver.com, I was able to create the cookie with 'domain' as '.testserver.com' because it wasn't the TLD anymore.
I hope someone can validate this answer once and let me know if I provided any incorrect information.
Thanks.
Cookies is domain specific , if you want access across domain, you need to use some cross store like cross-storage etc.
I'm facing very weird problem with my laravel-Angular application. I'm using Tymon JWT to refresh token on my every request. I'm using Satellizer library to handle these JWT-Tokens, however, Satellizer doesn't seem to have a response interceptor to capture the new token. Hence I wrote my own Interceptor to do so.
.factory('ResponseHttpInterceptor', function ($window) {
return {
response: function (response) {
if (response.headers('Authorization') != null) {
$window.localStorage.removeItem('satellizer_token');
$window.localStorage.setItem('satellizer_token', response.headers('Authorization').replace('Bearer ', ''));
}
return response;
}
}
})
This code basically captures the new token and replaces the existing token in local storage with the new token.
My test flow is:
Login -> Make who Am I call -> Logout
Upon Logout I receive an error Invalid token (this doesn't happen always. Sometimes the flow succeeds and sometimes it fails). This flow works perfect via REST Client postman. So I don't think there is any problem in my API's
Attaching image showing the new token being passed, after it is refreshed after my whoami call.
Upon logout I'm clearing the local storage. Can Anyone tell me what could be the reason for this?
EDIT
Route::group(['prefix' => 'api/v1_0'], function () {
Route::post('login', 'Auth\AuthControllerGeneral#postLogin');
Route::get('logout', ['middleware' => 'jwt.auth', 'uses' => 'Auth\AuthControllerGeneral#getLogout']);
Route::group(['middleware' => ['jwt.refresh', 'jwt.auth']], function() {
Route::get('whoami', 'Auth\AuthControllerGeneral#loggedInUserInfo');
});
});
Check you htaccess you should have below code there
RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]
And AuthContrller is same as https://github.com/sahat/satellizer/blob/master/examples/server/php/app/Http/Controllers/AuthController.php
And Some people forget to check Authenticate middleware. Check this also
https://github.com/sahat/satellizer/blob/master/examples/server/php/app/Http/Middleware/Authenticate.php
I suggest first try with default route as in demo
https://github.com/sahat/satellizer/blob/master/examples/server/php/app/Http/routes.php
And still you not get the solution then try with sample client end folder.
https://github.com/sahat/satellizer/tree/master/examples/client
Which you can put in your laravel public folder just to test.
I found everything working fine in satellizer but some people fails in configuring this.
I am trying to run the IBM Watson's Tradeoff Analytics widget to show the trade-off analytics graph in a webpage. The Tradeoff Analytics API is starting properly but when I submit the problem to the show the graph, I get some undefined error.
Here is the sample code that I am using the run the Tradeoff Analytics Widget.
function errorHandler(payload){
alert(payload.errorMessage);
}
function onShowCompleteCB(payload){
alert('show Tradeoff graph complete');
}
function onStartCB(payload){
alert('sending trade-off problem');
var problem = <problem-json>;
taClient.show(problem, onShowCompleteCB);
}
var options = {
dilemmaServiceUrl : <tradeoff-service-url>,
username : <username>,
password : <password>
};
var taClient = new TradeoffAnalytics(options , document.getElementById('watson_widget'));
var s = taClient.subscribe('afterError', errorHandler);
taClient.start(onStartCB);
I also noticed from javascript debugger that HTTP response to the last request returned the reponse header WWW-Authenticate:Basic realm="IBM Watson Gateway Log-in". Moreover I get the following error in javascript console XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access. The response had HTTP status code 401.
Can somebody help me out with what might be going wrong here?
PS: I have cross checked my username and password and they seem to be working fine through REST based API invocation.
Based on your code, you are trying to use the client widget. You need to have a proxy app that will receive the request and use your username and password.
On your client side you will need something like:
HTML:
<div id='DIV_ID'></div>
JS:
taClient = new TA.TradeoffAnalytics({
customCssUrl: 'https://ta-cdn.mybluemix.net/v1/modmt/styles/watson.css',
dilemmaServiceUrl: '/proxy',
profile: 'basic'
}, 'DIV_ID');
taClient.subscribe('afterError', function onError(){ /* on error */});
taClient.start(function onLoad(){ /* on load */});
}
Server side(nodejs):
var tradeoffAnalytics = watson.tradeoff_analytics({
version: 'v1',
username: '<username>',
password: '<password>'
});
app.post('/proxy', function(req, res) {
tradeoffAnalytics.dilemmas(req.body, function(err, dilemmas) {
if (err)
return res.status(err.code || 500).json(err.error || 'Error processing the request');
else
return res.json(dilemmas);
});
});
Above you will find an example of how to implement the proxy using express and the watson-developer-cloud npm module.
There is a full sample you can look in github
I'm having some trouble with error handling in a little angularjs application. I'm interacting with a Flask backend and a Postgres DB.
I have a factory service
appointServices.factory('Appointments', ['$resource', function($resource){
return $resource(someUrl, {}, {
query: { ... }
,
create: {
method: 'POST'
,url: 'http://somedomain:port/new/:name/:start/:end/:treatment'
,params: { start: '#start', end: '#end', name: '#name', treatment: '#treatment' }
,isArray:false
}
});
}
]);
Inside a controller I'm making the following call
Appointments.create($scope.appointment, function(value, responseHeaders) {
// success handler
console.debug('success: ', JSON.stringify(value));
}, function(httpResponse) {
// error handler
console.debug('error: ', JSON.stringify(httpResponse));
});
Here $scope.appointment contains the relevant parameters for the create action.
Now, in the backend I'm able to catch DB errors involving constraints and I'm trying to return an error code with a 'meaningful' message. So I have a python method
def create(name, start, end, treatment):
try:
...
transaction_status = 'ok'
code = 200
except IntegrityError as e:
...
transaction_status = 'IntegrityError'
code = 500
finally:
...
return make_response(transaction_status, code)
Everything works fine, I'm able to talk to the backend, create new data and insert this in the DB. As I said, any violation of the constraints is detected and the backend responds
curl -X POST "http://somedomain:port/new/foo/bar/baz/qux" -v
...
< HTTP/1.0 500 INTERNAL SERVER ERROR
...
IntegrityError
So, the problem is, no matter whether the action create was successful or not, the intended error handler specified inside the controller is always fired. Moreover, I always end up with a status code 404 in the httpResponse. Firebug shows correctly the code 500 as above, though.
Anybody has any idea of why I'm getting this behavior?
Any suggestions on how to improve the error handling mechanism are also welcome.
Thx in advance.
P.S. Following the documentation on $resource I have also tried variations on the factory service call, e.g.
Appointments.create({}, $scope.appointment, successCallback, errorCallback);
Appointments.create($scope.appointment, {}, successCallback, errorCallback);
with the same results.
Update:
Forgot to mention the important fact that I'm interacting with the backend via CORS requests. The POST request in create above is having place with the OPTIONS method instead. As I mentioned everything is working correctly except for the error response.
Under further investigation, I tried to isolate the factory service, in case I did something wrong, and I also tried the approach shown in the credit card example ($resource docs), but with no positive result.
However, I came up with two workarounds. Firstly, I was able to create a plain JQuery POST request, as in the example shown in the docs. This time, the request is not replaced by OPTIONS and I got the error code correctly.
I also managed to connect to the backend with the low-level $http service as follows:
var urlBase = 'http://somedomain:port/new/:name/:start/:end/:treatment';
var url = urlBase.replace(/:name/g, $scope.appointment.name);
url = url.replace(/:start/g, $scope.appointment.start);
url = url.replace(/:end/g, $scope.appointment.end);
url = url.replace(/:treatment/g, $scope.appointment.treatment);
// force method to be POST
var futureResponse = $http({ method: 'POST', url: url });
futureResponse.success(function (data, status, headers, config) {
console.debug('success: ', JSON.stringify(data));
});
futureResponse.error(function (data, status, headers, config) {
console.group('Error');
console.debug(JSON.stringify(status));
console.debug(JSON.stringify(data));
console.groupEnd();
});
This time, as in the case of JQuery, the request is done effectively with POST and error codes are correctly received.
Notice also that I'm not calling $http.post but I set the method to POST as part of the object parameter to $http, otherwise the connection takes places with OPTIONS as before.
Still trying to figure out what is happening with $resource.