Miro Web SDK App with C# and ASP.NET Core

Contents

· Introduction
· Web SDK with C# and ASP.NET Core ( 7.0 )
· Miro

Introduction

Miro is an outstanding Visual Collaboration Platform with a complete REST API and Web SDK for Apps development. This story is about creating a Web SDK App using Python and Flask, instead of Javascript and React.

In my former story below I have shown the suggested way of creating Web SDK Apps using JavaScript and React and how I started from there to create a Python and Flask App. I suggest you take a look to understand the basic App structure:

Miro Web SDK App with Python and Flask

Web SDK with C# and ASP.NET Core ( 7.0 )

I would like to create an App that is an API but also an MVC application, so I could create ( in a real scenario, not here) some backend business logic and pages. In this example, I will try to make the process as simple as possible, so I will use .NET dotnet tool and Visual Studio Code, instead of Visual Studio. Start creating two application:

Tutorial: Create a web API with ASP.NET Core

dotnet new webapi -o my-api
cd my-api
dotnet add package Newtonsoft.Json

Get started with ASP.NET Core MVC

dotnet new mvc -o my-mvc
cd my-mvc

Now I have to move some files from ASP.NET Core MVC application to ASP.NET Core API application, change some namespace names and change a View:

\Controllers
    HomeController.cs + namespace my_api.Controllers;
\Models
    ErrorViewModel.cs + namespace my_api.Models;
\Views
\wwwroot

\Views\_ViewImports.cshtml
{
    @using my_api
    @using my_api.Models
}

\Views\Shared\_Layout.cshtml
{
    <!-- my-api -->
    <li class="nav-item">
        <a class="nav-link text-dark" asp-area="" asp-controller="Swagger" asp-action="">Swagger</a>
    </li>
}

Now I have to change some configurations in ASP.NET Core API application to configure ASP.NET Core MVC and my own settings:

\Properties\lauchsettings.json
{
    -> comment out "launchUrl": "swagger"
    -> change ports to 3000 and 3443
    -> comment out WHOLE "https" section
}

appsettings.json
{
  "Miro": {
    "BaseUrl": "https://api.miro.com/v2",
    "RedirectUrl": "https://miro.com/app-install-completed",
    "RedirectUri": "http://localhost:3000/Redirect",
    "ClientId": "",
    "ClientSecret": ""
  }
}

Program.cs
{
    //builder.Services.AddControllers(); // my-api
    builder.Services.AddControllersWithViews(); // my-mvc

    ...

    // my-mvc
    // ASP.NET Core API - CORS
    builder.Services.AddCors(o =>
    {
        //o.AddPolicy("AllowOrigin", p => p.AllowAnyOrigin());
        o.AddPolicy("AllowOrigin", p => p
            .AllowAnyHeader()
            .AllowAnyMethod()
            // The CORS protocol does not allow specifying a wildcard (any) origin and credentials at the same time.
            // Configure the CORS policy by listing individual origins if credentials needs to be supported.
            //.AllowAnyOrigin()
            .AllowCredentials()
            .SetIsOriginAllowed(_ => true)
        );
    });
    builder.Services.AddHttpContextAccessor();

    ...

    //app.UseHttpsRedirection(); // my-mvc http://localhost:3000 without https
    app.UseStaticFiles(); // my-mvc \wwwroot

    ....

    // my-mvc
    //app.MapControllerRoute(
    //    name: "default",
    //    pattern: "{controller=Home}/{action=Index}/{id?}");
    // Miro
    app.MapControllerRoute(
        name: "default",
        pattern: "{controller=Miro}/{action=Index}/{id?}");
}

I end up with an ASP.NET Core application capable of both MVC and API. To make it work you have to include your Client Id and Client Secret in the appsettings.json file ( see above ).

Below you will find my GitHub repository:

GitHub Miro App C# and ASP.NET Core Repository

Miro
  DOTNET
    App-DOTNET

To execute the application, run the following command:

dotnet run

With the application running you will get the following routes available:

MiroController.Index : /
  Miro App registration page
MiroController.Miro : /miro
  Miro App page ( the one you see in Miro board )

HomeController.Index : /
HomeController.Privacy : /privacy
  DEPRECATED MVC
WeatherForecastController
  DEPRECATED API

Miro

You have to configure Miro with the proper URL:

Once you open your application in Miro a form is shown and you may create some Sticky Notes: