Code sample

Project creation

To help you understand and include our API, we have made a small example. This example will be a ASP.Net Core with React.js Project. In case you wish to make your own site in a different web-language you are free to do so, just be aware that certain syntaxes may need to be adjusted to work for your language.
Since React.js is based on JavaScript you can almost export all the methods “one to one” except the variable handling, since that includes React specific extensions.

The example we have given is a simple “Bookingform” for an event in which the user is able to select a ticket or multiple and buy them. If the ticket is free one doesn’t need to pay for them, therefore there will be a split there, and two separate Code samples have been given for each case.

Project Creation and cleanup

After having created the project do quickly execute it, just to check that everything has been created properly and there no pre-existing errors or mistakes.
The first start of the project may take a bit longer than the following executions of the project.

Files to be removed:

src < components < Counter.js
src < components < FetchData.js
src < components < Home.js
src < components < NavMenu.css
src < components < NavMenu.js
src < App.test.js
src < reportWebVitals.js
src < service-worker.js
src < service-worker-registration.js
WeatherForecast.cs
Controllers < WeatherForecastController.cs

Newly created project

Cleaned up project

Inserting React structure and routing

To create our own page, we first need to create a new JS-file. Since the newly created page will always be displayed first when you enter the website, comparable to an Index-page, we will call it Home.js.

We will insert the React Structure and afterwards edit all the needed parts of code to make our page appear. As we have removed a couple of files, we also need to remove any dependencies which lie upon those files or else we would only have errors. Afterwards we will also edit the routing so that our newly created page gest displayed.

Files that need editing:
src < components < index.js
src < components < AppRoutes.js
src < components < App.js

Files that need cretion:
src < components < Home.js

Final Code of index.js

import 'bootstrap/dist/css/bootstrap.css'; import React from 'react'; import { createRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href'); const rootElement = document.getElementById('root'); const root = createRoot(rootElement); root.render( <BrowserRouter basename={baseUrl}> <App /> </BrowserRouter>);

Final Code of App.js

import React, { Component } from 'react'; import { Route, Routes } from 'react-router-dom'; import AppRoutes from './AppRoutes'; import { Layout } from './components/Layout'; import './custom.css'; export default class App extends Component { static displayName = App.name; render() { return ( <Layout> <Routes> {AppRoutes.map((route, index) => { const { element, ...rest } = route; return <Route key={index} {...rest} element={element} />; })} </Routes> </Layout> ); } }

Final Code AppRoutes.js

import Home from "./components/Home"; const AppRoutes = [ { index: true, element: <Home /> }, ]; export default AppRoutes;

Base structure of Home.js

import React, { useEffect, useState } from "react"; import { useNavigate } from 'react-router-dom'; import axios from 'axios'; //Here we display all possible events and select the wanted one function Home() { //Variables //Hard Coded //Mutatatable //Methodes //Display - HTML Code //Uses Bootstrap CSS return ( ) } export default Home

Authentication and Bearer Token

Before we start creating our Frontend and get lost within the endless possibilities of the CSS and HTML power, lets focus on our Controller and the authentication Token we need to make API calls. The authentication token is crucial part of our interaction with the API, in this example we are creating our token with static-user-information
In case you want a dynamic version which relies on the user-logging and then using their credentials please follow this link, there we will have an extend version of the code.

For the Controller we can simply create a .cs file within the Folder "Controllers". We also need to install IdentityModel within the NuGet Manager before proceding.


Code for BearerTokenController.cs with comments

using IdentityModel.Client; using Microsoft.AspNetCore.Mvc; namespace Developer_Site_Example_Bookingform.Controllers { public class BearerTokenController { #region constructor //Here we create any variables or Objects needed private readonly HttpClient _client; private readonly ILogger<BearerTokenController> _logger; public BearerTokenController(IConfiguration configuration) { _client = new HttpClient { //Address for the Authentication-creation BaseAddress = new Uri("https://accounts.ticketino.com/"), //against spam Timeout = TimeSpan.FromSeconds(10) }; } #endregion #region Get Bearer-Token static [HttpGet] [Route("/token/get")] public async Task<string> GetBearerToken() { // request token var tokenResponse = await _client.RequestPasswordTokenAsync(new PasswordTokenRequest { //hardcoded variable for Token request on database, need to be changed Address = _client.BaseAddress + "/connect/token", ClientId = "public-access-api", UserName = "asda.asda@asda.com", Password = "asdaPassword", Scope = "api openid" }); if (tokenResponse.IsError) { //If an Error occurs on our End return ""; //This string can be anything you want } //Succesfull creation of BearerToken return tokenResponse.AccessToken; } #endregion } }

We have now almost done all the configuration for the BearerToken We only need to change a small setting within the setupProxy.js to access our controller.

const { createProxyMiddleware } = require('http-proxy-middleware'); const { env } = require('process'); const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` : env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:40131'; //Add as many Controller-paths as you want if you were to extend your webpage const context = [ "/token", //insert this string ]; module.exports = function(app) { const appProxy = createProxyMiddleware(context, { target: target, secure: false, headers: { Connection: 'Keep-Alive' } }); app.use(appProxy); };