React
Introduction
Smartcar is an API that allows mobile and web applications to communicate with vehicles across brands (think “check odometer” or “unlock doors.”). This tutorial will help you get up and running with the Smartcar API.
In this tutorial, we will use the JavaScript SDK to create a React web application that displays your car’s information.
How Smartcar works with single-page applications
- The Single-Page Application launches a pop-up window with Smartcar Connect to request access to a user’s vehicle. It does so by using the Smartcar JavaScript SDK. On Connect, the user logs in with the username and password for their vehicle’s connected services account and grants the Application access to their vehicle.
- The user’s browser is redirected to a specified Smartcar-hosted
redirect_uri
: the Smartcar JavaScript SDK redirect page. - The Smartcar JavaScript SDK redirect page will receive an authorization
code
as a query parameter. The redirect page will then send the code to the Single-Page Application’sonComplete
callback using thepostMessage
web API. This step is handled entirely by the JavaScript SDK. - The Single-Page Application sends the received authorization
code
to the Application’s back-end service. - The Application sends a request to the Smartcar API. This request contains the authorization
code
along with the Application’s client id and client secret. - In response, Smartcar returns an
access_token
and arefresh_token
. - Using the
access_token
, the Application can now send requests to the Smartcar API. It can access protected resources and send commands from and to the user’s vehicle, such as retrieve the location and unlock the doors.
How this tutorial is structured
Follow along with our integration tutorial to build our simple web application.
This tutorial is split into three sections:
- Setup - Set up your environment to develop on Smartcar
- Authorization flow - Learn about Smartcar Connect and how to get an authorization
code
- Send a request - Learn how to exchange an authorization
code
for anaccess_token
required to send a request to Smartcar
Let’s get building!