I'm trying to implement easyXDM into our current project so that users were able to work with several systems during one workflow with access from a single interface. In other words when a user opens page X the application from another domain should be loaded into an iframe for user to work with (user must authenticate first).
The task itself has a requirement that a certain part of an application should be opened depending on some conditions (lets say that for user from department A we should open form Af in the said application).
So here is the logic I'm trying to code here:
- User opens page X (the Consumer)
- Iframe with application's login page (the Provider1) is loaded into iframe on Consumer
- User logs into the application
- JS on the Consumer receives headers from the Provider1
- JS on the Consumer loads Provider2 with headers received earlier and tells the Provider2 to navigate to a certain form
- JS inside the Provider2 receives a message from the Consumer and navigates to a certain form inside this application.
Here's what I got for now (pretty much a simple example from easyXDM readme):
Provider
var socket = new easyXDM.Socket({
onMessage: function(message, origin){
// do something
}
});
Consumer
var socket = new easyXDM.Socket({
remote: "http://remote/page",
container: "test",
onMessage: function(message, origin){
alert("Received '" + message + "' from '" + origin + "'");
var socket1 = new easyXDM.Socket({
remote: "http://remote/page2",
container: "test",
headers: providers2_headers,
onMessage: function(message, origin){
alert("Received '" + message + "' from '" + origin + "'");
},
onReady: function() {
this.container.getElementsByTagName("iframe")[0].style.width = "100%";
socket1.postMessage("Yay, it works!");
}
});
},
onReady: function() {
this.container.getElementsByTagName("iframe")[0].style.width = "100%";
socket.postMessage("Yay, it works!");
}
});
The question
How to get headers from the Provider1 and use them to load the Provider2?