BackEnd do strony www Pomoc

BackEnd do strony www Pomoc
Rozumek29
  • Rejestracja:około 4 lata
  • Ostatnio:ponad rok
  • Postów:23
0

Witam. Tworzymy ze znajomymi projekt do szkoły i trochę naprowadzenia mnie na odpowieny kierunek.
Reszta osób jest odpowiedzialna za frontend natomiast ja i jeszcze jeden kolega za backend. Chciałbym napisać jakieś rest api, którę przekazywało by informację na stronę i okazało się że przeszkodą dla mnie jest system logowania, ponieważ chciałbym to zrobić w miarę poprawnie jak na pierwszy poważniejszy projekt w springu i potrzebuję lekkiego naprowadzenia jakby to miało wyglądać.
Dodam, że frontend będzię pisany w reakcie a samo API będzię prawdopodobnie na osobnym serwerzę i będzię podpięte pod MySQL za pomocą JPA.
O czym powinienem poczytać ?
W jaki sposób przekazywać do API Login i hasło ?

BO
  • Rejestracja:około 6 lat
  • Ostatnio:około 13 godzin
  • Postów:214
1

Tutaj jest naprawdę sporo rzeczy do nauki. Po pierwsze powinieneś poczytać o wzorcach programowania ,które pomogą ci odizolować poszczególne warstwy api. Tak naprawdę warstw powinno być co najmniej klika kontroler,serwis,repozytorium czym się one zajmują doczytaj sam. Na pewno musisz także poczytać czym jest ORM oraz walidacja danych oczywiści jeszcze tak naprawdę potrzebowałbyś dowiedzieć się masę innych rzeczy ale to na pewno nie jest do opisania w ,krótkim poście na forum. Co do samego logowania to dane przekazujesz w body requesta do serwera koniecznie postem, i na jego podstawie generujesz odpowiedni token (obecnie najczęściej stosowany standardem zabezpieczania api jest outh2), musisz jednak pamiętać by nie bawić się w implementacje tych algorytmów samemu ponieważ ich implementacja wymaga niesamowitej wiedzy i naprawdę dużej ilości testów tak by mogły być one bezpieczne dlatego polecam użyć gotowego rozwiązania. To tak w bardzo telegraficznym skrócie ale co więcej da się na forum napisać. No może ,że jeszcze warto poczytać czym są corsy i dlaczego tokeny najlepiej trzymać w ciasteczkach httponly.

Ps. No i oczywiście requesty z logowaniem muszą być na https jeśli mowa o produkcji.

edytowany 1x, ostatnio: Botek
Charles_Ray
  • Rejestracja:około 17 lat
  • Ostatnio:około 3 godziny
  • Postów:1873
2

Ogólna idea jest taka, że po zalogowaniu backend zwraca token (np. JWT), który po stronie przeglądarki zapisujesz np. w Cookie i dodajesz do każdego requestu w nagłówku (robi to jakiś globalny interceptor po stronie frontu). Podrzucam garść linków, powinieneś coś z tego skleić.

https://spring.io/guides/tutorials/spring-security-and-angular-js/

https://www.powerupcloud.com/securing-spring-boot-and-react-js-with-spring-security-using-jwt-authentication/

https://medium.com/@mind_sFlight/basic-authentication-with-angular-7-and-spring-security-6fd140efc031

Możesz również wygenerować gotową aplikację Spring+React i podpatrzyć jak to robi jhipster - tak się kiedyś uczyłem ;) https://www.jhipster.tech/security/

EDIT: bezpieczne przechowywanie JWT https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/#jwt_vs_session


”Engineering is easy. People are hard.” Bill Coughran
edytowany 7x, ostatnio: Charles_Ray
BO
Zapisywania tokena w session_storege nie jest dobrą praktyką ponieważ złośliwe skrypty mogą go łatwo odczytać, powinno się g zapisywać w cookie z parametrem httponly
Charles_Ray
Bardzo dobra uwaga, dzięki!
piotrpo
  • Rejestracja:ponad 7 lat
  • Ostatnio:4 dni
  • Postów:3277
1

Jeżeli możesz, to użyj zwyczajnie Firebase. Użytkownik loguje się za pomocą zewnętrznego serwisu, ty dostajesz token JWT który daje się dość łatwo sprawdzić. Lista kont użytkowników jest po stronie Firebase, masz od razu możliwość uwierzytelniania za pomocą Google i chyba Facebook, usługa z tego co pamiętam jest za darmo. Serio, jeżeli nie ma jakichś bardzo szczególnych powodów do zaimplementowania tego samodzielnie, to warto używać takich usług Jest jeszcze parę innych serwisów np. Auth0, ale nie pamiętam, czy mają jakieś darmowe wersje.

Najprostsza możliwość to wysyłanie z front endu pobranego od użytkownika username i password w nagłówku każdego żądania Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l Ten dziwny ciąg znaków to usernam:password zakodowane w Base64.
Po stronie serwera, przed obsłużeniem każdego żądania sprawdzasz, czy w bazie danych jest już taki użytkownik i czy hasło się zgadza. Hasła nie wolno trzymać w bazie w formie jawnej, więc trzeba użyć jakiejś funkcji hashującej (np 'bcrypt' SHA256, `HMAC, ) i wynik trzymać w bazie. Współcześnie używa się wielu rund szyfrujących (czyli kilka tysięcy razy stosuje się tę samą funkcję), żeby zwiększyć moc obliczeniową potrzebną do skutecznego ataku brute force, polegającego na sprawdzaniu wszystkich możliwych kombinacji hasła czy nie da się z nich wygenerować identycznego hash'a. Dodatkowo trzeba pamiętać o soleniu hashy - czyli dodawaniu do hasha jakiegoś dodatkowego elementu (np. nazwy użytkownika), żeby hashe takich samych haseł dla różnych użytkowników były różne, oraz by zabezpieczyć sie przed atakiem z użyciem rainbow tables.

Powyższy sposób ma problem z wydajnością, ponieważ musisz wyliczyć hash dla hasła przy każdym żądaniu (a celowo zrobiliśmy to kosztowną operacją), oraz odpytać bazę danych o istnienie takiego użytkownika. Rozwiązaniem dobrym będzie więc wykorzystanie hasła użytkownika jedynie do wygenerowania tokenu JWT (taki cyfrowy dowód osobisty) i weryfikacja poprawności tokenu (wystarczy sprawdzić poprawność podpisu). Czyli w praktyce odtwarzasz w ten sposób to co masz w Firebase.

Zobacz pozostałe 5 komentarzy
piotrpo
Jakich "gotowych middlewareów"? Sprawdzenie JWT nie wymaga kontaktu z zewnętrznym serwisem poza sporadycznym odpytaniem JWKS o aktualne klucze.
BO
Dobra to może wytłumacz czym według ciebie różni się użycie freamoworków do autoryzacji typu passport, sanctum itp. od użycia firebase i tu i tu większość roboty odwalili już ludzie piszące te rozwiązania a jedyną różnicą jest to ,że używasz zewnętrznego serwisu ,który spowalnia działanie.
piotrpo
Stawiając coś po swojej stronie musisz to skonfigurować, zabezpieczyć, płacić za infrastrukturę, aktualizować, wyciek danych jest twoim a nie czyimś problemem, jesteś związany z konkretną technologią.
BO
No tak ale przecież i tak stawiasz api więc musisz mieć wiedzę jak to skonfigurować bo baza z danymi musi być dobrze zabezpieczona, a robiąc logowanie tak jak się normalnie robi w szkolnym projekcie uczysz się zdecydowanie więcej.
piotrpo
Nie stawiasz API do uwierzytelniania i autoryzacji, bo ktoś już za ciebie to zrobił i udostępnił jako usługę. Nie wiem skąd przekonanie, ze jak zrobisz sam to się nauczysz. Skąd niby będziesz wiedzieć, czy zrobiłeś to dobrze? To, że działa, nie jest żadnym wyznacznikiem akurat w tym przypadku.
Rozumek29
  • Rejestracja:około 4 lata
  • Ostatnio:ponad rok
  • Postów:23
0

A czy podczas przesyłania danych z formularza do mojego API powinniśmy szyfrować też nazwę używkownika, czy tylko hasło wystarczy ?

BO
  • Rejestracja:około 6 lat
  • Ostatnio:około 13 godzin
  • Postów:214
3

Tak naprawdę nic z tego nie ma potrzeby szyfrować ,za szyfrowanie jest odpowiedzialny protokół https i dodatkowe szyfrowanie hasła średnio ma sens, ogólnie to można ale według standardu outh2 nic z tych danych się nie szyfruje.

piotrpo
  • Rejestracja:ponad 7 lat
  • Ostatnio:4 dni
  • Postów:3277
1

@Rozumek29: Powinieneś wszystko szyfrować na poziomie protokołu https, w szczególności nie powinno dać się wysłać username i hasła po standardowym http. Tu masz darmowe ceryfikaty: https://letsencrypt.org/ jakąś domenę sobie musisz do tego zorganizować, pewnie też znajdziesz coś za darmo .

Rozumek29
  • Rejestracja:około 4 lata
  • Ostatnio:ponad rok
  • Postów:23
0

@piotrpo: O!, wielke dzięki przyda się darmowy certyfikat. Bo domena zarówno projektu który należy do mojej szkoły nie ma certyfikatu więc zaczynałem obawiać się o to protokół HTTPS

Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)