moneytree · mt-roberto · Dec 10, 2019 · Dec 10, 2019
@@ -0,0 +1,3 @@
+# Moneytree JS SDK Example
+
+An example of the Moneytree JS SDK.
@@ -0,0 +1,28 @@
+{
+  "name": "mt-link-javascript-sdk-sample",
+  "version": "0.1.0",
+  "author": "Moneytree",
+  "description": "An example of the Moneytree Web SDK.",
+  "license": "MIT",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.5.4",
+    "@babel/preset-env": "^7.5.4",
+    "babel-loader": "^8.0.6",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.1.0",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.35.3",
+    "webpack-dev-server": "^3.7.2"
+  },
+  "dependencies": {
+    "@moneytree/mt-link-javascript-sdk": "../",
+    "qs": "^6.7.0"
+  }
+}
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Moneytree Link Web SDK Sample</title>
+  </head>
+  <body>
+    <div id="root">
+      <h3>Welcome to the Moneytree Link Web SDK Sample App</h3>
+      <p id="access-token-text">You currently don't have an access token.</p>
+      <input type="button" id="authorize-btn" class="btn" value="Authorize" />
+      <input type="button" id="settings-btn" class="btn" value="Open Moneytree Settings" />
+      <input type="button" id="vault-btn" class="btn" value="Open Vault" />
+    </div>
+  </body>
+</html>
@@ -0,0 +1,83 @@
+import LinkSDK from '@moneytree/mt-link-javascript-sdk';
+import qs from 'qs';
+
+const CLIENT_ID = 'client_id';
+const TOKEN = 'access_token';
+const AWESOME_APP_ID = 'af84f08f40970caf17f2e53b31771ceb50d0f32f7d44b826753982e809395290';
+
+// Capture access token hash in URL
+window.onload = () => {
+  let accessToken;
+
+  const authorizeBtn = document.getElementById('authorize-btn');
+  const goToSettingsBtn = document.getElementById('settings-btn');
+  const goToVaultBtn = document.getElementById('vault-btn');
+  const tokenInfoLbl = document.getElementById('access-token-text');
+
+  const appInit = (clientId) => {
+    LinkSDK.init({
+      clientId,
+      response_type: 'token',
+      scope: ['accounts_read', 'points_read'],
+      redirectUri: 'https://localhost:9000',
+      locale: 'ja-JP',
+      isTestEnvironment: true
+    });
+
+    // Launch authorize route when clicked
+    authorizeBtn.onclick = () => {
+      LinkSDK.authorize();
+    };
+
+    // Launch settings route when clicked
+    goToSettingsBtn.onclick = () => {
+      console.log('Settings');
+      LinkSDK.openSettings({ newTab: false });
+    };
+
+    // Launch vault route when clicked
+    goToVaultBtn.onclick = () => {
+      LinkSDK.openVault({ newTab: false });
+    };
+  };
+
+  console.log(Boolean(location.hash));
+  let clientId = AWESOME_APP_ID;
+
+  const path = location.pathname;
+
+  if (location.hash) {
+    const hash = qs.parse(location.hash.slice(1));
+    accessToken = hash[TOKEN];
+    clientId = hash[CLIENT_ID];
+    document.getElementById('access-token-text').innerText = `Your access token is ${accessToken}.`;
+    const authHeaders = new Headers({
+      method: 'GET',
+      Authorization: `Bearer ${accessToken}`
+    });
+    fetch('https://myaccount-staging.getmoneytree.com/oauth/token/info.json', {
+      headers: authHeaders
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        tokenInfoLbl.innerText = `
+                Your access token is ${accessToken}.
+                It was generated for the app: ${data.aud.name}.
+                It will expire on ${new Date(data.exp * 1000)}.
+                It allows you to: ${data.scopes.join(', ')}
+            `;
+      });
+  }
+
+  if (location.search) {
+    const query = qs.parse(location.search.slice(1));
+    clientId = query[CLIENT_ID];
+  }
+
+  if (!accessToken) {
+    goToSettingsBtn.disabled = true;
+    goToVaultBtn.disabled = true;
+  }
+
+  appInit(clientId);
+};
@@ -0,0 +1,55 @@
+const path = require('path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+
+  context: path.join(process.cwd(), 'src'),
+  entry: {
+    app: './index.js'
+  },
+
+  output: {
+    path: path.join(process.cwd(), 'dist'),
+    filename: '[name].[hash].js',
+    publicPath: '/',
+    sourceMapFilename: '[name].map'
+  },
+
+  devtool: 'source-map', // enhance debugging by adding meta info for the browser devtools
+
+  devServer: {
+    publicPath: '/',
+    port: 9000,
+    https: true,
+    contentBase: path.join(process.cwd(), 'dist'), // static file location
+    host: 'localhost',
+    historyApiFallback: true, // true for index.html upon 404, object for multiple paths
+    noInfo: false,
+    stats: 'minimal',
+    hot: true // hot module replacement. Depends on HotModuleReplacementPlugin
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      template: 'index.html'
+    }),
+    new webpack.HotModuleReplacementPlugin()
+  ]
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Moneytree JS SDK Example

		An example of the Moneytree JS SDK.