imranariffin · May 14, 2020 20:23
diff --git a/yodlee-fastlink.html b/yodlee-fastlink.html
 <style>
  body {
    font: 15px/1.5 Monaco, MonoSpace;
    color: #005f9e;
  }

  a, a:hover {
    color: #FF3A67;
  }

  b {
    font-weight: bold;
    color: #343741;
  }

  .highlight {
    background: #d8dcdb;
    margin: 16px;
    padding: 10px;
  }

  .highlight p {
    margin: 2px 0px;
  }

  #logo {
    max-width: 100%;
    background: #0074bd;
    margin: 16px 0px;
    padding: 10px;
  }

  #btn-fastlink {
    margin-bottom: 16px;
    background: #005f9e;
  }
 </style>

 <body>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <img src="https://developer.yodlee.com/sites/default/files/Yodlee_Developer_Logo_Reverse_RGB.png" id="logo" />
      </div>
    </div>
    <div class="row">
      <div class="col">
        <p>
          This pen allows you to try out the <a href="https://developer.yodlee.com/docs/fastlink/3.0/getting-started" target="_blank">Yodlee FastLink</a> tool configured for the <a href="https://developer.yodlee.com/docs/fastlink/3.0/product-guide">account verification UI flow</a>.
        </p>
        <p>
          To use it, first generate an <a href="https://developer.yodlee.com/docs/api/1.1/getting-started-with-cc" target="_blank">authentication token</a> with one of your predefined
          <a href="https://developer.yodlee.com/api-dashboard" target="_blank">Yodlee Sandbox</a> users.
        </p>
        <p>
          Instructions: Copy/paste the token into the auth token entry box below. Click the "Link an Account" button to bring up the FastLink UI. Click on "Dag Site" in FastLink. Enter the credentials shown below to link a Yodlee-supplied dummy site with prepopulated data. FastLink will return account parameters, which will be shown in the "Link Results" area. <b>Note: The accountId will not be shown until you close FastLink.</b>
        </p>
        <p>
          Integration: The code here also serves to show a basic integration of FastLink. You can freely edit this pen to see how it works.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-auto">
        <p>Demo <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1653/FastLinkFlow.gif" target="_blank">(click to expand)</a></p>
        <div>
          <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1653/FastLinkFlow.gif" target="_blank">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1653/FastLinkFlow.gif" id="demo" />
          </a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 rounded highlight">
        <p>Provider Test Account</p>
        <p>Provider: Dag Site</p>
        <p>Username: YodTest.site16441.2</p>
        <p>Password: site16441.2</p>
      </div>
      <div class="col-md-4 rounded highlight">
        <p>Link Results</p>
        <p>providerId: <span id="providerId"></span></p>
        <p>providerAccountId: <span id="providerAccountId"></span></p>
        <p>accountId: <span id="accountId"></span></p>
        <p>requestId: <span id="requestId"></span></p>
      </div>
    </div>
    <form action="">
      <div class="row">
        <div class="form-group col-auto">
          <label for="token">Authentication Token</label>
          <input class="form-control" id="token" placeholder="Your auth token">
        </div>
        <div class="form-group col-auto">
          <p>Token Type</p>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="type" id="cc" value="cc" checked>
            <label class="form-check-label" for="cc">Client Credentials</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="type" id="jwt" value="jwt">
            <label class="form-check-label" for="jwt">JWT</label>
          </div>
        </div>
      </div>
      <button type="submit" class="btn btn-primary" id="btn-fastlink">Link an Account</button>
    </form>
    <div class="row">
      <div class="col-md-8">
        <div id="container-fastlink"></div>
      </div>
    </div>
  </div>
 <script type='text/javascript'>
 (function(window) {
  const fastlinkBtn = document.getElementById('btn-fastlink');

  fastlinkBtn.addEventListener(
    'click',
    function(event) {
      event.preventDefault();
      console.log('Clicked! :D');

      // config.fastLinkURL = 'https://node.sandbox.yodlee.com/authenticate/restserver';
      config.fastLinkURL = 'REPLACE_WITH_DEVELOPMENT_URL';
      config.params = { userExperienceFlow: 'Aggregation' };

      // Yodlee supports Client Credential and JWT authentication
      // Use the code appropriate to your authentication type
      if (document.getElementById('cc').checked == true) {
        config.accessToken = 'Bearer ' + tokenElement.value;
      }
      else {
        config.jwtToken = 'Bearer ' + tokenElement.value;
      }

      window.fastlink.open(config, 'container-fastlink');
    },
    false
  );

  const config = {
    onSuccess: function(data) {
      console.log(data);
      providerId.textContent = data.providerId;
      providerAccountId.textContent = data.providerAccountId;
      accountId.textContent = data.accountId;
      requestId.textContent = data.requestId;
    },
    onError: function(data) {
      console.log(data);
    },
    onExit: function(data) {
      console.log(data);
      let site = data.sites[0];
      providerId.textContent = site.providerId;
      providerAccountId.textContent = site.providerAccountId;
      accountId.textContent = site.accountId;
      requestId.textContent = site.requestId;
    },
    onEvent: function(data) {
      console.log(data);
    }
  };

  const tokenElement = document.getElementById('token');
  const providerId = document.getElementById('providerId');
  const providerAccountId = document.getElementById('providerAccountId');
  const accountId = document.getElementById('accountId');
  const requestId = document.getElementById('requestId');
 })(window);

 <!-- This code is not part of FastLink.  This is for auto-populating authentication. -->

 (function() {
  function getUrlVars() {
    let params = {};

    window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
      params[key] = value;
    });

    return params;
  }

  const type = decodeURI(getUrlVars()['type']);

  if (type == 'jwt') {
    document.getElementById('jwt').checked = true;
  }

  const token = decodeURI(getUrlVars()['token']);

  if (token && token != 'undefined') {
    document.getElementById('token').value = token;
  }
 })();
 </script>
 <script type='text/javascript' src='https://cdn.yodlee.com/fastlink/v3/initialize.js'></script>
 </body>
	<style>
	body {
	font: 15px/1.5 Monaco, MonoSpace;
	color: #005f9e;
	}

	a, a:hover {
	color: #FF3A67;
	}

	b {
	font-weight: bold;
	color: #343741;
	}

	.highlight {
	background: #d8dcdb;
	margin: 16px;
	padding: 10px;
	}

	.highlight p {
	margin: 2px 0px;
	}

	#logo {
	max-width: 100%;
	background: #0074bd;
	margin: 16px 0px;
	padding: 10px;
	}

	#btn-fastlink {
	margin-bottom: 16px;
	background: #005f9e;
	}
	</style>

	<body>
	<div class="container">
	<div class="row">
	<div class="col-md-4">
	<img src="https://developer.yodlee.com/sites/default/files/Yodlee_Developer_Logo_Reverse_RGB.png" id="logo" />
	</div>
	</div>
	<div class="row">
	<div class="col">
	<p>
	This pen allows you to try out the <a href="https://developer.yodlee.com/docs/fastlink/3.0/getting-started" target="_blank">Yodlee FastLink</a> tool configured for the <a href="https://developer.yodlee.com/docs/fastlink/3.0/product-guide">account verification UI flow</a>.
	</p>
	<p>
	To use it, first generate an <a href="https://developer.yodlee.com/docs/api/1.1/getting-started-with-cc" target="_blank">authentication token</a> with one of your predefined
	<a href="https://developer.yodlee.com/api-dashboard" target="_blank">Yodlee Sandbox</a> users.
	</p>
	<p>
	Instructions: Copy/paste the token into the auth token entry box below. Click the "Link an Account" button to bring up the FastLink UI. Click on "Dag Site" in FastLink. Enter the credentials shown below to link a Yodlee-supplied dummy site with prepopulated data. FastLink will return account parameters, which will be shown in the "Link Results" area. <b>Note: The accountId will not be shown until you close FastLink.</b>
	</p>
	<p>
	Integration: The code here also serves to show a basic integration of FastLink. You can freely edit this pen to see how it works.
	</p>
	</div>
	</div>
	<div class="row">
	<div class="col-md-auto">
	<p>Demo <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1653/FastLinkFlow.gif" target="_blank">(click to expand)</a></p>
	<div>
	<a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1653/FastLinkFlow.gif" target="_blank">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1653/FastLinkFlow.gif" id="demo" />
	</a>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col-md-4 rounded highlight">
	<p>Provider Test Account</p>
	<p>Provider: Dag Site</p>
	<p>Username: YodTest.site16441.2</p>
	<p>Password: site16441.2</p>
	</div>
	<div class="col-md-4 rounded highlight">
	<p>Link Results</p>
	<p>providerId: <span id="providerId"></span></p>
	<p>providerAccountId: <span id="providerAccountId"></span></p>
	<p>accountId: <span id="accountId"></span></p>
	<p>requestId: <span id="requestId"></span></p>
	</div>
	</div>
	<form action="">
	<div class="row">
	<div class="form-group col-auto">
	<label for="token">Authentication Token</label>
	<input class="form-control" id="token" placeholder="Your auth token">
	</div>
	<div class="form-group col-auto">
	<p>Token Type</p>
	<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="type" id="cc" value="cc" checked>
	<label class="form-check-label" for="cc">Client Credentials</label>
	</div>
	<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="type" id="jwt" value="jwt">
	<label class="form-check-label" for="jwt">JWT</label>
	</div>
	</div>
	</div>
	<button type="submit" class="btn btn-primary" id="btn-fastlink">Link an Account</button>
	</form>
	<div class="row">
	<div class="col-md-8">
	<div id="container-fastlink"></div>
	</div>
	</div>
	</div>
	<script type='text/javascript'>
	(function(window) {
	const fastlinkBtn = document.getElementById('btn-fastlink');

	fastlinkBtn.addEventListener(
	'click',
	function(event) {
	event.preventDefault();
	console.log('Clicked! :D');

	// config.fastLinkURL = 'https://node.sandbox.yodlee.com/authenticate/restserver';
	config.fastLinkURL = 'REPLACE_WITH_DEVELOPMENT_URL';
	config.params = { userExperienceFlow: 'Aggregation' };

	// Yodlee supports Client Credential and JWT authentication
	// Use the code appropriate to your authentication type
	if (document.getElementById('cc').checked == true) {
	config.accessToken = 'Bearer ' + tokenElement.value;
	}
	else {
	config.jwtToken = 'Bearer ' + tokenElement.value;
	}

	window.fastlink.open(config, 'container-fastlink');
	},
	false
	);

	const config = {
	onSuccess: function(data) {
	console.log(data);
	providerId.textContent = data.providerId;
	providerAccountId.textContent = data.providerAccountId;
	accountId.textContent = data.accountId;
	requestId.textContent = data.requestId;
	},
	onError: function(data) {
	console.log(data);
	},
	onExit: function(data) {
	console.log(data);
	let site = data.sites[0];
	providerId.textContent = site.providerId;
	providerAccountId.textContent = site.providerAccountId;
	accountId.textContent = site.accountId;
	requestId.textContent = site.requestId;
	},
	onEvent: function(data) {
	console.log(data);
	}
	};

	const tokenElement = document.getElementById('token');
	const providerId = document.getElementById('providerId');
	const providerAccountId = document.getElementById('providerAccountId');
	const accountId = document.getElementById('accountId');
	const requestId = document.getElementById('requestId');
	})(window);

	<!-- This code is not part of FastLink. This is for auto-populating authentication. -->

	(function() {
	function getUrlVars() {
	let params = {};

	window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
	params[key] = value;
	});

	return params;
	}

	const type = decodeURI(getUrlVars()['type']);

	if (type == 'jwt') {
	document.getElementById('jwt').checked = true;
	}

	const token = decodeURI(getUrlVars()['token']);

	if (token && token != 'undefined') {
	document.getElementById('token').value = token;
	}
	})();
	</script>
	<script type='text/javascript' src='https://cdn.yodlee.com/fastlink/v3/initialize.js'></script>
	</body>