Auth0 シングル サインオン (SSO) | Auth0を使用したWordPressログイン

概要

WordPress OAuth & OpenID Connect シングルサインオン (SSO) プラグインは、Auth0 を OAuth および OpenID Connect プロバイダーとして使用して WordPress への安全なログインを可能にします。また、さまざまなカスタムプロバイダーと標準 IDP を使用してプラグインを構成することもできます。ユーザープロファイル属性マッピング、ロールマッピングなどの高度なシングルサインオン (SSO) 機能をサポートしています。ここでは、WordPress と Auth0 間の SSO を構成するためのガイドを紹介します。このガイドの最後には、 ユーザーはAuth0からWordPressにログインできるはずです。WP OAuthシングルサインオン（OAuth＆OpenID Connectクライアント）プラグインで提供する他の機能の詳細については、 ここをクリック.

前提条件: ダウンロードとインストール

• WordPress インスタンスに管理者としてログインします。
• WordPress に移動します ダッシュボード -> プラグイン をクリックします。入力したコードが正しければ、MFAの設定は正常に完了します 新規追加.
• を検索 WordPress OAuth シングル サインオン (SSO) プラグインを選択してクリックします 今すぐインストール.
• インストールしたら、をクリックします アクティブにしましょう.

構成手順

ステップ1: Auth0をOAuthプロバイダーとして設定する

• に行く https://auth0.com/auth/login そしてサインアップまたはログインします。
• に行く アプリケーション 左側のパネルのタブをクリックして、 アプリケーション.

• をクリックしてください アプリケーションを作成する 新しいアプリケーションを作成します。

• 選択 通常のWebアプリケーション をクリックします。入力したコードが正しければ、MFAの設定は正常に完了します 創造する

• さあ行く 設定 タブには何も表示されないことに注意してください。

• 下にスクロールします アプリケーション URI セクションを入力し、 コールバック URL プラグインから取得します。次に、下にスクロールして変更を保存をクリックします。

• コピー 顧客ID と クライアントシークレット 設定タブの基本情報から、miniOrange OAuth クライアント プラグインの構成に保存します。

• さあ行く ユーザー 左側のパネルからユーザー管理のタブをクリックします。

• ソフトウェアの制限をクリック ユーザーの作成 新しいユーザーを作成します。

• 必要な詳細をすべて入力し、 をクリックします 創造する.




正常に設定されました Auth0 WordPress サイトへの Auth0 SSO ログインを実現するための OAuth プロバイダーとして。

ステップ 2: WordPress を OAuth クライアントとしてセットアップする

• Free
• プレミアムサーマルバッグ

• に行く OAuthの構成 タブをクリックして 新しいアプリケーションを追加 新しいクライアント アプリケーションを Web サイトに追加します。

• こちらの OAuth / OpenID Connect プロバイダーのリストからアプリケーションを選択してください Auth0

• プロバイダーを選択したら、 コールバックURL これは、OAuth プロバイダーの SSO アプリケーション構成で構成する必要があります。
• 次のようにクライアント認証情報を入力します。 顧客ID & クライアントシークレット これは、Auth0 SSO アプリケーションから取得します。
• 構成 ドメイン名 Auth0 SSO アプリケーションから見つかりました。 設定については、以下の表を参照してください。 スコープとエンドポイント プラグインの Auth0 用。

ご注意: Auth0 アカウントを作成すると、 ドメインURL 以下のエンドポイントにも同じものを追加する必要があります。




範囲：	openid プロフィールメール
エンドポイントを承認します:	https://<Auth0-app-domain>/authorize
アクセストークンエンドポイント:	https://<Auth0-app-domain>/oauth/token
ユーザー情報の取得エンドポイント:	https://<Auth0-app-domain>/userinfo



• ソフトウェアの制限をクリック 次へ.
• 概要ページですべての詳細を確認した後、「完了」をクリックして構成を保存し、SSO 接続をテストします。




正常に設定されました OAuth クライアントとしての WordPress WordPress サイトへの Auth0 ログインを実現します。

• に行く OAuthの構成 タブをクリックしてアプリケーション名を検索し、Web サイトに新しいクライアント アプリケーションを追加します。 認証0。

• 構成 アプリ名、クライアントID、クライアントシークレット Auth0 SSO アプリケーションから。

• 設定については、以下の表を参照してください。 プラグインの Auth0 のスコープとエンドポイント。

  ご注意: Auth0 アカウントを作成すると、 ドメインURL 以下のエンドポイントにも同じものを追加する必要があります。

  
  

  範囲：	オープンIDプロファイル
  エンドポイントを承認します:	https://{your-auth0-domain}/authorize
  アクセストークンエンドポイント:	https://{your-auth0-domain}/oauth/token

  
• あなたの選択します。 交付金の種類 オプションのリストから選択してクリックします 設定を保存して構成を保存します。




正常に設定されました OAuth クライアントとしての WordPress WordPress サイトへの Auth0 ログインを実現します。

ステップ 3: ユーザー属性のマッピング

• ユーザー属性マッピングは、ユーザーが WordPress に正常にログインできるようにするために必須です。 以下の設定を使用して、WordPress のユーザー プロファイル属性を設定します。

ユーザー属性の検索:

• に行く OAuthの構成 タブ。 下にスクロールしてクリックします テスト構成.

• OAuth プロバイダーから WordPress に返されるすべての値が表に表示されます。 名、姓、電子メール、またはユーザー名の値が表示されない場合は、OAuth プロバイダーでこの情報を返すように必要な設定を行ってください。
• テスト構成にすべての値が表示されたら、次のページに進みます。 属性/役割のマッピング タブに移動すると、[ユーザー名] ドロップダウンに属性のリストが表示されます。

ステップ 4: ロール マッピング [プレミアム]

• ソフトウェアの制限をクリック 「テスト構成」 OAuth プロバイダーから送信された属性名と属性値のリストを取得します。
• 「テスト構成」ウィンドウから、プラグインの「属性マッピング」セクションで属性名をマッピングします。 詳細については、スクリーンショットを参照してください。

• 役割マッピングを有効にする: ロール マッピングを有効にするには、グループ名属性をマッピングする必要があります。 プロバイダー アプリケーションからロールを返す属性のリストから属性名を選択します。
  例: 役割


• WordPress ロールをプロバイダー ロールに割り当てます。 プロバイダー アプリケーションに基づいて、WordPress ロールをプロバイダー ロールに割り当てることができます。 アプリケーションに応じて、学生、教師、管理者、その他のいずれかになります。 [グループ属性値] の下にプロバイダー ロールを追加し、[WordPress ロール] の下でその前に必要な WordPress ロールを割り当てます。
  
  例えば、、下の画像の。 教師には管理者の役割が割り当てられ、生徒にはサブスクライバーの役割が割り当てられます。

• マッピングを保存すると、SSO 後にプロバイダー ロールに WordPress 管理者ロールが割り当てられます。
  例： 指定された例のように、ロール「教師」を持つユーザーは WordPress の管理者として追加され、「学生」は購読者として追加されます。

ステップ5: Auth0でカスタム属性を作成する

• 共通の属性値を持つカスタム属性を追加する
• 異なる属性値を持つユーザー固有のカスタム属性を追加する

• に行く https://auth0.com/auth/login Auth 開発者アカウントにログインします。
• 左側のパネルで、次の場所に移動します アクション -> フロー -> ログイン.

• ソフトウェアの制限をクリック アクションの追加 -> カスタムの構築.

• 希望の名前を入力し、他の設定はそのままにしておきます。 クリック 創造する

• コードエディターに以下のコードを記述します。 コードを記述したら、 をクリックします。 配備します.

      
                
                Code:
                  exports.onExecutePostLogin = async (event, api) => {
                  const attr_name = "favorite_color";
                  api.idToken.setCustomClaim( attr_name , 'Purple');
                          
                  // ... additional code
                  };
                          
                Code Description:
                          
                  attr_name: This will be the attribute name which will you want to create (favorite_color in my case)
                          
                  The function api.idToken.setCustomClaim(), expects the key and its value. Here, the key is attr_name, and its value is “Purple”
                
                


• 「デプロイ」をクリックした後、に戻ります アクション -> フロー -> ログイン -> カスタム 以下に示すように、作成したアクション (カスタム属性の追加) を開始フローと完了フローの間にドラッグ アンド ドロップします。

• これを行った後、 をクリックします 申し込む
• 最後に、以下に示すように、miniOrange OAuth Single Sign-On プラグインのテスト構成を実行して、ユーザーのカスタム属性を確認します。

• に行く https://auth0.com/auth/login Auth 開発者アカウントにログインします。
• 左側のパネルで、次の場所に移動します ユーザー管理 -> ユーザー.
• カスタム属性を割り当てるユーザーを選択します。

• ユーザーを選択した後、下にスクロールして「メタデータ」に移動します。 で ユーザーメタデータの場合は、以下に示すようにカスタム属性をキーと値のペアとして追加する必要があります。

• 左側のパネルで、次の場所に移動します アクション -> フロー -> ログイン.

• ソフトウェアの制限をクリック アクションの追加 -> カスタムの構築.

• 希望の名前を入力し、他の設定はそのままにしておきます。 クリック 創造する

• コードエディターに以下のコードを記述します。 コードを記述したら、 をクリックします。 配備します.

              

              Code:
                exports.onExecutePostLogin = async (event, api) => {
                          
                const { favorite_color, preferred_contact } = event.user.user_metadata;
                        
                if (event.authorization) {
                // Set claims 
                api.idToken.setCustomClaim('fav_color', favorite_color);
                api.idToken.setCustomClaim('preferred_contact', preferred_contact);
                }
                };
                        
                        
              Code Description:
                We’ll add the keys (created in user_metadata) in the const as the parameters.
                        
                When using the "api.idToken.setCustomClaim() function, you will need to include two parameters. The first parameter is used to specify the desired attribute name, while in the second parameter you will add the key which you want set the attribute value.
              
              


• 「デプロイ」をクリックした後、に戻ります アクション -> フロー -> ログイン -> カスタム & ドラッグアンドドロップ 以下に示すように、開始フローと完了フローの間に、以前に作成したアクション (カスタム属性の追加) を追加します。

• これを行った後、 をクリックします 申し込む
• 最後に、以下に示すように、miniOrange プラグインのテスト構成を実行して、ユーザーのカスタム属性を確認します。

ステップ 6: サインイン設定

• WordPress 5.7 以前のサインイン設定
• WordPress 5.8 のサインイン設定
• WordPress 5.9 のサインイン設定

• に行く WordPress の左側のパネル > 外観 > ウィジェット.
• 選択 miniOrange OAuth。 好きな場所にドラッグ＆ドロップして保存します。

• に行く WordPress の左側のパネル > 外観 > ウィジェット.
• 選択 miniOrange OAuth。 好きな場所にドラッグ＆ドロップして保存します。

• WordPress ページを開くと、Auth0 SSO ログイン ボタンが表示されます。Auth0 シングル サインオン (SSO) - Auth0 OAuth を今すぐテストできます。

• ことを確認してください 「ログインページに表示」 オプションがアプリケーションで有効になっています。 (下の画像を参照してください)

• 今、あなたに行きます ワードプレスログイン ページで見やすくするために変数を解析したりすることができます。 (例: https://< your-wordpress-domain >/wp-login.php)
• そこに Auth0 SSO ログイン ボタンが表示されます。ログイン ボタンをクリックすると、Auth0 シングル サインオン (SSO) - Auth0 OAuth をテストできるようになります。

関連記事

• OAuth 2.0 認証フレームワーク
• OAuth 2.0とは何ですか?
• WordPress シングルサインオン (SSO) OAuth / OpenID Connect / JWT
• OAuth 2.0 とは何ですか?また、どのように機能しますか?
• 私たちの違い