起動パラメータ
ApiFrontの動作設定は管理用のGUIは有しておらず、全て起動時のオプションにて行います。
また起動オプションはyaml形式のコンフィグファイルとしても記述可能で、デプロイ環境毎に作成・管理し、ファイル指定で起動時するような利用方法も可能です。
Qmonus-SDK Labをご利用の際は、起動オプションはいずれもGUIから指定することが可能です。
グローバル設定
オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | +appname | string | “Casval” | |
2 | +secure | boolean | false | true の場合、HTTPSでの起動となります。証明書ファイルの配置が必要です。(./keys/rsa.pem , ./keys/cert.pem) また、秘密鍵(rsa)にパスワード設定されている場合は、+securePassphrase コンフィグでパスワードの指定が必要です。 |
3 | +appport | number | 8080 | ポート番号 |
4 | +baseURL | string | - | Publicな、BaseURL(認証のリダイレクトに利用) |
5 | +production | boolean | true | 商用環境での起動かどうかを指定します。開発時に利用するデバッグ機能やスタックトレース出力、開発用API機能が非活性になります。開発でこれらの機能を利用する際は、明示的に false を指定してください。 |
6 | +errorBackUrl | string(url) | - | 内部エラーや404エラー発生時に表示されるエラー画面の「戻る」ボタンでの遷移先を指定できます |
7 | +pushheaders.XX | string | - | SPAページダウンロードやAPIレスポンスのHTTPヘッダの値を指定することができます。[XX] には任意のHTTPヘッダを指定することができます。 |
8 | +configs | string | - | /session API でSPAから取得可能なデータ内容を指定できます。JSON.parse可能な文字列を指定します。parseに失敗した場合は起動に失敗するため、安全な起動のためにはyaml形式の起動ファイルで指定することをお勧めします |
- pushheadersの使い方
SPAページダウンロードやAPIレスポンスのHTTPヘッダに以下のような指定で任意のヘッダ値を挿入できます。
boot-params
+pushheaders.Access-Control-Allow-Origin=https://hogeohge.axis-dev.io +pushheaders.Access-Control-Allow-Credentials=true
- configsプロパティで、環境依存データを管理して、SPAから動的にAPIから処理させることができます。例えばSPAのプルダウンの候補値を環境毎に変えたい場合などは、SPA側で持つのではなくconfigsプロパティで管理しておき、SPAからAPI参照で取得させることで、環境依存データの分離が可能になり環境毎にSPAのビルドを行う必要がなくなります。
boot-params
+configs="{\"enum_data\":[\"dev-001\",\"dev-002\"]}"
SPAホスティング
ホスティングするSPAの情報を設定します。content.baseやcontent.mainが指定されない場合は、ApiFrontのサンプルページが表示されます。
オプション | 型 | デフォルト | 説明 | |||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | +content.base | string(filepath) | - | SPAのコンテンツディレクトリを指定します | ||||||||||||||||||
2 | +content.main | string(ファイル名) | - | コンテンツのメインファイルです。ディレクトリからの相対パスで指定します。htmlもしくはejs/pug形式のファイルを指定します。 | ||||||||||||||||||
3 | +content.route | string(path) | / | ランディングページのパスを指定します。/:id/ のような変数を受け取るような指定も可能です。デフォルトは [/] です | ||||||||||||||||||
4 | +content.enableHistory | boolean | false | SPAのルーティングライブラリでhistoryモードを利用する場合 true を指定します。 | ||||||||||||||||||
5 | +content.enableMultipage | boolean | false | マルチページのホスティングを有効にします。マルチページの遷移時にはSPAのコンテンツロード同様に都度認証シーケンスが動作します(v21.10R2からの機能) | ||||||||||||||||||
6 | +content.pageRoot | string | - | マルチページのホスティングで、認証シーケンスから除外したいコンテンツのディレクトリを指定します。(/static など)指定した配下のディレクトリのコンテンツアクセスでは認証リダイレクトが動作しなくなります。セッションが存在しない場合にはエラーページが表示されます。(v21.10R4からの機能) | ||||||||||||||||||
7 | +content.securityPolicy | string | self | Content-Security-Policyのコントロールを行います。(v21.11R1からの機能) [nonce] - 最も厳格なモードです。インラインスクリプト/インラインスタイルは許可されません。外部リソースの読み込みは injection指定によって行ってください。 [self] - 自サイトのコンテンツのみ許可します。インラインスクリプト/インラインスタイルは許可します。 外部リソースの読み込みは injection指定によって行ってください。 [null/ブランク] - Content-Security-Policyの設定は行いません [custom string] - 上記以外のstringリテラルを指定する事で、明示的にCSP設定をカスタマイズすることが可能です。 default-src ‘self’;script-src… |
||||||||||||||||||
8 | +content.securityPolicyOptions | object | - | Content-Security-Policyの設定をカスタマイズできます。[v22.2LTS-patch20220622〜]{additionalScriptSrc : script-src / script-src-elemにSourceを追加します。ブランクで複数指定することができます。 |
||||||||||||||||||
9 | +content.isFrame | boolean | false | コンテンツをIFrameを利用してレイヤー表示します。SPAはインナーフレームで表示されます。下記に記載される各種インジェクションは、アウターフレームに対して行われるため、インジェクションでSPAが汚染される場合などに利用します。 | ||||||||||||||||||
10 | +content.delay | number(millsec) | 0 | コンテンツ描画を指定時間(ミリ秒)遅延させます | ||||||||||||||||||
11 | +content.build | object | - | コンテンツのビルド設定を行います。production モードでは利用できません。
|
||||||||||||||||||
12 | +content.enableInlineScript | boolean | false | ユーザが指定したmainファイルに存在するnonce属性を持たないscriptタグに対して、nonce属性を追加します。Nuxtのbuild時にinline-scriptが自動生成される場合などで、CSPの設定に抵触する問題を解消可能です。 |
指定したビルドコマンドにて、ApiFrontの起動時にSPAのビルドが行われます。また、watch.pathを指定した場合、ディレクトリ配下のファイルに変更があった際にもビルドが行われます。ビルド中は一時的にファイルアクセスができなくなる場合があるため、商用環境ではこの機能は利用せず、ビルド済みSPAを利用するようにしてください。
boot-params
+content.build.cwd="/var/plugins/xxx_gui/client" +content.build.command="npm ci --legacy-peer-deps&&npm run build" +content.build.watch.path="./src" +content.build.watch.pattern="/**/*.js"
build機能を用いてnpm config setを実行し、.npmrcファイルを更新することでprivate packageへの認証を設定することが可能です。
下記はGitHubで準備したprivate packageを使用した例になります。
boot-params
+content.build.cwd="/var/plugins/xxx_gui/client" +content.build.command="\"npm config set //npm.pkg.github.com/:_authToken=********** && npm config set @{workspace}:registry=\"https://npm.pkg.github.com\" && npm ci --legacy-peer-deps && npm run build\""
インジェクション
SPAのレンダリング時に、任意のスクリプトやスタイルタグを挿入することができます
オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | +content.title | string | - | <title>タグを挿入します。ブラウザのタブ表示をカスタマイズできます |
2 | +content.desc | string | - | <desc>タグを挿入します。非推奨です。 |
3 | +content.snippets.css | array (url) | - | <css href=‘’>タグを挿入します。複数指定が可能です |
4 | +content.snippets.style | array(string) | - | <style>タグを挿入します。指定した文字列のCSSが挿入されます。複数指定が可能です |
5 | +content.snippets.js | array(url) | - | <script src=‘’>タグを挿入します。複数指定が可能です |
6 | +content.snippets.script | array(string)) | - | <script>タグでスクリプトを挿入します。複数指定が可能です |
7 | +content.snippets.favicon | array(url))) | - | <favicon>タグを挿入します |
8 | +content.meta | object | - | <meta> タグを挿入します。キー、バリューで指定した値がそれぞれ、name , content アトリビュートに設定されます。 |
content.snippets の指定は、content.snipets と記載しても動作します
セッション管理
ユーザのログイン状態はセッションストアで管理され、セッション識別用のIDはCookieでブラウザに保存されます。
オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | +session.cookieMaxAge | number | 3,600,000 | クッキーの有効期限を指定します(ミリ秒)デフォルトは[3,600,000]ミリ秒 = 1時間です。 |
2 | +session.cookieSecure | boolean | false | クッキーのSecure属性です。デフォルトは[false]です。 |
3 | +session.cookieSameSite | string | - | クッキーのSameSite属性です。 ‘none’/'strict’のいずれかを指定します |
4 | +session.rolling | boolean | true | サーバアクセス時(APIアクセスも含む)にCookieの有効期限を延長するか否かを指定します。 |
5 | +session.store | string | “File” | セッションストアのタイプを指定します。File / Redis のいずれかを指定します |
6 | +session.storeOptions.host | string | - | セッションストアでRedisを利用する場合にhostを指定します。 |
認証
オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | +authentication.strategy | string | - | 認証方式を指定します。指定しないと認証はされません |
2 | +authentication.generator | string | - | アクセストークンの取得方式を指定します。指定しないとトークン取得はされません |
3 | +authentication.transparentTokens | boolean | false | API-Proxy時にアクセストークンの付与を自動で行います [注意!] この設定を有効にした場合、/session 応答で token情報を返却することはありません。 |
4 | +authentication.cacheTokens | boolean | false | ApiFront側で外部認証連携で取得したアクセストークンをキャッシュすることができます。true の場合、該当セッションのAPIアクセスには自動でアクセストークンが印加されるので、SAP側でトークンを管理する必要なくなります。そのため、/session APIからはトークン情報は含まれなくなります。 |
5 | +authentication.options.XX | any | – | 認証・認可の方式のオプション設定です。認証方式によって指定する値が異なります。 |
- SDKポータル連携の場合の設定例
boot-params
+authentication.strategy=qmonus +authentication.generator=qmonus +authentication.options.base_url=https://XXXXX +authentication.options.pass_code=************************** +authentication.options.pass_phrase=************* +authentication.options.enableSLO=true
SDKポータル連携オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | base_url | string | - | SDKポータルのエンドポイントを指定します |
2 | pass_code | string | - | SDKポータルの起動パラメータで指定している認証パスコードを指定します |
3 | pass_phrase | string | - | SDKポータルの起動パラメータで指定している認証パスフレーズを指定します |
4 | enableSLO | boolean | false | trueの場合、ApiFrontの/logout に連動してSDKポータルからログアウトします。 |
- Google連携の場合の設定例
boot-params
+authentication.strategy=google +authentication.options.project_id=********** +authentication.options.client_id=********** +authentication.options.client_secret=********** +authentication.options.callbackProto=https
Google連携オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | project_id | string | - | GCPプロジェクト名を指定します |
2 | client_id | string | - | OAuthクライアントIDを指定します |
3 | client_secret | string | - | OAuthクライアントのシークレットを指定します |
4 | callbackProto | string | https |
[参考] GCPのOAuthクライアントの設定でコールバックURLを指定する際には、https://XXXXX/auth/google/callback のようにパスを含めて指定してください。
- OpenID連携の場合の設定例
boot-params
+authentication.strategy=openid +authentication.options.providerURL=********** +authentication.options.profile=true +authentication.options.discover.match=********** +authentication.options.discover.version="http://specs.openid.net/auth/2.0" +authentication.options.discover.endpoint=**********
OpenID連携オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | providerURL | string | - | providerURLを指定します |
2 | profile | boolean | - | ユーザプロファイルを授受するか指定できます |
3 | discover | string | - | 詳しくは、https://openid.net/specs/openid-authentication-2_0.html#discovery |
[参考] OpenIDのOAuthクライアントの設定でコールバックURLを指定する際には、https://XXXXX/auth/openid/callback のようにパスを含めて指定してください。
- 認証シーケンスでのユーザ情報取得やトークン生成ロジックは、カスタマイズも可能です。
boot-params
+authentication.strategy=openid +authentication.options.providerURL=********** +authentication.provider_plugin="/Desktop/plugin/auth.js" +authentication.generator_plugin="/Desktop/plugin/token.js" +authentication.properties.hoge_user="user" +authentication.properties.fuga_user_endpoint="pass" +authentication.properties.fuga_token_endpoint="pass"
auth.js
javascript
module.exports = function (bootProperties) {
// bootProperties で 起動パラメータの authentication.properties が参照可能
/**
* context : { store , option , properties , calloutHelper }
* identifier : strategy で指定したプロトコルで参照できるユーザ識別情報
* callback : コールバック関数 ( err , profile)
*/
return (context, [identifier], callback) => {
context.calloutHelper({
method: "GET",
url: bootProperties.fuga_endpoint + "/api/users/" + identifier,
})
.catch(callback)
.then(({ response, body }) => {
let profile = {
account_id: identifier, // ユーザ識別子
account_name : body.username,
email: body.mail_address,
avatar: body.avatar_url,
// _ から始まるキーワードは、hiddenプロパティとして /session の応答からは参照できない
_properties: body
}
callback(null, profile)
})
}
}
token.js
javascript
module.exports = function ( bootProperties){
// bootProperties で 起動パラメータの authentication.properties が参照可能
/**
* context : { _req , profile , store , properties , config , calloutHelper }
* callback : コールバック関数 ( err , profile)
*/
return ( context , callback )=>{
context.calloutHelper({
method : "POST",
url: bootProperties.fuga_token_endpoint + "/api/tokens",
})
.catch(callback)
.then({ response, body }=>{
let token = response.headers["token"]
body = JSON.parse(body)
callback(null , {
token : token , // 保持するToken情報
expires : body.expires_at , // 有効期限がある場合
})
})
}
}
レンダリングページ特定機構(verifyRenderId)
コンテンツレンダリングごとにrenderIDを払い出し、ブラウザに印加します。
ブラウザはAPIリクエストのヘッダにrenderIDを印加して、APIProxy時にセッションに保持したrenderIDと検証。一致する場合はリクエストを続行、一致しない場合は403を返却します。
これによりCookieに保存した認証情報の誤用を回避し、最新のレンダリングのタブのみがアクティブとなります。
[注意事項]
verifyRenderIdはXMLHttpRequestとにのみ対応しています。
※ v23.1LTS-patch20230927 よりFetchにも対応可能となりました。
オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | +content.verifyRenderId | boolean | false | verifyRenderId有効化の有無を決定するbooleanです |
2 | +content.renderIdReferQuery | string | null | verifyRenderId有効時にrenederIDとして、本パラメータで指定したランディング時のqueryのvalueが使用可能になります。これにより同一テナントのマルチタブでの使用が可能になります。 |
API Proxy
ApiFrontが提供するAPI-Proxy機能の設定です。API-Proxyの利用は必須ではありませんが、SPAからはSameSiteのAPIとしてバックエンドのAPIが扱えるため、バックエンド側でのCORS設定は不要になる点や、た開発したアプリケーションの障害対応時に、ApiFrontのログでアクセス履歴が追えるメリットがあります。
API Proxy機能は、コンテンツタイプが json のリクエストに対して動作します。Proxy機能が動作しない場合は、リクエストヘッダーのAcceptの値を確認し、MIMEタイプにJSONが含まれているか確認してください。
Accept : */* ,application/json
オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | +backend.proxypath | string(path) | - | SPAに提供するプロキシーAPIパスを指定します |
2 | +backend.target | string(uri) | - | 転送先のバックエンドホスト・パスを指定します |
3 | +backend.proxyTimeout | number(ミリ秒) | 60 * 1000 | プロキシのタイムアウトを指定します(デフォルト 60秒) |
4 | +backend.requestInjection.script | string(ファイル名) | - | API-Proxy時にリクエスト内容を改竄するスクリプトを指定できます。主にデバッグ用途です。 |
5 | +backend.requestInjection.headers | string(JSON) | - | API-Proxy時のリクエストに挿入するヘッダを指定できます。主にデバッグ用途です。 |
6 | +backend.responseInjection.script | string(ファイル名) | - | API-Proxy時にレスポンス内容を改竄するスクリプトを指定できます。主にデバッグ用途です。 |
7 | +backend.responseInjection.headers | string(JSON) | - | API-Proxy時のレスポンスに挿入するヘッダを指定できます。主にデバッグ用途です。 |
- 以下のような設定を行った場合
boot-params
+backend.proxypath=/apis +backend.target=https://backend.api.server
API-Proxyでは、/apis 以下のAPIアクセスに対して、以下のようなHTTPプロキシーを行います
/apis/v1/hogefuga => https://backend.api.server/v1/hogefuga
APIプロキシでバックエンドのAPIを完全に透過したい場合でも、backend.proxypath には [/] のようにルートパスは指定はしないでください。
boot-params
+backend.proxypath=/v1 +backend.target=https://backend.api.server/v1
のように、明示的にバックエンドへプロキシーするルートのパスを指定するようにしてください
起動パラメータを起動ファイルにまとめる
上記の起動パラメータは、全てyamlファイルにまとめることができます。
デプロイする環境毎に指定する内容をまとめてリポジトリに管理しておくのをお勧めします。
config.dev.yml
yaml
appname : Casval
baseURL : https://hogheoge.axis.io/
content :
base : ./client/dist
main : index.html
route : /:ver/gui
isFrame : false
title : "gui(develop)"
authentication :
strategy : qmonus
options:
base_url: https://xxxxxxxxxx
pass_code : XXXXX
pass_phrase : XXXX
backend:
proxypath : /api/v1
target : https://api.backend/v1
APIリクエスト
ApiFrontへのリクエストに対してのオプションを指定しています。API Proxyを設定している場合、Proxy対象のリクエストにも反映されます。
オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | +apis.allowedMethods | array | [‘post’, ‘get’, ‘put’, ‘patch’, ‘delete’, ‘options’, ‘head’] | ApiFront(API Proxyを含む)リクエストに対して、指定していないMethodからのリクエストの場合、400を返却します。ユーザで上記以外のMethodを使用する場合、追加Methodを含め使用するすべてのMethodを記述してください。 |
開発支援機能
その他にもSPA開発時に便利な機能を具備しています。
オプション | 型 | デフォルト | 説明 | |
---|---|---|---|---|
1 | +apis.session.overwrite | object | - | /session API の応答内容を擬似することができます |
config.dev.yml
yaml
apis:
session:
overwrite:
auth:
account_id : "hogehoge"