Now I have following code on the client:
var model = new falcor.Model({
source: new falcor.HttpDataSource('/model.json')
});
I completely understand how to handle tokens on the server side using falcor-router class. My question is how to send tokens with each request from the browser (how to change code above)? I just couldn't find any information. As soon as falcor hides network from developer I expect it to have some options for HTTP requests.
I would really appreciate the answer.
The answer from gdi2290
var model = new falcor.Model({
source: new falcor.HttpDataSource( '/model.json', {
// Options here
headers: {
// Any headers here
'Authorization': `bearer ' + token` // JWT
},
withCredentials: true, // Cookies
crossDomain: true // CORS
})
});
Related
I would like to setup the follownig workflow:
Initially, without login, Swagger shows only 2-3 endpoints - this will be done by providing limited openapi3 json from backend, no problem;
User logs in via Authorize button (works, openapi3 json has necessary info);
After login, Swagger emits one more request with user credentials, backend provides new openapi3 json with endpoints available to this specific user and Swagger redraws the page with new data. Preferably, user is still logged in.
Is it possible to do Item 3 with Swagger? How can I manually emit request from Swagger with OAuth2 bearer token (since user logged, token must present somwhere) and redraw Swagger page?
The task was done via Swagger customization using its plugin system.
Actually Swagger is a JavaScript (Babel, Webpack) project using React / Redux and it was a little bit hard to dig into it since I do not know React (my tool is Python) but finally I managed.
Here is the code for my custom plugin with comments:
const AuthorizedPlugin = function(system) {
return {
statePlugins: {
auth: { // namespace for authentication subsystem
// last components invoked after authorization or logout are
// so-called reducers, exactly they are responsible for page redraw
reducers: {
"authorize_oauth2": function(state, action) {
let { auth, token } = action.payload
let parsedAuth
auth.token = Object.assign({}, token)
parsedAuth = system.Im.fromJS(auth)
var req = {
credentials: 'same-origin',
headers: {
accept: "application/json",
Authorization: "Bearer " + auth.token.access_token
},
method: 'GET',
url: system.specSelectors.url()
}
// this is the additional request with token I mentioned in the question
system.fn.fetch(req).then(
function (result) {
// ... and we just call updateSpec with new openapi json
system.specActions.updateSpec(result.text)
}
)
// This line is from the original Swagger-ui code
return state.setIn( [ "authorized", parsedAuth.get("name") ], parsedAuth )
},
"logout": function(state, action) {
var req = {
credentials: 'same-origin',
headers: { accept: "application/json" },
method: 'GET',
url: system.specSelectors.url()
}
// for logout, request does not contain authorization token
system.fn.fetch(req).then(
function (result) {
system.specActions.updateSpec(result.text)
}
)
// these lines are to make lock symbols gray and remove credentials
var result = state.get("authorized").withMutations(function (authorized) {
action.payload.forEach(function (auth) {
authorized.delete(auth);
});
});
return state.set("authorized", result)
}
}
}
}
}
}
Insert this plugin as usual:
const ui = SwaggerUIBundle({{
url: '{openapi_url}',
dom_id: '#swagger-ui',
defaultModelsExpandDepth: -1,
displayOperationId: false,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
],
plugins: [
AuthorizedPlugin
],
layout: "BaseLayout",
deepLinking: true
})
I have developed an application to analyse the network traffic while playing a youtube video. It uses chrome.webRequest and I calculate the traffic using onHeadersReceived event.
I want to do the same using service workers so that the application becomes browser independent. I fetch event of service worker, but it does not work.
Any suggestions how I can proceed?
Well, the broad idea is to listen to the fetch event, extract the information you need and allow the request to reach the network. You have a working demo in the Service Worker Cookbook: https://serviceworke.rs/api-analytics.html but the relevant code is here (in the cookbook you have the annotated source as well):
self.onfetch = function(event) {
event.respondWith(
// Log the request…
log(event.request)
// …and then actually perform it.
.then(fetch)
);
};
// Post basic information of the request to a backend for historical purposes.
function log(request) {
var returnRequest = function() {
return request;
};
var data = {
method: request.method,
url: request.url
};
return fetch(LOG_ENDPOINT, {
method: 'POST',
body: JSON.stringify(data),
headers: { 'content-type': 'application/json' }
})
.then(returnRequest, returnRequest);
}
I initialize my SockJs URL as
var protocols = ['xhr-polling', 'xdr-polling', 'xdr-streaming', 'xhr-streaming'];
var options = {protocols_whitelist: protocols, debug: true,server:tets};
_ws = new SockJS(url, null, options);
I want to send out a request parameter , for example somesite/sockjs/info?someparam=tets"
Is it possible? Documentation of SockJs refers that options is map which can have key value but i am not sure what key to use here.
I verified URL at server which SockJs sends over and it is
http://http_backend/cecobrowsega-3.0.0.0.31/sockjs/testapp/620/4ydem52f/xhr?null
So in absence of request param its appending a null, seems there is a way to send over request param!
It's available in latest sock js client. Discussion here https://github.com/sockjs/sockjs-client/issues/72
we can pass query string along with the connection URL, same syntax as for any HTTP call
For those who needs code sample:
var socket = new SockJS('http://localhost/ws?token=AAA');
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
stompClient.subscribe('/topic/echo', function(data) {
// topic handler
});
}
}, function(err) {
// connection error
});
Now all the requests related to websocket will have parameter "?token=AAA"
http://localhost/ws/info?token=AAA&t=1446482506843
http://localhost/ws/515/z45wjz24/websocket?token=AAA
Tested with SockJS 1.0.3
I'm fetching google contacts in a webapp using the Google JavaScript API and I'd like to retrieve their pictures.
I'm doing something like this (heavily simplified):
var token; // let's admit this is available already
function getPhotoUrl(entry, cb) {
var link = entry.link.filter(function(link) {
return link.type.indexOf("image") === 0;
}).shift();
if (!link)
return cb(null);
var request = new XMLHttpRequest();
request.open("GET", link.href + "?v=3.0&access_token=" + token, true);
request.responseType = "blob";
request.onload = cb;
request.send();
}
function onContactsLoad(responseText) {
var data = JSON.parse(responseText);
(data.feed.entry || []).forEach(function(entry) {
getPhotoUrl(e, function(a, b, c) {
console.log("pic", a, b, c);
});
});
}
But I'm getting this error both in Chrome and Firefox:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.google.com/m8/feeds/photos/media/<user_email>/<some_contact_id>?v=3.0&access_token=<obfuscated>. This can be fixed by moving the resource to the same domain or enabling CORS.
When looking at the response headers from the feeds/photos endpoint, I can see that Access-Control-Allow-Origin: * is not sent, hence the CORS error I get.
Note that Access-Control-Allow-Origin: * is sent when reaching the feeds/contacts endpoint, hence allowing cross-domain requests.
Is this a bug, or did I miss something from their docs?
Assuming you only need the "profile picture", try actually moving the request for that image directly into HTML, by setting a full URL as the src element of an <img> tag (with a ?access_token=<youknowit> at the end).
E.g. using Angular.js
<img ng-src="{{contact.link[1].href + tokenForImages}}" alt="photo" />
With regard to CORS in general, there seem to be quite a few places where accessing the API from JS is not working as expected.
Hope this helps.
Not able to comment yet, hence this answer…
Obviously you have already set up the proper client ID and JavaScript origins in the Google developers console.
It seems that the domain shared contacts API does not work as advertised and only abides by its CORS promise when you request JSONP data (your code indicates that you got your entry data using JSON). For JSON format, the API sets the access-control-allow-origin to * instead of the JavaScript origins you list for your project.
But as of today (2015-06-16), if you try to issue a GET, POST… with a different data type (e.g. atom/xml), the Google API will not set the access-control-allow-origin at all, hence your browser will deny your request to access the data (error 405).
This is clearly a bug, that prevents any programmatic use of the shared contacts API but for simple listing of entries: one can no longer create, update, delete entries nor access photos.
Please correct me if I'm mistaken (I wish I am); please comment or edit if you know the best way to file this bug with Google.
Note, for the sake of completeness, here's the code skeleton I use to access contacts (requires jQuery).
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<script type="text/javascript">
var clientId = 'TAKE-THIS-FROM-CONSOLE.apps.googleusercontent.com',
apiKey = 'TAKE-THAT-FROM-GOOGLE-DEVELOPPERS-CONSOLE',
scopes = 'https://www.google.com/m8/feeds';
// Use a button to handle authentication the first time.
function handleClientLoad () {
gapi.client.setApiKey ( apiKey );
window.setTimeout ( checkAuth, 1 );
}
function checkAuth() {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}
function handleAuthResult ( authResult ) {
var authorizeButton = document.getElementById ( 'authorize-button' );
if ( authResult && !authResult.error ) {
authorizeButton.style.visibility = 'hidden';
var cif = {
method: 'GET',
url: 'https://www.google.com/m8/feeds/contacts/mydomain.com/full/',
data: {
"access_token": authResult.access_token,
"alt": "json",
"max-results": "10"
},
headers: {
"Gdata-Version": "3.0"
},
xhrFields: {
withCredentials: true
},
dataType: "jsonp"
};
$.ajax ( cif ).done ( function ( result ) {
$ ( '#gcontacts' ).html ( JSON.stringify ( result, null, 3 ) );
} );
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick ( event ) {
gapi.auth.authorize ( { client_id: clientId, scope: scopes, immediate: false }, handleAuthResult );
return false;
}
</script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<pre id="gcontacts"></pre>
If you replace cif.data.alt by atom and/or cif.dataType by xml, you get the infamous error 405.
ps: cif is of course related to ajax ;-)
How do I tell Breeze to include an authorization bearer token header when using the OData data service?
//Configured breeze to use OData
breeze.config.initializeAdapterInstance('dataService', 'OData');
//Configured breeze to use AngularJS ajax
var instance = breeze.config.initializeAdapterInstance('ajax', 'angular', true);
//Tried passing authorization bearer token header using setHttp with no success
//NOTE: $http setup with $http.defaults.headers.common['Authorization'] = 'Bearer...'
instance.setHttp($http);
//Tried passing authorization bearer token header using ajax settings with no success
instance.defaultSettings = {
headers: {
'Authorization': 'Bearer...'
},
};
//Fiddler shows no authorization bearer token header for following query
var manager = new breeze.EntityManager('/odata/');
var query = breeze.EntityQuery.from('Customers');
return manager.executeQuery(query).to$q(querySucceeded, queryFailed);
I don't know if you solved your problem. This worked for me:
function configureBreeze() {
// configure to use the model library for Angular
breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);
var accessToken = Security.user.access_token;
if (Security.user.access_token) {
// get the current default Breeze AJAX adapter & add header required for the Web API bearer token mechanism
var ajaxAdapter = breeze.config.getAdapterInstance("ajax");
ajaxAdapter.defaultSettings = {
headers: {
'Authorization': 'Bearer ' + accessToken
},
};
}
}
It is a modification of the configureBreeze method found in the datacontext.js script of the Angular/Breeze SPA template for asp.net MVC4.
Hope it helps.
I had the same problem. After looking at breeze dataservice for oData i think that it just ignores ajax provider cause it's using datajs to do requests. So instance.setHttp($http); won't work. I ended up overriding default request method in datajs like that:
var base = window.OData.request;
window.OData.request = function (request, success, error, handler, httpClient, metadata) {
angular.extend(request.headers, { Authorization: $rootScope.token });
return base(request, success, error, handler, httpClient, metadata);
};
There's an sample on the Breeze Website (under OData AJAX): http://www.getbreezenow.com/documentation/controlling-ajax
var oldClient = OData.defaultHttpClient;
var myClient = {
request: function (request, success, error) {
request.headers.Authorization = authorization;
return oldClient.request(request, success, error);
}
};
OData.defaultHttpClient = myClient;
//instance.defaultSettings = {
// headers: {
// 'Authorization': 'Bearer...'
// },
//};
instance.headers['Authorization'] = 'Bearer...';