W tym artykule pokażę jak utworzyłem prostą aplikację backendową, która wymaga autoryzacji z wykorzystaniem Auth0.

Aplikacja jest stworzona w technologii .Net core, zanim zacząłem nad nią pracę miałem już zainstalowany pakiet .Net Core SDK, aby je zainstalować należy wejść na stronę : https://dotnet.microsoft.com/download i wybrać swój system operacyjny i podążać za instrukcjami.

Praca nad aplikacją jest znacznie prostsza z użyciem Visual Studio, ewentualnie Visual Studio Code albo JetBrains Rider, ich instalacja nie jest jednak konieczna.

Tworzenie aplikacji rozpocząłem od wpisania w linię poleceń:

dotnet new web --name SzogunUI.RocketService

Polecenie to tworzy szkielet nowej aplikacji web o nazwie SzogunUI.RocketService

Następnie otworzyłem plik SzogunUI.RocketService\StartUp.cs i zmodyfikowałem metody Configure oraz ConfigureServices

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseMvc();
}

Linijki services.AddMvc() oraz app.UseMvc() sprawiają, że aplikacja wspiera wzorzec Mvc, czyli jest podzielona na 3 elementy: Model – zawierający struktury danych wykorzystywane do komunikacji między aplikacją a światem zewnętrznym, Widok (View) – w tej aplikacji nie wykorzystywany, oraz logikę aplikacji w kontrolerach (Controller).

Warunek sprawdzający env.IsDevelopment() sprawia, że w trakcie prac nad projektem aplikacja będzie zwracała dużą ilość szczegółów technicznych dotyczących przyczyny błędu.

Do katalogu SzogunUI.RocketService dodałem katalog Models, który zawiera Modele danych. Pierwszym z nich jest plik MissileType.cs zawierający następujący kod:

namespace SzogunUI.RocketService.Models
{
    public enum MissileType
    {
        Bb,
        Parabelum,
        Cruise,
        TsarBomba
    }
}

Jest to definicja typu wyliczeniowego (enum) zawierającego wszystkie typy pocisków jakie mogą być wysłane przez serwis.

Dodałem też klasę MissileSpec.cs zawierający klasę MissileSpec, opisującą ilość i typ pocisków wysyłanych przez użytkownika.

namespace SzogunUI.RocketService.Models
{
    public class MissileSpec
    {
        public MissileType Type { get; set; }
        public int Amount { get; set; }
    }
}

Następnie w katalogu SzogunUI.RocketLauncher utworzyłem katalog Controllers, a w tym katalogu umieściłem plik IndexController.cs zawierający następujący kod:

using Microsoft.AspNetCore.Mvc;
using SzogunUI.RocketService.Models;
namespace SzogunUI.RocketService.Controllers
{
    public class IndexController : Controller
    {
        [HttpGet]
        [Route("missile-types")]
        public IActionResult GetMissileTypes()
        {
            return Ok(new[]
            {
                MissileType.Bb,
                MissileType.Parabelum,
                MissileType.Cruise,
                MissileType.TsarBomba
            });
        }
        
        [HttpPut]
        [Route("locations/{latitude}/{longitude}")]
        public IActionResult PutMissilesToLocation(
            [FromRoute]double latitude, 
            [FromRoute]double longitude, 
            MissileSpec spec)
        {
            return Ok();
        }
    }
}

Zawiera on klasę IndexController będącą pierwszym kontrolerem w naszej aplikacji. Klasa dziedziczy po klasie Controller, nie jest to wymagane, ale ułatwia pracę. Zawiera ona dwie metody:

• GetMissileTypes – zwracającą tablicę dostępnych typów pocisków
• PutMissilesToLocation – pobierającą współrzędne geograficzne i specyfikację pocisków – odpowiedzialną za wysłanie pocisków w określoną lokalizację. Metodę pozostawiam pustą

Kod zawiera także inne elementy: Atrybuty Route definiują ścieżkę pod jaką dana metoda będzie dostępna np. Route(„missile-type”) mówi, że akcja będzie dostępna pod adresem [adres-serwera]/missile-types np. https://localhost:5001/missile-types. Atrybut HttpGet oznacza, że metoda służy do pobierania danych i że można ją wywołać po prostu wpisując w przeglądarkę odpowiedni adres, istnieją atrybuty HttpPut, HttpPost i HttpDelete, które oznaczają że metoda wymaga zapytania put, post albo delete, ręczne wywołanie metod oznaczonych tymi atrybutami wymaga narzędzi typu Postman, curl czy wtyczka do chrome Advanced REST Client. Serwis będzie wywoływany przez aplikacje klienckie, a nie bezpośrednio przez użytkowników, nie musisz się więc przejmować tym utrudnieniem.

Działanie atrybutu FromRoute na parametrze metody najłatwiej wyjaśnić na przypadku metody PutMissilesToLocation. Ścieżka (atrybut Route) zawiera fragmenty {latitude} i {longitude} odpowiednie parametry metody posiadają Atrybut FromRoute oznacza to , że Mvc spróbuje dopasować fragment ścieżki i przekazać go jako parametr metody np. użycie ścieżki /locations/52.20/21.00 spowoduje wysłanie pocisków w kierunku Mokotowa.

Ostatnim elementem użytym w tym fragmencie kodu jest metoda Ok, do której można przekazać parametr. Generuje ona odpowiedź mówiącą, że obsługa wywołania się udała, a jej opcjonalny parametr jest zamieniany w zwracany tekst. Istnieją inne metody takie jak BadRequest albo UnAuthorized, mówiące, że nie udało się przetworzyć wywołania i dające aplikacji klienckiej pewne wskazówki o przyczynie tego problemu.

Na tym etapie po uruchomieniu aplikacji da się z nią rozmawiać po http, np .wpisując w przeglądarkę https://localhost:5001/missile-types. Niestety zamiast nazw typów pocisków aplikacja zwraca: [0,1,2,3]. Aby to naprawić Należy do metody ConfiureServices w klasie Startup dodać wywołanie metody AddJsonOptions:

services
    .AddMvc()
    .AddJsonOptions(options => options.SerializerSettings.Converters.Add(new StringEnumConverter()));

Zaś w sekcji using dodać wpis

using Newtonsoft.Json.Converters;

Teraz metoda zwraca już poprawny wynik.

Dostawcy tożsamości, w tym Auth0, upraszają to zadanie, dając swoim klientom gotowe ekrany logowania i rejestracji, które sprawiają, że aplikacja kliencka nie ma dostępu do loginu i hasła, a co za tym idzie nie może go ujawnić.

Klientem, którego proces tworzenia opiszę jest aplikacja SPA (single page application), napisana z wykorzystaniem frameworka aurelia w języku typescript,
ale wybór frameworka i języka nie ma szczególnego znaczenia.

Do testowania aplikacji tworzonej w ramach tego artykułu konieczne jest uruchomienie aplikacji backend. Opis tworzenia tej aplikacji znajduje się w tym artykule

Szkielet aplikacji

Przed rozpoczęciem pracy miałem już zainstalowany NodeJs, można go pobrać tutaj. Pracę rozpocząłem od zainstalowania narzędzia aurelia-cli, które ułatwia tworzenie aplikacji opartej na tym frameworku.

npm install --global aurelia-cli

Utworzenie nowego projektu opartego o Webpack i Typescript sprowadza się do wpisania komendy:

au new
Please enter a name for your new project below.
rocket-launcher
Would you like to use the default setup or customize your choices?
1. Default TypeScript
Would you like to create this project?
1. Yes (Default)
Would you like to install the project dependencies?
1. Yes (Default)

Następnie zmieniłem nazwę nowo-utworzonego katalogu rocket-launcher na src.

Aby uruchomić aplikację wystarczy wpisać 

au run

I otworzyć w przeglądarce stronę http://localhost:8080

Jednocześnie jest to zagadnienie zasobochłonne, o ile sama implementacja ekranu logowania i rejestracji użytkownika zgodnie z bieżącymi standardami jest dość szybka: zajmuje od kilku godzin do kilkunastu dni, to co jakiś czas okazuje się, że stare praktyki przestają gwarantować bezpieczeństwo, oraz pojawiają się nowe rozwiązania adresujące problemy występujące w starych. Wymaga to ciągłego śledzenia informacji związanych z szeroko rozumianym bezpieczeństwem i adaptacji swojego systemu.

Niestety bezpieczeństwo w oprogramowaniu nie zarabia, z tego powodu w wielu systemach jest traktowane po macoszemu, menadżerowie znacznie chętniej poświęcą miesiąc na zbudowanie nowych ścieżek sprzedażowych niż tydzień, na zmianę sposobu szyfrowania haseł.

Powszechność i złożoność problemu oraz brak biznesowych przesłanek do inwestycji w zabezpieczenie aplikacji czyni ten aspekt idealnym kandydatem do wydelegowania do innej organizacji.

Auth0 jest jednym z dostawców, na których warto zwrócić uwagę, w tym artykule postram się przybliżyć kilka aspektów związanych z integracją z tym dostawcą.

Aplikacja do odpalania rakiet

Dla lepszego zobrazowania procesu integracji z Auth0 przygotowałem aplikację do odpalania rakiet, podobnej do tej znanej z komiksu xkcd:

Aplikacja ma następującą architekturę

Backend – RocketService jest usługą uruchomioną w chmurze, posiadającą 2 punkty końcowe: jeden pozwalający pobrać listę dostępnych typów pocisków, drugi pozwalający wysłać określoną ilość pocisków, danego typy, pod wskazaną lokalizację. Oczywiście tylko zalogowani użytkownicy powinni mieć możliwość wykonania tych operacji.

Usługa jest wywoływana przez dwie aplikacje: Aplikację napisaną w Xamarin Forms’ach przeznaczoną na telefony Android i iOS oraz SPA przeznaczoną dla wszystkich innych urządzeń.

Obie aplikacje kontaktują się z serwisem Auth0, aby przeprowadzić użytkownika przez proces rejestracji i logowania oraz pozyskać dane, które pozwalają na kontakt z backendem.

Rejestracja tenanta

Aby aplikacja mogła korzystać z auth0 musiałem ją zarejestrować, zacząłem od wejścia na stronę auth0.com i kliknięcia w przycisk „Sign Up” w prawym górnym rogu. Na wyświetlonym ekranie wybrałem sposób w jaki chciałbym zarejestrować konto w serwisie. Auth0 udostępnia wykorzystanie podanie loginu i hasła ewentualnie skorzystanie z któregoś najpopularniejszych dostawców tożsamości: Google, Microsoft czy Github, ja wybrałem konto Microsoft, ale wybór nie ma większego znaczenia. Po zakończeniu rejestracji zostałem przekierowany do ekranu rejestracji tenanta (słowo lokator mi jakoś mi nie leży) czyli mojego systemu/organizacji.

Na tym ekranie wprowadziłem nazwę, wybrałem Unię europejską jako miejsce przechowywania danych #boRODO, i nie wyraziłem zgody się na otrzymywanie wiadomości email i kliknąłem „Next”.

Drugi krok służy dopasowaniu wyglądu panelu administracyjnego do potrzeb i wiedzy użytkownika. Ja uzupełniłem go w sposób widoczny poniżej.

W tym momencie nastąpiło przekierowanie do Panelu sterowania zwanego też daszbordem. Po jego lewej stronie znajduje się menu dające dostęp do bardzo szerokiego zakresu funkcji i ustawień.

• APIs – zarządzanie aplikacjami – backend
• Applications – zarządzanie aplikacjami klienckimi (front-end, desktop, mobile, IoT) za pomocą których można kontaktować się z aplikacjami -backend
• Connections i SSO integrations – pozwalają skonfigurować sposoby weryfikacji tożsamości użytkownika, domyślnie włączony jest jedna opcja „Database” w sekcji connections. Sprawia ona że dostępne jest logowanie z wykorzystaniem loginu i hasła. Można tam jednak uruchomić całą masę integracji od facebooka i google przez firmowe subskrypcje Office 365 i Slack’a aż po serwery LDAP.
• Users – przegląd aktywnych (i nieaktywnych) kont użytkowników
• Multi-factor auth – autoryzacja wieloskładnikowa – np. jednorazowe kody SMS
• Emails – szablony automatycznych wiadomości email wysyłanych do użytkowników
• Anomaly detection – raporty o „dziwnych” zachowaniach użytkowników, mogących świadczyć o próbie ataku na określone konta albo cały serwis.

Opis tworzenia poszczególnych aplikacji umieściłem w osobnych artykułach:

• Backend
• Frontend

Artykuły w przygotowaniu, zapisz się na newsletter aby otrzymać powiadomienie gdy tylko się ukażą