Web Messaging using POST Messages
Web Messaging is the term used to describe to how the widget events can be listened for by using a Window listener
To interact with the Consumer Credit Widget, you will need to implement a structure using a window event listener.
Explanation for most messages is explained within the Javascript code.
See Tabbed User Interface with Dynamic Consumer Authentication (direct_sample.html) for a working implementation.
You should implement your own user authentication on your servers and return a valid preauth-token to continue.
The /test/preauth-token can be used in the getData function only functions in the development environment.
Essentially, the customer can listen for these events so that when these events occur, the customer can handle some of their desired behavior (e.g. logging, redeeming preauth token, prepopulating fields, etc.).
For example, when the event.data.type, 'IDENTITY_STARTED', is listened for/received, the customer can use the postMessage({}) function on the event.source in order to prepopulate some identity fields that the customer may already have stored (should never be used for pre-populating the date of birth or ssn per compliance). From one of the html examples, here is how the identity form fields can be prepopulated after the 'IDENTITY_STARTED' event.data.type is received:
Here is a sample javascript code for handling Web Messaging:
<script>
//this just throws in a default ID if one isn't provided on the query string
const id = document.location.search.length > 0 ? document.location.search.split('&')[0].split('=')[1] : '048741d2-3dcf-4892-8fb0-99930a540cc1';
console.log("ID: ",id);
console.log("Loading Message Listener...");
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
if(event && event.source && event.data) {
// You only need to implement the types that are important/relevant to your use case.
if(event.data.type === 'AUTH_REQUIRED') {
//The iframe clident will post this message when a valid preauth token does not exist.
//Posting a proper message with a preauth token in response allows the client to continue seemlessly.
//console.log("Auth Required Event Received");
const es = event.source;
//this code uses a test endpoint on the server to provide a preauth-token for any user ID without the usual hurdles.
//This is ONLY for testing and does not exist in the production environment.
getData("https://efx-dev.stitchcredit.com/api/test/preauth-token/"+id, function() {
const token = JSON.parse(this.responseText).token;
console.log("Status: ", this.status, ", token: ", token);
es.postMessage({type: 'PREAUTH', token: this.status == 200 ? token : null},"*");
});
}
else if(event.data.type === 'REG_STARTED') {
const es = event.source;
//only valid for full web implementation, Direct API already creates the customer, so this will never happen in those instances
// (new Date().valueOf()) - is used to generate a new email ID on the fly for testing purposes
es.postMessage({type: 'REG', data: {fname:"Gertrude", lname:"Harkenreadeo", email: "test+" + (new Date().valueOf()) + "@test.com"}},"*");
}
else if(event.data.type === 'IDENTITY_STARTED') {
const es = event.source;
//You could use this function to pre-populate the given fields. DoB and SSN will never be prepopulated as it violates compliance
// new Date().valueOf().toString() - generates a unique number for street2 to ensure each run goes through the full identity process, remove to test sequential sign up of the same user
es.postMessage({type: 'IDENTITY', data: {street1:"305 Linden Av", street2: new Date().valueOf().toString(), city: "Atlanta", state: "GA", zip: "30316", mobile: "0000000000"}},"*");
}
else if(event.data.type === 'LOGIN_SUCCESSFUL') {
console.log("User succesfully logged in");
}
else if(event.data.type === 'LOGIN_FAILED') {
//if you see this message more than a few times in a row, it's likely an issue
//typically this will only occur for full web implementations, not Direct API
console.log("User login failed");
}
else if(event.data.type === 'USER_ENROLLED') {
//User successfully completed identity and has been enrolled for consumer data
console.log("User enrollment successful");
}
else if(event.data.type === 'IDENTITY_FAILED') {
//Identity process failed, user is likely "stuck" as they cannot continue
console.log("User identity failure");
}
else if(event.data.type === 'SERVICE_FAILURE') {
//Identity process failed most likely due to a service outage, but the user is stuck as they cannot continue without passing identity
console.log("Identity service failure");
}
}
function getData(req, action) {
var xhr = new XMLHttpRequest();
xhr.responesType = 'json';
xhr.onload = action;
xhr.open("GET", req);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send();
}
}
</script>
Please see direct_sample.html for a working implementation.
Note that the /test/preauth-token call used in the getData function only functions in the development environment. You should implement your own user authentication on your servers and return a valid preauth-token to continue.