<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<link href="https://developer.yodlee.com/assets/img/google-prettify/prettify.css">
<style>
/*
* Derived from einaros's Sons of Obsidian theme at
* http://studiostyl.es/schemes/son-of-obsidian by
* Alex Ford of CodeTunnel:
* http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
*/
.str
{
color: #EC7600;
}
.kwd
{
color: #93C763;
}
.com
{
color: #66747B;
}
.typ
{
color: #678CB1;
}
.lit
{
color: #FACD22;
}
.pun
{
color: #F1F2F3;
}
.pln
{
color: #F1F2F3;
}
.tag
{
color: #8AC763;
}
.atn
{
color: #E0E2E4;
}
.atv
{
color: #EC7600;
}
.dec
{
color: purple;
}
pre.prettyprint
{
border: 0px solid #888;
}
ol.linenums
{
margin-top: 0;
margin-bottom: 0;
}
.prettyprint {
background: #000;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
color: #555;
list-style-type: decimal;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
background: #111;
}
@media print
{
.str
{
color: #060;
}
.kwd
{
color: #006;
font-weight: bold;
}
.com
{
color: #600;
font-style: italic;
}
.typ
{
color: #404;
font-weight: bold;
}
.lit
{
color: #044;
}
.pun
{
color: #440;
}
.pln
{
color: #000;
}
.tag
{
color: #006;
font-weight: bold;
}
.atn
{
color: #404;
}
.atv
{
color: #060;
}
}
.prettyprint{white-space: pre-wrap;
white-space: nowrap;}
</style>
</head>
<body onLoad="prettyPrint()"><div>
<h4 id="intro">Introduction</h4>
<p>Our goal with Getting Started is to help you understand the steps required to develop and run a simple Web-based application using the Yodlee APIs. If you haven’t already, please read the <a href="https://developer.yodlee.com/API_Resources/API_Overview" rel="noopener" target="_blank">API Overview</a> before proceeding.</p>
<p>Getting Started covers the basics of authenticating accounts, linking accounts, and retrieving basic account data with APIs. To help you understand how these steps work together in a real application, the discussion and code snippets that follow are provided in the context of a fully functional (but simple) sample application. We first discuss what the application does and how to run it, and then walk through the code to understand how the Yodlee API is used. The sample exercises use only the API endpoints required for connecting and retrieving basic account and transaction information. To understand the full range of capabilities offered by the API, please review to our <a href="https://developer.yodlee.com/apidocs/index.php">reference documentation</a>.</p>
<p>The sample is developed using a Java servlet, JavaScript, and JQuery. The discussion below assumes familiarity with the basic syntax for Java and JavaScript and how to build/deploy a servlet-based Web application (although some helpful links are provided). You can obtain the full sample application code <a href="http://developer.yodlee.com/SampleApps/YodleeAPI/YodleeSampleApp.zip">here</a>.</p>
<p>If you have further questions, please do not hesitate to contact us at <a href="mailto:YIZen@yodlee.com">YIZen@yodlee.com</a>!</p>
<hr /></div>
<div>
<h4 id="appdescription">Sample Application Description</h4>
<p>What does the sample application do? The application allows a user to log in, link one or more accounts from a financial institution of their choosing, and then inspect the account metadata and transaction data that are returned. By default, the application links to dummy account data. The application also showcases additional processing performed by the Yodlee platform such as transaction categorization and simplification of complex transaction descriptions into more human readable form.</p>
<p>The first page of the sample application provides a login screen that allows the user to log in. The application authenticates the user in a two-step process; step 1 occurs during page loading and step 2 occurs after the login form is submitted. This is explained in greater detail in the code walk-through below.</p>
<p><img alt="" height="430" src="https://developer.yodlee.com/assets/img/Images_sampleApp/Login.png" width="640" /></p>
<p>Once the user is logged in, the main page of the application shows a list of accounts that have been linked before (left pane) and allows the user to link new accounts (by providing the account credentials) so Yodlee can fetch account information. The user can also choose to logout to return to the main screen.</p>
<p>Using the default configuration, the application works with the sandbox API environment and accepts the credentials of the sample users who are automatically created when the sandbox is provisioned. Each user has some dummy accounts already associated with it. Thus, on initial login, the application will show several (dummy) accounts already linked. </p>
<p><img alt="" height="450" src="https://developer.yodlee.com/assets/img/Images_sampleApp/Accounts-page.png" width="640" /></p>
<p>When a user selects one of the linked accounts, the application fetches and displays account metadata (“Account Details” section) and the recent transactions (“Transaction Summary” section) for the selected account. For each transaction, it shows the transaction date, amount, and category (automatically assigned); and the raw description returned by the financial institution and the cleansed, simpler description provided by the Yodlee platform. The user can also choose to unlink the currently selected account. Unlinking the account removes the account from the application account list (left pane) and deletes the account from the API back end so that the platform stops collecting data for the account. </p>
<p><img alt="" height="432" src="https://developer.yodlee.com/assets/img/Images_sampleApp/Account_details.png" width="640" /></p>
<p>The user can add a new account by clicking <strong>Link Account</strong>. This launches the <a href="https://developer.yodlee.com/fastlink_2.0">FastLink</a> application to guide the user through the process of linking their account(s) with the Yodlee platform. The Yodee platform can then aggregate data on the user’s behalf. FastLink allows the user to search for an institution or select one from the list of common financial sites in the pick list. (FastLink’s look and feel can be <a href="https://developer.yodlee.com/Yodlee_API/FastLink_Customization_Guide_For_Aggregation">customized</a>.)</p>
<p><img alt="" height="437" src="https://developer.yodlee.com/assets/img/Images_sampleApp/Fastlink_page.png" width="640" /></p>
<p>Once the appropriate provider site is selected, FastLink collects the user’s credentials. The Yodlee platform then attempts to authenticate the user with the site, and fetch account and transaction data. The FastLink application shields developers from the complicated process of collecting credentials and authenticating them across thousands of financial institution sites.</p>
<div>
<hr align="left" size="1" width="33%" /></div>
<p><img alt="" height="440" src="https://developer.yodlee.com/assets/img/Images_sampleApp/FastLink_signin.png" width="640" /></p>
<p>Once the Yodlee platform is able to authenticate the user with the provider site, it returns basic account information so the user can confirm the correct account has been linked. In the meantime, the Yodlee platform continues retrieving account and transaction information. The user can link additional sites and accounts or quit FastLink. </p>
<p><img alt="" height="438" src="https://developer.yodlee.com/assets/img/Images_sampleApp/FastLink_success.png" width="640" /></p>
</div>
<hr />
<div>
<h4 id="getsameple">Getting The Sample Running</h4>
<p>The sample application is distributed as a <a href="https://maven.apache.org/">maven project</a>. To try the application and understand the source code, you need to do the following:</p>
<ol>
<li>Set up a free <a href="https://developer.yodlee.com/user/register">Yodlee developer portal account</a> that provides an API sandbox environment and several dummy consumers.</li>
<li>Log in to your developer account and navigate to the API Dashboard.
<ol style="list-style-type: lower-alpha;">
<li>Save the API Keys (Cobrand Login, Cobrand Password) and Yodlee API URL for the sandbox API environment from the dashboard as shown below.<br />
<br />
<img alt="" height="279" src="https://developer.yodlee.com/assets/img/Images_sampleApp/api_dashboard.png" width="640" /><br />
</li>
<li>Although the API lets you create new user accounts, for this sample application, we use pre-provisioned user accounts. Each developer account comes with five test user accounts that are automatically provided and associated with the developer account when it is created. The credentials for the user accounts are listed on the API Dashboard. Save any of the username/password pairs for use with the sample application.<br />
<br />
<img alt="" height="615" src="https://developer.yodlee.com/assets/img/Images_sampleApp/API_Testusers.png" width="640" /></li>
</ol>
</li>
<li>Download the sample application code (“<em>Web Application (using Java Servlets</em>)”) from <a href="https://developer.yodlee.com/API_Resources/Sample_Code">here</a> and unzip it into a local folder.<br />
<br />
Inspect the source code folder to understand the directory structure and identify the key files you will be working with. The directory structure shown below highlights the key files: <strong><em>config.properties</em></strong>, <strong><em>YodleeSampleApp.java</em></strong>, <strong><em>index.html</em></strong><em>,</em> and <strong><em>accounts.html</em></strong>.<br />
<br />
<img height="443" src="https://developer.yodlee.com/assets/img/Images_sampleApp/Project_files.png" width="400" /></li>
<li>Authenticating users with the Yodlee API requires using two sets of credentials: the cobrand login/password and the consumer’s username/password. A cobrand refers to a Yodlee customer, and consumer refers to an application’s end user. The application authenticates with a particular API environment identified by the base URL for the API. <br />
<br />
For this sample, we use the developer portal’s sandbox API environment (https://developer.api.yodlee.com/ysl/restserver/) and the corresponding cobrand and consumer credentials provided in the dashboard. <br />
<br />
Navigate to the <strong>/src</strong> directory and open the <strong><em>config.properties</em></strong> file. Set the config properties based on the credentials and URLs copied from the developer dashboard.<br />
<div class="alert alert-default">
<p>yodlee.APIURL=https://developer.api.yodlee.com/ysl/restserver/<br />
yodlee.coBrandUserName=XXXXXXXXX<br />
yodlee.coBrandPassword= XXXXXXXXX</p>
</div>
<p align="center"><strong>config.properties</strong></p>
</li>
<li>Download and set up a java servlet container/engine, e.g., <a href="http://tomcat.apache.org/tomcat-9.0-doc/setup.html">Apache Tomcat</a>.</li>
<li>Import maven project into your preferred IDE. Instructions for importing into Eclipse or IntelliJ can be found <a href="https://stackoverflow.com/questions/2061094/importing-maven-project-into-eclipse">here</a> and <a href="https://www.jetbrains.com/help/idea/maven.html">here</a>. </li>
<li>Build the sample and export the built sample app as a Web application archive (.war) file. Instructions for exporting a .war file from Eclipse or IntelliJ are available <a href="https://stackoverflow.com/questions/5108019/how-to-make-war-file-in-eclipse">here</a> and <a href="https://stackoverflow.com/questions/19323908/building-a-war-on-intellij">here</a>.</li>
<li>Start Apache Tomcat and <a href="http://tomcat.apache.org/tomcat-9.0-doc/manager-howto.html#Deploy_A_New_Application_from_a_Local_Path">deploy the .war file</a>.</li>
<li>Open your Web browser and navigate to the application URL. If you have used the default settings so far, the application should be available at localhost: 8080/YodleeSampleApp.</li>
<li>Log in to the application using the username/password obtained from the API dashboard.</li>
</ol>
<hr /></div>
<div>
<h4 id="understandcode">Understanding the Application Code</h4>
<p>Once you have the application running, you can try linking accounts to see it in action. The Java back end for the application has intentionally been kept simple by keeping all the relevant code in the same servlet and credentials are placed in the configuration file. When you move to production code, use your organization’s security best practices for credential management and other safety aspects of building your application.</p>
<h4 id="auth">API Authentication</h4>
<p id="cobauth"><strong>Cobrand Authentication</strong></p>
<p>Yodlee API authentication requires two steps: cobrand authentication and user/consumer authentication. The former authenticates the Yodlee customer whereas the latter authenticates the user in the customer’s API environment and sets the context of the financial data that is returned; the API returns data for the accounts associated with the user that have been authenticated.</p>
<p>Cobrand authentication (with cobrand credentials) must occur first, and returns a cobrand session token. User authentication requires the cobrand session token and user credentials, and returns the user session token. The remaining data retrieval API calls require both the cobrand and user session tokens to ensure authorization and set the context of the user for whom the data is being returned.</p>
<p>n this sample application, the cobrand login occurs while the first page is being loaded. To understand the cobrand authentication better, open <strong><em>index.html</em></strong> and find the snippet of code listed below in the JQuery $(document).ready() function.</p>
<p><pre class="prettyprint linenums">
$.get( "/YodleeSampleApp/YodleeSampleApp",{ action: "init"} )
.done(function( data ) {
data = data.replace(/\'/g, '\"');
var responseObj = jQuery.parseJSON(data);
if(responseObj && responseObj.cobSession){
$("#initCheck").append("<p><strong>Cobrand Configuration Check Successful!</strong></p><p>Use test accounts from API Dashboard to login</p>");
$('#submitButton').prop('disabled', false);
}else{
$("#initCheck").removeClass("alert-info");
$("#initCheck").addClass("alert-danger");
if(responseObj && responseObj.error){
$("#initCheck").append("<p>"+responseObj.message+"</p>");
}else{
$("#initCheck").append("<p>Error during initialization. Please check settings in config.properties and user credentials</p>");
}
}
});
</pre></p>
<p>Once the <strong><em>index.html</em></strong> document has finished loading in the browser (i.e., when the <strong>$(document).ready()</strong> function is called), the JavaScript code snippet above invokes GET/YodleeSampleApp (with an “action” parameter set to “init”) to initialize the sample application. During initialization, the sample application attempts to authenticate the API back end using the cobrand credentials from the <strong><em>config.properties</em></strong> file that were set earlier (see below). If the cobrand authentication succeeds, a success status message is shown and the <strong>Submit</strong> button for the login form is enabled so the user can log in using the user credentials (obtained earlier from the dashboard). Otherwise, it shows an error message stating that initialization failed (and the <strong>Submit</strong> button remains disabled).</p>
<p>The YodleeSampleApp Java servlet (<strong><em>YodleeSampleApp.java</em></strong>) that receives the application initialization request, retrieves the cobrand authentication credentials from the <strong><em>config.properties</em></strong> file, i.e., the API URL, cobrand login name, and cobrand password (as shown below).</p>
<p><pre class="prettyprint linenums">
static ResourceBundle resourceBundle = ResourceBundle.getBundle("config");
public static final String localURLVer1= resourceBundle.getString("yodlee.APIURL");
static String coBrandUserName = resourceBundle.getString("yodlee.coBrandUserName");
static String coBrandPassword = resourceBundle.getString("yodlee.coBrandPassword");
</pre></p>
<p>When the request is received, the servlet attempts to authenticate to the Yodlee API back end (using <a href="https://developer.yodlee.com/apidocs/index.php#!/cobrand/authenticateCoBrand">POST /cobrand/login</a>) and obtain a session token as shown below.</p>
<p><pre class="prettyprint linenums">
/**
* Helper method which performs /cobrand/login API call with Yodlee API server.
*
*/
private String getCobrandSession() {
String cobSession = "";
try {
//Request Body - refer to full API reference at https://developer.yodlee.com/apidocs/index.php
final String requestBody = "{"
+ "\"cobrand\":{"
+ "\"cobrandLogin\":\"" + coBrandUserName + "\""+ ","
+ "\"cobrandPassword\": " + "\"" + coBrandPassword + "\"" + ","
+ "\"locale\": \"en_US\""
+ "}"
+ "}";
String coBrandLoginURL = localURLVer1 + "v1/cobrand/login";
String cobrandjsonResponse = HTTP.doPost(coBrandLoginURL,
requestBody);
CobrandContext coBrand = (CobrandContext) GSONParser.handleJson(
cobrandjsonResponse, beans.CobrandContext.class);
if (!cobrandjsonResponse.contains("errorCode")) {
cobSession = coBrand.getSession().getCobSession();
}
} catch (Exception e) {
e.printStackTrace();
}
return cobSession;
}
</pre></p>
<p>The session token is stored in the application session context for future reference.</p>
<p><pre class="prettyprint linenums">
if(cobSession != null && cobSession.length() > 0) {
request.getSession().setAttribute("cobSession", cobSession);
sendAjaxResponse(response, "{'cobSession':'"+cobSession+"'}");
}else {
sendAjaxResponse(response, "{'error':'true', 'message':'Cobrand Configuration Check Failed. Please check settings in config.properties'}");
}
</pre></p>
<p>This cobrand login process occurs in the background while the <strong><em>index.html</em></strong> page is being loaded. </p>
<hr /></div>
<div>
<p id="userauth"><strong>User Authentication</strong></p>
<p>If the cobrand authentication process succeeds, the user can enter his/her credentials in the user login form on the login page (<strong><em>index.html</em></strong>) of the application.</p>
<p>Once the user presses <strong>Submit</strong> on the login form, the <strong>Submit</strong> button handler initiates a request to authenticate the user with the application. </p>
<p><pre class="prettyprint linenums">
//User login
$('#submitButton').click(function() {
window.console.log('submitButton');
var userName = $("#username").val();
var password = $("#password").val();
$('#submitButton').prop('disabled', true);
$('#submitButton').html("Loading...");
$.post( "/YodleeSampleApp/YodleeSampleApp",{ username:userName, password:password} )
.done(function( data ) {
data = data.replace(/\'/g, '\"');
var dataObj = jQuery.parseJSON(data);
if(dataObj && dataObj.error && dataObj.error == "false"){
window.location.href="accounts.html";
}else{
$("#initCheck").removeClass("alert-info");
$("#initCheck").addClass("alert-danger");
$("#initCheck").append("<p>Error in User login, please check your test user credentials (from Yodlee API Dashboard).</p>");
$('#submitButton').prop('disabled', false);
$('#submitButton').html("Login");
}
});
});
});
</pre></p>
<p>The user login request arrives at the same servlet as the cobrand authentication request, YodleeSampleApp (<strong><em>YodleeSampleApp.java</em></strong>) and is handled by the POST request handler. Normally, successful application authentication would trigger a separate API user credential lookup and API user authentication. The notion of (and credentials of) the application user could be separated from the API user if desired. However, for simplicity, the sample application does not perform application user authentication and instead uses the supplied credentials to immediately perform an API user authentication. </p>
<p>The POST method handler invokes the userLogin() method below and stores the user session token in the session context, similar to how the cobrand session token is stored. The userLogin() method invokes the Yodlee API to authenticate the user through <a href="https://developer.yodlee.com/apidocs/index.php#!/user/authenticateUser">POST /user/login</a>. SAML based authentication is also supported. See <a href="https://developer.yodlee.com/apidocs/index.php#!/user/samlLogin">SAML login</a>.</p>
<p><pre class="prettyprint linenums">
/**
* Helper method to call user login Yodlee API - /user/login
*
*/
private String userLogin(String cobSession, String userName, String password) {
String userSession = null;
try {
Map<String, String> loginTokens = new HashMap<String, String>();
loginTokens.put("cobSession", cobSession);
// User login
String userLoginURL = localURLVer1 + "v1/user/login";
//Request Body JSON - refer to full API reference at https://developer.yodlee.com/apidocs/index.php
final String requestBody2 = "{"
+ "\"user\":{"
+ "\"loginName\":\"" + userName + "\"" + ","
+ "\"password\":\"" + password + "\"" + ","
+ "\"locale\": \"en_US\""
+ "}"
+ "}";
String userjsonResponse = HTTP.doPostUser(userLoginURL,
loginTokens, requestBody2, true);
UserContext member = (UserContext) GSONParser.handleJson(
userjsonResponse, beans.UserContext.class);
if (!userjsonResponse.contains("errorCode")) {
userSession = member.getUser().getSession().getUserSession();
}
} catch (IOException e) {
e.printStackTrace();
}
return userSession;
}
</pre></p>
</div>
<hr />
<div>
<h4 id="invokeFastLink">Invoking FastLink</h4>
<p>After successfully logging in, the user is presented with the main application page (<strong><em>accounts.html</em></strong>). From here, the user can choose to invoke FastLink to link accounts to the Yodlee platform. Invoking FastLink is a two-step process. </p>
<p>First, the front end must obtain the FastLink token and user session token from the application back end. </p>
<p>The code snippet below shows the button handler for invoking FastLink which invokes GET /YodleeSampleApp with the “action” parameter set to “getFastLinkToken” to get the required tokens. </p>
<p><pre class="prettyprint linenums">
//Call sample appl servlet to get FastLink token.
//Lauches FastLink by doing form POST in iFrame.
$('#fastlinkbutton').click(function() {
$.get( "/YodleeSampleApp/YodleeSampleApp",{ action: "getFastLinkToken"} )
.done(function( data ) {
window.console.log('getFastLinkToken - '+data);
var fastlinkTokensObj = jQuery.parseJSON(data);
$("#rsession").val(fastlinkTokensObj.userSession);
$("#token").val(fastlinkTokensObj.fastlinkToken);
document.getElementById('rsessionPost').submit();
});
});
</pre></p>
<p>Once the FastLink token and user session information is obtained by the front end from the application back end, it is bound to a hidden form which is submitted to the FastLink application back end. The results of the form submission are redirected to a new iFrame that launches the FastLink application. This is shown below.</p>
<p><pre class="prettyprint linenums">
<form
action='https://node.developer.yodlee.com/authenticate/restserver/'
method='post' id='rsessionPost' target='iframeID'
style="display: none">
RSession : <input type='text' name='rsession' placeholder='rsession'
value='' id='rsession' /><br /> FinappId : <input type='text'
name='app' placeholder='FinappId' value='10003600' id='finappId' /><br />
Redirect : <input type='text' name='redirectReq'
placeholder='true/false' value='true' /><br /> Token : <input
type='text' name='token' placeholder='token' value='' id='token' /><br />
Extra Params : <input type='text' name='extraParams'
placeholer='Extra Params' value='' id='extraParams' /> <br />
</form>
</pre></p>
<p>On the receiving end of the FastLink token request (<strong><em>YodleeSampleApp.java</em></strong>), the servlet GET handler invokes getFastLinkToken() below to get a valid access token required for invoking FastLink from the application front end (see below). The getFastLinkToken() method invokes the <a href="https://developer.yodlee.com/apidocs/index.php#!/user/getAccessTokens">GET /user/accessTokens</a> endpoint with an appId parameter set to “10003600” corresponding to the fixed value used by Yodlee to identify the FastLink application for data aggregation (versus other Yodlee applications). </p>
<p><pre class="prettyprint linenums">
/**
* Helper method to obtain FastLink launch token from Yodlee APIs
* GET /user/accessTokens
* Refer to full API references - https://developer.yodlee.com/apidocs/index.php
*/
private String getFastLinkToken(String cobSession, String userSession) {
String fastLinkToken = null;
String accesstokenJsonResponse = null;
String accessTokenURL= localURLVer1 + "v1/user/accessTokens?appIds=10003600";
try {
Map<String,String> loginTokens = new HashMap<String,String>();
loginTokens.put("cobSession", cobSession);
loginTokens.put("userSession",userSession);
accesstokenJsonResponse = HTTP.doGet(accessTokenURL,loginTokens);
AccessToken userAccess = (AccessToken) GSONParser.handleJson(accesstokenJsonResponse, beans.AccessToken.class);
fastLinkToken=userAccess.getUser().getAccessTokens()[0].getValue();
} catch (Exception e) {
e.printStackTrace();
}
return fastLinkToken;
}
</pre></p>
</div>
<hr />
<div>
<h4 id="gettingAcc">Getting Accounts</h4>
<p>Linked accounts are populated in the application UI when the <strong><em>accounts.html</em></strong> document loads as shown below. The application UI invokes the GET /YodleeSampleApp endpoint for the application with the “action” parameter set to “getAccounts.” This returns the account information on all linked accounts for the user. </p>
<p><pre class="prettyprint linenums">
//Load user accounts in Sample Web App
$.get( "/YodleeSampleApp/YodleeSampleApp",{ action: "getAccounts"} )
.done(function( data ) {
data = data.replace(/\'/g, '\"');
var responseObj = jQuery.parseJSON(data);
$("#accountsListDiv").empty();
var accountsListHTML = "";
$.each(responseObj.account, function (i, item) {
var paramsList = "'"+item.id+"', '"+item.accountType+"', '"+item.balance.amount+"', '"+item.CONTAINER+"', '"+item.accountName+"'";
accountsListHTML += '<div class="panel panel-default accnames"><div class="panel-heading"><a href="#" onClick="loadAccount('+paramsList+');" ><strong>'+item.accountName+'</strong></a></div></div>';
});
$("#accountsListDiv").html(accountsListHTML);
});
</pre></p>
<p>For each returned account, the JavaScript code creates a new panel with a specific link for each account. When the link is clicked, the account metadata and transactions are populated in the right pane through the loadAccount() function (see <a href="https://developer.yodlee.com/API_Resources/Yodlee_Sample_App_Getting_Started_Guide#gettingTrans">Get Transactions</a> below). </p>
<p>The Java servlet handler code in the back end that receives the request to get account information invokes the <a href="https://developer.yodlee.com/apidocs/index.php#!/accounts/getAccounts">GET /accounts</a> Yodlee API endpoint (using the stored cobrand and user session tokens) to return the account information on all linked accounts. The code snippet below shows how this is done:</p>
<p><pre class="prettyprint linenums">
/**
* Helper method to load user accounts from Yodlee APIs
* GET /accounts call
* Refer to full API references - https://developer.yodlee.com/apidocs/index.php
*/
private String getUserAccounts(String cobSession, String userSession) {
String accountURL = localURLVer1 + "v1/accounts";
Map<String,String> loginTokens = new HashMap<String,String>();
loginTokens.put("cobSession", cobSession);
loginTokens.put("userSession",userSession);
String accountJsonResponse=null;
try {
accountJsonResponse = HTTP.doGet(accountURL,loginTokens);
} catch (Exception e) {
e.printStackTrace();
}
return accountJsonResponse;
}
</pre></p>
</div>
<hr />
<div>
<h4 id="gettingTrans">Get Transactions</h4>
<p>The loadAccount() function populates the account specific information in the right pane of the <strong><em>accounts.html</em></strong> page. It populates the account metadata and then invokes the application GET /YodleeSampleApp endpoint with the “action” parameter set to “getTransactions” to retrieve transaction information.</p>
<p><pre class="prettyprint linenums">
//Load user selected account details and then call to get transactions for selected account
function loadAccount(accountId, type, amount, container, name){
$("#accountType").text(type);
$("#accountName").text(name);
$("#accountBalance").text(amount);
$("#accountContainer").text(container);
$('#unlinkButtonDiv').data('accountId',accountId); //setter
$('#emptyAccountDetailsDiv').addClass("hidden");
$('#accountDetailsDiv').removeClass("hidden");
$('#txnTable tbody').empty();
$("#txnTable").append('<body><tr><td colspan="5" class="text-center"><div align="center" class="alert alert-info"><p>Loading Transactions....
<i class="fa fa-spinner fa-spin" style="font-size:24px"></i></p></div></td></tr></tbody>');
$.get( "/YodleeSampleApp/YodleeSampleApp",{ action: "getTransactions", accountId:accountId} )
.done(function( data ) {
var responseObj = jQuery.parseJSON(data);
window.console.log(responseObj);
var trHTML = '';
$.each(responseObj.transaction, function (i, item) {
trHTML += '<tr><td>' + item.transactionDate + '</td><td class="text-right">' + item.amount.amount + '</td><td>' + item.category + '</td><td>' + item.description.simple + '</td>
<td>' + item.description.original + '</td></tr>');
});
$('#txnTable tbody').empty();
$("#txnTable").append('<tbody>'+trHTML+'</tbody>');
});
}
</pre></p>
<p>The Java servlet code that handles the request to retrieve transaction data (getTransactions()) in turn invokes the <a href="https://developer.yodlee.com/apidocs/index.php#!/transactions/getTransactions">GET /transactions</a> API endpoint to get all transactions since January 1, 2013. </p>
<p><pre class="prettyprint linenums">
/**
* Helper method to get transactions for specific account (id)
* GET /transactions
* Refer to full API references - https://developer.yodlee.com/apidocs/index.php
*/
private String getTranactions(String cobSession, String userSession,
String accountId) {
String txnJson ="";
String TransactionUrl = localURLVer1 + "v1/transactions" + "?fromDate=2013-01-01&accountId="+accountId;
try {
Map<String,String> loginTokens = new HashMap<String,String>();
loginTokens.put("cobSession", cobSession);
loginTokens.put("userSession",userSession);
txnJson = HTTP.doGet(TransactionUrl,loginTokens);
} catch (Exception e) {
e.printStackTrace();
}
return txnJson;
}
</pre></p>
</div>
<hr />
<div>
<h4 id="delAcc">Deleting Accounts</h4>
<p>Users can also unlink (delete) accounts from the application. The code below shows the JavaScript handler for the <strong>Unlink Account</strong> button that invokes the GET /YodleeSampleApp application endpoint with “action” set to “deleteAccount”. </p>
<p><pre class="prettyprint linenums">
//calls sample app servlet to unlink selected account.
function unlinkAccount(){
window.console.log('unlink acct');
var id = $('#unlinkButtonDiv').data('accountId');
$.get( "/YodleeSampleApp/YodleeSampleApp",{ action: "deleteAccount", accountId:id} )
.done(function( data ) {
$('#unlinkAccountModal').modal('show')
});
}
</pre></p>
<p>The Java code in <strong><em>YodleeSampleApp.java</em></strong> below shows the handler logic for the application delete action, which simply invokes the <a href="https://developer.yodlee.com/apidocs/index.php#!/accounts/deleteAccountDetail">DELETE /accounts/{accountId}</a> Yodlee API endpoint with the accountId specified as a URL parameter. This essentially deletes the account from the Yodlee platform such that the information for that account is no longer aggregated.</p>
<p><pre class="prettyprint linenums" >
/**
* Helper method to delete(unlink) specific user account
* DELETE /accounts/<accountId>
* Refer to full API references - https://developer.yodlee.com/apidocs/index.php
*/
private String deleteAccount(String cobSession, String userSession,
String accountId) {
String deleteAccountResponse = null;
String deleteAccountURL = localURLVer1 + "v1/accounts/";
try {
Map<String,String> loginTokens = new HashMap<String,String>();
loginTokens.put("cobSession", cobSession);
loginTokens.put("userSession",userSession);
HTTP.doDelete(deleteAccountURL+accountId, loginTokens);
deleteAccountResponse = "success";
} catch (Exception e) {
e.printStackTrace();
}
</pre></p>
</div>
<hr />
<div>
<h4 id="logout">Logout</h4>
<p>Finally, the user can log out of the application (<strong><em>accounts.html</em></strong>). When the user chooses to log out, the application is redirected to the main login page (<strong><em>index.html</em></strong>) as shown below.</p>
<p><pre class="prettyprint linenums">
//Logout from Yodlee Sample Web App
$("#logout").click(function() {
window.location.href = "/YodleeSampleApp/";
});
</pre></p>
</div>
<hr />
<div>
<h4 id="nextstep">Next Steps</h4>
<div>
<p>Now that you understand the basics of getting a simple application working with the Yodlee APIs, spend some time diving into the <a href="https://developer.yodlee.com/apidocs/index.php">API reference</a> documentation to gain a deeper understanding of the remaining API endpoints. If you have any questions, please get in touch through <a href="mailto:YIZen@yodlee.com">YIZen@yodlee.com</a>. </p>
</div>
</div>
</body>
<script src="https://developer.yodlee.com/assets/img/google-prettify/prettify.js"></script>
