​
Overview


  1. The Application redirects the user to Smartcar Connect to request access to the user’s vehicle. In Connect, the user logs in with their vehicle credentials and grants the Application access to their vehicle.
  2. The user’s browser is redirected to a specified REDIRECT_URI. The Application Server, which is listening at the REDIRECT_URI, will retrieve the authorization code from query parameters sent to the REDIRECT_URI.
  3. 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.
  4. In response, Smartcar returns an ACCESS_TOKEN and a REFRESH_TOKEN.
  5. Using the 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.

​
Prerequisites

  • Sign up for a Smartcar account.
  • Make a note of your CLIENT_ID and CLIENT_SECRET from the Configuration section on the Dashboard.
  • Add the following REDIRECT_URI to your application configuration: http://localhost:8000/exchange

​
Setup

  1. Clone the repo for the SDK you want to use and install the required dependencies:

    $git clone https://github.com/smartcar/getting-started-express.git
$cd getting-started-express/tutorial
$npm install

  2. You will also have to set the following environment variables

If you’ve used one of our frontend SDKs to integrate connect, you’ll want to set the SMARTCAR_REDIRECT_URI environment variable to the URI you used for that application.

$export SMARTCAR_CLIENT_ID=<your-client-id>
$export SMARTCAR_CLIENT_SECRET=<your-client-secret>
$export SMARTCAR_REDIRECT_URI=http://localhost:8000/exchange

If you are using Windows, ensure you are appropriately setting environment variables for your shell. Please refer to this post which details how to set environment variables on Windows.


​
Build your Connect URL

  1. Instantiate a Smartcar object in the constructor of the App component.

    const client = new smartcar.AuthClient({
    mode: 'simulated',
});

Feel free to set mode to simulated or live where you instantiate your Smartcar object to connect to a simulated or real vehicle.

  1. A Server-side rendered application will redirect to Smartcar Connect to request access to a user’s vehicle. 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.

    To launch Connect, we need to redirect the user to the appropriate URL. We can make use of the AUTHORIZATION_URL function in our Smartcar object and redirect the user to the URL to launch the Connect flow.

    app.get('/login', function(req, res) {
    const scope = ['read_vehicle_info'];
    const authUrl = client.getAuthUrl(scope);

    res.render('home', {
        url: authUrl,
    });
});

​
Handle the response

Once a user has authorized the application to access their vehicle, the user is redirected to the REDIRECT_URI with an authorization code as a query parameter. In the previous section, we had set our REDIRECT_URI as localhost:8000/exchange. Now, our server can be set up as follows to receive the authorization code.

app.get('/exchange', function(req, res) {
const code = req.query.code;

console.log(code);

res.sendStatus(200);
});

​
Launching Connect

Let’s try authenticating a vehicle! Restart your server, open up your browser and go to http://localhost:8000/login

$node index.js

This tutorial configures Connect to launch in test mode by default. In test mode, any username and password is valid for each brand.

Smartcar showcases all the permissions your application is asking for - 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.


​
Getting your first access token

If you’ve used one of our frontend SDKs to integrate Connect, this is where you’ll need to fetch your access token.

In the previous section, we retrieved an authorization code. The application must exchange the code for an ACCESS_TOKEN to make a request. After receiving the ACCESS_TOKEN, the user can be redirected to the /vehicle route.

// Global variable to save our access_token
let access;

app.get('/exchange', async function(req, res) {
    const code = req.query.code;
    
    // Access our global variable and store our access tokens.
    // In a production app you'll want to store this in some 
    // kind of persistent storage
    access = await client.exchangeCode(code);
    res.redirect('/vehicle');
});

​
Getting data from a vehicle

  1. Once the backend service or server-side application has the ACCESS_TOKEN, it can send requests to a vehicle using the Smartcar API. First we’ll need to fetch the vehicle_ids associated with the ACCESS_TOKEN, then fetch vehicle attributes for one of them. After receiving the vehicle_attributes object, we can render it in a simple table on the page.

    app.get('/vehicle', async function(req, res) {
    // Get the smartcar vehicleIds associated with the access_token
    const { vehicles } = await smartcar.getVehicles(access.accessToken);
    
    // Instantiate the first vehicle in the vehicle id list
    const vehicle = new smartcar.Vehicle(vehicles[0], access.accessToken);

    // Make a request to Smartcar API
    const attributes = await vehicle.attributes();
    res.render('vehicle', {
        info: attributes, 
    });
});

  2. Restart your sever and head back to http://localhost:8000/login to go through Connect and make your first API request!

    $node index.js