Skip to content

Commit 84a4d18

Browse files
author
mt-roberto
committed
feat(sample_app): add a very basic sample app to test the SDK
1 parent 9496a79 commit 84a4d18

File tree

6 files changed

+6635
-0
lines changed

6 files changed

+6635
-0
lines changed

‎sample/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Moneytree JS SDK Example
2+
3+
An example of the Moneytree JS SDK.

‎sample/package.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "mt-link-javascript-sdk-sample",
3+
"version": "0.1.0",
4+
"author": "Moneytree",
5+
"description": "An example of the Moneytree Web SDK.",
6+
"license": "MIT",
7+
"main": "src/index.js",
8+
"scripts": {
9+
"start": "webpack-dev-server"
10+
},
11+
"devDependencies": {
12+
"@babel/core": "^7.5.4",
13+
"@babel/preset-env": "^7.5.4",
14+
"babel-loader": "^8.0.6",
15+
"clean-webpack-plugin": "^3.0.0",
16+
"css-loader": "^3.1.0",
17+
"html-webpack-plugin": "^3.2.0",
18+
"node-sass": "^4.12.0",
19+
"sass-loader": "^7.1.0",
20+
"style-loader": "^0.23.1",
21+
"webpack": "^4.35.3",
22+
"webpack-dev-server": "^3.7.2"
23+
},
24+
"dependencies": {
25+
"@moneytree/mt-link-javascript-sdk": "../",
26+
"qs": "^6.7.0"
27+
}
28+
}

‎sample/src/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Moneytree Link Web SDK Sample</title>
6+
</head>
7+
<body>
8+
<div id="root">
9+
<h3>Welcome to the Moneytree Link Web SDK Sample App</h3>
10+
<p id="access-token-text">You currently don't have an access token.</p>
11+
<input type="button" id="authorize-btn" class="btn" value="Authorize" />
12+
<input type="button" id="settings-btn" class="btn" value="Open Moneytree Settings" />
13+
<input type="button" id="vault-btn" class="btn" value="Open Vault" />
14+
</div>
15+
</body>
16+
</html>

‎sample/src/index.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import LinkSDK from '@moneytree/mt-link-javascript-sdk';
2+
import qs from 'qs';
3+
4+
const CLIENT_ID = 'client_id';
5+
const TOKEN = 'access_token';
6+
const AWESOME_APP_ID = 'af84f08f40970caf17f2e53b31771ceb50d0f32f7d44b826753982e809395290';
7+
8+
// Capture access token hash in URL
9+
window.onload = () => {
10+
let accessToken;
11+
12+
const authorizeBtn = document.getElementById('authorize-btn');
13+
const goToSettingsBtn = document.getElementById('settings-btn');
14+
const goToVaultBtn = document.getElementById('vault-btn');
15+
const tokenInfoLbl = document.getElementById('access-token-text');
16+
17+
const appInit = (clientId) => {
18+
LinkSDK.init({
19+
clientId,
20+
response_type: 'token',
21+
scope: ['accounts_read', 'points_read'],
22+
redirectUri: 'https://localhost:9000',
23+
locale: 'ja-JP',
24+
isTestEnvironment: true
25+
});
26+
27+
// Launch authorize route when clicked
28+
authorizeBtn.onclick = () => {
29+
LinkSDK.authorize();
30+
};
31+
32+
// Launch settings route when clicked
33+
goToSettingsBtn.onclick = () => {
34+
console.log('Settings');
35+
LinkSDK.openSettings({ newTab: false });
36+
};
37+
38+
// Launch vault route when clicked
39+
goToVaultBtn.onclick = () => {
40+
LinkSDK.openVault({ newTab: false });
41+
};
42+
};
43+
44+
console.log(Boolean(location.hash));
45+
let clientId = AWESOME_APP_ID;
46+
47+
const path = location.pathname;
48+
49+
if (location.hash) {
50+
const hash = qs.parse(location.hash.slice(1));
51+
accessToken = hash[TOKEN];
52+
clientId = hash[CLIENT_ID];
53+
document.getElementById('access-token-text').innerText = `Your access token is ${accessToken}.`;
54+
const authHeaders = new Headers({
55+
method: 'GET',
56+
Authorization: `Bearer ${accessToken}`
57+
});
58+
fetch('https://myaccount-staging.getmoneytree.com/oauth/token/info.json', {
59+
headers: authHeaders
60+
})
61+
.then((response) => response.json())
62+
.then((data) => {
63+
tokenInfoLbl.innerText = `
64+
Your access token is ${accessToken}.
65+
It was generated for the app: ${data.aud.name}.
66+
It will expire on ${new Date(data.exp * 1000)}.
67+
It allows you to: ${data.scopes.join(', ')}
68+
`;
69+
});
70+
}
71+
72+
if (location.search) {
73+
const query = qs.parse(location.search.slice(1));
74+
clientId = query[CLIENT_ID];
75+
}
76+
77+
if (!accessToken) {
78+
goToSettingsBtn.disabled = true;
79+
goToVaultBtn.disabled = true;
80+
}
81+
82+
appInit(clientId);
83+
};

‎sample/webpack.config.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
const HtmlWebpackPlugin = require('html-webpack-plugin');
4+
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
5+
6+
module.exports = {
7+
mode: 'development',
8+
9+
context: path.join(process.cwd(), 'src'),
10+
entry: {
11+
app: './index.js'
12+
},
13+
14+
output: {
15+
path: path.join(process.cwd(), 'dist'),
16+
filename: '[name].[hash].js',
17+
publicPath: '/',
18+
sourceMapFilename: '[name].map'
19+
},
20+
21+
devtool: 'source-map', // enhance debugging by adding meta info for the browser devtools
22+
23+
devServer: {
24+
publicPath: '/',
25+
port: 9000,
26+
https: true,
27+
contentBase: path.join(process.cwd(), 'dist'), // static file location
28+
host: 'localhost',
29+
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
30+
noInfo: false,
31+
stats: 'minimal',
32+
hot: true // hot module replacement. Depends on HotModuleReplacementPlugin
33+
},
34+
35+
module: {
36+
rules: [
37+
{
38+
test: /\.js$/,
39+
use: {
40+
loader: 'babel-loader',
41+
options: {
42+
presets: ['@babel/preset-env']
43+
}
44+
}
45+
}
46+
]
47+
},
48+
plugins: [
49+
new CleanWebpackPlugin(),
50+
new HtmlWebpackPlugin({
51+
template: 'index.html'
52+
}),
53+
new webpack.HotModuleReplacementPlugin()
54+
]
55+
};

0 commit comments

Comments
 (0)