WebComponent

Pre-installation

Set Allowed Origins

By default, the FriendlyScore WebComponent is running on localhost on port 3000. If you want to run our WebComponent on a different host and port you MUST set a new origin in the Developer Console.

Retrieve access token

The access token allows you to connect with the FriendlyScore API. Obtain your client_id and client_secret from FriendlyScore API keys.

Example OAuth Token request

curl -X POST \
     https://api.friendlyscore.com/oauth/v2/token \
     -H 'Content-Type: application/json' \
     -d '{
     "client_id": {client_id},
     "client_secret": {client_secret},
     "grant_type": "client_credentials"
}'

Example OAuth Token response

If you provided the correct client_id, client_secret and grant_type, you should get a successful response with an access_token. You can use this token to access user data using the FriendlyScore API.

{
    "access_token": "{YOUR_USER_ACCESS_TOKEN}",
    "expires_in": 3600,
    "token_type": "bearer",
    "scope": null
}

In case of errors

If you get an error here, such as 400 Bad Request, this could have been due to multiple reasons. It could, for example, be an invalid client_id or an invalid client_secret.

Retrieve WebComponent One Time Url

The WebComponent One Time Url is used to render the FriendlyScore WebComponent inside an HTML element with id fs-component.

Example WebComponent One Time Url request

curl -X POST \
    https://api.friendlyscore.com/api/v1/component_auth/init \
    -H 'Authorization: Bearer {YOUR_USER_ACCESS_TOKEN}' \
    -H 'Content-Type: application/json' \
    -d '{
    "user_reference": "{YOUR_USER_REFERENCE}",
    "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36",
    "ip": "10.10.10.10",
    "origin": "https://yourdomain.com"
  }'

Example WebComponent One Time Url response

If you provided the correct access_token, user_agent, component_url and ip, you should get a successful response with a url.

{
  "url": "{YOUR_WEB_COMPONENT_ONE_TIME_URL}",
  "created_at": 1566306425,
  "expires_in": 1800
}

In case of errors

  • The 400 Bad Request is returned when ip, user_agent, origin is invalid or missing.
  • The 401 Unauthorized is returned when access_token is invalid or expired.

Embed WebComponent

Insert into your template html element with id="fs-component" and script tag with received WebComponent One Time URL.

<!doctype html>
<html>
<head>
    ...
</head>
<body>
    <div id="fs-component"></div>
    <script src="{YOUR_WEB_COMPONENT_ONE_TIME_URL}"></script>
</body>
</html>

Events

WebComponent events

  • startFsComponentProcess This event fires when the WebComponent loads the first view of the flow process.
  • endFsComponentProcess This event fires when the WebComponent loads the last view of the flow process.
  • FsOpenBankingBankConnected This event fires when the user successfully connects with the given bank.

Usage example

document.addEventListener('startFsComponentProcess', function () {
  console.log('startFsComponentProcess');
});

Next Steps

Access to Production Environment

You can continue to integrate FriendlyScore Connect in your app using our Sandbox and Development environments. Once you have completed testing, you can request access to the Production environment in the developer console or speak directly to your account manager.

Support

Find commonly asked questions and answers in our F.A.Q. You can also contact us via email at developers@friendlyscore.com or speak directly with us on LiveChat.

You can find all the code for FriendlyScore Connect for Web component, iOS and Android on our GitHub.