Pricing

Docs

Guides

Architectures

The Smartcar API platform supports a number of different application architectures. This guide will give you an overview of the three most popular architectures that Smartcar supports:

  1. Traditional server-side rendered application (Rails, Django, ...)
  2. Mobile application (Android, iOS, ...)
  3. Single-page application (Angular, React, ...)

Traditional server-side rendered application

In this type of application, there is a back-end server, which renders HTML content on the server side. This pattern is common in frameworks such as Rails, Django, and Spring.

Server-Side Rendered Application Architecture with Smartcar's API

  1. The Application redirects the user to Smartcar Connect to request access to the user's vehicle. In 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.
  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 from and to the user's vehicle, such as retrieve the location and unlock the doors.

Single-page application

This type of application typically has a Single-Page Application front end, which is built in a framework such as React or Angular. It also has a back-end server, which communicates with the Single-Page Application via an API.

Note: This flow assumes that the Smartcar JavaScript SDK Redirect is being used.

Single-Page Application Architecture with Smartcar's API

  1. 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.
  2. The user's browser is redirected to a specified Smartcar-hosted redirect_uri: the Smartcar JavaScript SDK redirect page.
  3. 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's onComplete callback using the postMessage web API. This step is handled entirely by the JavaScript SDK.
  4. The Single-Page Application sends the received authorization code to the Application's back-end service.
  5. 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.
  6. In response, Smartcar returns an access_token and a refresh_token.
  7. 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.

Mobile application

This type of application typically has a mobile front end, which is built in iOS or Android. It also has an Application back-end server, which communicates with the mobile front end via an API.

Mobile Application Architecture with Smartcar's API

  1. The Mobile Application launches a WebView with Smartcar Connect to request access to a user's vehicle. It does so using the Smartcar iOS or Android 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.
  2. The WebView is redirected to a specified redirect_uri along with an authorization code. This will be the custom scheme set on the application. The Smartcar iOS or Android SDK receives the authorization in a view listening for the specified custom scheme URI, and passes it to the Mobile Application.
  3. The Mobile Application sends the received authorization code to the Application's back-end service.
  4. 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.
  5. In response, Smartcar returns an access_token and a refresh_token.
  6. 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.