--- title: "セキュアかつスケーラブルなB2B SaaSアプリをReactで構築" description: "Auth0 Organizationsを活用し、マルチテナント型アプリのビジネスユーザーを認証、管理する方法" authors: - name: "Shreya Gupta" url: "https://auth0.com/blog/authors/shreya-gupta/" date: "Aug 29, 2024" category: "Developers,Tutorial,React" tags: ["organizations", "react", "auth0"] url: "https://auth0.com/blog/jp-build-a-secure-and-scalable-b2b-saas-app-in-react/" --- # セキュアかつスケーラブルなB2B SaaSアプリをReactで構築
このチュートリアルでは、Auth0 Organizations機能を使用します。この機能はAuth0 by Okta for Startupsプログラムで提供されているプランで利用できます。このプログラムはアーリーステージのスタートアップ企業が１年間、製品を無料で利用できます。
## 課題 タイトなスケジュールの開発者は、セキュアなソリューションを迅速に実装する必要があります。数週間、数か月、数年先まで反復可能なスケーラブルなインフラストラクチャを備えた製品を構築する必要があります。そして、刻々と変化する業界標準や規制を遵守する必要があります。
B2Bアプリケーションの構築には多くの技術的な課題が伴いますが、その中でも特に重要なのが [マルチテナントの構築方法](https://auth0.com/docs/get-started/auth0-overview/create-tenants/multi-tenant-apps-best-practices)です。 [マルチテナント](https://auth0.com/docs/get-started/auth0-overview/create-tenants/multi-tenant-apps-best-practices)は、サーバー上でソフトウェアの単一インスタンスを実行し、そのインスタンスに対して複数のユーザーのグループがアクセスできるようにしたものです。さまざまなビジネスコミュニティに対してこの仕組みを管理する場合、次の3点が考慮点として考えられます。 * ブランディングからSSOオプションまで、各ビジネスのログイン体験をカスタマイズすること * 各ビジネスのユーザーを管理し、特定の権限に基づいてアクセスを制限すること * 各企業が独自のメンバーを管理できるようにすること ## 解決策 Auth0 Organizationsは、認証の観点から見たマルチテナントのソリューションであり、開発者がビジネスユーザーを管理するための機能です。簡単に言うと、**各企業を「組織（Organization）」として捉え、それぞれの組織はメンバーが所属しています。各メンバーには権限を定義できるロールを設定できます。** ユーザーがアプリケーションにログインするとき、どのようにログインするかは、各ビジネスによって定義された要件に依存します。例えば、次のようにさまざまなニーズを持つ3社の顧客がいるとします。 * 組織Aは中小企業なので、Googleや他の[ソーシャルアイデンティティプロバイダー（IdP）](https://marketplace.auth0.com/features/social-connections)を使ってメンバーがログインすることに抵抗がない * 組織Bは大企業で、[エンタープライズIdP](https://marketplace.auth0.com/features/enterprise-connections)だけでなく、セキュリティの追加レイヤーとして多要素認証（MFA）の活用も期待している * 組織Cは、従業員が創業者一人だけのまったく新しい新興企業で、同社が求めているのはシームレスなエクスペリエンスである 通常のアプリユーザーは、アプリにログインし、いくつかの基本的なタスクを実行できる必要があります。また、新しいメンバーに招待状を送ったり、問題のあるメンバーを追い出したりするような、追加的な許可を持つ管理者の役割も区別する必要があります。 ![Your App](https://images.ctfassets.net/23aumh6u8s0i/4y486Q5HiJbXmlVq5k71pc/57ab4fbab5c49c769a442b8e781d624e/shreyapost.jpg) ## プロセス Auth0 Organizationsを使って可能性のあるソリューションはどのようなものか見ていきましょう（視覚的なチュートリアルについては、ビデオをご覧ください）。 ### 手順 1. [Auth0ダッシュボード](https://manage.auth0.com/dashboard)を開く 2. Application（左側メニュー）を選択し、ビジネスユーザー用に[構成](https://auth0.com/docs/manage-users/organizations/configure-organizations/define-organization-behavior)する 3. 企業顧客ごとに[Organization](https://auth0.com/docs/manage-users/organizations/configure-organizations/create-organizations)を作成する 4. ソーシャル、エンタープライズ用の[Connection](https://auth0.com/docs/manage-users/organizations/configure-organizations/enable-connections)および[MFA](https://auth0.com/docs/secure/multi-factor-authentication/enable-mfa)を有効化する 5. [ロールを作成](https://auth0.com/docs/manage-users/access-control/rbac)し、[メンバー](https://auth0.com/docs/manage-users/organizations/configure-organizations/invite-members)と[ロールの割り当て](https://auth0.com/docs/manage-users/organizations/configure-organizations/add-member-roles)を実施する ### 技術的な詳細 ここからはログインエクスペリエンスをReactアプリに統合します（あるいは[他のSDK](https://auth0.com/docs/libraries)を利用できます）。詳しい手順については、[React SDKクイックスタート](https://auth0.com/docs/quickstart/spa/react/interactive)に従ってください。 1. Auth0 React SDKをインストール ``` cd npm install @auth0/auth0-react ``` 2. Auth0プロバイダーコンポーネントを構成 ```js import React from 'react'; import { createRoot } from 'react-dom/client'; import { Auth0Provider } from '@auth0/auth0-react'; import App from './App'; const root = createRoot(document.getElementById('root')); root.render( , ); ``` 3. ログインをアプリケーションに追加 ```js import { useAuth0 } from "@auth0/auth0-react"; import React from "react"; const LoginButton = () => { const { loginWithRedirect } = useAuth0(); return ; }; export default LoginButton; ``` 4. ログアウトをアプリケーションに追加 ```js import { useAuth0 } from "@auth0/auth0-react"; import React from "react"; const LogoutButton = () => { const { logout } = useAuth0(); return ( ); }; export default LogoutButton; ``` 5. ユーザープロファイル情報を表示 ```js import { useAuth0 } from "@auth0/auth0-react"; import React from "react"; const Profile = () => { const { user, isAuthenticated, isLoading } = useAuth0(); if (isLoading) { return
Loading ...
; } return ( isAuthenticated && (
{user.name}

{user.name}

{user.email}

) ); }; export default Profile; ``` 6. ユーザーが所属する組織を取得する場合は、[ユーザーオブジェクトの`org_id`](https://auth0.com/docs/manage-users/organizations/using-tokens)を使用 ```

{user.org_id}

``` ### さらに先へ さらにより細かなシナリオにも次のように対応できます。 1. [企業ネットワーク外のユーザーに対して多要素認証を要求](https://auth0.com/docs/customize/actions/flows-and-triggers/login-flow#enforce-custom-mfa-policy)し、セキュリティを強化する 2. サインアップ時またはアイデンティティフロー内の別の時点で、 [ユーザーにデフォルトのロールを割り当て](https://auth0.com/blog/assign-default-role-on-sign-up-with-actions/)る 3. [管理ポータル](https://auth0.com/docs/get-started/architecture-scenarios/business-to-business/profile-management#admin-portal)を使用して、顧客が組織を自己管理できるようにする ## 次のステップ マルチテナントは、ほとんどのB2Bアプリに共通する機能要件ですが、その構築にすべての時間を費やす必要はありません。これは、Organizationsを使用して実現できることの氷山の一角にすぎません。[無料で試して](https://auth0.com/jp/signup?utm_source=blog&utm_medium=auth0&utm_campaign=b2bsaas)いただき、不明な点があれば[コミュニティ](https://community.auth0.com/)でご質問ください。 スタートアップ企業の場合は今すぐ[Auth0 by Okta for Startups](https://auth0.com/jp/startups)にお申し込みください。1年間無料で、100までの組織（Organization）を設定できるプランを提供しています。 ## その他のリソース * [Reactクイックスタート](https://auth0.com/docs/quickstart/spa/react/interactive) * ドキュメント - [Organizations](https://auth0.com/docs/manage-users/organizations) * Blog - [SaaSアプリケーションのデジタルアイデンティティ管理の解決方法](https://auth0.com/blog/jp-digital-identity-management/) * [Auth0 by Okta for Startups](https://auth0.com/jp/startups) * [コミュニティフォーラム](https://community.auth0.com/) * [サンプルB2Bアプリケーション](https://github.com/auth0-developer-hub/auth0-b2b-saas-starter/) * [契約者向けテクニカルサポート](https://support.auth0.com/tickets/new) このブログはこちらの[英語ブログ](https://auth0.com/blog/build-a-secure-and-scalable-b2b-saas-app-in-react/)からの翻訳、[池原 大然](https://auth0.com/blog/authors/daizen-ikehara/)によるレビューです。