Leaf Link > Provider connection widget

Overview

The Provider Connection widget allows the user to associate their Leaf user with existing provider accounts. It just needs a minimal setup and few lines of code.

File upload widget

Beta

This is a beta feature.

Get started

1. Sign in with a Leaf account

You will need a Leaf account. If you don't have one yet, you can create it here.

2. Get an access token

To use the widget you will need a Leaf token. Use our authentication guide to know how it works.

3. Get to know the Leaf user entity

All control of connected providers is done at the Leaf user level (usually it represents the user of your application), so it's important to know more about it here.

Set up

To use the widget you will need to enable the providers. Don't worry, you only need to set it up once.

John Deere

To enable John Deere as a provider in the widget you need to have your application already registed with John Deere. You can find more info on how to create a developer account here.

Redirect URI

The first step is to add our widget URL in the "Redirect URI" section:

https://widget.withleaf.io

In the My applications page, select your application and edit it to add the URL here

File upload widget

Application info

We will need your Application Id and Secret so you can inform them on this endpoint.

 POST /usermanagement/api/app-keys/JohnDeere/{appName}/{clientEnvironment}

You can set the appName and the clientEnvironmentas the environment your application is enabled on John Deere STAGE or PRODUCTION.

Here is a request example:

curl -X POST \
-H 'Authorization: Bearer YOUR_TOKEN' \
-d '{ "clientKey": "string", "clientSecret": "string" }'
'https://api.withleaf.io/services/usermanagement/api/app-keys/JohnDeere/LeafWidget/PRODUCTION'

Tutorial

This widget is only available for Angular.

Angular

To add this Leaf widget in an Angular application, you can use the @withleaf.io/angular-ui-kit library, which is a JavaScript library that provides all Leaf UI Widgets. Here are the general steps to get started:

  1. Install the @withleaf.io/angular-ui-kit package using npm:
npm i @withleaf.io/angular-ui-kit
  1. Import the library in your component or module file:
import { ProvidersModule } from '@withleaf.io/angular-ui-kit';
  1. Add the component to the HTML. You need your Leaf token (leafToken) and a Leaf user ID (leafUser) to set the required properties in the HTML component. Just add it to the container div. You can also customize it adding your company name (companyName) and company logo (companyLogoUrl).
<div class="container">
<leaf-providers leafToken="{yourLeafToken}" leafUser="{yourLeafUserId}"
companyName="{name}" companyLogoUrl="{image URL}">
</leaf-providers>
</div>
Edit this page