---
title: "@vonvon-kit/angular"
description: "Angular 17+ スタンドアロンプロバイダー、RxJS サービス、関数型ルートガード、@vonvon-kit/core 上のスタンドアロンコンポーネントをサポート。"
locale: "ja"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/ja/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/angular

## 状態

Registry 状態: UNPUBLISHED。この SDK はリポジトリのソース checkout からのみインストールし、外部 package registry は使用しないでください。

パッケージステータス：**現行パッケージ**。Angular 17+ スタンドアロンプロバイダー、RxJS サービス、関数型ガード、スタンドアロンコンポーネントが実装済みです。本番インフラでの実際の IdP ラウンドトリップはまだ手動検証待ちです。

## プロバイダーの設定

`app.config.ts` で `provideVonvon` を呼び出します。`VONVON_CLIENT` インジェクショントークンを登録し、ブートストラップ時に `client.load()` を呼び出す `APP_INITIALIZER` を組み込みます。NgModule は不要です。

```ts
// app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideVonvon } from '@vonvon-kit/angular'

export const appConfig: ApplicationConfig = {
  providers: [
// Core auth endpoints must be served on this application's exact origin.
provideVonvon({ mode: 'same-origin' }),
  ],
}
```

## VonvonAuthService

```ts
import { Component, inject } from '@angular/core'
import { AsyncPipe } from '@angular/common'
import { VonvonAuthService } from '@vonvon-kit/angular'

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [AsyncPipe],
  template: `
@if (auth.isLoaded$ | async) {
  @if (auth.isSignedIn$ | async) {
    <span>{{ (auth.user$ | async)?.primaryEmailAddress }}</span>
  } @else {
    <a routerLink="/sign-in">Sign in</a>
  }
}
  `,
})
export class HeaderComponent {
  readonly auth = inject(VonvonAuthService)
}
```

## Angular シグナルブリッジ

テンプレート読み込み用に Observable をシグナルに変換するには、`@angular/core/rxjs-interop` の `toSignal()` を使用してください。

```ts
import { toSignal } from '@angular/core/rxjs-interop'
import { inject } from '@angular/core'
import { VonvonAuthService } from '@vonvon-kit/angular'

@Component({ standalone: true, ... })
export class MyComponent {
  readonly #auth = inject(VonvonAuthService)
  readonly user = toSignal(this.#auth.user$, { initialValue: null })
}
```

## ルートガード

```ts
import { Routes } from '@angular/router'
import { authGuard, hasOrganizationGuard, hasPermissionGuard } from '@vonvon-kit/angular'

export const routes: Routes = [
  {
path: 'dashboard',
canActivate: [authGuard()],
loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent),
  },
  {
path: 'admin',
canActivate: [hasPermissionGuard('org:settings:write')],
loadComponent: () => import('./admin.component').then(m => m.AdminComponent),
  },
]
```

## スタンドアロンコンポーネント

```html
<!-- template -->
<vonvon-sign-in-button signInUrl="/sign-in" redirectUrl="/dashboard">Log in</vonvon-sign-in-button>
<vonvon-sign-out-button redirectUrl="/home">Log out</vonvon-sign-out-button>
```

## エクスポートされた API

| エクスポート | 種別 | 目的 |
| --- | --- | --- |
| `provideVonvon` | function | VONVON\_CLIENT シングルトンと APP\_INITIALIZER を登録します。ProvideVonvonOptions を受け入れます |
| `VONVON_CLIENT` | InjectionToken | 生の VonvonClient インスタンス。ほとんどのユースケースでは VonvonAuthService を優先してください |
| `VonvonAuthService` | サービス | RxJS Observable：state$、isLoaded$、isSignedIn$、user$、session$、organization$、および getToken、signOut、setActiveOrganization、setActiveSession |
| `authGuard` | CanActivateFn ファクトリー | ユーザーがサインインしていない場合に /sign-in へリダイレクトします |
| `hasOrganizationGuard` | CanActivateFn ファクトリー | アクティブな組織コンテキストが存在しない場合にリダイレクトします |
| `hasPermissionGuard` | CanActivateFn ファクトリー | ユーザーが指定された権限を持っていない場合にリダイレクトします |
| `SignInButton` | スタンドアロンコンポーネント | セレクター vonvon-sign-in-button。入力：signInUrl、redirectUrl、ariaLabel |
| `SignOutButton` | スタンドアロンコンポーネント | セレクター vonvon-sign-out-button。入力：sessionId、redirectUrl、ariaLabel。サインアウト中は aria-busy を表示します |

Source: https://vonvon.id/ja/sdks/angular/index.mdx