多用途認証サイトのファーストステップガイド (1) のバックアップ(No.3)

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• ソース を表示
• 多用途認証サイトのファーストステップガイド (1) は削除されています。
  • 1 (2017-05-20 (土) 19:45:31)
  • 2 (2017-05-20 (土) 19:48:38)
  • 3 (2017-05-21 (日) 15:46:26)

---

「Open棟梁 wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る?

目次 †

概要 †

多用途認証サイト（Multi-purpose Authentication Site）?の導入前の評価を行うためのファーストステップガイド。

(1) 前提 †

v00-50時点の前提環境 †

• Visual Studio 2015
• .NET Framework 4.6
• SQL Server (Express) (メモリストアの検証ではRDBは不要)

(2) 一式のダウンロードとセットアップ †

[Download ZIP]する。 †

以下から、[Download ZIP]する。
https://github.com/OpenTouryoProject/MultiPurposeAuthSite/

• branchを選択してください。
• 現時点では、develop branchを選択（master branchにプッシュしていない）。
• 上級者は[Download ZIP]ではなく、git cloneでも可能。

localのFileSystem?に解凍する。 †

どこでもイイですが、ココではCドライブ直下に解凍した前提で説明を続けます。

一式のビルドする。 †

ビルド †

以下のバッチを実行して、多用途認証サイトをビルドします。

• 1_DeleteDir?.bat
• 2_DeleteFile?.bat
• 3_Build_Framework.bat
• 4_Build_Framework_Tool.bat
• 10_MultiPurposeAuthSite?.bat

プロキシ認証 †

• NuGet?パッケージの復元のため、プロキシ認証を求められる場合は、
  z_Common.batファイルにプロキシ認証のCredentialを設定して下さい。

  http_proxy=http://[username]:[password]@[proxy fqdn or ip address]

• 若しくはVisual Studioから開いてビルドして下さい。
  Visual Studioがプロキシ認証のCredential入力を要求してきます。

(3) app.configファイルを設定する。 †

以下の項目を設定する。

Administrator（システム管理者のアカウント） †

https://github.com/OpenTouryoProject/MultiPurposeAuthSite/blob/develop/root/programs/MultiPurposeAuthSite/MultiPurposeAuthSite/app.config#L93

システム管理者のアカウントを入力する（以下の要件を満たす必要がある）。

• ユーザ名検証（既定のユーザ名は、E-mail

• パスワード検証（8文字以上の大文字・小文字、数値、記号

登録されるテストユーザのpassword †

https://github.com/OpenTouryoProject/MultiPurposeAuthSite/blob/develop/root/programs/MultiPurposeAuthSite/MultiPurposeAuthSite/app.config#L109

• テスト用に登録される下記テストユーザのパスワードを入力する。
  • super_tanaka@gmail.com
  • tanaka@gmail.com
  • super_sato@gmail.com
  • sato@gmail.com

• 前述と同様に、パスワードの要件を満たす必要がある。

外部ログインの追加時に XSRF の防止 †

https://github.com/OpenTouryoProject/MultiPurposeAuthSite/blob/develop/root/programs/MultiPurposeAuthSite/MultiPurposeAuthSite/app.config#L140

適当なランダム文字列を設定する（下記のようなサイトを使用する）。

• パスワード自動生成 (Automated Password Generator)
  http://www.graviness.com/temp/pw_creator/

JWTの署名に使用する X.509 証明書 †

https://github.com/OpenTouryoProject/MultiPurposeAuthSite/blob/develop/root/programs/MultiPurposeAuthSite/MultiPurposeAuthSite/app.config#L173

• デプロイした先に合わせ証明書のパスを変更する。

• ココでは、Cドライブ直下ということなので、以下のようにパスを設定する。

• C:\MultiPurposeAuthSite?\root\programs\MultiPurposeAuthSite?\CreateClientsIdentity?\CreateClientsIdentity_RS256.pfx

• C:\MultiPurposeAuthSite?\root\programs\MultiPurposeAuthSite?\CreateClientsIdentity?\CreateClientsIdentity_RS256.cer"

(4) 証明書をインストールする。 †

以下の位置にあるテスト用のJWT署名・検証用の証明書をインストールする。

• C:\MultiPurposeAuthSite?\root\programs\MultiPurposeAuthSite?\CreateClientsIdentity?

*.cer †

CreateClientsIdentity_RS256.cer をダブルクリックし、
「信頼されたルート証明機関」にインストール

*.pfx †

CreateClientsIdentity_RS256.pfx をダブルクリックし、
証明書のインポートウィザードを使用してインストール（パスワードは "test"）

(5) 疎通確認を行う。 †

• この設定状態ではメモリストアを使用しているため、デバッグを停止する度にユーザが初期化されるため注意する。

• 毎回、サインアップを繰り返すのが面倒な場合は、テストユーザのアカウントを使用すると良い。

国際化対応を確認する。 †

• ブラウザの既定の言語を変更すると（以下は、IEでの設定例）

#ref(): File not found: "IE_LanguageConfig.png" at page "多用途認証サイトのファーストステップガイド (1)"

• 日英の国際化対応がされていることを確認できる。

#ref(): File not found: "DisplayedInEnglish.png" at page "多用途認証サイトのファーストステップガイド (1)"

• 国際化対応の動作を変更するには、以下のweb.configの設定を見直す。
  https://github.com/OpenTouryoProject/MultiPurposeAuthSite/blob/develop/root/programs/MultiPurposeAuthSite/MultiPurposeAuthSite/Web.config#L19

  <globalization culture="ja-jp" uiCulture="auto"/>

レスポンシブデザインを確認する。 †

• 多用途 認証サイトの画面は、Open棟梁2.0テンプレートを使用しており、レスポンシブデザインに対応している。
• レスポンシブデザインの確認のため、画面サイズを小さくすると、メニューがハンバーガーメニューに変更されることを確認する。

#ref(): File not found: "ResponsiveWebDesign.png" at page "多用途認証サイトのファーストステップガイド (1)"

サインアップする。 †

ヘッダに表示されているSignupボタンを押下してサインアップ画面に遷移してサインアップを行う。

#ref(): File not found: "Signup.png" at page "多用途認証サイトのファーストステップガイド (1)"

E-mail confirmationを確認する。 †

E-mailアドレスの確認（E-mail confirmation）を行う。

確認用リンクを取得する。 †

この設定状態はデバッグモードなのでVisual Studioのデバッグ画面に確認用リンクが表示される。
※ 本番時は、E-mailに本、確認用リンクを含んだE-mailが送信される。

#ref(): File not found: "E-mailConfirmation.png" at page "多用途認証サイトのファーストステップガイド (1)"

確認用リンクを貼り付けて実行する。 †

確認用リンクをブラウザのアドレスバーに貼り付けてEnter押下で以下の画面が表示される。
「ログインするにはここをクリックしてください。」を押下してログイン画面に遷移する。

#ref(): File not found: "E-mailConfirmed.png" at page "多用途認証サイトのファーストステップガイド (1)"

サインインを確認する。 †

ログイン画面でサインインする。

#ref(): File not found: "Signin.png" at page "多用途認証サイトのファーストステップガイド (1)"

アカウントを編集する。 †

• サインインした後、ヘッダに表示されている「こんにちは[メールアドレス]さん！」をクリックし、アカウント編集を行う。

#ref(): File not found: "Edit.png" at page "多用途認証サイトのファーストステップガイド (1)"

• この設定状態では、SecurityStamp?機能が有効になっている。
  この場合、編集後、幾らか時間が経過した後に自動的にサインアウトするので注意する。

パスワードを変更する。 †

• [パスワードの変更]リンクを押下して、[パスワードの変更]画面に遷移し、パスワード変更を行う。

• この設定状態では、SecurityStamp?機能が有効になっている。
  この場合、編集後、幾らか時間が経過した後に自動的にサインアウトする。

• 再度サインインする際、変更後のパスワードでサインインできることを確認する。

電話番号を設定する。 †

• [電話番号の設定]リンクを押下して、[電話番号の設定]画面に遷移し、電話番号設定を行う。

• [電話番号の設定]を行うと、電話番号の確認（TelNum? confirmation）が行われる。

• この設定状態はデバッグモードなのでVisual Studioのデバッグ画面に確認コードが表示される。
  ※ 本番時は、携帯電話（スマホ）に本コードを含んだSMSが送信される。

#ref(): File not found: "TelNumConfirmation.png" at page "多用途認証サイトのファーストステップガイド (1)"

• 確認コードを入力して実行すると以下の画面が表示される。

#ref(): File not found: "TelNumConfirmed.png" at page "多用途認証サイトのファーストステップガイド (1)"

• ここで、電話番号が入力できたことを確認する。

• 必要に応じて、[電話番号の削除]リンクを押下して、電話番号の削除をテストする。

2要素認証をオンにする。 †

• 2要素認証の[有効にする]リンクを押下して、2要素認証をオンにする。

  #ref(): File not found: "EnableTwo-FactorAuthentication.png" at page "多用途認証サイトのファーストステップガイド (1)"

• この状態で別のブラウザ（Chrome ---> Internet Explorer）を立ち上げてサインインを試みる。

• すると、以下のような画面が表示されるので、好みの通知プロバイダを選択して送信を押下する。
  （電子メールコードと電話コードから選択可能だが、電話コードは電話番号を入力しておかないと表示されない）

#ref(): File not found: "Two-FactorAuthentication.png" at page "多用途認証サイトのファーストステップガイド (1)"

• 後は、前述の電話番号の設定のように、確認コードが送信されるので、
  ソレを使用して2要素認証のプロセスを完了することで、別ブラウザでもサインインできるようになる。

パスワードをリセットする。 †

• 次に、パスワード・リセットを行うので、ヘッダに表示されているSignoutボタンを押下して一度サインアウトを行う。

• ヘッダに表示されているSignupボタンを押下してサインアップ画面に遷移する。

• このサインアップ画面で、「パスワードを忘れた場合。」リンクを押下する。

• すると、以下の「パスワードを忘れましか？」画面に遷移するため、
  自分のアカウントのE-mailのアドレスを入力して送信ボタンを押下する。

#ref(): File not found: "PasswordReset.png" at page "多用途認証サイトのファーストステップガイド (1)"

• 後は、前述のE-mailアドレスの確認（E-mail confirmation）のように、確認用リンクが送信されるので、
  ソレを使用してパスワード・リセットのプロセスを完了させることでパスワード失念時もセルフのリカバリができる。

• パスワード・リセットのプロセスの完了後、確認のためサインインが成功することを確認する。

アカウントのロックアウトを確認する。 †

• 次に、アカウントのロックアウトの確認を行うので、ヘッダに表示されているSignoutボタンを押下して一度サインアウトを行う。

• 初期状態では、5回間違えると5分間、アカウントのロックアウトが行われる（指定の回数、サインインに失敗すると以下の画面が表示される）。

#ref(): File not found: "AccountLockout.png" at page "多用途認証サイトのファーストステップガイド (1)"

• アカウントのロックアウト中はサインインが失敗することを確認し、
  指定時間経過後にアカウントのロックアウトが解除され、サインインが成功することを確認する。

(6) OAuth2の機能確認を行う。 †

Authorization Codeグラント種別 †

以下は未サインイン時のシーケンス。
サインイン済みの場合は、ログイン画面がショートカットされる。

フローを開始する。 †

スターターのリンクをクリックする。

#ref(): File not found: "AuthorizationCode1.png" at page "多用途認証サイトのファーストステップガイド (1)"

権限を認可する。 †

• ログイン画面が表示され、サインイン後に、以下の権限認可画面が表示される。
• 権限とはスターターのリンクに設定されているscopeというクエリ文字列

  #ref(): File not found: "AuthorizationCode2.png" at page "多用途認証サイトのファーストステップガイド (1)"

確認画面(テスト用)で確認する。 †

• 以下の画面が表示され、Bearer Tokenを確認できる。
  ※注意 : この画面はテスト用。本来ココに表示されている情報は画面上に露見させない。

  #ref(): File not found: "AuthorizationCode3.png" at page "多用途認証サイトのファーストステップガイド (1)"

• 以下は確認画面(テスト用)の項目値の説明

• State
  • CSRF(XSRF)を防止するための値
  • 上段エンドポイントで取得したQuery値
  • 下段がスターターのリンクに格納したQuery値（テスト用にSessionで取得）

• Code
  Authorization CodeのCodeの値（Bearer Tokenに変換する前のコード）

• Access Token
  • Jwt
    JWT形式のAccess Token(JWTに関する詳細はコチラを参照のこと)

• Json
  JWTのペイロード部分をBase64UrlデコードしたJSON文字列。
  IDトークンと同じ形式。これに、roles、scopesを追加してある。

  {
    "roles":["xxxx","yyyy"],
    "scopes":["username","email","telno","aaa","bbb"],
    "iss":"http://jwtssoauth.opentouryo.com",
    "aud":"xxxx",
    "sub":"xxxx@gmail.com",
    "iat":"nnnn",
    "exp":"nnnn",
    "nonce":"nnnn",
    "email":"xxxx@gmail.com"
  }

• Refresh Token
  Access Tokenのリフレッシュ処理に使用するRefresh Token

• ボタン
  • Refresh
    Refresh Tokenを用いてAccess Tokenのリフレッシュする Tokenエンドポイントを呼び出す。

• Get user claim
  Access Tokenを使用してユーザーのクレーム情報を取得するResources ServerのWeb APIを呼び出す。

• Response
  サーバーで行ったHTTPClientを使用したRESTのレスポンスを表示する。

JWTの署名・検証の処理を確認する。 †

• 画面下部のリンクからhttps://jwt.io/にアクセスして、

• 「Encoded PASTE A TOKEN HERE」欄に前述の「Access Token(Jwt)」を貼り付ける。

• すると、JWTのヘッダーとペイロードがBase64UrlデコードされJSONが表示される。

• 次に、「ALGORITHM」欄のドロップダウンリストを「RS256」に切替える。

• この状態で、以下のpublicKey.key中の公開鍵を「VERIFY SIGNATURE」欄のPublic Keyに貼り付けると、
  C:\MultiPurposeAuthSite??\root\programs\MultiPurposeAuthSite??\CreateClientsIdentity??\publicKey.key

#ref(): File not found: "jwt_io1.png" at page "多用途認証サイトのファーストステップガイド (1)"

• [Invalid Signature]（赤）→[Signature Verified]（青）に表示が切り替わり、JWTの署名が検証されたことを確認できる。

#ref(): File not found: "jwt_io2.png" at page "多用途認証サイトのファーストステップガイド (1)"

Implicitグラント種別 †

以下は未サインイン時のシーケンス。
サインイン済みの場合は、サインイン画面がショートカットされる。

フローを開始する。 †

スターターのリンクをクリックする。

#ref(): File not found: "Implicit1.png" at page "多用途認証サイトのファーストステップガイド (1)"

確認画面(テスト用)で確認する。 †

• 以下の確認画面(テスト用)が表示される。

• [Get user claim]ボタンを押下するとAccess Tokenを使用してユーザーの
  クレーム情報を取得するResources ServerのWeb APIを呼び出すことができる。

#ref(): File not found: "Implicit2.png" at page "多用途認証サイトのファーストステップガイド (1)"

• 以下のようにWeb API呼出の結果が表示される。

#ref(): File not found: "Implicit3.png" at page "多用途認証サイトのファーストステップガイド (1)"

Resource Owner Password Credentialsグラント種別 †

こちら?の手順に従ってテストを行う。

Client Credentialsグラント種別 †

こちら?の手順に従ってテストを行う。

     

Site admin: OpenTouryo

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.049 sec.