Authentifizierung zu deiner Nuxt 3-Anwendung hinzufügen

tipp

Die folgende Demonstration basiert auf Nuxt 3.10.2.
Das Beispielprojekt ist im GitHub-Repository verfügbar.
Das Logto Nuxt SDK erfordert serverseitiges Rendering (SSR), um ordnungsgemäß zu funktionieren. Für Single-Page-Anwendungen (SPA) schaue dir unser Vue SDK an.

Voraussetzungen

Ein Logto Cloud Konto oder ein selbst gehostetes Logto.
Eine Logto traditionelle Webanwendung erstellt.

Installation

Importiere Logto SDK über deinen bevorzugten Paketmanager:

npm
pnpm
Yarn

npm i @logto/nuxt

pnpm add @logto/nuxt

yarn add @logto/nuxt

Integration

Logto-Modul registrieren

Füge in deiner Nuxt-Konfigurationsdatei das Logto-Modul hinzu und konfiguriere es:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@logto/nuxt'],
  runtimeConfig: {
    logto: {
      endpoint: '<your-logto-endpoint>',
      appId: '<your-logto-app-id>',
      appSecret: '<your-logto-app-secret>',
      cookieEncryptionKey: '<a-random-string>',
    },
  },
  // ...andere Konfigurationen
});

Da diese Informationen sensibel sind, wird empfohlen, Umgebungsvariablen (.env) zu verwenden:

.env
NUXT_LOGTO_ENDPOINT="<your-logto-endpoint>"
NUXT_LOGTO_APP_ID="<your-logto-app-id>"
NUXT_LOGTO_APP_SECRET="<your-logto-app-secret>"
NUXT_LOGTO_COOKIE_ENCRYPTION_KEY="<a-random-string>"

Siehe Runtime-Konfiguration für weitere Informationen.

Redirect-URIs konfigurieren

Bevor wir in die Details eintauchen, hier ein kurzer Überblick über die Endbenutzererfahrung. Der Anmeldeprozess kann wie folgt vereinfacht werden:

Deine App ruft die Anmeldemethode auf.
Der Benutzer wird zur Logto-Anmeldeseite umgeleitet. Bei nativen Apps wird der Systembrowser geöffnet.
Der Benutzer meldet sich an und wird zurück zu deiner App umgeleitet (konfiguriert als die Redirect-URI).

Bezüglich der umleitungsbasierten Anmeldung

Dieser Authentifizierungsprozess folgt dem OpenID Connect (OIDC) Protokoll, und Logto erzwingt strenge Sicherheitsmaßnahmen, um die Benutzeranmeldung zu schützen.
Wenn du mehrere Apps hast, kannst du denselben Identitätsanbieter (Logto) verwenden. Sobald sich der Benutzer bei einer App anmeldet, wird Logto den Anmeldeprozess automatisch abschließen, wenn der Benutzer auf eine andere App zugreift.

Um mehr über die Gründe und Vorteile der umleitungsbasierten Anmeldung zu erfahren, siehe Logto-Anmeldeerfahrung erklärt.

hinweis

In den folgenden Code-Snippets gehen wir davon aus, dass deine App unter http://localhost:3000/ läuft.

Redirect-URIs konfigurieren

Wechsle zur Anwendungsdetailseite der Logto-Konsole. Füge eine Redirect-URI http://localhost:3000/callback hinzu.

Genau wie beim Anmelden sollten Benutzer zu Logto weitergeleitet werden, um sich von der gemeinsamen Sitzung abzumelden. Sobald dies abgeschlossen ist, wäre es ideal, den Benutzer zurück zu deiner Website zu leiten. Füge zum Beispiel http://localhost:3000/ als Redirect-URI nach dem Abmelden hinzu.

Klicke dann auf "Speichern", um die Änderungen zu speichern.

Callback behandeln

Es ist keine zusätzliche Einrichtung erforderlich, um die Callback-Route zu behandeln. Beim Registrieren des @logto/nuxt-Moduls wird Folgendes durchgeführt:

Drei Routen für Anmeldung (/sign-in), Abmeldung (/sign-out) und Callback (/callback) hinzugefügt.
Zwei Composables importiert: useLogtoClient und useLogtoUser.

Diese Routen sind über logto.pathnames in den Moduloptionen konfigurierbar, zum Beispiel:

nuxt.config.ts
export default defineNuxtConfig({
  logto: {
    pathnames: {
      signIn: '/login',
      signOut: '/logout',
      callback: '/auth/callback',
    },
  },
  // ...andere Konfigurationen
});

Sieh dir die Typdefinitionsdatei im @logto/nuxt-Paket für weitere Informationen an.

hinweis

Wenn du die Callback-Route auf einen anderen Pfad konfigurierst, musst du die Redirect-URI in Logto entsprechend aktualisieren.

Anmeldung und Abmeldung implementieren

Da Nuxt-Seiten nach dem ersten Laden hydratisiert werden und zu einer Single-Page-Anwendung (SPA) werden, müssen wir den Benutzer bei Bedarf zur Anmelde- oder Abmelderoute umleiten. Um dabei zu helfen, bietet unser SDK das useLogtoUser()-Composable, das sowohl auf der Server- als auch auf der Client-Seite verwendet werden kann.

index.vue
<script setup lang="ts">
  import { useLogtoUser } from '#imports'; // Diese Zeile hinzufügen, wenn der Auto-Import deaktiviert ist
  const user = useLogtoUser();
</script>
<template>
  <!-- Vereinfachter Button für Anmeldung und Abmeldung -->
  <nuxt-link :to="`/sign-${ user ? 'out' : 'in' }`"> Sign {{ user ? 'out' : 'in' }} </nuxt-link>
</template>

Checkpoint: Teste deine Anwendung

Jetzt kannst du deine Anwendung testen:

Starte deine Anwendung, du wirst den Anmeldebutton sehen.
Klicke auf den Anmeldebutton, das SDK wird den Anmeldeprozess initiieren und dich zur Logto-Anmeldeseite weiterleiten.
Nachdem du dich angemeldet hast, wirst du zurück zu deiner Anwendung geleitet und siehst den Abmeldebutton.
Klicke auf den Abmeldebutton, um den lokalen Speicher zu leeren und dich abzumelden.

Benutzerinformationen abrufen

Benutzerinformationen anzeigen

Wenn der Benutzer angemeldet ist, wird der Rückgabewert von useLogtoUser() ein Objekt sein, das die Informationen des Benutzers enthält. Du kannst diese Informationen in deiner App anzeigen:

index.vue
<script setup lang="ts">
  const user = useLogtoUser();
</script>
<template>
  <!-- Benutzerinformationen anzeigen, wenn angemeldet -->
  <ul v-if="Boolean(user)">
    <li v-for="(value, key) in user"><b>{{ key }}:</b> {{ value }}</li>
  </ul>
  <!-- Vereinfachter Button für An- und Abmeldung -->
  <nuxt-link :to="`/sign-${ user ? 'out' : 'in' }`"> Sign {{ user ? 'out' : 'in' }} </nuxt-link>
</template>

Zusätzliche Ansprüche anfordern

Möglicherweise fehlen einige Benutzerinformationen im zurückgegebenen Objekt von useLogtoUser(). Dies liegt daran, dass OAuth 2.0 und OpenID Connect (OIDC) so konzipiert sind, dass sie dem Prinzip der minimalen Rechte (PoLP) folgen, und Logto auf diesen Standards basiert.

Standardmäßig werden begrenzte Ansprüche zurückgegeben. Wenn du mehr Informationen benötigst, kannst du zusätzliche Berechtigungen anfordern, um auf mehr Ansprüche zuzugreifen.

info

Ein "Anspruch (Claim)" ist eine Behauptung über ein Subjekt; eine "Berechtigung (Scope)" ist eine Gruppe von Ansprüchen. Im aktuellen Fall ist ein Anspruch ein Informationsstück über den Benutzer.

Hier ist ein nicht-normatives Beispiel für die Beziehung zwischen Berechtigung und Anspruch:

tipp

Der "sub"-Anspruch bedeutet "Subjekt", was der eindeutige Identifikator des Benutzers ist (d. h. Benutzer-ID).

Das Logto SDK wird immer drei Berechtigungen anfordern: openid, profile und offline_access.

Um zusätzliche Berechtigungen anzufordern, kannst du die logto Moduloptionen konfigurieren:

nuxt.config.ts
import { UserScope } from '@logto/nuxt';

export default defineNuxtConfig({
  logto: {
    scopes: [UserScope.Email, UserScope.Phone], // Weitere Berechtigungen hinzufügen, falls erforderlich
    // ...andere Konfigurationen
  },
});

Dann kannst du auf die zusätzlichen Ansprüche im user Objekt zugreifen:

index.vue
<template>
  <div v-if="user">
    <p>Name: {{ user.name }}</p>
    <p>Email: {{ user.email }}</p>
    <p>Telefon: {{ user.phone }}</p>
  </div>
</template>

Ansprüche, die Netzwerk-Anfragen benötigen

Um das ID-Token nicht aufzublähen, erfordern einige Ansprüche Netzwerk-Anfragen, um abgerufen zu werden. Zum Beispiel ist der custom_data Anspruch nicht im Benutzerobjekt enthalten, selbst wenn er in den Berechtigungen angefordert wird. Um auf diese Ansprüche zuzugreifen, kannst du die fetchUserInfo Option konfigurieren:

nuxt.config.ts
export default defineNuxtConfig({
logto: {
  scopes: [UserScope.CustomData],
  fetchUserInfo: true,
},
// ...andere Konfigurationen
});

Durch die Konfiguration von fetchUserInfo wird das SDK die Benutzerinformationen abrufen, indem es eine Anfrage an den Userinfo-Endpunkt stellt, nachdem der Benutzer angemeldet ist, und user.custom_data wird verfügbar sein, sobald die Anfrage abgeschlossen ist.

Benutzerinformationen manuell abrufen

Um auf alle vom Logto-Client bereitgestellten Methoden zuzugreifen, kannst du das useLogtoClient() Composable verwenden:

index.vue
const client = useLogtoClient();

warnung

Der Logto-Client ist nur auf der Serverseite verfügbar. Das Composable wird auf der Clientseite undefined zurückgeben.

Du kannst diese Logto-Methoden verwenden, um Benutzerinformationen programmgesteuert abzurufen:

client.getIdTokenClaims(): Benutzerinformationen durch Dekodieren des lokalen ID-Tokens abrufen. Einige Ansprüche (Claims) sind möglicherweise nicht verfügbar.
client.fetchUserInfo(): Benutzerinformationen durch Senden einer Anfrage an den userinfo endpoint abrufen.

Es ist wichtig zu beachten, dass die Benutzerinformationsansprüche, die abgerufen werden können, von den Berechtigungen (Scopes) abhängen, die der Benutzer während der Anmeldung verwendet hat. In Anbetracht der Leistung und der Datengröße kann das ID-Token möglicherweise nicht alle Benutzeransprüche enthalten; einige Benutzeransprüche sind nur im userinfo endpoint verfügbar (siehe die zugehörige Liste unten).

Zum Beispiel, um Benutzerinformationen manuell abzurufen:

index.vue
import { useLogtoClient, useState, callOnce } from '#imports';

const client = useLogtoClient();
const userInfo = useState(null);

// Einmal aufrufen, um zu verhindern, dass es auf der Clientseite ausgeführt wird
await callOnce(async () => {
  if (!client) {
    throw new Error('Logto client ist nicht verfügbar');
  }

  if (!(await client.isAuthenticated())) {
    return;
  }

  try {
    userInfo.value = await client.fetchUserInfo();
  } catch (error) {
    console.error('Fehler beim Abrufen der Benutzerinformationen:', error);
  }
});

Berechtigungen und Ansprüche

Logto verwendet OIDC Berechtigungen und Ansprüche Konventionen, um die Berechtigungen und Ansprüche für das Abrufen von Benutzerinformationen aus dem ID-Token und dem OIDC userinfo endpoint zu definieren. Sowohl "Berechtigung (Scope)" als auch "Anspruch (Claim)" sind Begriffe aus den OAuth 2.0 und OpenID Connect (OIDC) Spezifikationen.

Hier ist die Liste der unterstützten Berechtigungen (Scopes) und der entsprechenden Ansprüche (Claims):

openid

Anspruchsname	Typ	Beschreibung	Benötigt userinfo?
sub	`string`	Der eindeutige Identifikator des Benutzers	Nein

profile

Anspruchsname	Typ	Beschreibung	Benötigt userinfo?
name	`string`	Der vollständige Name des Benutzers	Nein
username	`string`	Der Benutzername des Benutzers	Nein
picture	`string`	URL des Profilbildes des Endbenutzers. Diese URL MUSS auf eine Bilddatei (zum Beispiel eine PNG-, JPEG- oder GIF-Bilddatei) verweisen und nicht auf eine Webseite, die ein Bild enthält. Beachte, dass diese URL speziell auf ein Profilfoto des Endbenutzers verweisen SOLLTE, das geeignet ist, den Endbenutzer zu beschreiben, und nicht auf ein beliebiges Foto, das vom Endbenutzer aufgenommen wurde.	Nein
created_at	`number`	Zeitpunkt, zu dem der Endbenutzer erstellt wurde. Die Zeit wird als Anzahl der Millisekunden seit der Unix-Epoche (1970-01-01T00:00:00Z) dargestellt.	Nein
updated_at	`number`	Zeitpunkt, zu dem die Informationen des Endbenutzers zuletzt aktualisiert wurden. Die Zeit wird als Anzahl der Millisekunden seit der Unix-Epoche (1970-01-01T00:00:00Z) dargestellt.	Nein

Andere Standardansprüche wie family_name, given_name, middle_name, nickname, preferred_username, profile, website, gender, birthdate, zoneinfo und locale werden ebenfalls im profile-Scope enthalten sein, ohne dass der userinfo-Endpunkt angefordert werden muss. Ein Unterschied im Vergleich zu den oben genannten Ansprüchen besteht darin, dass diese Ansprüche nur zurückgegeben werden, wenn ihre Werte nicht leer sind, während die oben genannten Ansprüche null zurückgeben, wenn die Werte leer sind.

hinweis

Im Gegensatz zu den Standardansprüchen verwenden die Ansprüche created_at und updated_at Millisekunden anstelle von Sekunden.

email

Anspruchsname	Typ	Beschreibung	Benötigt userinfo?
email	`string`	Die E-Mail-Adresse des Benutzers	Nein
email_verified	`boolean`	Ob die E-Mail-Adresse verifiziert wurde	Nein

phone

Anspruchsname	Typ	Beschreibung	Benötigt userinfo?
phone_number	`string`	Die Telefonnummer des Benutzers	Nein
phone_number_verified	`boolean`	Ob die Telefonnummer verifiziert wurde	Nein

address

Bitte siehe OpenID Connect Core 1.0 für die Details des Adressanspruchs.

custom_data

Anspruchsname	Typ	Beschreibung	Benötigt userinfo?
custom_data	`object`	Die benutzerdefinierten Daten des Benutzers	Ja

identities

Anspruchsname	Typ	Beschreibung	Benötigt userinfo?
identities	`object`	Die verknüpften Identitäten des Benutzers	Ja
sso_identities	`array`	Die verknüpften SSO-Identitäten des Benutzers	Ja

urn:logto:scope:organizations

Anspruchsname	Typ	Beschreibung	Benötigt userinfo?
organizations	`string[]`	Die Organisations-IDs, denen der Benutzer angehört	Nein
organization_data	`object[]`	Die Organisationsdaten, denen der Benutzer angehört	Ja

urn:logto:scope:organization_roles

Anspruchsname	Typ	Beschreibung	Benötigt userinfo?
organization_roles	`string[]`	Die Organisationsrollen, denen der Benutzer angehört, im Format `<organization_id>:<role_name>`	Nein

In Anbetracht der Leistung und der Datengröße bedeutet "Benötigt userinfo?" "Ja", dass der Anspruch nicht im ID-Token angezeigt wird, sondern in der Antwort des userinfo-Endpunkts zurückgegeben wird.

API-Ressourcen und Organisationen

Wir empfehlen, zuerst 🔐 Rollenbasierte Zugangskontrolle (RBAC) zu lesen, um die grundlegenden Konzepte von Logto RBAC zu verstehen und wie man API-Ressourcen richtig einrichtet.

Logto-Client konfigurieren

Sobald du die API-Ressourcen eingerichtet hast, kannst du sie bei der Konfiguration von Logto in deiner App hinzufügen:

nuxt.config.ts
export default defineNuxtConfig({
  logto: {
    resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'], // API-Ressourcen hinzufügen
    // ...other configs
  },
});

Jede API-Ressource hat ihre eigenen Berechtigungen (Berechtigungen).

Zum Beispiel hat die Ressource https://shopping.your-app.com/api die Berechtigungen shopping:read und shopping:write, und die Ressource https://store.your-app.com/api hat die Berechtigungen store:read und store:write.

Um diese Berechtigungen anzufordern, kannst du sie bei der Konfiguration von Logto in deiner App hinzufügen:

nuxt.config.ts
export default defineNuxtConfig({
  logto: {
    scopes: ['shopping:read', 'shopping:write', 'store:read', 'store:write'],
    resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
    // ...other configs
  },
});

Du wirst bemerken, dass Berechtigungen separat von API-Ressourcen definiert sind. Dies liegt daran, dass Resource Indicators for OAuth 2.0 spezifiziert, dass die endgültigen Berechtigungen für die Anfrage das kartesische Produkt aller Berechtigungen bei allen Zielservices sein werden.

Somit können im obigen Fall die Berechtigungen aus der Definition in Logto vereinfacht werden, beide API-Ressourcen können read und write Berechtigungen ohne Präfix haben. Dann, in der Logto-Konfiguration:

nuxt.config.ts
export default defineNuxtConfig({
  logto: {
    scopes: ['read', 'write'],
    resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
    // ...other configs
  },
});

Für jede API-Ressource wird sowohl read als auch write Berechtigungen angefordert.

hinweis

Es ist in Ordnung, Berechtigungen anzufordern, die in den API-Ressourcen nicht definiert sind. Zum Beispiel kannst du die Berechtigung email anfordern, auch wenn die API-Ressourcen die Berechtigung email nicht verfügbar haben. Nicht verfügbare Berechtigungen werden sicher ignoriert.

Nach der erfolgreichen Anmeldung wird Logto die entsprechenden Berechtigungen an API-Ressourcen gemäß den Rollen des Benutzers ausstellen.

Zugangstoken für die API-Ressource abrufen

Um das Zugangstoken für eine spezifische API-Ressource abzurufen, kannst du die Methode getAccessToken verwenden:

index.vue
<script setup lang="ts">
  // Ein Composable, um auf den Logto-Client zuzugreifen
  const client = useLogtoClient();
  // Das Zugangstoken global verfügbar machen
  const accessToken = useState<string | undefined>('access-token');

  // Einmal auf der Serverseite aufrufen
  await callOnce(async () => {
    if (!client) {
      throw new Error('Logto client is not available');
    }

    if (!(await client.isAuthenticated())) {
      return;
    }

    try {
      accessToken.value = await client.getAccessToken('https://shopping.your-app.com/api');
    } catch (error) {
      console.error('Failed to get access token', error);
    }
  });
</script>

Diese Methode gibt ein JWT-Zugangstoken zurück, das verwendet werden kann, um auf die API-Ressource zuzugreifen, wenn der Benutzer die entsprechenden Berechtigungen hat. Wenn das aktuell zwischengespeicherte Zugangstoken abgelaufen ist, versucht diese Methode automatisch, ein Auffrischungstoken zu verwenden, um ein neues Zugangstoken zu erhalten.

Organisationstokens abrufen

Wenn Organisationen neu für dich sind, lies bitte 🏢 Organisationen (Multi-Tenancy), um loszulegen.

Du musst die Berechtigung UserScope.Organizations hinzufügen, wenn du den Logto-Client konfigurierst:

nuxt.config.ts
import { UserScope } from '@logto/nuxt';

export default defineNuxtConfig({
  logto: {
    scopes: [UserScope.Organizations],
    // ...other configs
  },
});

Sobald der Benutzer angemeldet ist, kannst du das Organisationstoken für den Benutzer abrufen:

index.vue
const token = await client.getOrganizationToken(organizationId);

Organisations-API-Ressourcen

Um ein Zugangstoken für eine API-Ressource in einer Organisation abzurufen, kannst du die Methode getAccessToken mit sowohl der API-Ressource als auch der Organisations-ID als Parameter verwenden:

index.vue
const accessToken = await client.getAccessToken(
  'https://shopping.your-app.com/api',
  organizationId
);

Weiterführende Lektüre

Endbenutzerflüsse: Authentifizierungsflüsse, Kontoflüsse und Organisationsflüsse Connectors konfigurieren Schütze deine API

Voraussetzungen​

Installation​

Integration​

Logto-Modul registrieren​

Redirect-URIs konfigurieren​

Redirect-URIs konfigurieren​

Callback behandeln​

Anmeldung und Abmeldung implementieren​

Checkpoint: Teste deine Anwendung​

Benutzerinformationen abrufen​

Benutzerinformationen anzeigen​

Zusätzliche Ansprüche anfordern​

Ansprüche, die Netzwerk-Anfragen benötigen​

Benutzerinformationen manuell abrufen​

Berechtigungen und Ansprüche​

API-Ressourcen und Organisationen​

Logto-Client konfigurieren​

Zugangstoken für die API-Ressource abrufen​

Organisationstokens abrufen​

Organisations-API-Ressourcen​

Weiterführende Lektüre​

Voraussetzungen

Installation

Integration

Logto-Modul registrieren

Redirect-URIs konfigurieren

Redirect-URIs konfigurieren

Callback behandeln

Anmeldung und Abmeldung implementieren

Checkpoint: Teste deine Anwendung

Benutzerinformationen abrufen

Benutzerinformationen anzeigen

Zusätzliche Ansprüche anfordern

Ansprüche, die Netzwerk-Anfragen benötigen

Benutzerinformationen manuell abrufen

Berechtigungen und Ansprüche

API-Ressourcen und Organisationen

Logto-Client konfigurieren

Zugangstoken für die API-Ressource abrufen

Organisationstokens abrufen

Organisations-API-Ressourcen

Weiterführende Lektüre