Web SDK
Getting Your Keys
You can generate two different API keys (one for Sandbox and another for Production), you should store the API keys immediately after generating them as they will no longer be viewable after leaving the page.
Install
With npm
(link):
npm install --save @front-finance/link
With yarn
:
yarn add @front-finance/link
Download the front-finance link library from Github
Getting Link Token
Link token should be obtained from the POST /api/v1/linktoken
endpoint. Api reference for this request is available here. Request must be preformed from the server side because it requires the client secret. You will get the response in the following format:
{
"content": {
"linkToken": "{linktoken}"
},
"status": "ok",
"message": ""
}
You can use linkToken
value from this response to open the popup window with openLink
method.
Generating connection method
import { createFrontConnection } from '@front-finance/link';
// ...
const frontConnection = createFrontConnection({
clientId: '<Your Front Finance Client Id>',
onBrokerConnected: (brokerData: FrontPayload) => {
// use broker account data
},
onExit: (error?: string) => {
if (error) {
// handle error
} else {
// ...
}
}
Using connection to open auth link
To open authentication link provided by Mesh Integration API you need to call openLink
method:
frontConnection.openLink(linkToken)
ℹ️ See full source code example at react-example/src/ui/Front.tsx
import {
createFrontConnection,
FrontConnection,
FrontPayload
} from '@front-finance/link'
// ...
const [frontConnection, setFrontConnection] = useState<FrontConnection | null>(
null
)
useEffect(() => {
setFrontConnection(createFrontConnection(options))
}, [])
useEffect(() => {
if (linkToken) {
frontConnection?.openLink(linkToken)
}
}, [frontConnection, linkToken])
return <></>
Getting integration access tokens
After successful authentication on the Link session, the popup will be closed and the broker tokens will be passed to the onBrokerConnected
function. FrontConnection
instance will check if URL contains query parameters, load broker tokens and fire the events..
Available Connection configuration options
ℹ️ See src/types/index.ts for exported types.
createFrontConnection
arguments
createFrontConnection
argumentskey | type | description |
---|---|---|
clientId | string | Keys from Dashboard page |
onBrokerConnected | (payload: FrontPayload) => void | Callback called when users connects their accounts |
onExit | ((error?: string | undefined) => void) | undefined | Called if connection not happened |
onTransferFinished | (payload: TransferFinishedPayload) => void | Callback called when a crypto transfer is executed |
onEvent | (payload: FrontEventType) => void | A callback function that is called when various events occur within the Mesh iframe |
accessTokens | IntegrationAccessToken[] | An array of integration access tokens |
createFrontConnection
return value
createFrontConnection
return valuekey | type | description |
---|---|---|
openLink | (linkToken: string) => Promise | Opens the Link UI popup |
closeLink | () => void | Closes the Link UI popup |
openPopup (OBSOLETE) | (link: string) => Promise | (OBSOLETE) Opens url in popup |
closePopup (OBSOLETE) | () => void | (OBSOLETE) Closes the Link UI popup |
Typescript support
TypeScript definitions for @front-finance/link
are built into the npm package.
Updated 2 months ago