Prosta web aplikacja z logowaniem z REST API.

0

Szukam jakiegoś poprawnie napisanego, jak najprostszego przykładu web aplikacji korzystającego z REST API z logowaniem, czyli użytkownik oprócz zasobów dostępnych dla wszystkich ma też zasoby dostępne tylko dla samego siebie. Języki dowolne typowy dla tego typu zadań czyli oprócz JS na frontendzie, na backendzie Java, JS, ewentulanie Python czy Ruby.

Nie wiedziałem gdzie ten wątek umieścić (to raczej dowolny język).

Szukam jakichś linków do dobrych przykładów na githubie, żeby przeanalizować kod nawet bez uruchamiania.

1

Wnioskując z treści zapytania potrzebujesz wiele więcej niż piszesz.
Zacznijmy zatem od początku.

Łącząc prośbę o przesłanie backend i frontend jednocześnie widać, że nie rozumiesz istoty REST API dlatego to jest pierwszy punkt, od którego należy zacząć.
Potem trzeba poczytać o tym w jaki sposób frontend pisany w JS komunikuje się z backend. To w czym pisany jest backend nie ma żadnego znaczenia. Zresztą dokłądnie tak samo jak dla backendu nie ma znaczenia w czym napisany jest frontend.

Przykład komunikacji JavaScript z backend w PHP masz poniżej - część PHP może być zastąpiona aplikacją niemal w dowolnym innym języku:

Część HTML i JavaScript:

<html><body>
  <script>   
  
    var dataToSend = {
      login : "Moje dane do wysłania do serwera jako POST",
      password : "Inna zmienna",
    } ;
  
    var requestInit = {
      'method': 'POST',
      'mode': 'cors',
      'cache': 'no-cache',
      'headers': {
        'Content-Type': 'application/json'
      },
      'referrerPolicy': 'no-referrer',
      'body': JSON.stringify (dataToSend)
    };     
     
    var retPromise = fetch( "test.php" , requestInit ).then(response => response.text())
    .then((response) => {        
      try {
        // Wszystko OK w zmiennej response mamy odpowiedź z serwera
        console.log ( "OK:", response ) ;
      }catch(err){
        // Coś jest źle
        alert ( "Cuś poszło źle!" ) ;
      }
    })
    .catch( err => console.log(err) );
     
  </script>
</body></html>

No i po stronie PHP ( plik test.php ):

<?php

    //
    // Dane przychodzą jako JSON w POST i tak odbiera się je w PHP
    //
    $input = file_get_contents('php://input') ; 
    $input = json_decode( $input, true ) ;
    
    //
    // Tu możemy opracować dane i odesłać do przeglądarki ...
    //
    echo "\r\nPomniejszony ciąg zmiennej 1:".strtolower ( $input [ 'login' ] ) ;
    echo "\r\nPowiększony ciąg zmiennej 2:".strtoupper ( $input [ 'password' ] ) ;

Jak już opanujesz podstawy komunikacji JS z backend to musisz zaplanować co ma robić to "logowanie" czym to ma się charakteryzować. W jaki sposób chcesz utrzymywać sesję, gdzie i jak chcesz przechowywać dane autoryzacyjne ... o zakładaniu użytkowników nie wspominając.

Każde prace programistyczne należy zawsze zaczynać od zaplanowania tego co chce się zrobić. Pojęcie logowania jest bardzo względne.
Dlatego Napisz co ono ma oznaczać u Ciebie?

0

co rozumiesz przez "poprawnie napisanego"? oraz "najprostszy"? Wiesz ze jest kilka sposobow logowania?

https://realpython.com/introduction-to-flask-part-2-creating-a-login-page/
co brakuje tutaj w tym przykladzie powyzej?

0
katakrowa napisał(a):

Jak już opanujesz podstawy komunikacji JS z backend to musisz zaplanować co ma robić to "logowanie" czym to ma się charakteryzować. W jaki sposób chcesz utrzymywać sesję, gdzie i jak chcesz przechowywać dane autoryzacyjne ... o zakładaniu użytkowników nie wspominając.

Każde prace programistyczne należy zawsze zaczynać od zaplanowania tego co chce się zrobić. Pojęcie logowania jest bardzo względne.
Dlatego Napisz co ono ma oznaczać u Ciebie?

Właśnie chodzi o to jak np. utrzymywać sesję (w PHP było po prostu session_start(), $_SESSION[] - czy tak samo łatwo w oparciu o cookies wystarczy działać w web aplikacjach z REST API ?), zakładanie użytkowników mogę w tym momencie pominąć. Ale np. jak poprawnie zabezpieczać obszary w aplikacji niedostępne dla niezalogowanych użytkowników.

0

@włóczęga: Cookies może być uzupełnieniem sesji po stronie serwera ale nie może być podstawą utrzymywania informacji o stanie zalogowania. Cookies jest po stronie przeglądarki i każdy może sobie zmienić ich zawartość.
W przypadku REST API trzeba samemu zaimplementować obsługę sesji - czyli cały mechanizm pilnujący jej czasu trwania, autoryzacji i np. wymiany tokena z front-endem.

Ogólnie wywołujesz funkcję API logowanie, która zwraca token. Ten ma swój czas trwania i dopóki klient go przesyła to funkje po stronie serwera są wykonywane.
Jak token straci ważność to nie.

Prymitywnie można też dane autoryzacyjne wysyłać z każdym zapytaniem do API.

0

@katakrowa: No coś słyszałem o tokenach, ale jeszcze nie do końca rozumiem dlaczego są lepsze od cookies (cookie też jest ustawiana przez serwer, może mieć czas trwania, token czy w nagłówku czy w body też może być zmieniony przez klienta)

0
fasadin napisał(a):

co rozumiesz przez "poprawnie napisanego"? oraz "najprostszy"? Wiesz ze jest kilka sposobow logowania?

Chodzi mi o kompletny projekt który działa i realizuje jakieś podstawowe funkcje dla użytkownika, powiedzmy zapis do bazy danych, spersonalizowane endpointy, ale właśnie nie jakiś super rozbudowany, tylko żeby szybko wychwycić istotę rozwiązań takich web aplikacji REST API. Napisany zgodnie z aktualnymi trendami i zgodnie ze sztuką. Na pewno są takie na githubie tylko jak na nie trafić. Aha no i w zasadzie chodzi mi o backend.

0

Brzmi jak na szybko potrzebny projekt na studia :D

0

Nie sądzę abyś znalazł gotowca z samym logowaniem. Logowanie to zazwyczaj część czegoś większego i raczej nie ma sensu pisać go tylko po to aby było.
Zanim zaczniesz robić logowanie musisz mieć się do czego logować ... Inaczej jaki to ma sens?
Zawsze możesz analizować logowanie z jakiś gotowych rozwiązań ale wątpię w to czy to będzie łatwiejsze niż uczyć się każdego elementu jak "natura" przykazała.

1

Wygeneruj sobie projekt jhipsterem https://www.jhipster.tech/
Na start bedziesz miał backend + frontend z prostym logowaniem. Na stronie jest też tutorial jak to zrobić w 15 minut coś co przypomina prosty blog,

0

Tutaj masz przykłady takich aplikacji w praktycznie każdym języku i frameworku.
https://github.com/gothinkster/realworld
Z tego co widzę jest tam logowanie.

PS. nigdy żadnej z tych aplikacji nie sprawdzałem ręcznie tylko zerkałem na kod, więc nie daje gwarancji, że jak zrobić git clone i zainstalujesz depsy to będzie działać od razu.

0

Proponuję zapoznać się z firebase, prosty system logowania i tworzenia userów.

1 użytkowników online, w tym zalogowanych: 0, gości: 1