Nuxtを実行する方法.ジェイ.外部REST - APIサーバ(Vert . x/Kotlinに基づく)とkeycloakでのJOs🐬
43171 ワード
導入
認証は難しいです.したがって、専用のソフトウェアに認証を委ねるのが最善です.私たちのケースでは、KeyCloakを使用することを決めた.
私たちはNuxt.js ベースfront-end for SirixDB , あなたのデータのスナップショットを効率的に保持して、質問することができる一時的な文書店.非ブロッキング、非同期REST - APIはHTTPサーバによって提供されます.私たちは小林を使用することを決めましたVert.x APIサーバを実装するには.
OAuS 2による認証
OAutor 2はいくつかのいわゆるフローを指定します.ブラウザベースのアプリケーションでは、認証コードの流れが最善で最も安全な流れです.
💚 NUXTによるOAuth 2認可コードフロー。js
我々は、唯一のSIRIXDBのHTTPサーバーが直接KeyCloakと対話しているワークフローを持っています.したがって、フロントエンドはSIRIXDB HTTPサーバの2つのルートを知る必要があります.GET /user/authorize
and POST /token
.
一般に、我々のワークフローは以下の通りです.
OAutor 2はいくつかのいわゆるフローを指定します.ブラウザベースのアプリケーションでは、認証コードの流れが最善で最も安全な流れです.
💚 NUXTによるOAuth 2認可コードフロー。js
我々は、唯一のSIRIXDBのHTTPサーバーが直接KeyCloakと対話しているワークフローを持っています.したがって、フロントエンドはSIRIXDB HTTPサーバの2つのルートを知る必要があります.
GET /user/authorize
and POST /token
.一般に、我々のワークフローは以下の通りです.
/login
最初の場所でログインするルート/login
ルートは、SIRIXDB HTTPサーバーへの要求を発行する単純なボタンを持っています.NuxtJSはユニークで無口であるstate
とredirect_uri
, どのnuxtjsはGET /user/authorize
URLパラメータとしてルート.code
とチェックstate
有効パラメータPOST
HTTPリクエスト/token
sirixdb HTTPサーバのエンドポイントcode
パラメータredirect_uri
再び、同じコールバックルートです.さらに、それはresponse_type
NUXTのようなコードを設定します.JTはJWTアクセストークンを期待している👾 Nuxtjsセットアップ
Nuxtで.設定ファイルnuxt.config.js
以下のモジュールを追加しなければなりません:
['@nuxtjs/axios', { baseURL: 'https://localhost:9443' }], '@nuxtjs/auth', '@nuxtjs/proxy'
以下を追加します.
axios: {
baseURL: 'https://localhost:9443',
browserBaseURL: 'https://localhost:9443',
proxyHeaders: true,
proxy: true,
},
auth: {
strategies: {
keycloak: {
_scheme: 'oauth2',
authorization_endpoint: 'https://localhost:9443/user/authorize',
userinfo_endpoint: false,
access_type: 'offline',
access_token_endpoint: 'https://localhost:9443/token',
response_type: 'code',
token_type: 'Bearer',
token_key: 'access_token',
},
},
redirect: {
login: '/login',
callback: '/callback',
home: '/'
},
},
router: {
middleware: ['auth']
}
https://localhost:9443
はsirixdb HTTPサーバが聞いているホスト/ポートです.
デフォルトでは、私たちのnuxt.JSの設定は、すべてのルートで認証ミドルウェアをアクティブにします.ユーザーが認証されていない場合、最初のステップが開始され、認証モジュールがNuxtから起動されます.jsはユーザをGET /login
ルート
簡単に定義しますlogin
ページ
<template>
<div>
<h3>Login</h3>
<el-button type="primary" @click="login()">Login via Keycloak</el-button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class Login extends Vue {
private login(): void {
this.$auth.loginWith('keycloak')
}
}
</script>
<style lang="scss">
</style>
使用する右のタイプスクリプトの型を定義するにはthis.$auth
我々は追加する必要があります
"typings": "types/index.d.ts",
"files": ["types/*.d.ts"]
にpackage.json
ファイル.さらに、我々はtypes
ディレクトリとindex.d.ts ファイル.
Nuxtで.プラグインフォルダのJSアプリケーションは、Axiosクライアントを拡張するファイルを追加します
export default function ({ $axios, redirect }) {
$axios.defaults.httpsAgent = new https.Agent({ rejectUnauthorized: false })
$axios.onRequest(config => {
config.headers.common['Origin'] = 'http://localhost:3005';
config.headers.common['Content-Type'] = 'application/json';
config.headers.common['Accept'] = 'application/json';
config.headers.put['Origin'] = 'http://localhost:3005';
config.headers.put['Content-Type'] = 'application/json';
config.headers.put['Accept'] = 'application/json';
config.headers.post['Origin'] = 'http://localhost:3005';
config.headers.post['Content-Type'] = 'application/json';
config.headers.post['Accept'] = 'application/json';
config.headers.del['Origin'] = 'http://localhost:3005';
config.headers.del['Content-Type'] = 'application/json';
config.headers.del['Accept'] = 'application/json';
});
$axios.onError(error => {
const code = parseInt(error.response && error.response.status);
if (code === 401) {
redirect('https://localhost:9443/user/authorize');
}
});
}
今はNuxtを終えました.方程式のjs部分.次にsirixdbのHTTPサーバを調べます.
🚀 sirixdb HTTPサーバ: vertXベースのREST API
OAuth 2のログインルートを設定しなければなりません.
しかし、まず最初に、OAuS 2認証コードフローのためにCorsハンドラーを加えます:
if (oauth2Config.flow == OAuth2FlowType.AUTH_CODE) {
val allowedHeaders = HashSet<String>()
allowedHeaders.add("x-requested-with")
allowedHeaders.add("Access-Control-Allow-Origin")
allowedHeaders.add("origin")
allowedHeaders.add("Content-Type")
allowedHeaders.add("accept")
allowedHeaders.add("X-PINGARUNER")
allowedHeaders.add("Authorization")
val allowedMethods = HashSet<HttpMethod>()
allowedMethods.add(HttpMethod.GET)
allowedMethods.add(HttpMethod.POST)
allowedMethods.add(HttpMethod.OPTIONS)
allowedMethods.add(HttpMethod.DELETE)
allowedMethods.add(HttpMethod.PATCH)
allowedMethods.add(HttpMethod.PUT)
this.route().handler(CorsHandler.create("*")
.allowedHeaders(allowedHeaders)
.allowedMethods(allowedMethods))
}
OAuth 2の設定は以下のようになります.
val oauth2Config = oAuth2ClientOptionsOf()
.setFlow(OAuth2FlowType.valueOf(config.getString("oAuthFlowType", "PASSWORD")))
.setSite(config.getString("keycloak.url"))
.setClientID("sirix")
.setClientSecret(config.getString("client.secret"))
.setTokenPath(config.getString("token.path", "/token"))
.setAuthorizationPath(config.getString("auth.path", "/user/authorize"))
val keycloak = KeycloakAuth.discoverAwait(
vertx, oauth2Config
)
設定ファイルは次のようになります.
{
"https.port": 9443,
"keycloak.url": "http://localhost:8080/auth/realms/sirixdb",
"auth.path": "http://localhost:8080/auth/realms/sirixdb/protocol/openid-connect/auth",
"token.path": "/token",
"client.secret": "2e54cfdf-909b-47ca-b385-4c44886f04f0",
"oAuthFlowType" : "AUTH_CODE",
"redirect.uri" : "http://localhost:3005/callback"
}
通常はnuxtに注意してください.jsはリダイレクトURIを指定します.この場合、SIXXDB HTTPサーバはURL問い合わせパラメータからそれを読み込みます.
HTTPサーバーは、次の拡張機能を使用して、コルーチンのハンドラを提供します.ただし、中断する関数はVertで実行されます.Xイベントループ:
/**
* An extension method for simplifying coroutines usage with Vert.x Web routers.
*/
private fun Route.coroutineHandler(fn: suspend (RoutingContext) -> Unit): Route {
return handler { ctx ->
launch(ctx.vertx().dispatcher()) {
try {
fn(ctx)
} catch (e: Exception) {
ctx.fail(e)
}
}
}
}
The GET /user/authorize
ルート(ステップ2).ブラウザはKeyCloakのログインページにリダイレクトされます.
get("/user/authorize").coroutineHandler { rc ->
if (oauth2Config.flow != OAuth2FlowType.AUTH_CODE) {
rc.response().statusCode = HttpStatus.SC_BAD_REQUEST
} else {
val redirectUri =
rc.queryParam("redirect_uri").getOrElse(0) { config.getString("redirect.uri") }
val state = rc.queryParam("state").getOrElse(0) { java.util.UUID.randomUUID().toString() }
val authorizationUri = keycloak.authorizeURL(
JsonObject()
.put("redirect_uri", redirectUri)
.put("state", state)
)
rc.response().putHeader("Location", authorizationUri)
.setStatusCode(HttpStatus.SC_MOVED_TEMPORARILY)
.end()
}
}
資格情報を提供した後に、ブラウザはRedirectCherge URI(/callbackルート)に送られます(指定された状態(Nuxt . jsによって最初の場所で生成される)).次にnuxtのauthモジュール.js抽出state
and code
URLクエリパラメータから.状態が生成されたのと同じである場合は、コードとストア、再度RedirectRound URI、および応答パラメーターをフォームパラメーターとしてポストに進みます.
The POST /token
ルート(ステップ7)
post("/token").handler(BodyHandler.create()).coroutineHandler { rc ->
try {
val dataToAuthenticate: JsonObject =
when (rc.request().getHeader(HttpHeaders.CONTENT_TYPE)) {
"application/json" -> rc.bodyAsJson
"application/x-www-form-urlencoded" -> formToJson(rc)
else -> rc.bodyAsJson
}
val user = keycloak.authenticateAwait(dataToAuthenticate)
rc.response().end(user.principal().toString())
} catch (e: DecodeException) {
rc.fail(
HttpStatusException(
HttpResponseStatus.INTERNAL_SERVER_ERROR.code(),
"\"application/json\" and \"application/x-www-form-urlencoded\" are supported Content-Types." +
"If none is specified it's tried to parse as JSON"
)
)
}
}
private fun formToJson(rc: RoutingContext): JsonObject {
val formAttributes = rc.request().formAttributes()
val code =
formAttributes.get("code")
val redirectUri =
formAttributes.get("redirect_uri")
val responseType =
formAttributes.get("response_type")
return JsonObject()
.put("code", code)
.put("redirect_uri", redirectUri)
.put("response_type", responseType)
}
sirixdb HTTPサーバはKeyCloakからJWTトークンを取得し、フロントエンドに戻します.
その後、nuxt.jsは、セッション、ストアなどでトークンを保存します.
最後に、Axiosは、認証ヘッダーでの各APIリクエストに対してトークンを送信する必要があります.経由でトークンを取得できますthis.$auth.getToken('keycloak')
.
sirixdb HTTPサーバを使用して間接的にNuxtを使うことに注意してください.ノード.JSは直接KeyCloakと対話することができました、そして、SIRIXDB HTTPサーバはJWTトークンを単に確認するだけでした.
その場合はnuxt.config.js
keycloak authオブジェクトは次のようになります.
keycloak: {
_scheme: 'oauth2',
authorization_endpoint: 'http://localhost:8080/auth/realms/sirixdb/protocol/openid-connect/auth',
userinfo_endpoint: false,
access_type: 'offline',
access_token_endpoint: 'http://localhost:8080/auth/realms/sirixdb/protocol/openid-connect/token',
response_type: 'code',
token_type: 'Bearer',
token_key: 'access_token',
client_secret: '2e54cfdf-909b-47ca-b385-4c44886f04f0',
client_id: 'sirix'
}
この場合、追加する必要がありますhttp://localhost:3005
次のセクションで見るように、keycloakの許可されたウェブ起源に.
しかし、私はこの仕事を得ることができなかったauth module Nuxtから.JSはどうにか、KeyCloakにClientRadium秘密を送りませんtoken
-エンドポイント
エラークライアント"
要求で提供されないクライアント秘密
💚 keycloakの設定
keycloakの設定は、this excellent Tutorial . 以下の説明は短いsirixdbの概要です( sirixdbs Dockerの作成ファイルを使用していくつかの部分をスキップすることができます).しかし、それは他のプロジェクトのKeyCloak setuoとほとんど同一であるべきです.
要するに
['@nuxtjs/axios', { baseURL: 'https://localhost:9443' }], '@nuxtjs/auth', '@nuxtjs/proxy'
axios: {
baseURL: 'https://localhost:9443',
browserBaseURL: 'https://localhost:9443',
proxyHeaders: true,
proxy: true,
},
auth: {
strategies: {
keycloak: {
_scheme: 'oauth2',
authorization_endpoint: 'https://localhost:9443/user/authorize',
userinfo_endpoint: false,
access_type: 'offline',
access_token_endpoint: 'https://localhost:9443/token',
response_type: 'code',
token_type: 'Bearer',
token_key: 'access_token',
},
},
redirect: {
login: '/login',
callback: '/callback',
home: '/'
},
},
router: {
middleware: ['auth']
}
<template>
<div>
<h3>Login</h3>
<el-button type="primary" @click="login()">Login via Keycloak</el-button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class Login extends Vue {
private login(): void {
this.$auth.loginWith('keycloak')
}
}
</script>
<style lang="scss">
</style>
"typings": "types/index.d.ts",
"files": ["types/*.d.ts"]
export default function ({ $axios, redirect }) {
$axios.defaults.httpsAgent = new https.Agent({ rejectUnauthorized: false })
$axios.onRequest(config => {
config.headers.common['Origin'] = 'http://localhost:3005';
config.headers.common['Content-Type'] = 'application/json';
config.headers.common['Accept'] = 'application/json';
config.headers.put['Origin'] = 'http://localhost:3005';
config.headers.put['Content-Type'] = 'application/json';
config.headers.put['Accept'] = 'application/json';
config.headers.post['Origin'] = 'http://localhost:3005';
config.headers.post['Content-Type'] = 'application/json';
config.headers.post['Accept'] = 'application/json';
config.headers.del['Origin'] = 'http://localhost:3005';
config.headers.del['Content-Type'] = 'application/json';
config.headers.del['Accept'] = 'application/json';
});
$axios.onError(error => {
const code = parseInt(error.response && error.response.status);
if (code === 401) {
redirect('https://localhost:9443/user/authorize');
}
});
}
OAuth 2のログインルートを設定しなければなりません.
しかし、まず最初に、OAuS 2認証コードフローのためにCorsハンドラーを加えます:
if (oauth2Config.flow == OAuth2FlowType.AUTH_CODE) {
val allowedHeaders = HashSet<String>()
allowedHeaders.add("x-requested-with")
allowedHeaders.add("Access-Control-Allow-Origin")
allowedHeaders.add("origin")
allowedHeaders.add("Content-Type")
allowedHeaders.add("accept")
allowedHeaders.add("X-PINGARUNER")
allowedHeaders.add("Authorization")
val allowedMethods = HashSet<HttpMethod>()
allowedMethods.add(HttpMethod.GET)
allowedMethods.add(HttpMethod.POST)
allowedMethods.add(HttpMethod.OPTIONS)
allowedMethods.add(HttpMethod.DELETE)
allowedMethods.add(HttpMethod.PATCH)
allowedMethods.add(HttpMethod.PUT)
this.route().handler(CorsHandler.create("*")
.allowedHeaders(allowedHeaders)
.allowedMethods(allowedMethods))
}
OAuth 2の設定は以下のようになります.val oauth2Config = oAuth2ClientOptionsOf()
.setFlow(OAuth2FlowType.valueOf(config.getString("oAuthFlowType", "PASSWORD")))
.setSite(config.getString("keycloak.url"))
.setClientID("sirix")
.setClientSecret(config.getString("client.secret"))
.setTokenPath(config.getString("token.path", "/token"))
.setAuthorizationPath(config.getString("auth.path", "/user/authorize"))
val keycloak = KeycloakAuth.discoverAwait(
vertx, oauth2Config
)
設定ファイルは次のようになります.{
"https.port": 9443,
"keycloak.url": "http://localhost:8080/auth/realms/sirixdb",
"auth.path": "http://localhost:8080/auth/realms/sirixdb/protocol/openid-connect/auth",
"token.path": "/token",
"client.secret": "2e54cfdf-909b-47ca-b385-4c44886f04f0",
"oAuthFlowType" : "AUTH_CODE",
"redirect.uri" : "http://localhost:3005/callback"
}
通常はnuxtに注意してください.jsはリダイレクトURIを指定します.この場合、SIXXDB HTTPサーバはURL問い合わせパラメータからそれを読み込みます.HTTPサーバーは、次の拡張機能を使用して、コルーチンのハンドラを提供します.ただし、中断する関数はVertで実行されます.Xイベントループ:
/**
* An extension method for simplifying coroutines usage with Vert.x Web routers.
*/
private fun Route.coroutineHandler(fn: suspend (RoutingContext) -> Unit): Route {
return handler { ctx ->
launch(ctx.vertx().dispatcher()) {
try {
fn(ctx)
} catch (e: Exception) {
ctx.fail(e)
}
}
}
}
The GET /user/authorize
ルート(ステップ2).ブラウザはKeyCloakのログインページにリダイレクトされます.get("/user/authorize").coroutineHandler { rc ->
if (oauth2Config.flow != OAuth2FlowType.AUTH_CODE) {
rc.response().statusCode = HttpStatus.SC_BAD_REQUEST
} else {
val redirectUri =
rc.queryParam("redirect_uri").getOrElse(0) { config.getString("redirect.uri") }
val state = rc.queryParam("state").getOrElse(0) { java.util.UUID.randomUUID().toString() }
val authorizationUri = keycloak.authorizeURL(
JsonObject()
.put("redirect_uri", redirectUri)
.put("state", state)
)
rc.response().putHeader("Location", authorizationUri)
.setStatusCode(HttpStatus.SC_MOVED_TEMPORARILY)
.end()
}
}
資格情報を提供した後に、ブラウザはRedirectCherge URI(/callbackルート)に送られます(指定された状態(Nuxt . jsによって最初の場所で生成される)).次にnuxtのauthモジュール.js抽出state
and code
URLクエリパラメータから.状態が生成されたのと同じである場合は、コードとストア、再度RedirectRound URI、および応答パラメーターをフォームパラメーターとしてポストに進みます.The
POST /token
ルート(ステップ7)post("/token").handler(BodyHandler.create()).coroutineHandler { rc ->
try {
val dataToAuthenticate: JsonObject =
when (rc.request().getHeader(HttpHeaders.CONTENT_TYPE)) {
"application/json" -> rc.bodyAsJson
"application/x-www-form-urlencoded" -> formToJson(rc)
else -> rc.bodyAsJson
}
val user = keycloak.authenticateAwait(dataToAuthenticate)
rc.response().end(user.principal().toString())
} catch (e: DecodeException) {
rc.fail(
HttpStatusException(
HttpResponseStatus.INTERNAL_SERVER_ERROR.code(),
"\"application/json\" and \"application/x-www-form-urlencoded\" are supported Content-Types." +
"If none is specified it's tried to parse as JSON"
)
)
}
}
private fun formToJson(rc: RoutingContext): JsonObject {
val formAttributes = rc.request().formAttributes()
val code =
formAttributes.get("code")
val redirectUri =
formAttributes.get("redirect_uri")
val responseType =
formAttributes.get("response_type")
return JsonObject()
.put("code", code)
.put("redirect_uri", redirectUri)
.put("response_type", responseType)
}
sirixdb HTTPサーバはKeyCloakからJWTトークンを取得し、フロントエンドに戻します.その後、nuxt.jsは、セッション、ストアなどでトークンを保存します.
最後に、Axiosは、認証ヘッダーでの各APIリクエストに対してトークンを送信する必要があります.経由でトークンを取得できます
this.$auth.getToken('keycloak')
.sirixdb HTTPサーバを使用して間接的にNuxtを使うことに注意してください.ノード.JSは直接KeyCloakと対話することができました、そして、SIRIXDB HTTPサーバはJWTトークンを単に確認するだけでした.
その場合は
nuxt.config.js
keycloak authオブジェクトは次のようになります.keycloak: {
_scheme: 'oauth2',
authorization_endpoint: 'http://localhost:8080/auth/realms/sirixdb/protocol/openid-connect/auth',
userinfo_endpoint: false,
access_type: 'offline',
access_token_endpoint: 'http://localhost:8080/auth/realms/sirixdb/protocol/openid-connect/token',
response_type: 'code',
token_type: 'Bearer',
token_key: 'access_token',
client_secret: '2e54cfdf-909b-47ca-b385-4c44886f04f0',
client_id: 'sirix'
}
この場合、追加する必要がありますhttp://localhost:3005
次のセクションで見るように、keycloakの許可されたウェブ起源に.しかし、私はこの仕事を得ることができなかったauth module Nuxtから.JSはどうにか、KeyCloakにClientRadium秘密を送りません
token
-エンドポイントエラークライアント"
要求で提供されないクライアント秘密
💚 keycloakの設定
keycloakの設定は、this excellent Tutorial . 以下の説明は短いsirixdbの概要です( sirixdbs Dockerの作成ファイルを使用していくつかの部分をスキップすることができます).しかし、それは他のプロジェクトのKeyCloak setuoとほとんど同一であるべきです.
要するに
ユーザ名でログイン
admin
とパスワードadmin
KeyCloak Web構成インタフェースにアクセスするにはsirixdb
sirix
client.secret
どのようにkeycloakを設定します.Web Origins
これらのドメインからcorsを許可する結論
一緒に動作するようにすべてを設定するいくつかの頭痛をもたらした.つの簡素化はNuxtをさせることです.JSは最初にすべての認証を行い、外部APIサーバにトークンをチェックさせます.
この記事が役に立ちますか、または私が全体の認可プロセスをあまりに複雑にしたならば、知らせてください.
Regarding SirixDB とfront-end 私はいくつかの入力、あるいは貢献を得るのが大好きだ、それは最も顕著なものである-私はバックエンドエンジニアであり、私は現在Nuxtを学んでいる.ジェイ.JSとTypeScriptだけでなく、このプロジェクトのための私の余暇のD 3.これは緑のフィールドプロジェクトですので、我々はVueを使用することができます.例えば、JS合成API.🐣
そして、あなたがプロジェクトのような場合は、Twitter上で共有する可能性がありますので、単語を広げる!🙈
貢献するGitHub SirixDB and GitHub SirixDB Web Frontend 💚
サイリックス
/
サイリックス
SIRIXDBは効果的かつ効率的な格納とあなたの時間データのクエリを容易にします。すべてのコミットはスペース効率の高いスナップショットを保存します。これはログ構造化され、データを上書きしません。sirixDBは、新しいページレベルのバージョンのアプローチをスライドスナップショットと呼ばれる使用します。
Download ZIP | Join us on Slack | Community Forum
あなたの最初のプル要求に取り組んで?あなたはどのようにこの無料シリーズから学ぶことができますHow to Contribute to an Open Source Project on GitHub チュートリアル:
SIRIXDB—進化的,時間的NOSQL文書ストア
あなたのデータのストアとクエリの更新を効率的に
"Remember that you're lucky, even if you don't think you are, because there's always something that you can be thankful for." - Esther Grace Earl (http://tswgo.org)
現在のところ、私たちは、Vistaをサポートするために調整されたバイナリ符号化におけるXMLとJSONデータの両方を問い合わせるストレージと(時間旅行)をサポートしています.私たちのインデックス構造と全体のストレージエンジンがゼロからネイティブにversioningをサポートして書かれています.将来的には、他のデータ形式のストレージとクエリをサポートすることもあります.
畝
畝
注意: Aでの作業.
View on GitHub
サイリックス
/
SIRIXウェブフロントエンド
Nuxtに基づくSIRIXDBのためのウエブフロントエンドジェイ.JS , D 3 .JSとタイプスクリプト
Join us on Slack | Community Forum
あなたの最初のプル要求に取り組んで?あなたはどのようにこの無料シリーズから学ぶことができますHow to Contribute to an Open Source Project on GitHub チュートリアル:
SIRIXDB Webフロントエンド—進化,バージョン化,時間的NOSQL文書ストア
あなたのデータのストアとクエリの更新を効率的に
"Remember that you're lucky, even if you don't think you are, because there's always something that you can be thankful for." - Esther Grace Earl (http://tswgo.org)
導入
議論するCommunity Forum
これは、WebフロントエンドのVue.js , D3.js and TypeScript .
これは、いくつかの相互作用の可能性を提供するストア、更新、クエリのデータベースをsirixdbです.さらにフロントエンドは、異なるビューに基づいてSIRIXDBに格納されているリソースのリビジョンを探索し、比較するためのインタラクティブな可視化を提供します.
…の考え
View on GitHub
優しい
ヨハネス
Reference
この問題について(Nuxtを実行する方法.ジェイ.外部REST - APIサーバ(Vert . x/Kotlinに基づく)とkeycloakでのJOs🐬), 我々は、より多くの情報をここで見つけました
https://dev.to/johanneslichtenberger/how-to-implement-nuxt-js-vue-js-oauth2-authentication-with-an-external-rest-api-server-based-on-vert-x-kotlin-and-keycloak-3c1h
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
あなたのデータのストアとクエリの更新を効率的に
"Remember that you're lucky, even if you don't think you are, because there's always something that you can be thankful for." - Esther Grace Earl (http://tswgo.org)
現在のところ、私たちは、Vistaをサポートするために調整されたバイナリ符号化におけるXMLとJSONデータの両方を問い合わせるストレージと(時間旅行)をサポートしています.私たちのインデックス構造と全体のストレージエンジンがゼロからネイティブにversioningをサポートして書かれています.将来的には、他のデータ形式のストレージとクエリをサポートすることもあります.
畝
畝
注意: Aでの作業.
View on GitHub
サイリックス / SIRIXウェブフロントエンド
Nuxtに基づくSIRIXDBのためのウエブフロントエンドジェイ.JS , D 3 .JSとタイプスクリプト
Join us on Slack | Community Forum
あなたの最初のプル要求に取り組んで?あなたはどのようにこの無料シリーズから学ぶことができますHow to Contribute to an Open Source Project on GitHub チュートリアル:
SIRIXDB Webフロントエンド—進化,バージョン化,時間的NOSQL文書ストア
あなたのデータのストアとクエリの更新を効率的に
"Remember that you're lucky, even if you don't think you are, because there's always something that you can be thankful for." - Esther Grace Earl (http://tswgo.org)
導入
議論するCommunity Forum
これは、WebフロントエンドのVue.js , D3.js and TypeScript .
これは、いくつかの相互作用の可能性を提供するストア、更新、クエリのデータベースをsirixdbです.さらにフロントエンドは、異なるビューに基づいてSIRIXDBに格納されているリソースのリビジョンを探索し、比較するためのインタラクティブな可視化を提供します.
…の考え
View on GitHub
優しい
ヨハネス
Reference
この問題について(Nuxtを実行する方法.ジェイ.外部REST - APIサーバ(Vert . x/Kotlinに基づく)とkeycloakでのJOs🐬), 我々は、より多くの情報をここで見つけました
https://dev.to/johanneslichtenberger/how-to-implement-nuxt-js-vue-js-oauth2-authentication-with-an-external-rest-api-server-based-on-vert-x-kotlin-and-keycloak-3c1h
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
"Remember that you're lucky, even if you don't think you are, because there's always something that you can be thankful for." - Esther Grace Earl (http://tswgo.org)
Reference
この問題について(Nuxtを実行する方法.ジェイ.外部REST - APIサーバ(Vert . x/Kotlinに基づく)とkeycloakでのJOs🐬), 我々は、より多くの情報をここで見つけました https://dev.to/johanneslichtenberger/how-to-implement-nuxt-js-vue-js-oauth2-authentication-with-an-external-rest-api-server-based-on-vert-x-kotlin-and-keycloak-3c1hテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol