logto-io · charIeszhao · Sep 10, 2026 · Sep 10, 2026
diff --git a/...ocusaurus-plugin-content-docs/current/quick-starts/framework/angular/README.mdx b/...ocusaurus-plugin-content-docs/current/quick-starts/framework/angular/README.mdx
@@ -2,7 +2,7 @@
 slug: /quick-starts/angular
 sidebar_label: Angular
 sidebar_custom_props:
-  description: Angular ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.
+  description: Angular ist ein Framework zum Erstellen von Webanwendungen. (Angular is a framework for building web applications.)
 ---
 
 import FurtherReadings from '../../fragments/_further-readings.md';
@@ -13,14 +13,17 @@ import GuideTip from './_guide-tip.md';
 import Installation from './_installation.mdx';
 import Integration from './_integration.mdx';
 
-# Authentifizierung zu deiner Angular-Anwendung hinzufügen
+# Authentifizierung zu deiner Angular-Anwendung hinzufügen (Add authentication to your Angular application)
+
+Diese Anleitung zeigt dir, wie du das Logto Angular SDK v2 in deine Anwendung integrierst.
 
 <GuideTip />
 
 ## Voraussetzungen \{#prerequisites}
 
-- Ein [Logto Cloud](https://cloud.logto.io) Konto oder ein [selbstgehostetes Logto](/introduction/set-up-logto-oss).
-- Eine Logto Single-Page-Anwendung erstellt.
+- Ein [Logto Cloud](https://cloud.logto.io) Konto oder ein [selbst gehostetes Logto](/introduction/set-up-logto-oss).
+- Eine Single-Page-Anwendung (SPA), die in der Logto Console erstellt wurde.
+- Ein Angular 20 Projekt.
 
 ## Installation \{#installation}
 

diff --git a/...s-plugin-content-docs/current/quick-starts/framework/angular/_api-resources.mdx b/...s-plugin-content-docs/current/quick-starts/framework/angular/_api-resources.mdx
@@ -1,22 +1,67 @@
 import ApiResourcesDescription from '../../fragments/_api-resources-description.md';
 import ConfigApiResources from '../../fragments/_config-api-resources.mdx';
+import FetchAccessTokenForApiResources from '../../fragments/_fetch-access-token-for-api-resources.mdx';
+import FetchOrganizationTokenForUser from '../../fragments/_fetch-organization-token-for-user.mdx';
 
+import ConfigOrganizationCode from './code/_config-organization-code.md';
 import ConfigResourcesCode from './code/_config-resources-code.md';
 import ConfigResourcesWithScopesCode from './code/_config-resources-with-scopes-code.md';
-
-### Konfiguration von `angular-auth-oidc-client` für API-Ressource \{#configure-angular-auth-oidc-client-for-api-resource}
+import ConfigResourcesWithSharedScopesCode from './code/_config-resources-with-shared-scopes-code.md';
+import GetAccessTokenCode from './code/_get-access-token-code.md';
+import GetOrganizationAccessTokenCode from './code/_get-organization-access-token-code.md';
 
 <ApiResourcesDescription />
 
+### Logto-Client konfigurieren \{#configure-logto-client}
+
 <ConfigApiResources
   configResourcesCode={<ConfigResourcesCode />}
   configResourcesWithScopesCode={<ConfigResourcesWithScopesCode />}
+  configResourcesWithSharedScopesCode={<ConfigResourcesWithSharedScopesCode />}
 />
 
-Jetzt wird das Zugangstoken im JSON Web Token (JWT) Format anstelle eines zufälligen Strings (opakes Token) vorliegen.
+Melde dich nach Änderungen an den Ressourcen oder Berechtigungen erneut an, damit der Benutzer die aktualisierte Konfiguration autorisieren kann.
 
-:::warning
-Sowohl `autoUserInfo` als auch `renewUserInfoAfterTokenRenew` werden deaktiviert, wenn `resource` gesetzt ist. Dies liegt daran, dass das Zugangstoken für die spezifische API-Ressource und nicht für den User-Info-Endpunkt angefordert wird.
-:::
+### Zugangstoken für die API-Ressource abrufen \{#fetch-access-token-for-the-api-resource}
+
+<FetchAccessTokenForApiResources
+  getAccessTokenApi="getAccessToken()"
+  getAccessTokenCode={<GetAccessTokenCode />}
+/>
+
+Verwende den exakten Ressourcenbezeichner aus deiner Konfiguration. Rufe `getAccessToken(resource)` immer dann auf, wenn du eine API-Anfrage stellst, damit das SDK ein gültiges Token zurückgeben kann, anstatt ein Token unbegrenzt in deiner Komponente zu behalten.
+
+### Organisationstokens abrufen \{#fetch-organization-tokens}
+
+<FetchOrganizationTokenForUser
+  organizationScope="UserScope.Organizations"
+  configOrganizationCode={<ConfigOrganizationCode />}
+  getOrganizationAccessTokenCode={<GetOrganizationAccessTokenCode />}
+/>
+
+Füge `UserScope.Organizations` zu allen bestehenden Berechtigungen hinzu und melde dich nach der Aktualisierung der Konfiguration erneut an. `getOrganizationToken(organizationId)` gibt ein Token für die ausgewählte Logto-Organisation zurück; verwende `getAccessToken(resource)` für ein API-Ressourcen-Token.
+
+### Zugangstoken an Anfrage-Header anhängen \{#attach-access-token-to-request-headers}
+
+Platziere das Token im `Authorization` HTTP-Header im Bearer-Format (`Bearer YOUR_TOKEN`). Füge zum Beispiel diese Methode zu einer authentifizierten Komponente hinzu, die `LogtoService` injiziert:
 
-Derzeit unterstützen nur die offiziellen Logto SDKs die Möglichkeit, sowohl Benutzerinformationen als auch Zugangstokens für API-Ressourcen anzufordern. Wenn du beides anfordern musst, zögere bitte nicht, uns zu kontaktieren.
+```ts
+async fetchProducts() {
+  const accessToken = await this.logto.getAccessToken('https://shopping.your-app.com/api');
+  const response = await fetch('https://shopping.your-app.com/api/products', {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Request failed: ${response.status}`);
+  }
+
+  return response.json();
+}
+```
+
+:::note
+Das Beispiel verwendet `fetch`. Wenn du Angular `HttpClient` verwendest, setze denselben `Authorization`-Header in dessen Anfrageoptionen.
+:::
diff --git a/...n-content-docs/current/quick-starts/framework/angular/_get-user-information.mdx b/...n-content-docs/current/quick-starts/framework/angular/_get-user-information.mdx
@@ -5,130 +5,106 @@ import FindUserInfoMissing from '../../fragments/_find-user-info-missing.mdx';
 import ScopesAndClaims from '../../fragments/_scopes-and-claims.mdx';
 import ScopesAndClaimsIntroduction from '../../fragments/_scopes-claims-introduction.md';
 
-Sobald sich der Benutzer erfolgreich angemeldet hat, wird Logto ein [ID-Token](https://openid.net/specs/openid-connect-core-1_0.html#IDToken) ausstellen, das die Benutzerinformationsansprüche enthält. Das ID-Token ist ein JSON Web Token (JWT).
-
-Es ist wichtig zu beachten, dass die Benutzerinformationsansprüche, die abgerufen werden können, von den
-Berechtigungen 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](https://openid.net/specs/openid-connect-core-1_0.html#UserInfo) verfügbar (siehe die untenstehende Liste).
-
-Das `buildAngularAuthConfig()`-Utility aktiviert `autoUserInfo` und `renewUserInfoAfterTokenRenew`, wenn keine `resource` in der Konfiguration angegeben ist. Das bedeutet, dass Logto automatisch die Benutzerinformationen abruft, nachdem sich der Benutzer angemeldet hat, und die Benutzerinformationen erneuert, nachdem das Token erneuert wurde.
-
-:::info
-Um mehr über die Konfiguration der `angular-auth-oidc-client`-Bibliothek zu erfahren, siehe die [offizielle Dokumentation](https://angular-auth-oidc-client.com/).
-:::
-
 ### Benutzerinformationen anzeigen \{#display-user-information}
 
-Der `OidcSecurityService` bietet eine bequeme Möglichkeit, den Authentifizierungsstatus sowie die Benutzerinformationen zu abonnieren:
+Um die Informationen des Benutzers anzuzeigen, verwende `getIdTokenClaims()`, um Ansprüche (Claims) aus dem ID-Token ohne zusätzliche Netzwerkabfrage auszulesen. Füge deiner `AppComponent` einen `effect` hinzu, um die Ansprüche zu laden, sobald `isAuthenticated()` wahr wird, auch wenn eine bestehende Sitzung wiederhergestellt wird. Importiere `JsonPipe`, um das Ergebnis anzuzeigen:
 
 ```ts title="app/app.component.ts"
-import { OidcSecurityService } from 'angular-auth-oidc-client';
-import { decodeIdToken, type IdTokenClaims } from '@logto/js';
-
-export class AppComponent implements OnInit {
-  isAuthenticated = false;
-  idTokenClaims?: IdTokenClaims;
-  accessToken?: string;
-
-  constructor(public oidcSecurityService: OidcSecurityService) {}
-
-  ngOnInit() {
-    this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, idToken, accessToken }) => {
-      console.log('app authenticated', isAuthenticated, idToken);
-      this.isAuthenticated = isAuthenticated;
-      this.idTokenClaims = decodeIdToken(idToken);
-      this.accessToken = accessToken;
+// Importiere JsonPipe, um das Ergebnis als JSON anzuzeigen
+import { JsonPipe } from '@angular/common';
+import { Component, effect, inject, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { LogtoService, type IdTokenClaims } from '@logto/angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [JsonPipe, RouterOutlet],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  readonly logto = inject(LogtoService);
+  readonly user = signal<IdTokenClaims | undefined>(undefined);
+
+  constructor() {
+    effect(() => {
+      if (!this.logto.isAuthenticated()) {
+        this.user.set(undefined);
+        return;
+      }
+
+      void this.logto
+        .getIdTokenClaims()
+        .then((claims) => {
+          this.user.set(claims);
+        })
+        .catch(() => {
+          // Das SDK gibt den Fehler über logto.error() für das Template aus.
+        });
     });
   }
 
-  // ...andere Methoden
+  // ...behalte die Methoden signIn() und signOut() aus dem vorherigen Schritt bei
 }
 ```
 
-Und im Template verwenden:
+Füge Folgendes innerhalb des `logto.isAuthenticated()`-Zweigs deines Templates hinzu:
 
 ```html title="app/app.component.html"
-<button *ngIf="!isAuthenticated" (click)="signIn()">Anmelden</button>
-<ng-container *ngIf="isAuthenticated">
-  <pre>{{ idTokenClaims | json }}</pre>
-  <p>Zugangstoken: {{ accessToken }}</p>
-  <!-- ... -->
-  <button (click)="signOut()">Abmelden</button>
-</ng-container>
+@if (user(); as claims) {
+<pre>{{ claims | json }}</pre>
+}
 ```
 
 ### Zusätzliche Ansprüche anfordern \{#request-additional-claims}
 
-<FindUserInfoMissing method="idToken" />
+<FindUserInfoMissing method="getIdTokenClaims()" />
 
 <ScopesAndClaimsIntroduction />
 
-Um zusätzliche Berechtigungen anzufordern, kannst du die Auth-Provider-Konfigurationen anpassen:
+Füge die Berechtigungen (Scopes) zu deiner `provideLogto`-Konfiguration hinzu:
 
-```tsx title="app/app.config.ts"
-import { UserScope, buildAngularAuthConfig } from '@logto/js';
+```ts title="app/app.config.ts"
+import { type ApplicationConfig } from '@angular/core';
+import { provideLogto, UserScope } from '@logto/angular';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideHttpClient(withFetch()),
-    provideAuth({
-      config: buildAngularAuthConfig({
-        // ...andere Konfigurationen
-        // highlight-start
-        scopes: [
-          UserScope.Email,
-          UserScope.Phone,
-          UserScope.CustomData,
-          UserScope.Identities,
-          UserScope.Organizations,
-        ],
-        // highlight-end
-      }),
+    provideLogto({
+      endpoint: '<your-logto-endpoint>',
+      appId: '<your-app-id>',
+      scopes: [
+        UserScope.Email,
+        UserScope.Phone,
+        UserScope.CustomData,
+        UserScope.Identities,
+        UserScope.Organizations,
+      ],
     }),
-    // ...andere Provider
+    // ...weitere Provider
   ],
 };
 ```
 
-Dann kannst du auf die zusätzlichen Ansprüche im Rückgabewert von `idToken` zugreifen.
+Melde dich nach der Änderung der Berechtigungen erneut an. Die zusätzlichen ID-Token-Ansprüche wie `email` und `phone_number` sind dann über `getIdTokenClaims()` verfügbar und werden wie oben im Beispiel angezeigt.
 
-{/* eslint-disable prettier/prettier */}
 <ClaimsNeedNetworkRequest
-  type="option"
-  configOption="userData"
-  value="userData"
+  type="method"
+  method="fetchUserInfo()"
   codeSnippet={
-    <CodeBlock language="ts" title="app/app.component.ts">{`import { OidcSecurityService } from 'angular-auth-oidc-client';
-// highlight-next-line
-import { type UserInfoResponse } from '@logto/js';
-
-export class AppComponent implements OnInit {
-  isAuthenticated = false;
-  // highlight-next-line
-  userData?: UserInfoResponse;
-  accessToken?: string;
-
-  constructor(public oidcSecurityService: OidcSecurityService) {}
-
-  ngOnInit() {
-    this.oidcSecurityService
-      .checkAuth()
-      // highlight-next-line
-      .subscribe(({ isAuthenticated, userData, accessToken }) => {
-        console.log('app authenticated', isAuthenticated, idToken);
-        this.isAuthenticated = isAuthenticated;
-        // highlight-next-line
-        this.userData = userData;
-        this.accessToken = accessToken;
-      });
+    <CodeBlock
+      language="ts"
+      title="app/app.component.ts"
+    >{`// Füge diese Methode zur AppComponent hinzu und rufe sie nach der Anmeldung auf.
+async loadUserInfo() {
+  const userInfo = await this.logto.fetchUserInfo();
+  // Jetzt kannst du auf userInfo.custom_data, userInfo.identities usw. zugreifen.
+  return userInfo;
+}`}</CodeBlock>
   }
-
-  // ...andere Methoden
-}
-
-// Jetzt kannst du auf den Anspruch \`userData.custom_data\` zugreifen`}</CodeBlock>
-}
 />
-{/* eslint-enable prettier/prettier */}
+
+`fetchUserInfo()` kann zusammen mit API-Ressourcen-Zugangstokens verwendet werden. Die Konfiguration von `resources` verhindert nicht, dass das SDK Benutzerinformationen anfordert.
 
 ### Berechtigungen und Ansprüche \{#scopes-and-claims}
 

diff --git a/...saurus-plugin-content-docs/current/quick-starts/framework/angular/_guide-tip.md b/...saurus-plugin-content-docs/current/quick-starts/framework/angular/_guide-tip.md
@@ -1,6 +1,6 @@
 :::tip
 
-- Die folgende Demonstration basiert auf Angular 18.0.0 und [angular-auth-oidc-client](https://github.com/damienbod/angular-auth-oidc-client).
-- Das Beispielprojekt ist im [GitHub-Repository](https://github.com/logto-io/js/tree/master/packages/angular-sample) verfügbar.
+- Diese Anleitung verwendet das offizielle `@logto/angular` v2 SDK, das Angular 20 unterstützt und Dependency Injection sowie Signals bereitstellt.
+- Das Beispielprojekt ist in unserem [SDK-Repository](https://github.com/logto-io/js/tree/master/packages/angular-sample) verfügbar.
 
 :::
diff --git a/...us-plugin-content-docs/current/quick-starts/framework/angular/_installation.mdx b/...us-plugin-content-docs/current/quick-starts/framework/angular/_installation.mdx
@@ -1,30 +1,3 @@
-import TabItem from '@theme/TabItem';
-import Tabs from '@theme/Tabs';
+import NpmLikeInstallation from '../../fragments/_npm-like-installation.mdx';
 
-Installiere Logto JS Core SDK und die Angular OIDC Client-Bibliothek:
-
-<Tabs>
-
-  <TabItem value="npm" label="npm">
-
-```bash
-npm i @logto/js angular-auth-oidc-client
-```
-
-  </TabItem>
-  <TabItem value="pnpm" label="pnpm">
-
-```bash
-pnpm add @logto/js angular-auth-oidc-client
-```
-
-  </TabItem>
-  <TabItem value="yarn" label="yarn">
-
-```bash
-yarn add @logto/js angular-auth-oidc-client
-```
-
-  </TabItem>
-
-</Tabs>
+<NpmLikeInstallation packageName="@logto/angular" />