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.
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:
In the My applications page, select your application and edit it to add the URL here
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 clientEnvironment
as the environment your application is enabled on John Deere STAGE
or PRODUCTION
.
Here is a request example:
- cURL
- Python
- JavaScript
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:
- Install the @withleaf.io/angular-ui-kit package using
npm
:
- Import the library in your component or module file:
- 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
).