# Webアプリケーションの初期設定の流れ :::info 本チュートリアルで扱う機能は、Web アプリケーション診断機能をご契約いただいた組織でのみご利用いただけます。 ::: 本ページでは、診断対象のWebアプリケーションを作成し、診断や巡回のための認証設定を行うための手順についてご説明します。 ## 初期設定の流れ Webアプリケーションを診断するためには、最初に必要となる設定や準備作業があります。おおよそ以下の流れで設定を進めていきます。 - **アプリケーションを登録する** - **認証設定をする** - **巡回設定をする** ## アプリケーションを登録する ![アプリケーションのメニューにハイライト1があり、そのページ内のアプリケーションの登録にハイライト2がある](/docs/ja/_md-assets/2cd353900e-01_app_register_img01.png) 診断対象のアプリケーションを新規登録または追加するためには、画面上部のメニューから「(1)アプリケーション」を選び、「（2）アプリケーションの登録」を押していただくとアプリケーションを登録することができます。 ![Shisho Cloud内のスコープの登録にハイライト](/docs/ja/_md-assets/7ffb0a6305-01_app_register_img02.png) アプリケーションの登録の際、必須で設定していただく項目はアプリケーション名、認証の有無、スコープの３点です。 | 設定項目 | 詳細 | 例 | | :-------------------- | :---------------------------------------------------------------------------------------------------------------- | :----------------------------------- | | 1. アプリケーション名 | Shisho Cloud上で表示する
アプリケーション名を設定していただきます。 | [Staging]Flatt Example Application | | 2. 認証の有無 | 診断対象のアプリケーションがBasic認証や
ユーザーログインによる認証が必要かどうか
を選択していただきます。 | はい | | 3. スコープ | アプリケーションの診断対象とする範囲を
定義します。[**詳細**](/docs/ja/g/concepts/web-application/spec.md) | https://stg-flatt.example | ## 認証設定をする（ユーザーログイン以外の設定） アプリケーションを登録すると、初期設定のチュートリアルが開始されます。 ![Shisho Cloud内の認証設定の選択にハイライト](/docs/ja/_md-assets/ff63ca79ba-02_precondition_01_img01.png) 最初に診断対象のアプリケーションの **(1)認証手段を選択**していただきます。 次に **(2)Basic認証や独自実装のAPIキー認証など**を用いて、リクエストヘッダーに固定のキーが必要な場合は、この画面で設定していただきます。ユーザーログインが必要な場合は次の画面以降で設定していきます。 Basic認証、または固定値のヘッダーの設定が完了したら、**(3)次へ**を押してください。 ## 認証設定をする（ユーザーログインの設定） メールアドレスやパスワード等を用いた対象アプリケーションの利用ユーザーによるログインが必要な場合の認証設定について説明します。 ### ユーザーログインによる認証設定の全体像を確認する ![ログイン画面にGETし、取得してきたレスポンスの結果をPOSTのリクエストに利用している図](/docs/ja/_md-assets/4247a3091f-02_precondition_02_guide.png) ログイン処理時に取得した認証情報をShisho Cloudが巡回・診断時に利用できるようにするため、下記の流れで設定していきます。 1. 認証情報を設定する場所を選択する 2. ログイン処理から認証情報を取得する 3. ログイン処理から取得した認証情報をShisho Cloudに登録する 4. ログイン後にアクセス可能な画面で疎通確認する ### 1.認証情報を設定する場所を選択する ![Shisho Cloud内の認証情報を設定する場所を選択にハイライト](/docs/ja/_md-assets/f1e6333dbe-02_precondition_02_img01.png) まずはじめに、認証情報をCookieに設定しているか、リクエストヘッダーで設定しているかを選択していただきます。ログイン処理を通じて取得したセッションや認証トークン等の設定は次のセクション以降で説明していきます。 ### 2.ログイン処理から認証情報を取得する ユーザーによるログイン処理の際に発行される認証情報を取得するためのリクエストをShisho Cloudに設定していきます。 診断対象のアプリケーションのログイン処理が、ユーザーがIDやパスワード等をログインフォームで送信するような、「[アプリケーションにリクエストを送る](#2-1アプリケーションにリクエストを送る場合)」タイプなのか、またはAuth0やFirebaseなど「[外部サービスにリクエストを送る](#2-2外部サービスauth0などにリクエストを送る場合)」タイプなのかによって、設定する項目は変わります。 それぞれの認証方法について説明していきます。 #### 2-1.アプリケーションにリクエストを送る場合 ![Shisho Cloud内のアプリケーションのリクエストフォームにハイライト](/docs/ja/_md-assets/a3ec5c5f42-02_precondition_02_img02.png) 「(1)認証情報の取得方法」で「アプリケーションにリクエスト」を選択してください。 次に、ログイン処理の際の最初のリクエストをどこに送信しているかを「(2)リクエストの送信先」に入力してください。 「(3)動作確認」を押すと、該当の送信先に対するHTTPリクエストとHTTPレスポンスを確認することができます。入力内容の確認等にご利用ください。 また、ログイン処理が複数ステップ必要な場合もございます（例: csrf_tokenを利用している場合などで、ログイン画面にGETした際のレスポンスの一部の値を用いてPOSTで送信している場合）。 複数ステップが必要な場合は「(4)追加」を押して、ステップを追加することが可能です。 :::info ログイン処理の流れに不明な点がある方は、ブラウザ開発者ツールを用いて、ログイン処理をしている際のネットワークを確認してみるのをオススメします。 ::: ![Shisho Cloud内のリクエストパラメータの選択にハイライト](/docs/ja/_md-assets/a3aa89e521-02_precondition_02_img03.png) ログイン処理でcsrf_token等をリクエストヘッダーに設定している場合やログイン用のIDやパスワードなどをリクエストBodyに設定している場合、「(5)リクエストパラメータの選択」から認証リクエストを設定している箇所を選択いただくと入力フォームが表示されます。 ##### 変数について ![Shisho Cloud内の変数機能にハイライト](/docs/ja/_md-assets/69d09a62f8-02_precondition_02_img04.png) Shisho Cloudでは、リクエストに直前のステップから取得した値を抽出したい場合に、変数として登録することが可能です。
（例: csrf_tokenを利用している場合などで、ログイン画面にGETした際のレスポンスを変数として抽出が可能） 変数を利用したい方は「(6)変数を挿入」を選択していただき、「新しい変数を追加する」から新規の変数を作成可能です。 ![Shisho Cloud内の変数登録ダイアログ](/docs/ja/_md-assets/c25b145a8e-02_precondition_02_img05.png) 変数の設定では、下記の項目が設定可能です。 | 設定項目 | 詳細 | | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | 7. 変数名 | Shisho Cloud内で利用する変数名を指定できます。 | | 8. Valueの抽出元 | どのステップのレスポンスから値を抽出するかを設定可能です。 | | 9. 抽出の手段 | 正規表現でマッチした値を抽出するか、セットされたCookieを
全て抽出するかを選択できます。 | | 10. Valueの抽出箇所 | 正規表現で抽出する場合のみ、レスポンスのHeaderまたはBodyの
どこから抽出するかを選択していただきます。 | | 11. 正規表現 | 正規表現を指定ができます。

例: name="authenticity_token" value="([^"]+)" | | 12. 正規表現のグループ番号 | 正規表現は、文字列の集合を表す汎用的な記法です。
何番目のグループにマッチした文字列を抽出するかを指定できます。

例: 1 | ![Shisho Cloud内の変数登録ダイアログの抽出の手段がCookieになっている](/docs/ja/_md-assets/73699ca68d-02_precondition_03_img02.png) セットされたCoookieを全て抽出する場合、正規表現を書かずに設定が可能です。 Bear認証など、 ##### 設定した値の確認 ![Shisho Cloud内のステップ2というカード下部の動作確認にハイライト](/docs/ja/_md-assets/87652fa7e3-02_precondition_02_img06.png) ログイン処理の設定が完了した場合、Shisho Cloudがログインに成功できるか「(13)動作確認」をしてみましょう。 #### 2-2.外部サービス(Auth0など)にリクエストを送る場合 ![Shisho Cloud内のステップというカード内で外部サービスが選択されている](/docs/ja/_md-assets/c74e5b0073-02_precondition_02_img02-2.png) Shisho Cloudでは現状Auth0、Firebase、Cognitoを利用した外部サービスの認証に対応しております。ユーザーが診断対象のアプリケーションにログインする際の情報と外部サービスの設定に関する情報を設定しましょう。 ### 3.ログイン処理から取得した認証情報をShisho Cloudに登録する 「**[1.認証情報を設定する場所を選択する](#1認証情報を設定する場所を選択する)**」で設定したCookieまたはカスタムヘッダーへ、「**[2.ログイン処理から認証情報を取得する](#2ログイン処理から認証情報を取得する)**」で取得した認証情報を設定する流れを説明します。 ![Shisho Cloud内のログイン処理から取得した認証情報の中で、変数を挿入にハイライト1、更新間隔にハイライト2、ログイン後にアクセス可能なエンドポイントにハイライト3](/docs/ja/_md-assets/12d36ab015-02_precondition_03_img01.png) 「(1)変数を挿入」を押し「[変数について](#変数について)」で説明した流れで、ログイン処理から抽出した値を登録します。 #### 認証情報を更新間隔を設定する 次にセッションや認証トークン等の期限が切れるタイミングに合わせて、Shisho Cloudが最新の認証情報を取得できるように認証情報の(2)更新間隔を設定しましょう。 ### 4.ログイン後にアクセス可能な画面で疎通確認する 全ての設定が完了したら、(3)ログイン後にアクセス可能なエンドポイントに対して動作確認をしてみましょう。 :::info ここで設定するエンドポイントは認証が成功しているかどうかを確認するために利用するだけです。認証していないとアクセスできないエンドポイントを適当に指定してみましょう。 ::: ![](/docs/ja/_md-assets/d377a68fbc-02_precondition_03_img04.png) 動作確認を行い、認証後のエンドポイントのアクセスが成功していそうであれば、認証設定は終了です。 ## 診断対象エンドポイントを洗い出す Shisho Cloud では診断対象アプリケーションのエンドポイントを洗い出すために、複数の方法を提供しています。診断したいアプリケーションに適した方法を選び、エンドポイントの洗い出しを行いましょう。 それぞれの方法の詳細は下記をご確認ください。 - [OpenAPI Specification からのインポート](/docs/ja/g/getting-started/register-web-applications/collect-endpoints/openapi/index.md) - [GraphQL スキーマからのインポート](/docs/ja/g/getting-started/register-web-applications/collect-endpoints/graphql/index.md) - [Connect RPC からのインポート](/docs/ja/g/getting-started/register-web-applications/collect-endpoints/connectrpc/index.md) - [自動巡回 (クロール)](/docs/ja/g/getting-started/register-web-applications/collect-endpoints/crawling/index.md) ![](/docs/ja/_md-assets/4fc8574471-03_crawling_img01.png) エンドポイント一覧画面に全てのエンドポイントが登録されていれば、Webアプリケーションのセットアップは終了です。 ## よくある質問 ### 変数の抽出がうまくいかない 正規表現の記法が間違っている可能性がございます。動作確認を実行していただくと、各ステップから抽出された変数の値が確認できます。 また、変数の抽出元がBodyであるはずなのに、Headerにしている場合も抽出に失敗してしまうので、抽出元を再度ご確認ください。 ### リクエストパラメータに変数と固定値を組み合わせたい `Bear {{.変数名}}` のような形で指定することが可能です。 固定値のみ送信したい場合は`FixedValue`のような形で指定することもできます。 ### ログイン画面から返ってきたSet-Cookieを次のステップのリクエストで使いたい 「(1)変数を挿入」を押し「[変数について](#変数について)」で説明した流れで変数を作成することができます。 「抽出の手段」の「セットされた Cookie を抽出する」で変数を定義し、リクエストに指定してください。