Skip to content

Latest commit

 

History

History
210 lines (154 loc) · 13.3 KB

setup.md

File metadata and controls

210 lines (154 loc) · 13.3 KB
Raw

事前作業

はじめに

GitHubのCodeSpaceで実行

  • GitHub Codespaceを利用することでブラウザ上でサンプルアプリケーションを実行することが可能です
  • GitHub Codespaceの利用には、GitHubアカウントが必要です。適切なアカウントでログインしてください
  • 詳細はGithubのページを参照して下さい
  • GitHub CodespaceはFreeプランでも一定の利用が可能となっています。Codespaceの実行リソースは利用者様のアカウントに紐づきますので、適宜ご確認の上ご利用ください。詳細はGitHub Codespaces の請求についてを参照して下さい

1.Codespaces でサンプルアプリケーションの実行

  • このリポジトリ、Transmit Security Platform サンプルアプリケーション を開き、<> Codeボタンをクリックし、タブ右側Codespacesを開いて下さい

  • Create codespaceまたは メニュー右上の+をクリックして下さい

  • クリック後、Codespaceが実行されRepositoryの内容が展開されます。表示されたCodespaceの左メニュー上部にマウスを移動し、New Fileボタンをクリックし、.envという名称でファイルを作成して下さい

  • sample.envの内容を.envにコピーします。

  • TS_REDIRECT_URIの値を指定します。これは、Transmit Security Platformで認証機能を用いた際に、利用する値となります。以下の内容を参考に指定して下さい

    2023/08/19現在、sample.env のコメント欄では-8080.preview.appとなっていますがこちらのマニュアルの通りpreviewの文字列は不要となっています

    • TS_REDIRECT_URI: 作成したCodespaceのURLをブラウザのURL欄からコピーし貼り付けます。ホスト部に-8080.appを追加し、URLパスに/completeを追加します
    • TS_REDIRECT_URIは次の手順でも利用しますので、すぐにコピーできる状態にしておいて下さい

  • その他の値は後ほど記述します

2.Transmit Security Platform にアプリケーションの登録

  • Transmit Security portalにアクセスし、ログインします

  • Applicationを作成します。左のメニューよりApplicationsを開き、+Add applicationsをクリックします

  • 以下のパラメータを参考に設定します

    • Application name: codespace-test
    • Public sign-up: Allow registration を選択
    • Client name: codespace-test
    • Redirect URI : 前の手順で確認したTS_REDIRECT_URIのURI情報

  • 画面最下部Addをクリックし、Applicationの作成を完了します

3.サンプルアプリケーションの設定を記述

  • 設定を行ったアプリケーションの情報を.envファイルの各パラメータの値として指定します

  • Transmit Security portalを開き、左のメニューよりApplicationsを開きます

  • 先ほど作成したアプリケーションを開きます。以下の内容を参考に、Application ID、Client ID、Client Secretの値を各パラメータの値として貼り付けます

  • 以下の内容を参考にパラメータを設定します

    • TS_REDIRECT_URI: 先ほど作成したTS_REDIRECT_URIのURI情報(貼り付け済み)
    • VITE_TS_CLIENT_ID: Client IDの値
    • TS_CLIENT_SECRET: Client Secretの値
    • TS_APP_ID: Application IDの値

4.Transmit Security Platform にアプリケーションの設定追加

  • Transmit Security portalを開き、左のメニューよりApplicationsを開きます

  • 画面上部のメニューより先ほど作成したアプリケーションを開きます

  • Authentication methodsの欄からWebAuthnを選択します

    • WebAuthn RP origin : Redirect URIで指定したURI情報から末尾/completeを削除した文字列
    • WebAuthn RP ID : WebAuthn RP originで指定した文字列のFQDN部分

  • Saveをクリックします

5.アプリケーションのビルド、実行

  • Codespace の右下のターミナルを開きます。ターミナルが開かれていない場合にはTERMINALのタブをクリックして下さい

  • 初期状態でサンプルアプリケーションが配置されたディレクトリ(/workspaces/ciam-expressjs-vanilla-samples)となっています。このディレクトリで以下コマンドを実行し、ビルドを行って下さい

    yarn

  • ビルドが完了後、以下コマンドを実行し、サンプルアプリケーションを実行して下さい。以下のいずれかの手順で実行してください。実行例のサンプルアプリケーションはlogin-with-emailです

    • launch.shの実行。コマンド入力後、メニューが表示されますのでカーソルキーで選択し、Enterを押して下さい 
      ./launch.sh
    • yarn startの実行。環境変数SAMPLEの値として実行するアプリケーションのディレクトリ名を指定し、実行してください 
      SAMPLE=login-with-email yarn start

  • 正しく起動すると、ブラウザでサンプルアプリケーションに接続可能になります。以下のいずれかの手順でアプリケーションに接続して下さい

    • 右下に表示されるポップアップのOpen in Browserをクリック
    • PORTS のタブを開き、Local Address列のWebPage🌐をクリック
    • 正しくPORTが追加されない場合、PORTSのタブを開き、Add Portをクリックし8080を追加して下さい。その後、Local Address列のWebPage🌐をクリック

6.アプリケーションの停止

Warning Codespaceはお客様アカウントに紐作りソースで動作しています。動作確認が完了後、アプリケーションを停止し、Codespaceを削除して下さい

  • Codespaceの右下、TERMINALのタブをクリックして下さい

  • Ctrl+Cを入力し、アプリケーションを停止させて下さい

  • このリポジトリ、Transmit Security Platform サンプルアプリケーション を開き、<> Codeボタンをクリックし、タブ右側Codespacesを開いて下さい

  • 実行中のものが表示されていますので…をクリックしDeleteをクリックして下さい。確認のためポップアップが表示されますのでOKをクリックして下さい

ローカル環境で実行

  • ローカル環境でサンプルアプリケーションの実行が可能です

  • アプリケーションの実行に、Node.js を用います。以下のいずれかのバージョンをご用意ください

    • v14.18.0+
    • v16.0.0+

  • 本作業手順は、以下Docker Imageでの実行結果を示しています。適宜ご利用環境に、ご利用ください

1.ローカル環境でサンプルアプリケーションの実行

  • ローカル環境でgitコマンドを用いてサンプルアプリケーションのファイルを取得します

    cd ~/
git clone https://github.com/TransmitSecurity/ciam-expressjs-vanilla-samples.git
cd ~/ciam-expressjs-vanilla-samples/

  • アプリケーションを実行する際にいくつかパラメータを指定します。TS_REDIRECT_URIは、 http://localhost:8080/completeとなります。以降の手順ではこちらの値を指定してください

2.Transmit Security Platform にアプリケーションの登録

3.サンプルアプリケーションの設定を記述

  • 設定を行ったアプリケーションの情報を.envファイルの各パラメータの値として指定します
  • codespaceの手順の内容に従って各パラメータを取得してください
  • ターミナルで以下のいずれかの手順でファイルを生成してください

    • sample.envを.envというファイル名でコピーし、テキストエディタで内容を変更する

    • 以下コマンドを参考に.envファイルを作成してください

      ## cd ~/ciam-expressjs-vanilla-samples/
cat << EOF > .env
TS_REDIRECT_URI=http://localhost:8080/complete
VITE_TS_CLIENT_ID=<APP CLIENT ID>
TS_CLIENT_SECRET=<APP CLIENT SECRET>
TS_APP_ID=<APP ID>
EOF

4.Transmit Security Platform にアプリケーションの設定追加

  • codespaceの手順の内容に従って作業をしてください
  • パラメータに指定する内容は以下の内容としてください

5.アプリケーションのビルド、実行

  • アプリケーションの作業手順は、codespaceの手順と同様です
  • アプリケーション実行後、ブラウザを開き、http://localhost:8080へアクセスしてください

6.アプリケーションの停止

  • アプリケーションの利用終了後、ターミナルでCtrl-Cを入力し、アプリケーションを停止してください

Docker Containerで実行

  • サンプルアプリケーションをDockerで実行する際に、SAMPLEの値にテストを行うサンプルアプリケーションを指定します。実行するアプリケーションは、GitHubの内容を確認してください
  • アプリケーションを実行する際にいくつかパラメータを指定します。TS_REDIRECT_URIは、 http://localhost:8080/completeとなります。以降の手順ではこちらの値を指定してください

1.Transmit Security Platform にアプリケーションの登録

2.Transmit Security Platform にアプリケーションの設定追加

  • codespaceの手順の内容に従って作業をしてください
  • パラメータに指定する内容は以下の内容としてください

3.アプリケーションの実行

  • 設定を行ったアプリケーションの情報をDocker Container実行の際にパラメータの値として指定します

  • codespaceの手順の内容に従って各パラメータを取得してください

  • 実行コマンドのサンプルは以下です。適宜値を変更して利用してください。実行例のサンプルアプリケーションはlogin-with-emailです

    docker run --platform linux/amd64 \
-e SAMPLE=login-with-email  \
-e TS_REDIRECT_URI=http://localhost:8080/complete  \
-e VITE_TS_CLIENT_ID=<APP CLIENT ID>  \
-e TS_CLIENT_SECRET=<APP CLIENT SECRET>  \
-e TS_APP_ID=<APP ID>  \
-p 8080:8080 transmitsecurity/js-vanilla-samples:latest

  • アプリケーション実行後、ブラウザを開き、http://localhost:8080へアクセスしてください

4.アプリケーションの停止

  • アプリケーションの利用終了後、ターミナルでCtrl-Cを入力し、アプリケーションを停止してください