Integrating FastLink 4 for React Native

FastLink can be integrated into your React Native using the React Native community webview >= 5.0.1 instead of Webview.

Integration Steps

Step 1: Generate an Access Token

FastLink uses the client credentials authentication mechanism. You must pass a valid accessToken to authenticate your invocation of the FastLink application. Generate the access token by following the instructions provided in the Getting Started with Client Credentials page.

Step 2: Import the `WebView` Component

Usage of the WebView component from React Native module is deprecated, instead use react-native-community/react-native-webview.

import { WebView } from 'react-native-webview'

Step 3: Create Post Data

After importing the WebView component, create post data.

let postData =
    'accessToken=Bearer {{ACCESS_TOKEN}}&extraParams=' +
    encodeURIComponent('configName=<config-name-from-config-tool>')

Step 4: Load the Request Object in the `WebView` Instance

Once the request object is ready, load it in the WebView instance. This will render the FastLink inside WebView.

<>
    <View style={{ flex: 1 }}>
        <WebView
            source={{
                uri: 'FASTLINK_URL',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: postData,
                method: 'POST'
            }}
            javaScriptEnabled={true}
            style={{ flex: 1 }}
            onMessage={(event) => {
                //Handle Events from the FastLink
                console.log(event.nativeEvent.data)
            }}
        />
    </View>
</>

Passing Additional Params to FastLink

While creating post data, additional params like deep-linking flow attributes, callback details, etc., can be passed as query parameters along with the mandatory configName parameter. Following is a sample code snippet for the add deep-link flow.

let postData =
    'accessToken=Bearer {{ACCESS_TOKEN}}&extraParams=' +
    encodeURIComponent('configName=<config-name-from-config-tool>&flow=add&providerId=16441')

For more details, refer to the Additional Params section in FastLink 4 Advanced Integration.

Handling Open Banking Sites

The intentUrl attribute is used to get the control back to the native app from an external application. Example, native browser.

Passing intentUrl as part of extraParams

let postData =
    'accessToken=Bearer {{ACCESS_TOKEN}}&extraParams=' +
    encodeURIComponent('configName=<config-name-from-config-tool>&intentUrl=<protocol://domainname>')

When the user selects an Open Banking site, FastLink will send a post message with the site's OAuth URL which needs to be opened in a native browser.

Post Message - OPEN_EXTERNAL_URL

{
    "type": "OPEN_EXTERNAL_URL",
    "data": {
        "url": "<OAUTH URL>"
    }
}

Once the user logs in, authorize consent, and completes the flow, use intentUrl as callback URL.

Native app should listen to this intentUrl by which the control comes back to the native app.

Handling Callback

Android

Entries in AndroidManifest.xml.

<activity
        android:name="com.yodlee.fastlink.InAppBrowserActivity"
        android:configChanges="keyboardHidden|orientation|screenSize"
        android:label="@string/app_name"
        android:windowSoftInputMode="adjustResize|adjustPan">
            <intent-filter>
                <data
                        android:host="<domainname>"
                        android:scheme="<protocol>" />

                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.BROWSABLE" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>

iOS

Entries in info.plist.

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleURLName</key>
			<string><protocol://domainname></string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string><protocol></string>
			</array>
		</dict>
	</array>
</dict>
</plist>

Handling Events from FastLink

To communicate with the events from FastLink, your application has to listen for the onMessage prop of WebView. Refer to the Step 3 code snippet, where the onMessage prop is added to the WebView.

Post Message Events

The FastLink application shares the account addition status to your application using the POST_MESSAGE events.

{
    "type": "POST_MESSAGE",
    "data": {
        //Post Message data
    }
}

External URL

When the user clicks or taps on any external URL within the FastLink application, a native event will be triggered. You can open the URL in the SFSafariViewController or in the default browser.

{
    "type": "OPEN_EXTERNAL_URL",
    "data": {
        "url": "<External URL>"
    }
}

Sample code to handle the events that can be used inside the onMessage webview prop.

let data = event.nativeEvent.data
if (data) {
    let parsedMessageData = JSON.parse(data)

    if (parsedMessageData.type == 'POST_MESSAGE') {
        let data = parsedMessageData.data

        if (data.action == 'exit') {
            //You can close the webview and navigate to the other screen
        }
    }

    if (parsedMessageData.type == 'OPEN_EXTERNAL_URL') {
        let url = parsedMessageData.data.url

        //Import the Linking module from the react-native
        Linking.canOpenURL(url).then((supported) => {
            if (supported) {
                Linking.openURL(url)
            } else {
                Alert.alert('Alert', 'Opening url not supported')
            }
        })
    }
}