In this tutorial, we will use the JavaScript SDK to integrate Connect into your application.
REDIRECT_URI
- the Smartcar JavaScript SDK redirect page.code
as a query parameter. The redirect page will then
send the code to the Single-Page Application’s onComplete
callback using the postMessage
web API. This step is handled entirely
by the JavaScript SDK.code
to the Application’s backend service.CLIENT_ID
and CLIENT_SECRET
.ACCESS_TOKEN
and a REFRESH_TOKEN
.ACCESS_TOKEN
, the Application can now send requests to the Smartcar API. It can access protected resources and send commands
to and from the user’s vehicle via the backend service.CLIENT_ID
and CLIENT_SECRET
from the Configuration section on the Dashboard.REACT_APP_SERVER
redirect URI from Setup step 2. to your application configuration.https://javascript-sdk.smartcar.com/v2/redirect?app_origin=http://localhost:3000
http://localhost:8000
.
Smartcar
object in the constructor
of the App component.
test
mode by default. Feel free to set mode
to live
where you instantiate your Smartcar
object to
connect to a real vehicle, or simulated
to connect to a simulated one.openDialog
function that our Smartcar
object has access to. We can place this is
an onClick
handler of an HTML button.
redirect_uri
with an
authorization code as a query parameter and the pop-up dialog is closed. Using the JavaScript SDK, the frontend can
receive this code
in the onComplete
callback passed into the Smartcar
object.
test
mode by default.
In test
mode, any username
and password
is valid for each brand.read_vehicle_info
in this case.
Once you have logged in and accepted the permissions, you should see your authorization code
printed to your console.
ACCESS_TOKEN
. To do so, we can send
the code to the backend service which we will implement in a bit. Until then, let’s assume our backend service contains
an endpoint /exchange
that receives an authorization code as a query parameter and exchanges it for an ACCESS_TOKEN
.
We can add this logic in our onComplete
callback
ACCESS_TOKEN
, it can send requests to a vehicle using the Smartcar API. The React app will
have to send a request to the backend service which in turn sends a request to Smartcar. We have to do this because
our frontend does not have the ACCESS_TOKEN
.
Assuming our backend has a /vehicle
endpoint that returns the information of a user’s vehicle, we can make this query in
our completion callback
and and set the state of the React app with the returned vehicle attributes.
/exchange
and /vehicle
endpoints.
You can use any of our backend SDKs below to set up the service starting from the Obtaining an access token step.
REDIRECT_URI
to the custom scheme
used for this tutorial i.e. https://javascript-sdk.smartcar.com/v2/redirect?app_origin=http://localhost:3000
.