の検索結果 ：

×
会員登録 お問い合わせ

Typo3 OAuth / OpenID Connect シングル サインオン (SSO) 拡張機能を設定するためのステップ バイ ステップ ガイド

Typo3 OAuth 2.0 認証および認可シングル サインオン (SSO) 拡張機能を使用すると、フロントエンドおよびバックエンド (管理者および顧客) ユーザーは、OAuth 3 および OpenID Connect 2.0 標準のクレーム プロバイダーを使用して Typo1.0 サイトにシームレスにログインできます。

Typo3 OAuth & OpenID Connect シングルサインオン (SSO) 拡張機能を使用すると、Azure AD、Azure B2C、Okta、Keycloak、Salesforce など、あらゆる OAuth および OpenID Connect プロバイダーを使用して Typo3 に安全にログインできます。この拡張機能では、ユーザープロファイル属性マッピング、ロールマッピングなどの高度なシングルサインオン SSO 機能もサポートされています。Typo3 OAuth シングルサインオン (OAuth & OpenID Connect クライアント) 拡張機能のプレミアム機能の詳細については、こちらをクリックしてください。

このガイドでは、miniOrange OAuth / OpenID Connect シングル サインオン SSO 拡張機能をセットアップする手順を説明します。

インストール手順

1. TYPO3 に OAuth クライアント / OpenID Connect 拡張機能をインストールする

  • TYPO3 マーケットプレイスから OAuth / OIDC 拡張機能の zip ファイルをダウンロードします。
  • TYPO3 バックエンドに移動し、画面の左側にある [拡張機能] セクションをクリックします。
  • 下の図に示すように、zip ファイルをアップロードします。
    • Typo3 OAuth OIDC SSO アップロード プラグイン
  • 次に、 「miniOrange OpenIDConnect」 「インストールされた拡張機能」セクションで、「有効化」ボタンをクリックして拡張機能を有効化します。
  • インストール後、新しくインストールされた拡張機能をクリックします 「miniOrange OpenIDConnect」 TYPO3 SSO の場合は、登録した miniOrange 認証情報を使用してログインします。
    • Typo3 miniorange OpenIDCconnect 設定
  • プレミアム顧客の場合、ユーザー名とパスワードを入力した後、次に進むにはライセンス キーが必要になります。 (このキーは miniOrange チームから取得します。ライセンス キーを入力した後、ライセンスをアクティブ化し、先に進むことができます。)
    • minorange ライセンス oauth oidc ログイン
  • プレミアム顧客でない場合は、miniOrange 認証情報を送信して直接ログインできます。
  • ログインに成功すると、アカウントに関連する詳細が表示されます。
  • これで、IdP を構成する準備ができました。 ただし、最初にフロントエンドを統合することが重要です。

2. 拡張機能をTYPO3と統合する

  • ここで、「ホーム」タブを左クリックしてフロントエンドをデザインする必要があります。 新しいサブページ
    • Typo3 oauth SSO 作成フロントエンド
  • HOME ページ内に XNUMX つの STANDARD ページを追加する必要があります。 プレミアムプラグインを使用している場合は、XNUMX つのページを作成できます。
  • ここでは、ページ名を次のように考慮します。 FEOIDC、応答、ログアウト (プレミアム顧客の場合、ログアウトはオプションです)。
  • 標準ページ名を次のように入力します。 FEOIDC.
    • FEOIDC ページ Typo3 OAuth シングル サインオン
  • ソフトウェアの制限をクリック FEOIDCページ をクリックします。入力したコードが正しければ、MFAの設定は正常に完了します コンテンツを追加。 プラグインに移動して追加します FEOIDC プラグイン.
    • Typo3 OAuth SSO コンテンツの追加 Typo3 シングル サインオンでコンテンツを追加
  • プラグイン タブに移動し、FEOIDC プラグインを選択します。 ウェブサイトユーザーを追加 記録保管ページ 設定を保存します。
    • Typo3 ログインで Web サイト ユーザーを追加
  • URL セグメント (初期 SSO URL にもなります) を変更する必要がある場合は、 FEOIDCページ、編集を選択してクリックします 「URLを切り替える」 ボタンをクリックして、お好みの方法で URL を設定します。
    • Typo3 oauth SSO 編集 SSO URL
  • 同じ手順に従って、Response の標準ページを作成して構成します。
  • 応答ページには応答プラグインを、ログアウト ページにはログアウト プラグインを選択していることを確認してください。
  • TYPO3 ディレクトリは次のようになります。
    • Typo3 OIDC SSO ディレクトリ
  • また、少なくとも 3 つのユーザーグループが存在しない限り、TYPOXNUMX ではユーザーを作成できないため、少なくとも XNUMX つのグループを作成する必要があります。
  • グループを作成するには、左側のパネルからリスト タブに移動し、Web サイト ユーザー フォルダーをクリックして、画面上部の「+」ボタンを押します。
    • グループ作成 Typo3 OIDC シングルサインオン
  • 今すぐ選択 ウェブサイトユーザーグループ? リストから。
    • Typo3 oauth SSO Web サイト ユーザー グループ
  • グループタイトルセクションにグループ名を入力し、上部の「保存」ボタンをクリックします。 ユーザーグループが作成されます。
    • ユーザーグループが作成されました Typo3 OAuth OIDC SSO
  • ログイン ページに SSO ボタンを作成することもできます。 「ホーム」をクリックして、次の画面に進みます。 +コンテンツ オプションを選択します。
    • Typo3 oauth SSO コンテンツを追加
  • [特殊要素] タブに切り替えて選択します。 プレーンHTML.
    • ミニオレンジ色の SSO ボタンを作成するためのプレーン HTML
  • ここで行うことは、SSO ログイン ボタンを追加することです。ボタン セクションの URL は FEOIDC 標準ページになります。
  • これを行うためのコード スニペットは、指定された画像に記載されています。 コードを入力し、上部にある [保存] ボタンを押します。
    • フロントエンドの SSO ボタン Typo3 OAuth OIDC SSO
  • これで、バックエンドでプラグインを設定できるようになりました。

3. OAuthプロバイダーの構成

    OAuthプロバイダーの設定方法を見ていきましょう。ここではIDPとしてAzure ADを使用します。IDPが異なる場合は、こちらからご希望のIDPの完全なセットアップガイドをご覧ください。

  • にサインイン Azureのポータル.
  • 選択 Azure Active Directory.
    • Typo3 OAuth Azure AD シングル サインオン (SSO) - ログイン
  • 左側のナビゲーション ウィンドウで、 アプリの登録 サービスを選択し、クリックします 新規登録.
    • Typo3 SSO Azure AD シングル サインオン アプリ登録
  • 「作成」ページが表示されたら、アプリケーションの登録情報を入力します。(下表参照)
      • 名前： アプリケーションの名前。
      アプリケーションタイプ ：
      1. 選択 「Webアプリ・API」 の クライアントアプリケーション (NAIST) と リソース/API アプリケーション 安全なサーバーにインストールされています。 この設定は OAuth 機密に使用されます Webクライアント そして公に ユーザーエージェントベースのクライアント。 同じアプリケーションでクライアントとリソース/API の両方を公開することもできます。
      リダイレクト URI :
      1. 「Web アプリ / API」アプリケーションの場合は、アプリのベース URL を指定します。 例: https:// ローカル マシンで実行されている Web アプリの URL である可能性があります。 ユーザーは、この URL を使用して Web クライアント アプリケーションにサインインします。
  • miniOrange OAuth クライアント拡張機能からコールバック URL をコピーし、[リダイレクト URL] テキストボックスの下に保存します。
    • Typo3 OAuth/OpenID/OIDC Azure AD シングル サインオンのコールバック URL の構成
  • ことを確認してください 「openid および offline_access 権限に対する管理者の同意を与える」 オプションが有効になっています。 完了したら、クリックします 会員登録する.
    • Typo3 OAuth SSO Azure AD シングル サインオン (SSO) 登録
  • Azure AD は、アプリケーションに一意のアプリケーション ID を割り当てます。 の アプリケーションID あなたです 顧客ID ディレクトリID あなたです テナントIDこれらの値は、miniOrange OAuth クライアント拡張機能を構成するために必要になるため、手元に置いておいてください。
    • Typo3 SSO OAuth 2.0 Azure AD シングル サインオン (SSO) アプリケーションの詳細
  • に行く 証明書と秘密 左側のナビゲーション ペインで をクリックし、 新しいクライアントシークレット。 説明と有効期限を入力し、クリックします。 追加 オプションを選択します。
    • Typo3 OAuth Azure AD シングル サインオン (SSO) 秘密キー OAuth/OpenID/OIDC
  • 秘密鍵をコピーする "値" 後で設定する必要があるので、値を手元に保管してください クライアントシークレット miniOrange OAuth クライアント拡張の下にあります。
    • Typo3 SSO Azure AD シングル サインオン (SSO) 秘密キーの値

4. TYPO3をOAuthクライアントとして設定する

  • OAuth プロバイダーの構成が正常に完了したら、 OAuthプロバイダー名, 顧客ID, クライアントシークレット, 対象領域 そしてエンドポイントを提供しました。

    OAuth クライアントを構成するには、以下のエンドポイントを参照してください。


    範囲： オープンID
    エンドポイントを承認します: https://login.microsoftonline.com/[tenant-id]/oauth2/v2.0/authorize
    アクセストークンエンドポイント: https://login.microsoftonline.com/[tenant-id]/oauth2/v2.0/token
    ユーザー情報の取得エンドポイント: https://graph.microsoft.com/beta/me
  • 以下を行うには、 Save ボタンを押して設定を保存します。
    • Typo3 OAuth 2.0 SSO 資格情報 Azure AD SSO

5. テスト構成

  • この機能は、送信された構成が正しいかどうかを確認するのに役立ちます。 応答として設定した属性も取得します。
  • テスト構成をチェックするには、OpenID Connect プラグインに移動し、その中で OpenID Connect クライアント タブに移動します。下部に [テスト構成] ボタンがあり、それをクリックすると、指定された図に示すような結果が表示されます。
    • テスト構成 Typo3 SAML SSO

6. 属性マッピング

  • 「属性マッピング」タブで属性をマッピングできます。 無料版の拡張機能では、ユーザー名と電子メールのみをマッピングできます。 ただし、拡張機能のプレミアム バージョンでは、OAuth プロバイダーからのさまざまな属性を Typo3 サイトに存在する属性にマッピングできます。
    • Typo3 OAuth 属性マッピング Typo3 SSO

7. グループマッピング

  • 無料の拡張機能で、管理者以外のすべてのユーザーが SSO を実行するときに割り当てられるデフォルトのロールを指定できます。
  • [グループ マッピング] タブに移動し、[グループ マッピング] セクションに移動します。
  • デフォルトの役割を選択し、「保存」ボタンをクリックします。
    • Azure AD Typo3 SSO - Typo3 での Azure AD シングル サインオン (SSO) ログイン - ロール マッピング

Typo3 を OAuth クライアントとして正常に設定しました。 フロントエンドに SSO ボタンが表示されます。 ボタンをクリックして SSO をテストします。

Typo3 OAuth 2.0 SSO Azure AD SSO

その他のリソース


お探しのものが見つからない場合は、info@xecurify.comまでメールでお問い合わせください。

こんにちは！

助けが必要？ 私たちはここにいます！

対応