DEVELOPER GUIDE
Integration with WhiteLabel

3min
Integration in mobile apps
The mobile App needs to support the following capabilities:
The app needs to support deep link (IOS universal-links or Android App Links or custom URL scheme ) so that jumping to redirectUrl can open your app after data sharing completed.
If Link uses Webview integration, the app needs to be developed so that the institution's authorization page in Webview can launch the institution's App for data sharing authorization. (For a detailed description of Open Finance's App-to-App redirection see: Redirecionamento App-to-App )
The default WebView is unable to launch third-party apps directly. so app developers need to modify the WebView configuration to allow users to leverage native bank apps for subsequent operations after initial authorization.
﻿
IOS integration
The iOS/Android native webview can handle universal-links/applinks by default。
So if you do not need to support custom URL scheme, then do not need to refer to the following sample code.
For example:
ObjectiveC
Swift
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSURL *url = navigationAction.request.URL;
    NSString *scheme = [url scheme];
    if (![@[@"http", @"https"] containsObject:scheme]) {
        if ([[UIApplication sharedApplication] canOpenURL:url]) {
            [[UIApplication sharedApplication] openURL:url];
        }
        decisionHandler(WKNavigationActionPolicyCancel);
    } else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSURL *url = navigationAction.request.URL;
    NSString *scheme = [url scheme];
    if (![@[@"http", @"https"] containsObject:scheme]) {
        if ([[UIApplication sharedApplication] canOpenURL:url]) {
            [[UIApplication sharedApplication] openURL:url];
        }
        decisionHandler(WKNavigationActionPolicyCancel);
    } else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}
﻿
﻿
Android integration
The iOS/Android native webview can handle universal-links/applinks by default。
So if you do not need to support custom URL scheme, then do not need to refer to the following sample code.
For example:
Java
Kotlin
override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
    val scheme = request?.url?.scheme
    if (scheme != null && !listOf("http", "https").contains(scheme)) {
        try {
            val intent = if (scheme == "intent") {
                Intent.parseUri(request.url.toString(), Intent.URI_INTENT_SCHEME)
            } else {
                Intent(Intent.ACTION_VIEW, request.url)
            }
            intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
            startActivity(intent)
        } catch (e: ActivityNotFoundException) {
            e.printStackTrace()
        } catch (e: URISyntaxException) {
            e.printStackTrace()
        }
        return true
    }
    return super.shouldOverrideUrlLoading(view, request)
}
override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
    val scheme = request?.url?.scheme
    if (scheme != null && !listOf("http", "https").contains(scheme)) {
        try {
            val intent = if (scheme == "intent") {
                Intent.parseUri(request.url.toString(), Intent.URI_INTENT_SCHEME)
            } else {
                Intent(Intent.ACTION_VIEW, request.url)
            }
            intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
            startActivity(intent)
        } catch (e: ActivityNotFoundException) {
            e.printStackTrace()
        } catch (e: URISyntaxException) {
            e.printStackTrace()
        }
        return true
    }
    return super.shouldOverrideUrlLoading(view, request)
}
﻿
Flutter integration
 Flutter integration﻿﻿
React Native integration
﻿React Native integration﻿﻿
﻿
You can also have the app call the system browser to open the Klavi link URL for authorization and data sharing. so that you do not need to modify the app in order to launch the institution's app in the webview.
You need to take care of a few things:
1. You App directly launch the system browser to open Klavi's link URL.
For example:
ObjectiveC(IOS)
Java(Android)
NSString *urlString = @"https://conecte-sandbox.klavi.ai/data/v1/basic-links/ofpfdemo?redirectURL=https://your-web-site.com/your-authorization-result-page";
NSURL *url = [NSURL URLWithString:urlString];
if ([[UIApplication sharedApplication] canOpenURL:url]) {
    [[UIApplication sharedApplication] openURL:url options:@{} completionHandler:^(BOOL success) {
        if (success) {
            NSLog(@"URL was opened successfully.");
        } else {
            NSLog(@"Failed to open URL.");
        }
    }];
}
NSString *urlString = @"https://conecte-sandbox.klavi.ai/data/v1/basic-links/ofpfdemo?redirectURL=https://your-web-site.com/your-authorization-result-page";
NSURL *url = [NSURL URLWithString:urlString];
if ([[UIApplication sharedApplication] canOpenURL:url]) {
    [[UIApplication sharedApplication] openURL:url options:@{} completionHandler:^(BOOL success) {
        if (success) {
            NSLog(@"URL was opened successfully.");
        } else {
            NSLog(@"Failed to open URL.");
        }
    }];
}
﻿
If you were a klavi customer before 22/11/2024, you may be able to use the links according to the old nomenclature, then, the urlString may be:
https://open-sandbox.klavi.ai/data/v1/basic-links/ofpfdemo?redirectURL=https://your-web-site.com/your-authorization-result-page﻿
In the system browser, the user accesses the Klavi link for the authorization data sharing flow,  after the authorization sharing is completed klavi will redirect to the redirectURL page（The redirectURL in the example is https://your-web-site.com/your-authorization-result-page）
2. Launch your app on the redirectURL page in the system browser, displaying the authorization sharing results and guiding the user through the subsequent flow.
This example is based on the app's deep link is using custom URL scheme. 
If your app deep link supports IOS universal-links or Android App Links, Then consult the documentation for specific technical details Supporting universal links in your app or Handling Android App Links .
﻿
For example(custom URL scheme):
redirectURL page
<!doctype html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Redirecting...</title>
  <script>
    const { search } = window.location;
    /**
     * launch your app
    */
    window.location.href = `yourapp://your-authentication-result-path${search}`
  </script>
</head>

<body>
  <div>Redirecting...</div>
</body>

</html>
<!doctype html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Redirecting...</title>
  <script>
    const { search } = window.location;
    /**
     * launch your app
    */
    window.location.href = `yourapp://your-authentication-result-path${search}`
  </script>
</head>

<body>
  <div>Redirecting...</div>
</body>

</html>
﻿
Iframe Embedding Restrictions
The bank authorization page prohibits access through iframes. This prevents end users from logging into their bank accounts from within the WhiteLabel app or web pages.
Updated 21 Nov 2024
Did this page help you?
API Call Sequence Diagram
Integration WhiteLabel using App2App Flow
Integration with WhiteLabel

Integration in mobile apps

Integrate with webview

IOS integration

Android integration

Flutter integration

React Native integration

Integrate with system browser

Iframe Embedding Restrictions
