Lets get the data

Easyweb is using ”0auth2” for authentication.
If you want to learn more about that you can read about it on the official website.

In the green area is where we see our available API-connection To the left you see the website/union, to the right you see the credentials (the first time you visit, there will be a button to create the credentials automatically).

Regarding the credentials: 

• Client-ID 
• Secret 
• Url

Client-ID and the Secret is whats needed for the authentication and URL is the base-url needed for all calls.

Using the javascript fetch method, we can easily get our access token by using the /connect/token endpoint:

 const token = async () => {
    const CLIENT_ID = "xxxxx.xxxxx.xxxxx";
    const CLIENT_SECRET = "xxxxxxxx-xxxx-xxxx-xxx";
    const API_URL = "https://app.easyweb.se/extapi/4094/";

    const AUTH = "Basic " + btoa(CLIENT_ID + ":" + CLIENT_SECRET);
    const RAW_URL = API_URL.split("/extapi/")[0];

    return await fetch(RAW_URL + "/connect/token", {
        method: "POST",
        headers: {
            Authorization: AUTH,
            Accept: "application/json",
            "Content-Type": "application/x-www-form-urlencoded",
        },
        body:
            "client_id=" +
            CLIENT_ID +
            "&client_secret=" +
            CLIENT_SECRET +
            "&grant_type=client_credentials&scope=Easyweb.ExternalApi",
    })
        .then(tResponse => tResponse.json())
        .then(tokenObject => tokenObject)
}

With the provided access token, we can get access to our content. To get the content on the startpage, we'll use the /routes/home endpoint:

const getHomeData = async () => {
     return await fetch("https://app.easyweb.se/extapi/4094/routes/home", {
          headers: {Authorization: "Bearer" + Token}     
     })
          .then(dResponse => dResponse.json());
}

The request response includes all the elements with keys added from the studio. And each element has the "value" property that contains our content:

{
   label: "Start",
   urlname: "start",
   viewKey: "Home",
   showDate: "2020-06-10T17:31:00+02:00",
   id: 23263,
   hero: {
       image: {
           value: "https://developer-docs.easyweb.site/upl/images/832950_1100_0_1_thumb.jpg"
       },
       label: {
           value: "Ett nytt sätt att upptäcka"
       },
       header: {
           value: "Silkeslena produkter med glansiga detaljer"
       },
    },
}

That's everything you need to build your interface!