Flinks Connect OAuth Integrations

Modified on Tue, 4 Oct, 2022 at 1:21 PM

  • Introduction
  • General guidelines
  • Web
  • Native application / WebView



Introduction


Flinks Connect is a pre-built UI that will allow end-users to connect their bank account to any web application. For a web application it’ll use an iframe tag and for a native application it’ll use a WebView.

WebView integrations are more difficult because some of the default features web browsers have are disabled by default. ex.: (opening a new window using javascript for oAuth authentication)

This page will go over how to integrate Flinks Connect, what are the important parameters, how to listen to javascript events and finally the typical issues and their solutions for each integration types.


General guidelines

Configuration

Documentation: Configure and Install Flinks Connect 


Top parameters

Javascript events


Similar to the redirectUrl the REDIRECT event will contain the loginId. Your application can save the  loginId that way but it’s preferable to also have the redirectUrl configured.

Insert the following into your body tag.


<!-- Event Listener -->
<script>
window.addEventListener('message', function(e) {
console.log(e.data);
});
</script>


Happy path events example using Flinks Capital https://demo-iframe.private.fin.ag/v2/?demo=true:


{step: 'APP_MOUNTED'}
{step: 'COMPONENT_LOAD_INSTITUTION_SELECTOR', cached: false}
{step: 'INSTITUTION_SELECTED', institution: 'FlinksCapital'}
{step: 'COMPONENT_LOAD_CREDENTIAL', institution: 'FlinksCapital'}
{step: 'SUBMIT_CREDENTIAL', institution: 'FlinksCapital'}
{step: 'COMPONENT_LOAD_MFA', mfaTypes: Array(1), institution: 'FlinksCapital'}
{step: 'SUBMIT_MFA', institution: 'FlinksCapital'}
{step: 'REDIRECT', loginId: '******', requestId: '******', institution: 'FlinksCapital'}



Web

Typical issue

  • Make the iFrame responsive

Insert the following into your style tag



.flinksconnect {
width: 100%;
height: 700px;
}

Insert the following into your body tag.

<!-- Flinks Connect -->
<iframe class="flinksconnect"
src="https://demo-iframe.private.fin.ag/v2/">
</iframe>

Native application/WebView

Typical issue


  • Default WebView config doesn’t allow for opening a new window using javascript 

Native:

iOS 


Android



Hybrid:


React native


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article