AngularJS + WebApi- autentykacja i autoryzacja

Do przygotowania tego wpisu, wsparłem się świetnym kursem na Pluralsight, autorstwa Deborah Kurata- Angular Front to Back with Web API

Autoryzacja czy autentykacja?

Hasła te dość często ze sobą mylone. Sam mam często problem z zapamiętaniem,
które co oznacza. Więc na początek artykułu drobne przypomnienie.

Autoryzacja, to stwierdzenie, czy dany użytkownik ma prawa do korzystania z danego zasobu.

Autentykacja (często nazywana uwierzytelnianiem) to stwierdzenie, czy dany użytkownik rzeczywiście jest tym, za którego się podaje.

Bezpieczeństwo w projekcie Deadline

W moim konkursowym projekcie, zastosowałem autentykację opartą o tokenach.
W skrócie, użytkownik po zalogowaniu się, otrzymuje token (długi klucz znaków),
za pomocą którego jest identyfikowany. Token ma swoją datę ważności, więc po pewnym czasie, nie będzie można z niego korzystać i będzie trzeba ponownie się zalogować.

Przechowywanie informacji o użytkowniku po stronie klienta

Aplikacja działająca w przeglądarce użytkownika, musi w łatwy i szybki sposób dostarczać informacji o danym użytkowniku. Posłużyłem się tutaj fabryką z AngularJS, która przechowuje między innymi token, który jest niezbędny w autoryzacji. Takie podejście zapewnia nam, że zawsze będzie jedna instancja danej fabryki (factory
w AngularJS są obiektami typu singleton). Dodatkowo, tam gdzie potrzebujemy informacji o użytkowniku, możemy wstrzyknąć fabrykę i od razu mamy potrzebne dane.

Najważniejszymi metodami są setToken, która przypisuje tokena, do którego możemy się dostać za pomocą getProfile.

Komunikacja z api

Logowanie

Klient musi się komunikować z  serwerem. Aby to umożliwić, napisałem kolejną fabrykę, która zapewnia metody do logowania i rejestracji użytkownika.

Została tutaj wykorzystana fabryka $resource, która umożliwia interakcję z serwisami REST. Skupmy się na logowaniu. Co warto zauważyć, dane nie są przesyłane w formacie JSON, lecz w url. Domyślnie $resource, konwertuje dane przesyłane dane do formatu JSON, więc musimy zmienić jego działanie. Posłuży nam do tego metoda transformRequest. Jak wskazuje jej nazwa, zmienia ona request. Pozwoli to nam, na dodanie do odpowiednio sparsowanych parametrów do adresu url.

Przykładowo, jak użytkownik ma login: „test@test.pl” oraz hasło: „przykLad0weHa$Lo”, to otrzymamy: „userName%3Dtest%40test.pl%26password%3DprzykLad0weHa%24Lo”. Musimy pamiętać jeszcze o dodaniu „grant_type=password”.

Wywołanie logowania

W kontrolerze, który odpowiada za logowanie się użytkowników, wywołujemy metodę loginUser z fabryki userAccountResource. Jako parametry, przyjmuje ona dane, które zostaną wysłane do api, funkcję sukcesu, funkcję porażki. W funkcji sukcesu, zapisujemy tokena, którego otrzymaliśmy.

Dostęp do zasobów

Gdy chcemy wywołać metody z WebApi, które są dostępne tylko dla zalogowanych użytkowników musimy w zapytaniu dodać nagłówek „Authorization” z tokenem.
Do fabryki, która odpowiada za komunikację, wstrzykujemy fabrykę przechowującą dane aktualnie zalogowanego użytkownika. Dzięki temu, mamy łatwy dostęp do tokena, którego dodajemy do headera requesta.

Podsumowanie

Zastosowana fabryka do przechowywania tokena, pozwala wstrzykiwać ją wszędzie tam, gdzie będzie potrzebna. Dzięki temu, to rozwiązanie jest uniwersalne i łatwe
w dalszym utrzymaniu.

Reklamy

Jedna uwaga do wpisu “AngularJS + WebApi- autentykacja i autoryzacja

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Connecting to %s