## Wprowadzenie Kiedy rozpoczynasz nowy projekt, zazwyczaj nie możesz pominąć kilku rzeczy: API, uwierzytelniania + autoryzacji, tożsamości i przepływu logowania końcowego użytkownika. Kiedyś trudno było zacząć te rzeczy, ponieważ istnieje wiele koncepcji i technologii, które są szeroko rozpowszechnione: RESTful/GraphQL, frontend internetowy, natywny klient, łączenie klientów z API, najlepsze praktyki autoryzacji do zrównoważenia bezpieczeństwa i doświadczenia użytkownika, itp. Większość z tych prac jest również "powtarzana". To znaczy, że są one potrzebne i podobne dla prawie każdego projektu, z pewnymi modyfikacjami. Brzmi przerażająco i nużąco? Nie panikuj. Dziś mamy open source. Dzięki dwóm poniższym projektom open-source rzeczy stają się mniej skomplikowane: - [Logto](https://github.com/logto-io/logto): Pomaga w budowaniu logowania, autoryzacji i tożsamości użytkownika w ciągu kilku minut. - [Hasura](https://github.com/hasura/graphql-engine): Niezwykle szybkie, natychmiastowe, rzeczywiste GraphQL API na twojej bazie danych z precyzyjną kontrolą dostępu. W tym artykule skupimy się na połączeniu Logto i Hasura, co umożliwia wdrożenie uwierzytelniania, autoryzacji i GraphQL API bez tarć. Dzięki temu możesz szybko rozpocząć swoją działalność bez nauki na poziomie rakietowym. ## Rozpoczęcie ### Wymagania wstępne Ponieważ zarówno [Logto](https://docs.logto.io/docs/tutorials/get-started/), jak i [Hasura](https://hasura.io/docs/latest/getting-started/index/) mają przyzwoity przewodnik startowy, zakładamy, że je przeczytałeś i masz podstawowe pojęcie. Potrzebny jest dostęp do działającej instancji obu. Zakładamy, że dostępne punkty końcowe to: - Logto: `http://localhost:3001` - Hasura: `http://localhost:8080` Jeśli używasz Docker/Docker Compose do dostępu do `localhost` twojej maszyny (hosta), możesz użyć magicznego ciągu Dockera `host.docker.internal`. W tym przypadku punkt końcowy Logto będzie `http://host.docker.internal:3001`. Zakładamy również, że masz preferowaną platformę i framework do budowy aplikacji klienckiej, powiedzmy React lub Next.js. ### Konfiguracja API w Logto W lewym pasku nawigacyjnym w Logto Admin Console, kliknij „API Resources”, a zobaczysz stronę zarządzania zasobami API. Następnie kliknij duży przycisk „+ Create API Resource” w prawym górnym rogu. W otwartym oknie modalnym wpisz `Hasura` jako nazwę API i `https://hasura.api` jako identyfikator API. Create API modal

Będziemy używać tego identyfikatora API w reszcie naszego artykułu. Ale śmiało zmieniaj wartości według własnych preferencji. Kliknij „Create API Resource”, a pojawi się komunikat, że zasób został pomyślnie utworzony. To wszystko, czego teraz potrzebujemy w Logto. ### Tworzenie roli dla Hasura Aby wykorzystać zarządzanie uprawnieniami Hasura, stworzymy role w Logto, które będą mapowane na role Hasura. Create Role

Nazwa roli musi być równa nazwie roli na stronie "Premissions" Hasury. Pamiętaj, aby przypisać rolę do użytkowników. ### Włączanie uwierzytelniania webhook w Hasurze [Hasura używa zarządzania dostępem opartego na rolach](https://hasura.io/docs/latest/auth/index/), które obsługuje autoryzację. Zatem musimy tylko zająć się uwierzytelnianiem. Obsługuje dwie metody: Webhook i JWT. Wybieramy [webhook](https://hasura.io/docs/latest/auth/authentication/webhook/) ponieważ jest bardziej elastyczny. Aby włączyć uwierzytelnianie webhook, musisz ustawić tajny klucz administratora i punkt końcowy hook autoryzacji. - Sekret administratora to klucz do uzyskania dostępu do administracji Hasury podczas wysyłania żądań. Jest wymagany przed włączeniem uwierzytelniania webhook. Pamiętaj, aby go przechowywać w bezpiecznym miejscu i nie używać go w produkcji. - Punkt końcowy hook autoryzacji to URL, pod który wysyłane są żądania uwierzytelniania. Możesz je ustawić poprzez [zmienne środowiskowe](https://hasura.io/docs/latest/auth/authentication/webhook/#configuring-webhook-mode): ```yaml HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey # Zastąp własnym sekretem HASURA_GRAPHQL_AUTH_HOOK: http://localhost:3001/api/authn/hasura?resource=https://hasura.api ``` Możesz zauważyć, że używamy identyfikatora API wypełnionego w Logto, aby zbudować punkt końcowy hook autoryzacji. Zapewnia to, że użytkownik przesyła poprawny token bearer zamiast losowego, który może pochodzić od złośliwego użytkownika. Musisz zaktualizować punkt końcowy hooka autoryzacji, jeśli masz inny punkt końcowy Logto lub identyfikator API. Powiedzmy, że masz `https://logto.domain.com` jako punkt końcowy Logto i `https://graphql.domain.com` jako identyfikator API, wtedy będzie to: ```yaml HASURA_GRAPHQL_AUTH_HOOK: https://logto.domain.com/api/authn/hasura?resource=https://graphql.domain.com ``` Od teraz, przy każdym żądaniu GraphQL, Hasura przekaże wszystkie nagłówki żądania do punktu końcowego hooka autoryzacji Logto, a Logto odpowiednio zareaguje. ## Wysyłanie zabezpieczonych żądań GraphQL ### Podsumowanie Ponieważ nie będziemy używać sekretu administracyjnego Hasura w produkcji, każde żądanie GraphQL jest zabezpieczone przez następujące nagłówki: - `Authorization` standardowy token bearer, który generuje Logto. - `Expected-Role` Rola, którą chcesz, aby Logto pokazało w odpowiedzi hooka autoryzacji. Jeśli użytkownik, na którego wskazuje nagłówek `Authorization`, nie ma `Expected-Role`, Logto odpowie `401 Unauthorized`. Nagłówek `Authorization` wymaga ważnego access tokenu w formacie JWT z identyfikatorem API Hasura dla odbiorców. Poczekaj - dość trudno jest zapamiętać i złożyć wszystkie te rzeczy. Na szczęście mamy SDK Logto do uproszczenia tej zaawansowanej części. ### Integracja SDK Logto Postępuj zgodnie z [przewodnikiem integracji](https://docs.logto.io/docs/recipes/integrate-logto/), aby zintegrować SDK Logto w swojej aplikacji klienckiej. Umożliwia to nie tylko generowanie ważnych tokenów dostępu dla żądań GraphQL, ale także płynne doświadczenie logowania dla twoich użytkowników końcowych. Po zakończeniu przewodnika, potrzeba tylko jednej małej modyfikacji do `LogtoConfig`: Dodaj identyfikator API, który utworzyłeś w Logto Admin Console do `resources`. Przykład w SDK React: ```tsx const config: LogtoConfig = { endpoint: 'http://localhost:3001', appId: '', resources: ['https://hasura.api'], // Dodaj tą linię }; ``` ### Wysyłanie żądań Na koniec! Po zalogowaniu się użytkownika, użyj `getAccessToken()` w SDK Logto, aby pobrać token dostępu dla żądań GraphQL Hasura: ```tsx const accessToken = await logto.getAccessToken('https://hasura.api'); // Przed wysłaniem żądania request.headers.set('Authorization', `Bearer ${accessToken}`); request.headers.set('Expected-Role', 'user'); ``` ## Podsumowanie Dzięki powyższym działaniom pomyślnie wdrożyliśmy wszystkie niepomijane elementy we wprowadzeniu: - Punkt końcowy API GraphQL oparty na schemacie bazy danych - Usługa uwierzytelniania i tożsamości oparta na protokole OIDC - Kompletny przepływ logowania końcowego użytkownika i zarządzanie stanem uwierzytelnienia - Zabezpieczony dostęp do API oparty na tożsamości użytkownika i rolach Nie tak trudne, prawda? Jeśli napotkasz jakieś problemy, dołącz do serwera discord [Logto](https://discord.gg/vRvwuwgpVX) lub [Hasura](https://discord.gg/hasura) aby porozmawiać na żywo z zespołem.