> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> このチュートリアルでは、Apache を設定して Web アプリに認証と認可を追加する方法を説明します。

# Apache アプリケーションにログイン機能を追加

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****マスク済み*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

export const configSnippet = `OIDCProviderMetadataURL https://{yourDomain}/.well-known/openid-configuration
OIDCClientID {yourClientId}
OIDCClientSecret {yourClientSecret}

OIDCScope "openid name email"
OIDCRedirectURI https://your_apache_server/your_path/redirect_uri/
OIDCCryptoPassphrase <passwordToEncryptTheSessionInformationOnTheCookie>

<Location /your_path>
  AuthType openid-connect
  Require valid-user
  LogLevel debug
</Location>

<Location /admin>
  AuthType openid-connect
  #Require valid-user
  Require claim folder:admin
</Location>`;

<Accordion title="AI を使って Auth0 を統合する" icon="microchip-ai" iconType="solid" defaultOpen>
  Claude Code、Cursor、GitHub Copilot などの AI コーディングアシスタントを使用している場合は、[agent skills](https://agentskills.io/home) を使って、数分で Auth0 認証を自動的に追加できます。

  **インストール:**

  ```bash theme={null}
  npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-apache
  ```

  **次に、AI アシスタントに以下のように依頼します。**

  ```text theme={null}
  Add Auth0 authentication to my Apache server
  ```

  AI アシスタントが Auth0 アプリケーションを自動的に作成し、認証情報を取得して、mod\_auth\_openidc を設定します。[agent skills の完全なドキュメント →](/ja/docs/quickstart/agent-skills)
</Accordion>

<Note>
  **システム要件**

  このチュートリアルとサンプルプロジェクトは、次の環境でテストされています。

  * Apache 2.4
</Note>

<div id="get-started">
  ## はじめに
</div>

このチュートリアルでは、Apache を設定して、Web アプリに認証と認可を追加する方法を説明します。アカウント用に構成された例を使ってこのクイックスタートを進められるよう、ログインしたうえで作業することをお勧めします。

<Steps>
  <Step title="mod_auth_openidc モジュールをインストールして有効化する" stepNumber={1}>
    まず、Apache 用の `mod_auth_openidc` モジュールをインストールします。

    バイナリは [GitHub](https://github.com/OpenIDC/mod_auth_openidc/releases) から入手して、お使いの OS にインストールできます。お使いの OS がどのバイナリにも対応していない場合でも、[ソースからビルド](https://github.com/OpenIDC/mod_auth_openidc/blob/master/INSTALL) できます。

    モジュールをインストールしたら、`a2enmod` コマンドで Apache に対して有効化します。詳しくは、[Ubuntu の a2enmod マニュアルページ](https://manpages.ubuntu.com/manpages/focal/man8/a2enmod.8.html) を参照してください。

    ```shellscript theme={null}
    a2enmod auth_openidc
    ```

    <Info>
      Windows の場合は、[この PowerShell スクリプト](https://github.com/enderandpeter/win-a2enmod#installation) を使用して、システムで `a2enmod` を動作させることができます。
    </Info>
  </Step>

  <Step title="Auth0 アカウント情報を使ってモジュールを設定する" stepNumber={2}>
    `/etc/apache2/mods-available` フォルダーにある新しい設定ファイル (`auth_openidc.conf`) を更新します。

    <Info>
      Windows の場合は、`/apache/conf/httpd.conf` ファイルを使用する必要があります。
    </Info>

    <AuthCodeBlock children={configSnippet} language="apache" filename="auth_openidc.conf" />
  </Step>

  <Step title="Auth0 を設定する" stepNumber={3}>
    [Auth0 Dashboard](https://manage.auth0.com/) で以下を行います。

    1. **Applications** > **Applications** に移動し、一覧からアプリケーションを選択します。
    2. **Settings** ビューに切り替え、**Application URIs** セクションを探します。
    3. `OIDCRedirectURI` の値を **Allowed Callback URLs** に追加します。
    4. ページ下部の **Advanced Settings** を開きます。
    5. **OAuth** ビューに切り替えます。
    6. **JSON Web Token (JWT) Signature Algorithm** を `RS256` に設定します。
  </Step>

  <Step title="認可" stepNumber={4}>
    `auth_openidc.conf` ファイルに `Location` ブロックを追加すると、ユーザーの IDトークン 内のクレーム値に基づいて、特定のロケーションを保護するよう Apache を設定できます。

    たとえば、ユーザーのロールを読み取り、保護されたロケーションへのアクセスを許可するクレームを追加する Action を作成できます。

    ```js lines theme={null}
    exports.onExecutePostLogin = async (event, api) => {
      const roles = event.authorization.roles; // ['user', 'admin']
      if (roles.includes('admin')) {
        api.idToken.setCustomClaim('folder', 'admin');
      }
    };
    ```
  </Step>
</Steps>

<Check>
  **チェックポイント**

  よくできました。ここまで完了していれば、アプリケーションでログイン、ログアウト、ユーザープロフィール情報が利用できるようになっているはずです。
</Check>

***

<div id="next-steps">
  ## 次のステップ
</div>

以上でクイックスタートチュートリアルは終了です。ただし、さらに詳しく確認できる項目が多数あります。Auth0 でできることについて詳しくは、以下を参照してください。

* [Auth0 Dashboard](https://manage.auth0.com/) - Auth0 のテナントやアプリケーションを設定、管理する方法を確認できます
* [Auth0 Marketplace](https://marketplace.auth0.com/) - Auth0 の機能を拡張するために有効化できる統合を確認できます