Express

Authorization

To make requests to a vehicle, your end user must connect their vehicle using Smartcar Connect. Connect uses the OAuth 2.0 protocol to provide a secure and elegant authorization flow for your users.

1. Initialize the Smartcar object

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
// ./index.js

// TODO: Authorization Step 1: Initialize the Smartcar object
const client = new smartcar.AuthClient({
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET,
  redirectUri: process.env.REDIRECT_URI,
  scope: ['read_vehicle_info'],
  testMode: true,
});

2. Launch Connect

A Server-Side Rendered application will redirect to Connect to request access to a user's vehicle. On Connect, the user logs in with their vehicle credentials 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 getAuthUrl function in our Smartcar object and pass the generated url to our view in views/home.hbs which will redirect to the url on a button click. views/home.hbs is a simple view that renders an HTML button.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
// ./index.js

app.get('/login', function(req, res) {
  // TODO: Authorization Step 2: Launch the authorization flow
  const authUrl = client.getAuthUrl();

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

3. Receive the authorization code

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.

The authorization code represents a user consenting your application access to their vehicle. It does not grant access to the vehicle itself.

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.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
// ./index.js

app.get('/exchange', function(req, res) {
  // TODO: Authorization Step 3: Receive the authorization code
  const code = req.query.code;

  console.log(code);

  res.sendStatus(200);
});

Try it out

Let's try authenticating a vehicle in test mode.

In test mode, any login credentials for all brands are valid!

Restart your server, open up your browser and go to http://localhost:8000/login. Notice once you log in, Smartcar showcases all the permissions your application is asking for, in this case, read_vehicle_info. A user has to consent to all the permissions.

Once you have logged in and accepted the permissions, you should see your authorization code printed to your console.


In the next section, we will cover how to exchange the authorization code for an access_token and make your first request to Smartcar API with it!