Angular 애플리케이션에 인증 (Authentication)을 추가하세요

이 가이드에서는 Logto Angular SDK v2를 애플리케이션에 통합하는 방법을 안내합니다.

팁:

이 가이드는 Angular 20을 지원하고 의존성 주입 및 Signals를 제공하는 1st-party @logto/angular v2 SDK를 사용합니다.
샘플 프로젝트는 SDK 저장소에서 확인할 수 있습니다.

사전 준비 사항

Logto Cloud 계정 또는 셀프 호스팅 Logto.
Logto Console에서 생성된 싱글 페이지 애플리케이션 (SPA).
Angular 20 프로젝트.

설치

선호하는 패키지 관리자를 통해 Logto SDK를 설치하세요:

npm
pnpm
yarn

npm i @logto/angular

pnpm add @logto/angular

yarn add @logto/angular

통합

Logto 프로바이더 초기화

Angular 프로젝트에서 app.config.ts에 provideLogto와 애플리케이션 라우트를 등록하세요:

app/app.config.ts
import { type ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideLogto } from '@logto/angular';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLogto({
      endpoint: '<your-logto-endpoint>',
      appId: '<your-app-id>',
    }),
    provideRouter(routes),
    // ...other providers
  ],
};

provideLogto는 브라우저가 처음 렌더링된 후 인증 (Authentication) 상태를 자동으로 복원합니다. 컴포넌트에서 초기화 메서드를 호출할 필요가 없습니다.

노트:

서버 사이드 렌더링 (SSR)을 사용할 때, 인증 상태와 토큰은 브라우저에서만 사용할 수 있습니다. 초기화가 완료될 때까지 isLoading()을 사용하여 로딩 상태를 표시하세요. 서버 렌더링 중 인증된 데이터가 필요하다면 서버 또는 BFF SDK를 사용하세요.

리디렉션 URI 구성

자세한 내용을 살펴보기 전에, 최종 사용자 경험에 대한 간단한 개요를 소개합니다. 로그인 과정은 다음과 같이 단순화할 수 있습니다:

귀하의 앱이 로그인 메서드를 호출합니다.
사용자는 Logto 로그인 페이지로 리디렉션됩니다. 네이티브 앱의 경우, 시스템 브라우저가 열립니다.
사용자가 로그인하면, 다시 귀하의 앱(리디렉션 URI로 설정됨)으로 리디렉션됩니다.

이 인증 과정은 OpenID Connect (OIDC) 프로토콜을 따르며, Logto는 사용자 로그인을 보호하기 위해 엄격한 보안 조치를 시행합니다.
여러 앱이 있는 경우, 동일한 아이덴티티 제공자 (Logto)를 사용할 수 있습니다. 사용자가 한 앱에 로그인하면, Logto는 사용자가 다른 앱에 접근할 때 자동으로 로그인 과정을 완료합니다.

리디렉션 기반 로그인에 대한 이론적 배경과 이점에 대해 더 알고 싶다면, Logto 로그인 경험 설명을 참조하세요.

노트:

다음 코드 스니펫에서는, 여러분의 앱이 http://localhost:3000/ 에서 실행되고 있다고 가정합니다.

리디렉션 URI 구성

Logto Console의 애플리케이션 세부 정보 페이지로 이동합니다. 리디렉션 URI http://localhost:3000/callback를 추가하세요.

로그인과 마찬가지로, 사용자는 공유 세션에서 로그아웃하기 위해 Logto로 리디렉션되어야 합니다. 완료되면 사용자를 다시 웹사이트로 리디렉션하면 좋습니다. 예를 들어, 로그아웃 후 리디렉션 URI 섹션에 http://localhost:3000/를 추가하세요.

그런 다음 "저장"을 클릭하여 변경 사항을 저장하세요.

리디렉션 처리

Logto가 사용자를 애플리케이션으로 다시 리디렉션한 후 로그인을 완료하기 위해 콜백 컴포넌트를 만드세요. 콜백 처리가 브라우저에서만 실행되도록 afterNextRender를 사용합니다:

app/callback.component.ts
import { afterNextRender, Component, inject } from '@angular/core';
import { LogtoService } from '@logto/angular';

@Component({
  selector: 'app-callback',
  standalone: true,
  template: `
    @if (logto.error(); as error) {
      <p role="alert">{{ error.message }}</p>
    } @else {
      <p>로그인 완료 중...</p>
    }
  `,
})
export class CallbackComponent {
  readonly logto = inject(LogtoService);

  constructor() {
    afterNextRender(() => {
      void (async () => {
        const callbackUri = window.location.href;

        if (!(await this.logto.isSignInRedirected(callbackUri))) {
          window.location.replace(window.location.origin);
          return;
        }

        await this.logto.handleSignInCallback(callbackUri);
      })().catch(() => {
        // SDK는 콜백 오류를 템플릿에서 logto.error()로 노출합니다.
      });
    });
  }
}

isSignInRedirected()는 URL이 활성 로그인 세션과 일치하는지 확인합니다. 누군가 세션 없이 콜백 라우트를 방문하면, 이 예제는 로그인 완료를 시도하는 대신 애플리케이션 홈 페이지로 돌려보냅니다.

app.routes.ts에 콜백 라우트를 등록하세요. 이 경로는 리디렉션 URI의 경로와 일치해야 하며, 인증이 필요하지 않아야 합니다. 예를 들어, 리디렉션 URI가 /callback으로 끝난다면 callback을 사용하세요:

app/app.routes.ts
import { type Routes } from '@angular/router';

import { CallbackComponent } from './callback.component';

export const routes: Routes = [
  { path: 'callback', component: CallbackComponent },
  // ...other routes
];

루트 컴포넌트에는 다음 단계에서 보여주는 것처럼 이 라우트를 렌더링하기 위해 <router-outlet />이 필요합니다.

로그인 및 로그아웃을 시작하려면 LogtoService를 주입하세요. 등록한 리디렉션 URI를 이 메서드에 전달합니다. postRedirectUri는 로그인 콜백 처리 후 SDK가 이동할 위치를 지정합니다:

노트:

signIn()을 호출하기 전에, Admin Console 에서 Redirect URI 를 올바르게 구성했는지 확인하세요. :::

app/app.component.ts
import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { LogtoService } from '@logto/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
})
export class AppComponent {
  readonly logto = inject(LogtoService);

  async signIn() {
    await this.logto.signIn({
      redirectUri: 'http://localhost:3000/callback',
      postRedirectUri: window.location.origin,
    });
  }

  async signOut() {
    await this.logto.signOut('http://localhost:3000/');
  }
}

템플릿에서 isLoading(), isAuthenticated(), error() 시그널을 직접 읽을 수 있습니다:

app/app.component.html
@if (logto.error(); as error) {
<p role="alert">{{ error.message }}</p>
} @if (logto.isLoading()) {
<p>로딩 중...</p>
} @else if (logto.isAuthenticated()) {
<button type="button" (click)="signOut()">로그아웃</button>
} @else {
<button type="button" (click)="signIn()">로그인</button>
}

<router-outlet />

콜백이 사용자가 로그인되기 전에 렌더링될 수 있도록 <router-outlet />은 인증 조건문 바깥에 두세요.

.signOut()을 호출하면 메모리와 localStorage에 존재하는 모든 Logto 데이터를 삭제합니다.

체크포인트: 애플리케이션 테스트하기

이제 애플리케이션을 테스트할 수 있습니다:

애플리케이션을 실행하면 로그인 버튼이 표시됩니다.
로그인 버튼을 클릭하면 SDK가 로그인 프로세스를 초기화하고 Logto 로그인 페이지로 리디렉션됩니다.
로그인 후, 애플리케이션으로 다시 리디렉션되어 로그아웃 버튼이 표시됩니다.
로그아웃 버튼을 클릭하여 토큰 저장소를 지우고 로그아웃합니다.

사용자 정보 가져오기

사용자 정보 표시하기

사용자 정보를 표시하려면, 추가 네트워크 요청 없이 ID 토큰에서 클레임 (Claim)을 읽기 위해 getIdTokenClaims()를 사용하세요. 기존 세션이 복원될 때를 포함하여 isAuthenticated()가 true가 될 때 클레임을 로드하도록 AppComponent에 effect를 추가하세요. 결과를 표시하려면 JsonPipe를 import 하세요:

app/app.component.ts
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(() => {
          // SDK는 템플릿에서 logto.error()를 통해 에러를 노출합니다.
        });
    });
  }

  // ...이전 단계의 signIn() 및 signOut() 메서드를 유지하세요
}

템플릿의 logto.isAuthenticated() 분기 내에 다음을 추가하세요:

app/app.component.html
@if (user(); as claims) {
<pre>{{ claims | json }}</pre>
}

추가 클레임 (Claim) 요청하기

getIdTokenClaims()에서 반환된 객체에 일부 사용자 정보가 누락된 것을 발견할 수 있습니다. 이는 OAuth 2.0 및 OpenID Connect (OIDC)가 최소 권한 원칙 (PoLP)을 따르도록 설계되었기 때문이며, Logto는 이러한 표준을 기반으로 구축되었습니다.

기본적으로 제한된 클레임 (Claim)만 반환됩니다. 더 많은 정보를 원하시면, 추가적인 스코프 (Scope)를 요청하여 더 많은 클레임에 접근할 수 있습니다.

정보:

"클레임 (Claim)"은 주체에 대해 주장하는 내용이며, "스코프 (Scope)"는 클레임의 그룹입니다. 현재의 경우, 클레임은 사용자에 대한 정보입니다.

다음은 스코프 - 클레임 관계의 비규범적 예시입니다:

팁:

"sub" 클레임은 "주체"를 의미하며, 이는 사용자의 고유 식별자 (즉, 사용자 ID)입니다.

Logto SDK는 항상 세 가지 스코프를 요청합니다: openid, profile, 그리고 offline_access.

스코프 (Scope)를 provideLogto 설정에 추가하세요:

app/app.config.ts
import { type ApplicationConfig } from '@angular/core';
import { provideLogto, UserScope } from '@logto/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLogto({
      endpoint: '<your-logto-endpoint>',
      appId: '<your-app-id>',
      scopes: [
        UserScope.Email,
        UserScope.Phone,
        UserScope.CustomData,
        UserScope.Identities,
        UserScope.Organizations,
      ],
    }),
    // ...다른 providers
  ],
};

스코프를 변경한 후 다시 로그인하세요. email 및 phone_number와 같은 추가 ID 토큰 클레임 (Claim)은 getIdTokenClaims()에서 사용할 수 있으며, 위 예시에서 표시됩니다.

네트워크 요청이 필요한 클레임

ID 토큰의 비대화를 방지하기 위해, 일부 클레임은 네트워크 요청을 통해 가져와야 합니다. 예를 들어, custom_data 클레임은 스코프에서 요청되더라도 사용자 객체에 포함되지 않습니다. 이러한 클레임에 접근하려면, fetchUserInfo() 메서드를 사용할 수 있습니다:

app/app.component.ts
// 이 메서드를 AppComponent에 추가하고 로그인 후 호출하세요.
async loadUserInfo() {
const userInfo = await this.logto.fetchUserInfo();
// 이제 userInfo.custom_data, userInfo.identities 등에도 접근할 수 있습니다.
return userInfo;
}

이 메서드는 userinfo 엔드포인트에 요청하여 사용자 정보를 가져옵니다. 사용 가능한 스코프와 클레임에 대해 더 알고 싶다면, 스코프와 클레임 섹션을 참조하세요.

fetchUserInfo()는 API 리소스 액세스 토큰과 함께 사용할 수 있습니다. resources를 설정해도 SDK가 사용자 정보를 요청하는 것을 막지 않습니다.

스코프 (Scope)와 클레임 (Claim)

Logto는 OIDC 스코프 (Scope) 및 클레임 (Claim) 규칙을 사용하여 ID 토큰 및 OIDC userinfo 엔드포인트에서 사용자 정보를 가져오기 위한 스코프 (Scope)와 클레임 (Claim)을 정의합니다. "스코프 (Scope)"와 "클레임 (Claim)" 모두 OAuth 2.0 및 OpenID Connect (OIDC) 명세에서 온 용어입니다.

표준 OIDC 클레임 (Claim)의 경우, ID 토큰에 포함되는지는 요청된 스코프 (Scope)에 의해 엄격하게 결정됩니다. 확장 클레임 (예: custom_data 및 organizations)은 커스텀 ID 토큰 설정을 통해 ID 토큰에 추가로 포함되도록 구성할 수 있습니다.

지원되는 스코프와 해당 클레임(Claim)의 목록은 다음과 같습니다:

표준 OIDC 스코프

openid (기본값)

클레임(Claim) 이름	타입	설명
sub	`string`	사용자의 고유 식별자

profile (기본값)

클레임(Claim) 이름	타입	설명
name	`string`	사용자의 전체 이름
username	`string`	사용자의 사용자명
picture	`string`	최종 사용자의 프로필 사진 URL. 이 URL은 이미지 파일(예: PNG, JPEG, GIF 이미지 파일)을 가리켜야 하며, 이미지를 포함한 웹 페이지가 아니어야 합니다. 이 URL은 최종 사용자를 설명할 때 표시하기에 적합한 프로필 사진을 명확히 참조해야 하며, 최종 사용자가 임의로 촬영한 사진이 아니어야 합니다.
created_at	`number`	최종 사용자가 생성된 시간. 시간은 Unix epoch (1970-01-01T00:00:00Z) 이후 밀리초로 표시됩니다.
updated_at	`number`	최종 사용자의 정보가 마지막으로 업데이트된 시간. 시간은 Unix epoch (1970-01-01T00:00:00Z) 이후 밀리초로 표시됩니다.

기타 표준 클레임(Claim)에는 family_name, given_name, middle_name, nickname, preferred_username, profile, website, gender, birthdate, zoneinfo, locale 등이 있으며, 이들은 userinfo 엔드포인트를 요청하지 않아도 profile 스코프에 포함됩니다. 위의 클레임과의 차이점은, 이 클레임들은 값이 비어 있지 않을 때만 반환되며, 위의 클레임들은 값이 비어 있으면 null을 반환합니다.

노트:

표준 클레임(Claim)과 달리, created_at 및 updated_at 클레임은 초 단위가 아닌 밀리초 단위를 사용합니다.

email

클레임(Claim) 이름	타입	설명
email	`string`	사용자의 이메일 주소
email_verified	`boolean`	이메일 주소가 인증되었는지 여부

phone

클레임(Claim) 이름	타입	설명
phone_number	`string`	사용자의 전화번호
phone_number_verified	`boolean`	전화번호가 인증되었는지 여부

address

주소 클레임(Claim)의 세부 사항은 OpenID Connect Core 1.0 을 참조하세요.

정보:

**(기본값)**으로 표시된 스코프는 항상 Logto SDK에서 요청합니다. 표준 OIDC 스코프의 클레임(Claim)은 해당 스코프가 요청될 때 항상 ID 토큰 (ID token)에 포함되며, 비활성화할 수 없습니다.

확장 스코프

다음 스코프는 Logto에서 확장한 것으로, userinfo 엔드포인트를 통해 클레임(Claim)을 반환합니다. 이 클레임들은 Console > Custom JWT를 통해 ID 토큰 (ID token)에 직접 포함되도록 설정할 수도 있습니다. 자세한 내용은 커스텀 ID 토큰을 참고하세요.

custom_data

클레임(Claim) 이름	타입	설명	기본적으로 ID 토큰에 포함됨
custom_data	`object`	사용자의 커스텀 데이터

identities

클레임(Claim) 이름	타입	설명	기본적으로 ID 토큰에 포함됨
identities	`object`	사용자의 연결된 아이덴티티
sso_identities	`array`	사용자의 연결된 SSO 아이덴티티

roles

클레임(Claim) 이름	타입	설명	기본적으로 ID 토큰에 포함됨
roles	`string[]`	사용자의 역할 (Role)	✅

urn:logto:scope:organizations

클레임(Claim) 이름	타입	설명	기본적으로 ID 토큰에 포함됨
organizations	`string[]`	사용자가 속한 조직 (Organization) ID	✅
organization_data	`object[]`	사용자가 속한 조직 (Organization) 데이터

노트:

이러한 조직 (Organization) 클레임(Claim)은 불투명 토큰 (Opaque token)을 사용할 때도 userinfo 엔드포인트를 통해 조회할 수 있습니다. 그러나 불투명 토큰 (Opaque token)은 조직 토큰 (Organization token)으로 사용되어 조직별 리소스에 접근할 수 없습니다. 자세한 내용은 불투명 토큰 (Opaque token)과 조직 (Organization)을 참고하세요.

urn:logto:scope:organization_roles

클레임(Claim) 이름	타입	설명	기본적으로 ID 토큰에 포함됨
organization_roles	`string[]`	사용자가 속한 조직 (Organization)의 역할 (Role), 형식: `<organization_id>:<role_name>`	✅

API 리소스

먼저 🔐 역할 기반 접근 제어 (RBAC)를 읽어 Logto RBAC의 기본 개념과 API 리소스를 적절히 설정하는 방법을 이해하는 것을 권장합니다.

Logto 클라이언트 구성하기

API 리소스를 설정한 후, 애플리케이션에서 Logto를 구성할 때 이를 추가할 수 있습니다:

app/app.config.ts
import { type ApplicationConfig } from '@angular/core';
import { provideLogto } from '@logto/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLogto({
      endpoint: '<your-logto-endpoint>',
      appId: '<your-app-id>',
      resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
    }),
    // ...other providers
  ],
};

각 API 리소스는 자체 권한 (스코프)을 가지고 있습니다.

예를 들어, https://shopping.your-app.com/api 리소스는 shopping:read 및 shopping:write 권한을 가지고 있으며, https://store.your-app.com/api 리소스는 store:read 및 store:write 권한을 가지고 있습니다.

이러한 권한을 요청하려면, 애플리케이션에서 Logto를 구성할 때 추가할 수 있습니다:

app/app.config.ts
import { type ApplicationConfig } from '@angular/core';
import { provideLogto } from '@logto/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLogto({
      endpoint: '<your-logto-endpoint>',
      appId: '<your-app-id>',
      scopes: ['shopping:read', 'shopping:write', 'store:read', 'store:write'],
      resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
    }),
    // ...other providers
  ],
};

스코프가 API 리소스와 별도로 정의된 것을 알 수 있습니다. 이는 OAuth 2.0을 위한 리소스 지표가 요청의 최종 스코프가 모든 대상 서비스의 모든 스코프의 데카르트 곱이 될 것이라고 명시하기 때문입니다.

따라서 위의 경우, Logto에서 정의된 스코프를 단순화할 수 있으며, 두 API 리소스 모두 접두사 없이 read 및 write 스코프를 가질 수 있습니다. 그런 다음, Logto 구성에서:

app/app.config.ts
import { type ApplicationConfig } from '@angular/core';
import { provideLogto } from '@logto/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLogto({
      endpoint: '<your-logto-endpoint>',
      appId: '<your-app-id>',
      scopes: ['read', 'write'], // 스코프 (Scope) 예시
      resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'], // API 리소스 예시
    }),
    // ...other providers
  ],
};

모든 API 리소스에 대해 read 및 write 스코프를 요청하게 됩니다.

노트:

API 리소스에 정의되지 않은 스코프를 요청해도 괜찮습니다. 예를 들어, API 리소스에 email 스코프가 없더라도 email 스코프를 요청할 수 있습니다. 사용 불가능한 스코프는 안전하게 무시됩니다.

성공적으로 로그인한 후, Logto는 사용자의 역할에 따라 API 리소스에 적절한 스코프를 발급합니다.

리소스 또는 스코프를 변경한 후에는 사용자가 업데이트된 구성을 인가 (Authorization)할 수 있도록 다시 로그인하세요.

API 리소스에 대한 액세스 토큰 가져오기

특정 API 리소스에 대한 액세스 토큰을 가져오려면 getAccessToken() 메서드를 사용할 수 있습니다:

app/api-resource.component.ts
import { Component, inject, signal } from '@angular/core';
import { LogtoService } from '@logto/angular';

@Component({
  selector: 'app-api-resource',
  standalone: true,
  template: `
    @if (logto.error(); as error) {
      <p role="alert">{{ error.message }}</p>
    }
    @if (logto.isAuthenticated()) {
      <button type="button" [disabled]="logto.isLoading()" (click)="loadAccessToken()">
        API 액세스 토큰(Access token) 가져오기
      </button>
      <pre>{{ accessToken() }}</pre>
    }
  `,
})
export class ApiResourceComponent {
  readonly logto = inject(LogtoService);
  readonly accessToken = signal('');

  async loadAccessToken() {
    this.accessToken.set(await this.logto.getAccessToken('https://shopping.your-app.com/api'));
  }
}

이 메서드는 사용자가 관련 권한을 가지고 있을 때 API 리소스에 접근할 수 있는 JWT 액세스 토큰을 반환합니다. 현재 캐시된 액세스 토큰이 만료된 경우, 이 메서드는 자동으로 리프레시 토큰을 사용하여 새로운 액세스 토큰을 얻으려고 시도합니다.

구성에서 사용한 정확한 리소스 식별자를 사용하세요. API 요청을 할 때마다 getAccessToken(resource)를 호출하면 SDK가 유효한 토큰을 반환하므로, 컴포넌트에 토큰을 무기한 보관하지 않아도 됩니다.

조직 토큰 가져오기

조직이 처음이라면, 시작하기 위해 🏢 조직 (다중 테넌시)을 읽어보세요.

Logto 클라이언트를 구성할 때 UserScope.Organizations 스코프를 추가해야 합니다:

app/app.config.ts
import { type ApplicationConfig } from '@angular/core';
import { provideLogto, UserScope } from '@logto/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLogto({
      endpoint: '<your-logto-endpoint>',
      appId: '<your-app-id>',
      scopes: [UserScope.Organizations], // 조직 (Organizations)에 대한 스코프를 요청합니다.
    }),
    // ...other providers
  ],
};

사용자가 로그인하면, 사용자에 대한 조직 토큰을 가져올 수 있습니다:

app/organizations.component.ts
import { Component, effect, inject, signal } from '@angular/core';
import { LogtoService } from '@logto/angular';

@Component({
  selector: 'app-organizations',
  standalone: true,
  template: `
    @if (logto.error(); as error) {
      <p role="alert">{{ error.message }}</p>
    }
    @if (logto.isAuthenticated()) {
      <ul>
        @for (organizationId of organizationIds(); track organizationId) {
          <li>
            <span>{{ organizationId }}</span>
            <button
              type="button"
              [disabled]="logto.isLoading()"
              (click)="loadOrganizationToken(organizationId)"
            >
              조직 토큰 (Organization token) 가져오기
            </button>
          </li>
        }
      </ul>
      <pre>{{ organizationToken() }}</pre>
    }
  `,
})
export class OrganizationsComponent {
  readonly logto = inject(LogtoService);
  readonly organizationIds = signal<string[]>([]);
  readonly organizationToken = signal('');

  constructor() {
    effect(() => {
      if (!this.logto.isAuthenticated()) {
        this.organizationIds.set([]);
        this.organizationToken.set('');
        return;
      }

      void this.logto
        .getIdTokenClaims()
        .then((claims) => {
          this.organizationIds.set(claims.organizations ?? []);
        })
        .catch(() => {
          // SDK는 템플릿에서 logto.error()를 통해 오류를 노출합니다.
        });
    });
  }

  async loadOrganizationToken(organizationId: string) {
    this.organizationToken.set(await this.logto.getOrganizationToken(organizationId));
  }
}

UserScope.Organizations를 기존 스코프와 병합하고, 구성을 업데이트한 후 다시 로그인하세요. getOrganizationToken(organizationId)는 선택한 Logto 조직에 대한 토큰을 반환하며, API 리소스 토큰이 필요할 때는 getAccessToken(resource)를 사용하세요.

액세스 토큰을 요청 헤더에 첨부하기

토큰을 Bearer 형식(Bearer YOUR_TOKEN)으로 Authorization HTTP 헤더에 넣으세요. 예를 들어, LogtoService를 주입받는 인증된 컴포넌트에 아래 메서드를 추가할 수 있습니다:

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();
}

노트:

예제에서는 fetch를 사용했습니다. Angular HttpClient를 사용하는 경우에도 동일하게 요청 옵션에 Authorization 헤더를 설정하세요.

추가 자료

엔드유저 플로우: 인증 (Authentication) 플로우, 계정 플로우, 조직 플로우 커넥터 구성하기 인가 (Authorization)

사전 준비 사항​

설치​

통합​

Logto 프로바이더 초기화​

리디렉션 URI 구성​

리디렉션 기반 로그인에 관하여​

리디렉션 URI 구성​

리디렉션 처리​

로그인 및 로그아웃 구현​

체크포인트: 애플리케이션 테스트하기​

사용자 정보 가져오기​

사용자 정보 표시하기​

추가 클레임 (Claim) 요청하기​

네트워크 요청이 필요한 클레임​

스코프 (Scope)와 클레임 (Claim)​

표준 OIDC 스코프​

확장 스코프​

API 리소스​

Logto 클라이언트 구성하기​

API 리소스에 대한 액세스 토큰 가져오기​

조직 토큰 가져오기​

액세스 토큰을 요청 헤더에 첨부하기​

추가 자료​

사전 준비 사항

설치

통합

Logto 프로바이더 초기화

리디렉션 URI 구성

리디렉션 기반 로그인에 관하여

리디렉션 URI 구성

리디렉션 처리

로그인 및 로그아웃 구현

체크포인트: 애플리케이션 테스트하기

사용자 정보 가져오기

사용자 정보 표시하기

추가 클레임 (Claim) 요청하기

네트워크 요청이 필요한 클레임

스코프 (Scope)와 클레임 (Claim)

표준 OIDC 스코프

확장 스코프

API 리소스

Logto 클라이언트 구성하기

API 리소스에 대한 액세스 토큰 가져오기

조직 토큰 가져오기

액세스 토큰을 요청 헤더에 첨부하기

추가 자료