Nuxtを実行する方法.ジェイ.外部REST - APIサーバ(Vert . x/Kotlinに基づく)とkeycloakでのJOs🐬


導入


認証は難しいです.したがって、専用のソフトウェアに認証を委ねるのが最善です.私たちのケースでは、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 .
一般に、我々のワークフローは以下の通りです.
  • ユーザーがAにリダイレクトされるべきならば、認証ミドルウェアはコントロールします/login 最初の場所でログインするルート
  • The /login ルートは、SIRIXDB HTTPサーバーへの要求を発行する単純なボタンを持っています.NuxtJSはユニークで無口であるstateredirect_uri , どのnuxtjsはGET /user/authorize URLパラメータとしてルート.
  • HTTPサーバはKeyCloakのログインページにリダイレクトし、
  • ユーザーが正しく自分の資格情報を満たすと、KeyCloakはブラウザをリダイレクトするURLを指定します.JSは最初の場所で送信される( SIRIXDB HTTPサーバ)
  • を返します.JSサーバー、Nuxt.JSベースのフロントエンド、コールバックルートはKeyCloak
  • Nuxtその後、URLパラメータを抽出code とチェックstate 有効パラメータ
  • 次はnuxtです.jsが送るPOST HTTPリクエスト/token sirixdb HTTPサーバのエンドポイントcode パラメータredirect_uri 再び、同じコールバックルートです.さらに、それはresponse_type NUXTのようなコードを設定します.JTはJWTアクセストークンを期待している
  • SIRIXDB HTTPサーバは、KeyCloakからJWT Accessトークンで与えられたコードを交換して、NYXTにHTTPレスポンスにそれを送ります.JSベースフロントエンド
  • 我々はユニバーサルモード(スパではない)の場合は、このワークフローを簡素化することができます.ノード.NuxtからのJSサーバー.我々が後でわかるように、JSは直接KeyCloakと通信することもできました.このセットアップでは、SIRIXDB HTTPサーバは、発行されたJWTトークンに基づいてそのルートの承認をチェックするだけです.しかし、この方法では、フロントエンドはKeyCloakとホスト/ポートとエンドポイントの詳細を知る必要はありません.さらに、Nuxtを見ます.JSはボックスからKeyCloakで動作しません.

    👾 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とほとんど同一であるべきです.
    要するに
  • ブラウザを開きます.URL :http://localhost:8080
    ユーザ名でログインadmin とパスワードadmin KeyCloak Web構成インタフェースにアクセスするには
  • 名前で新しい領域を作成しますsirixdb
  • クライアントにアカウント
  • クライアントIDを変更sirix
  • アクセスタイプが秘密に設定されていることを確認します
  • タブをクリックします
  • クライアントの秘密をsirixdbのHTTPサーバの設定ファイル(上記投稿)に置きます.値を変更するclient.secret どのようにkeycloakを設定します.
  • タブの標準フローを有効にする必要があります.
  • 有効なリダイレクトURIをhttp://localhost:3005/* またはポート3000またはどこにNuxt.アプリケーション実行
  • 正しい値を設定するWeb Origins これらのドメインからcorsを許可する

  • 結論


    一緒に動作するようにすべてを設定するいくつかの頭痛をもたらした.つの簡素化はNuxtをさせることです.JSは最初にすべての認証を行い、外部APIサーバにトークンをチェックさせます.
    この記事が役に立ちますか、または私が全体の認可プロセスをあまりに複雑にしたならば、知らせてください.
    Regarding SirixDBfront-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
    優しい
    ヨハネス