|
| 1 | +import LinkSDK from '@moneytree/mt-link-javascript-sdk'; |
| 2 | +import qs from 'qs'; |
| 3 | + |
| 4 | +interface ITokenInfo { |
| 5 | + aud: { |
| 6 | + name: string; |
| 7 | + }; |
| 8 | + exp: number; |
| 9 | + scopes: string[]; |
| 10 | +} |
| 11 | + |
| 12 | +const AWESOME_APP_ID = 'af84f08f40970caf17f2e53b31771ceb50d0f32f7d44b826753982e809395290'; |
| 13 | + |
| 14 | +const authorizeBtn = document.getElementById('authorize-btn') as HTMLButtonElement; |
| 15 | +const logoutBtn = document.getElementById('logout-btn') as HTMLButtonElement; |
| 16 | +const goToSettingsBtn = document.getElementById('settings-btn') as HTMLButtonElement; |
| 17 | +const goToVaultBtn = document.getElementById('vault-btn') as HTMLButtonElement; |
| 18 | +const tokenInfoLbl = document.getElementById('access-token-text') as HTMLButtonElement; |
| 19 | +const accessTokenLabel = document.getElementById('access-token-text') as HTMLParagraphElement; |
| 20 | + |
| 21 | +if (!authorizeBtn || !logoutBtn || !goToSettingsBtn || !goToVaultBtn) { |
| 22 | + throw new Error('An error occurred'); |
| 23 | +} |
| 24 | + |
| 25 | +// Launch authorize route when clicked |
| 26 | +authorizeBtn.onclick = () => { |
| 27 | + LinkSDK.authorize(); |
| 28 | +}; |
| 29 | + |
| 30 | +// Launch logout route when clicked |
| 31 | +logoutBtn.onclick = () => { |
| 32 | + LinkSDK.logout(); |
| 33 | +}; |
| 34 | + |
| 35 | +// Launch settings route when clicked |
| 36 | +goToSettingsBtn.onclick = () => { |
| 37 | + LinkSDK.openSettings({ newTab: false }); |
| 38 | +}; |
| 39 | + |
| 40 | +// Launch vault route when clicked |
| 41 | +goToVaultBtn.onclick = () => { |
| 42 | + LinkSDK.openVault({ newTab: false }); |
| 43 | +}; |
| 44 | + |
| 45 | +const initializeLinkSDK = () => { |
| 46 | + LinkSDK.init({ |
| 47 | + clientId: AWESOME_APP_ID, |
| 48 | + responseType: 'token', |
| 49 | + scope: ['accounts_read', 'points_read'], |
| 50 | + redirectUri: 'https://localhost:9000', |
| 51 | + locale: 'ja-JP', |
| 52 | + isTestEnvironment: true |
| 53 | + }); |
| 54 | +}; |
| 55 | + |
| 56 | +const validateToken = async () => { |
| 57 | + const { hash, search } = location; |
| 58 | + const accessToken = |
| 59 | + qs.parse(hash.slice(1)).access_token || qs.parse(search, { ignoreQueryPrefix: true }).access_token; |
| 60 | + |
| 61 | + // Disables buttons when a session has not been initialized. |
| 62 | + if (!accessToken) { |
| 63 | + goToSettingsBtn.disabled = true; |
| 64 | + goToVaultBtn.disabled = true; |
| 65 | + logoutBtn.disabled = true; |
| 66 | + return; |
| 67 | + } |
| 68 | + |
| 69 | + accessTokenLabel.innerText = `Your access token is ${accessToken}.`; |
| 70 | + |
| 71 | + const authHeaders = new Headers({ |
| 72 | + method: 'GET', |
| 73 | + Authorization: `Bearer ${accessToken}` |
| 74 | + }); |
| 75 | + |
| 76 | + const response = await fetch('https://myaccount-staging.getmoneytree.com/oauth/token/info.json', { |
| 77 | + headers: authHeaders |
| 78 | + }); |
| 79 | + |
| 80 | + const data: ITokenInfo = await response.json(); |
| 81 | + |
| 82 | + tokenInfoLbl.innerText = ` |
| 83 | + Your access token is ${accessToken}. |
| 84 | + It was generated for the app: ${data.aud.name}. |
| 85 | + It will expire on ${new Date(data.exp * 1000)}. |
| 86 | + It allows you to: ${data.scopes.join(', ')} |
| 87 | + `; |
| 88 | +}; |
| 89 | + |
| 90 | +initializeLinkSDK(); |
| 91 | +// tslint:disable-next-line: no-floating-promises |
| 92 | +validateToken(); |
0 commit comments