Geo-visualization Developer's Guide

Authentication with JavaScript

This topic explains how to obtain an access token and how to submit a request against a Geo-visualization resource using JavaScript.

Prerequisite: Getting Authentication Credentials

Simple Authentication Example

In this example, we show how to:

  • obtain an access token given the email and password associated with a HERE Account
  • perform a request using the access token

The first step is to post the credentials to the sign_in endpoint, and, on success, extract the access token from the response:

// Define a URL to access the sign_in resource
var url = "https://datalens.api.here.com/v1/sign_in?" +
      $.param({"app_id": app_id, "app_code": app_code});

// Send a request and define a success callback to retrieve
// the access token:
var payload = JSON.stringify($('#auth_form').serializeObject());
$.ajax({
  type: "POST",
  url: url,
  data: payload,
  success: function (data) {
    access_token = data.access_token;
  }
});

The second step is to send a request to the Geo-visualization REST API, including the access token to ensure the request authenticates successfully:

$.ajax({
  type: "GET",
  url: url,
  beforeSend: function (xhr, settings) {
    xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
  },
  success: function (data) {
    ...
  }
});

Integrating Authentication into an Application

This example uses the reusable helper authentication class Auth. We show how to include it in a basic app.

The body of this app is simple:

 app.main = function () {
   app.start();
 };

The code below shows how to add Auth. The class constructor receives app.options.auth as a parameter. Auth not only handles authentication, but also takes over the responsibility for starting the app. It proceeds with app.start only if it finds a valid token (stored in sessionStorage or obtained via a refresh token from a previous login), or has prompted the user for email and password and obtained a new token. Inside the app, the access token is then always available as app.auth.credentials.access_token.

app.main = function () {
  app.auth = new Auth(app.options.auth);
  app.auth.init();
  app.auth.check(app.start) // parameter is a callback and overwrites auth.callbacks.onSuccess;
};

When you reuse this example, make sure that the form fields for entering email and password are named exactly "email" and "password", respectively. This is important, because this is exactly what the sign_in request expects:

<form id="auth_form">
    <input type="email" name="email" placeholder="email" required/>
    <input type="password" name="password" placeholder="password" required/>
    <input type="submit" value="Submit" />
</form>

Finally, Auth.signout signs out the user and deletes locally stored credentials.

You cannot use this account to purchase a commercial plan on Developer Portal, as it is already associated to plans with different payment methods.

To purchase a commercial plan on Developer Portal, please register for or sign in with a different HERE Account.

Something took longer than expected.

The project should be available soon under your projects page.

Sorry, our services are not available in this region.

Something seems to have gone wrong. Please try again later.

We've detected that your account is set to Australian Dollars (AUD).
Unfortunately, we do not offer checkouts in AUD anymore.
You can continue using your current plan as normal, but to subscribe to one of our new plans,
please register for a new HERE account or contact us for billing questions on selfservesupport@here.com.