developers

B2B SaaSアプリケーションにおけるユーザーオンボーディング戦略

Auth0を使用して効果的なB2B SaaSユーザーオンボーディング戦略を実装します。セルフサービス、管理者によるプロビジョニング、JITフローに加え、Blazorでの招待の例について学びます。

Andrea Chiarelli

Principal Developer Advocate

Jul 14, 2025 • 3 min read

本記事は 2025年7月14日に公開された「User Onboarding Strategies in a B2B SaaS Application」を機械翻訳した記事です。

B2B SaaSアプリケーションを開発する開発者にとって、シームレスなユーザーオンボーディング体験は、顧客満足度と製品導入において極めて重要です。煩雑で複雑なオンボーディングプロセスは、フラストレーションや顧客離れにつながる可能性がありますが、スムーズで直感的なプロセスは、長期的で良好な顧客関係の土台を築きます。

本記事では、B2B SaaSアプリケーション向けのさまざまなユーザーオンボーディング戦略を、Auth0が提供するソリューションに焦点を当てて探ります。さまざまなオンボーディングフローを掘り下げ、Blazorアプリケーションでメンバー招待を実装する方法に関する実践的なガイドを提供します。

ユーザーオンボーディング戦略

B2B SaaSアプリケーションにユーザーをオンボーディングする際、万能な解決策はありません。最善のアプローチは、特定のアプリケーション、顧客のニーズ、そして技術的な能力によって異なります。Auth0 Organizationsは、さまざまなオンボーディングモデルをサポートする柔軟性を提供します。

セルフサービス vs. 管理者によるプロビジョニング

ユーザーオンボーディングにおける基本的な選択肢は、セルフサービスと管理者主導のプロビジョニングです。

  • セルフサービス: セルフサービスモデルでは、ユーザーは自分自身でアプリケーションにサインアップできます。これは、摩擦のないトライアル体験を提供したいアプリケーションで一般的なアプローチです。管理を維持するために、顧客組織の管理者が新規登録を承認する必要がある承認ワークフローを実装できます。
  • 管理者によるプロビジョニング: 管理者プロビジョニングモデルでは、顧客組織の管理者がユーザーをアプリケーションに招待します。顧客はアプリケーションにアクセスできるユーザーをより詳細に制御でき、エンタープライズ環境では一般的な要件です。

Auth0 Organizationsを使用したオンボーディングフロー

Auth0 Organizationsを使用すると、B2Bの顧客をAuth0テナント内で個別のエンティティとしてモデル化できます。これにより、ユーザー、接続、ポリシーをOrganizationごとに管理できます。Auth0 Organizationsで実装できる一般的なユーザーオンボーディングフローは、次の2つです。

  1. 招待フロー: 顧客組織の管理者は、アプリケーション内でユーザーを自分のOrganizationに招待できます。ユーザーは招待リンクが記載されたメールを受信します。リンクをクリックすると、サインアップまたはログインプロセスに誘導され、自動的に正しいOrganizationに追加されます。
  2. Just-in-Time (JIT) プロビジョニング: Azure ADやOktaなどの独自のIDプロバイダーを使用するエンタープライズ顧客には、JITプロビジョニングがしばしば好まれる方法です。JITを使用すると、ユーザーが企業のシングルサインオン (SSO) を通じて初めてログインした際に、アプリケーションにユーザーアカウントが自動的に作成されます。手動でのユーザー作成が不要になり、オンボーディングプロセスが効率化されます。

Organizationへのユーザー招待

一般的で効果的なオンボーディング戦略である招待フローを詳しく見ていきましょう。Auth0を使用すると、Auth0ダッシュボードまたはManagement APIのいずれかを使用して、メンバーをOrganizationに招待できます。

本記事の残りの部分では、新しいユーザーをプログラムでOrganizationに招待する方法を学びます。基本的に、招待プロセスは次の図のように機能します。

Auth0 Organizationsを使用したB2B SaaSアプリケーションの複数ステップにわたるユーザー招待プロセスを示す図
  1. 管理者がアプリケーションから招待を開始します。
  2. アプリケーションはAuth0 Management APIを使用してOrganizationの招待を作成します。
  3. Auth0は一意の招待リンクが記載されたメールをユーザーに送信します。
  4. ユーザーがリンクをクリックすると、アプリケーションのログインページにリダイレクトされます。
  5. ユーザーがサインアップまたはログインすると、自動的にOrganizationに追加されます。

このフローを実装するには、Auth0アプリケーション設定で「アプリケーションログインURI」を構成する必要があります。これは、アプリケーションで招待の承諾を処理するURLです。

詳細については、Organizationメンバーの招待に関するAuth0ドキュメントを参照してください。

ユーザー招待の実装

では、以前のAuth0ブログ記事で紹介したサンプルB2B Blazorアプリケーションに、Organizationメンバーを招待するサポートを追加する方法を見てみましょう。

Blazorアプリケーションでは、新規顧客がサブスクリプションを開始して新しいOrganizationを作成できますが、現在はAuth0ダッシュボード経由でのみ新規ユーザーを追加できます。これから実装する変更により、Organizationの管理者がアプリケーションから直接ユーザーを招待できるようになります。

前提条件

以前の記事に従ってサンプルアプリケーションをゼロから実装したくない場合は、次のコマンドを実行してダウンロードできます。

git clone --branch roles-organizations --single-branch https://github.com/andychiare/MyBlazorSaaS

付属のREADMEファイルの指示に従って、Auth0にアプリケーションを登録し、構成してください。Auth0アカウントをお持ちでない場合は、無料でサインアップできます。

アプリケーションがOrganizationへの参加招待を送信できるようにするには、新しい権限を追加する必要があります。

前述のREADMEファイルに従ってアプリケーションを構成したと仮定し、Auth0ダッシュボードに移動し、Applications > ApplicationsセクションでManagementClientアプリケーションを見つけます。

アプリケーションの構成ページで、APIsタブを選択し、Auth0 Management API項目の下の領域を展開します。次に、create:organization_invitations権限を選択し、Updateボタンをクリックして変更を保存します。

Leverage Auth0's authentication and authorization services in your .NET applications.

DOWNLOAD THE FREE EBOOK.NET Identity with Auth0

招待機能の実装

これで招待機能を実装する準備が整いました。最初のステップとして、MyBlazorSaaS/Components/Pages/Dashboardフォルダの下にInvite.razorという名前の新しいページを作成し、次のコードを追加します。

@page "/dashboard/users/invite"
@attribute [Authorize(Roles = "admin")]
@rendermode InteractiveServer

@using Auth0.ManagementApi
@using System.ComponentModel.DataAnnotations
@using Auth0.ManagementApi.Models
@using Microsoft.Extensions.Configuration

@inject IAuth0Management auth0Management
@inject IConfiguration Configuration

<h3>Invite a New User</h3>

<div>
 <div class="form-group row my-2">
   <label for="email" class="col-sm-4 col-form-label">EmailAddress</label>
   <div class="col-sm-6">
     <InputText
       type="email"
       @bind-Value="EmailAddress"
       id="email"
       class="form-control"/>
   </div>
 </div>

 <div class="form-group row my-2">
   <label for="role" class="col-sm-4 col-form-label">Role</label>
   <div class="col-sm-6">
     <InputSelect id="role" class="form-select" @bind-Value="RoleId">
           <option value="">Select a role...</option>
           @foreach (var role in availableRoles)
           {
               <option value="@role.Id">@role.Name</option>
           }
     </InputSelect>
   </div>
 </div>

 <button class="btn btn-primary" @onclick="HandleInvite">Send Invite</button>
</div>

@if (!string.IsNullOrWhiteSpace(successMessage)) {
 <div class="alert alert-success" role="alert">
   @successMessage
 </div>
}

@if (!string.IsNullOrWhiteSpace(errorMessage)) {
 <div class="alert alert-danger" role="alert">
   @errorMessage
 </div>
}

これはユーザー招待ページのUI部分です。相対パスは/dashboard/users/inviteで、管理者のみがアクセスできます。新規ユーザーのメールアドレス用のテキストボックスと、ユーザーに割り当て可能なロールを持つセレクトボックスを定義します。最後の2つのifステートメントは、成功メッセージとエラーメッセージの表示を制御します。

今回はフォームから送信されたデータに対するデータ検証は行いませんが、プロダクション用コードではデータ検証を実施してください。

このページのレンダリングは次の画像のようになります。

B2B SaaS Blazorアプリケーションのユーザーオンボーディング招待フォーム。メールアドレスとロールのフィールド

次に、既存のコードの直後に次のコードをInvite.razorページに追加して、このUIの背後にある動作を実装します。

// ...existing code...

@code {
 [CascadingParameter]
 private Task<AuthenticationState>? authenticationState { get; set; }
 private ManagementApiClient? managementClient;
 private string EmailAddress = "";
 private string RoleId = "";
 private string OrganizationId = "";
 private string OrganizationName = "";
 private string successMessage = "";
 private string errorMessage = "";
 private IEnumerable<Role>? availableRoles = [];


 protected override async Task OnInitializedAsync()
 {
   if (authenticationState is not null)
   {
     var state = await authenticationState;

     if (state.User?.Identity?.IsAuthenticated??false)
     {
       OrganizationId = state.User?.FindFirst(c => c.Type == "org_id")?.Value??String.Empty;
       if (!string.IsNullOrEmpty(OrganizationId))
       {
         managementClient = await auth0Management.getClient();
         var organization = await managementClient.Organizations.GetAsync(OrganizationId);
         OrganizationName = organization.DisplayName;

         availableRoles = await managementClient.Roles.GetAllAsync(new GetRolesRequest());
       }
     }
   }
 }

   private async Task HandleInvite()
   {
       try
       {
           var inviterName = $"{OrganizationName} Admin";

           var invitation = new OrganizationCreateInvitationRequest
           {
               Inviter = new OrganizationInvitationInviter { Name = inviterName },
               Invitee = new OrganizationInvitationInvitee { Email = EmailAddress },
               ClientId = Configuration["Auth0:ClientId"],
               Roles = new List<string> { RoleId }
           };

           await managementClient.Organizations.CreateInvitationAsync(OrganizationId, invitation);

           successMessage = $"Invitation sent successfully to {EmailAddress}.";

           EmailAddress = "";
           RoleId = "";
       }
       catch (Exception ex)
       {
           errorMessage = $"Error sending invitation: {ex.Message}";
       }
   }
}

OnInitializedAsync()メソッドは、招待作成の準備をします。現在のOrganizationのIDと名前を取得し、Auth0 Managementクライアントのインスタンスを取得し、セレクトボックスに表示するユーザーロールを読み込みます。 「Send Invite」ボタンによってトリガーされるHandleInvite()メソッドは、実際に招待を作成してユーザーに送信します。OrganizationCreateInvitationRequestクラスのインスタンスを介して招待リクエストを準備し、CreateInvitationAsync()メソッドを介してユーザーに送信します。

招待の処理

HandleInvite()メソッドで作成された招待インスタンスには、他のパラメータの中でもアプリケーションのクライアントIDの値が必要であることに注意してください。これは、前述のアプリケーションのログインエンドポイントを解決するために必要です。

ユーザーが招待リンク付きのメールを受信すると、そのエンドポイントに移動して招待を承諾し、Organizationにサインアップする必要があります。そのため、アプリケーションはユーザーオンボーディングを完了するために招待を処理しなければなりません。幸いなことに、使用しているBlazorサンプルアプリにはすでに実装されています。

これに関する詳細については、ブログ記事Auth0 OrganizationsをB2B Blazor Webアプリに追加する方法の「Manage User Invitations」セクションを参照してください。

仕上げ

Invite.razorページをOrganizationの管理者がアクセスできるようにするには、Blazorアプリケーションの現在のシンプルなダッシュボードページを修正する必要があります。管理者がInvite.razorページに移動できるボタンを追加します。 MyBlazorSaaS/Components/Pages/DashboardフォルダにあるHome.razorページを開き、以下で強調表示されている変更を適用します。

@page "/dashboard"
@attribute [Authorize(Roles = "admin")]
@* 👇 new code *@
@rendermode InteractiveServer

@inject IAuth0Management auth0Management
@* 👇 new code *@
@inject NavigationManager navManager

<PageTitle>Dashboard</PageTitle>

<h1>Admin dashboard</h1>

 <div>
   @* ...existing code... *@
 </div>
@* 👇 new code *@
 <div class="form-group row my-2">
   <div class="col-sm-4"></div>
   <div class="col-sm-6">
     <button class="btn btn-primary" 
             @onclick="@(() => navManager.NavigateTo("/dashboard/users/invite"))">
            Invite a new user
      </button>
   </div>
 </div>
</div>
@* 👆 new code *@

@* ...existing code... *@

最初の変更は、ページのレンダリングモードに関するものです。管理者がボタンをクリックして招待ページへ移動できるようにするため、インタラクティブ性を有効にする必要があります。 次に、NavigationManagerサービスを注入してページのナビゲーションを有効にしました。 最後に、招待ページに移動するためのボタンを表示するセクションを追加しました。

次のように表示されます。

B2B SaaSアプリケーションの管理者ダッシュボード。簡素化されたユーザーオンボーディングのために新しいユーザーを招待するボタンが表示されている

これで、招待によるユーザーオンボーディングをテストする準備がすべて整いました。

まとめ

適切なユーザーオンボーディング戦略を選択することは、B2B SaaSアプリケーションにとって重要な決定です。Auth0の強力で柔軟なOrganizations機能を活用することで、顧客の多様なニーズに応えるさまざまなオンボーディングフローを実装できます。手動の招待プロセス、セルフサービスモデル、または完全に自動化されたJITプロビジョニングワークフローのいずれを選択する場合でも、Auth0はユーザーにシームレスで安全なオンボーディング体験を作成するために必要なツールを提供します。

本記事では、.NET、特にBlazorフレームワークでの招待によるユーザーオンボーディングの実装方法を示しましたが、他のユーザーオンボーディングのアプローチや実装もぜひ探求してください。たとえば、SaaStartアプリには、Next.jsでの招待オンボーディングの実装が含まれています。

本記事で作成したBlazorプロジェクトの最終的なコードは、このGitHubリポジトリからダウンロードできます。