One method of implementing Connect is by embedding it in your application, either via a script tag or the react-pelm-connect
npm library. Here are the steps to achieving this:
- Embed Connect in your application
- Create a Connect token
- Open Connect
- User inputs utility credentials
- Retrieve an authorization code
- Exchange code for an access token
Embed Connect in your application
React applications
You can view the repo for our convenient React wrapper here. Install via npm:
npm install --save react-pelm-connect
Javascript applications
Embed Connect with a script
tag. This will create the global window variable PelmConnect
.
<script src="https://api.pelm.com/connect/pelm-connect.js"></script>
Create a Connect token
The first step is creating a Connect token. This is an extra security measure that abstracts away information like your Pelm-Client-Id
and user_id
from the web client.
To retrieve a Connect token, make a POST request to the /auth/connect_token endpoint:
curl -X POST https://api.pelm.com/auth/connect-token -H "Pelm-Client-Id: {CLIENT_ID}" -H "Pelm-Secret: {CLIENT_SECRET}" -F "user_id={YOUR_USER_ID}" -F "utility_id={UTILITY_ID}"
You must include your own unique identifier for your user in the query parameters. This identifier is how you'll be able to associate responses from API endpoints with a particular user record stored in your records.
Pelm will infer which flow (either update or create) your user will see based on the user_id
you pass. In create mode, the user will see the following screens:
- Terms of Service Screen (accepting terms of service)
- Utility Selection Screen (selecting a utility)
- Credentials Screen (entering utility credentials)
In update mode, the user will start directly at the Utility Selection Screen.
If you submit a new user_id
for a user that has already connected their account with you, your previously submitted user_id
will be overwritten by the new value. Make sure you change this appropriately in your records.
Include the optional utility_id
parameter if you want your User to skip the Utility Selection Screen. You can find a list of utility_id
s here.
Connect Tokens expire after 30 minutes.
Open Connect
Config object
The config is used to specify your Connect token and callbacks for the success and exit cases. You can find a full Connect API reference here.
Once your user completes this flow, your onSuccess
callback will be called with an authorization code
. You will need to exchange this code
for an access_token
in order to access API resources.
The Config option takes in the following parameters.
connectToken
: the Connect token created in the previous steponSuccess
: called when your User successfully connects their utility account- This callback should take an
authorizationCode: string
parameter, which you'll use to get anaccess_token
onExit
: called when Connect is exited but your user has not successfully connected their utility account- This callback will be called if your user manually exits Connect or if an error occurs causing Connect to close
Example Config object:
config: Config = {
connectToken: 'CONNECT_TOKEN',
onSuccess: (authorizationCode: string) => {...},
onExit: () => {}
}
Once you've created the config object, you can initialize Connect in a few ways.
Hook Implementation
Implementation using React Hooks.
import { useConnect, Config } from 'pelm-connect';
const Connect = (props: Props) => {
const config: Config = {
connectToken: 'YOUR_CONNECT_TOKEN',
onSuccess: (authorizationCode: string) => {...},
onExit: () => {...}
}
const { open, ready, error } = useConnect(config);
return <button
type="button"
className="button"
onClick={() => open()}
disabled={!ready}
>
Connect your utility
</button>
}
export default Connect
Styled Button
We also provide a styled button you can use.
import { ConnectButton, Config } from 'pelm-connect';
const Connect = (props: Props) => {
const config: Config = {
connectToken: 'YOUR_CONNECT_TOKEN',
onSuccess: (authorizationCode: string) => {...},
onExit: () => {...}
}
return <ConnectButton config={config} />
}
export default Connect
Via script
For non-react applications
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<h1>Pelm Connect javascript example</h1>
<button onClick="launchPelm()">Connect utility</button>
<script src="https://api.pelm.com/connect/pelm-connect.js"></script>
<script>
const launchPelm = async function() {
const connectToken = "YOUR_CONNECT_TOKEN";
const onSuccess = (authorizationCode) => {
// exchange authorization code for access_token
};
const onExit = () => {};
const config = {
connectToken,
onSuccess,
onExit
}
const pelm = await window.PelmConnect.create(config);
pelm.open()
}
</script>
</body>
</html>
Retrieve code
Upon your user successfully completing the Connect flow, your onSuccess
callback will be called with an authorizationCode
. Your frontend should pass this authorizationCode
to your server.
Exchange code for an access token
An access_token
gives you access to a given user's data.
To exchange an authorization code
for an access_token
, make a POST request to https://api.pelm.com/auth/token
(API reference). In the request body, include the code
. You also need to include a grant_type
parameter set to "code".
The code
is the string you retrieved in the previous step.
Add your Pelm-Client-Id
and Pelm-Secret
in the header. For example:
curl --data "code={AUTHORIZATION_CODE}&grant_type=code" https://api.pelm.com/tokens -H "Pelm-Client-Id: YOUR_CLIENT_ID" -H "Pelm-Secret: YOUR_CLIENT_SECRET"
If you've done this correctly, you'll receive the access_token
:
{
'access_token': '57f20230-4ee7-11ec-9b0c-acde48001122',
'access_token_expires_in': 3600,
'refresh_token': 'aea9b417e72b3978c5bfcd0782c3a486ec63abf5e85ce9a62ba36d1b18b12488',
'refresh_token_expires_in': 1314000
}
Note that the access_token
will not expire. You should securely store this token in your database.
You can ignore all the other fields in this response: access_token_expires_in
, refresh_token
, refresh_token_expires_in
. They're included for legacy applications.
Next steps
Now that you have your access_token
, you can start making requests for your user's data. Request your user's accounts via /accounts
.