OktaテンプレートアプリとOktaプラグインテンプレートアプリを構成する

テンプレートアプリを使用すると、稼働中のシステムでリアルタイムにアプリケーション統合を作成できます。カスタムアプリを作成するには、次の一般的なSecure Web Authentication（SWA）テンプレートアプリから必要なものを選択します。

  • ［Template App（テンプレートアプリ）］：アプリがフォームPOSTを介した認証をサポートする場合に使用します
  • ［Template Plugin App（テンプレートプラグインアプリ）］：アプリサイトのページにユーザー名、パスワード、または送信ボタンのフィールドがある場合に使用します

    テンプレートプラグインアプリまたはテンプレートフレームプラグインアプリを構成する場合、関連するフィールドに、パラメーターではなくCSSセレクターを指定します。こうしたフィールドへの入力とログインボタンのクリックに、これらのプラグインが使用されるためです。

  • ［Template App 3 Fields（3フィールド用テンプレートアプリ）］：上記の事例と同様。アプリのページに会社IDなどの追加フィールドがある場合に使用します
  • ［Template 2 Page Plugin App（2ページ用テンプレートプラグインアプリ）］：テンプレートプラグインアプリと類似。サインインフローが2つのページに分かれている場合に使用します
  • ［Template Basic Auth App（テンプレート基本認証アプリ）］：アプリが基本認証をサポートする場合に使用します
  • ［Template Frame Plugin App（テンプレートフレームプラグインアプリ）］：アプリがiframeをサポートする場合に使用します

手順

  1. Okta Admin Consoleで、［Applications（アプリケーション）］>［Applications（アプリケーション）］に移動します。

  2. ［Browse App Catalog（アプリカタログを参照）］をクリックします。
  3. ［Template（テンプレート）］を検索します。
  4. 検索結果から、目的のタイプのテンプレートアプリを追加します。

    5. テンプレートアプリが特定のURLにフォームでPOSTする認証をサポートしている場合に使用します。このテンプレートでは、お客様が指定する名前付きパラメーターと静的フィールドに加え、ユーザーが入力するユーザー名とパスワードの情報も指定します。

    ［General Settings（一般設定）］ページで情報を入力します。

    • ［URL］：POSTするログインフォームのURLを入力します（フォームが表示されるURLではありません）。
    • ［Username parameter（ユーザー名パラメーター）］と［Password parameter（パスワードパラメーター）］のフィールド：パラメーター名を、ユーザー名とパスワードのデータを含めて入力します。
    • ［Optional parameter（オプションパラメーター）］フィールド：追加の静的フィールドデータを名前と値のペアで入力します。これらのオプションフィールドに入力するものを判断するには、終了済みこちらをクリックしてください。
    • ［Application Visibility（アプリケーションの可視性）］：ユーザーにアプリケーションのアイコンを表示するかどうかを指定します。
    • ［Browser plugin auto-submit（ブラウザープラグインの自動送信）］：ユーザーがログインページにアクセスしたときに自動的にログインさせるかどうかを指定します。

    アプリに、クロスサイトリクエストフォージェリ（XSRF）保護機能がある場合、テンプレートプラグインアプリまたは3フィールド用テンプレートプラグインアプリを使用する必要があります。これの有無を確認するには、サーバーがXSRFトークンを生成しているかどうかを対象ページで調べてください。また、ASPページで生成されるEVENTVALIDATIONやFORMVALIDATIONなどのフィールドも探します。こうした場合に、テンプレートプラグインアプリが必要です。

    テンプレートプラグインアプリまたはテンプレートフレームプラグインアプリを構成する場合、関連するフィールドに、パラメーターではなくCSSセレクターを指定します。こうしたフィールドへの入力とログインボタンのクリックに、これらのプラグインが使用されるためです。

    ［General Settings（一般設定）］ページで情報を入力します。

    • ［Application label（アプリケーションラベル）］：エンドユーザーのホームページで、アプリの下に表示するラベルを入力します。
    • ［Login URL（ログインURL）］：ログインフォームのURL（フォームを実際に表示するURL）を入力します。
    • ［Frame URL（フレームURL）］：フレームURL（フレームを含むURL）を入力します。
    • ［Redirect URL（リダイレクトURL）］：ログインページのURLにアクセスしたときに他のページにリダイレクトされる場合の、リダイレクト先となるページのURLを入力します。
    • ［Regular Expression（正規表現）］：（任意）許可リストとして機能する正規表現を作成できます。これにより、定義したパターンに一致するURLへのアクセスを制限して、アプリのセキュリティを向上させることが可能です。たとえば、ログインURLがhttps://example.com/login、パスワード変更用のURLがhttps://example.com/change_passwordとします。この場合、https://example.com/(login|change_password)という正規表現を作成して一致させることができます。
    • ［Username field（ユーザー名フィールド）］：ユーザー名フィールドのCSSセレクターを入力します。
    • ［Password field（パスワードフィールド）］：パスワードフィールドのCSSセレクターを入力します。
    • ［Login Button（ログインボタン）］：ログインボタンのCSSセレクターを入力します。
    • ［Checkbox（チェックボックス）］：チェックボックスのCSSセレクターを入力します（［Remember me（ログイン状態を維持）］、［Agree terms（同意する）］などのチェックボックスを指定できます）。
    • ［Next Button（「次へ」ボタン）］：次のページにリダイレクトする［Next（次へ）］ボタンのCSSセレクターを入力します。
    • ［Extra Field Selector（追加フィールドセレクター）］：追加フィールドのCSSセレクターを入力します。
    • ［Extra Field Value（追加フィールド値）］：追加フィールドの値を入力します。
    • 表示されるフィールドは、構成するテンプレートのタイプによって異なります。
    • お客様が正規表現フィールドを指定しない場合、Okta側で［Login URL（ログインURL）］を基に安全な正規表現を生成してURLのパスを省略します。たとえば、お客様が、https://www.example.com/loginと指定した場合、Okta側で次のような正規表現を生成します。

      • (?:^https://example\.com(?:$|/))

      ここでは、エスケープしたURLを(?:^と(?:$|/))で囲んで、ログインパスを省略しています。

    CSSセレクターフィールドの特定

    テンプレートプラグインアプリを構成する場合、関連するフィールドに、パラメーターではなくCSSセレクターを指定します。こうしたフィールドへの入力とログインボタンのクリックに、このプラグインが使用されるためです。

    CSSセレクターを特定するには、ページ上の個々の要素を調べます。Chromeデベロッパーツールの使用

    1. 対象のログインフォームがあるページを開きます。
    2. 入力フィールドまたはボタンを右クリックして［inspect（検証）］オプションを選択すると、実際のDocument Object Model（DOM）要素が表示されます。［Elements（要素）］タブで、要素のidとclassを表示し、この情報を使用してCSSセレクターを構成します。

    idまたはclassで要素を一意に識別できない場合、完全な階層構造が必要になることがあります。Oktaのサインインページを調べた場合のセレクターを次に示します。

    アプリで、ユーザー名、パスワード、送信ボタンに、idではなく、name属性を使用する場合、input[type="text"]を使用してみてください。たとえば、パスワードにはinput[type="password"]を、また、送信ボタンにはinput[type="submit"]を使用できます。その他の属性も照会できます。たとえば、input[class="btn"]を使用して、送信ボタンを指定することも可能です。

    テンプレートプラグインアプリが動作しない場合

    テンプレートプラグインアプリは次のようなサイトでは有効ではありません。

    • 多くの動的HTMLを作成するサイト。プラグインに必要な要素が、プラグインの起動時に存在しないため、こうしたサイトでこのアプローチを取ると失敗する可能性があります。
    • usernameとpassword以外のパラメーターも必要とするサイト。この場合、パラメーターが静的で不変であれば、3フィールド用テンプレートプラグインアプリを使用できます。
    • ログインプロセスで複数のステップを実行する、または、初期URLへのアクセスからフォーム用URLへのアクセスの間に複数のページをロードするサイト。

    こうした場合、プラグイン統合であれば対処できますが、プラグインテンプレートアプリ関連の機能では不可能です。このような状況が発生した場合は、アプリ統合を手動で記述する必要があります。アプリの価格については、Oktaのプロフェッショナルサービスチームにお問い合わせください。

    アプリが基本認証に対応している場合は、このテンプレートを使用します。終了済みスクリーンショット

    • ［Application label（アプリケーションラベル）］：エンドユーザーのホームページで、アプリの下に表示するラベルを入力します。
    • ［URL］：ログインフォームのURL（フォームを実際に表示するURL）を入力します。
    • ［Auth URL（認証URL）］：アプリの認証サイト用URLを入力します。
    • ［Application Visibility（アプリケーションの可視性）］：ユーザーにアプリケーションのアイコンを表示するかどうかを指定します。
    • ［Browser plugin auto-submit（ブラウザープラグインの自動送信）］：ユーザーがログインページにアクセスしたときに自動的にログインさせるかどうかを指定します。

既知の問題

ログインページがユーザーを元のURLにリダイレクトする場合、テンプレートプラグインアプリは、無限ループを引き起こすため動作しません。SWAアプリケーションはユーザーをログインページに戻さずに、Webサイトのホームページにリダイレクトしなければなりません。つまり、ログインページはユーザーの資格情報を受け入れ、ユーザーをOktaのホームページにリダイレクトする必要があります。

関連項目

OktaテンプレートWSフェデレーションアプリケーションを構成する