소개

신분 검증이 어렵다.따라서 인증을 전용 소프트웨어에 의뢰하는 것이 좋다.우리의 예에서, 우리는 키드포트를 사용하기로 결정했다.
우리는 Nuxt.js 기반의 front-end 임시 문서 저장소를 구축하여 데이터의 스냅샷을 효과적으로 보존하고 조회할 수 있도록 하고자 한다.HTTP 서버는 비차단 비동기식 REST-API를 제공합니다.API 서버는 Kotlin (대량 프로토콜 사용) 및 SirixDB 을 사용하기로 결정했습니다.

수직x OAuth2를 통한 인증

OAuth2는 이른바 몇 개의 흐름을 지정했다.브라우저 기반 응용 프로그램에 대해 권한 수여 코드 흐름은 우리가 사용할 가장 좋고 안전한 흐름이다.

💚 OAuth2 인증 코드 흐름과 Nuxt회사 명

SirixDB HTTP 서버만 KeyClope와 직접 상호 작용하는 워크플로우가 있습니다(Node.js 서버로 리디렉션하는 것 제외).따라서 SirixDB HTTP 서버의 두 가지 경로 GET /user/authorize 및 POST /token 만 알 수 있습니다.
일반적으로 우리의 업무 절차는 다음과 같다.

인증 중간부품 제어가 사용자를 /login 경로로 먼저 로그인해야 하는지 확인

/login 라우팅에는 SirixDB HTTP 서버에 요청하는 간단한 버튼이 있습니다.Nuxt.js는 Nuxt에서 유일하게 사용할 수 없는state과 하나redirect_uri를 생성합니다.js는 URL 매개 변수로 GET /user/authorize 라우팅에 전송됩니다.

HTTP 서버가 KeyClope의 로그인 페이지로 리디렉션되고 두 개의 매개변수

가 전송됨

사용자가 자신의 증빙서류를 정확하게 작성하면 키beapt는 브라우저를 주어진redirect\uurl로 리디렉션합니다. 이 url은 Nuxt입니다.js 먼저 보내기(SirixDB HTTP 서버)

.js 서버, Nuxt.js 프런트엔드를 기반으로 KeyClope

에서 URL로 리디렉션 라우팅

Nuxt.js 그리고 URL 매개 변수code를 추출하고 state 매개 변수의 유효성을 검사합니다

다음으로 Nuxt.js는 POST 매개 변수/token를 사용하여 SirixDB HTTP 서버의 code 단점에 redirect_uri HTTP 요청을 다시 보냅니다. 이것은 같은 리셋 루트입니다.또한 Nuxt 같은 코드로 설정하는 response_type 를 보냅니다.js는 JWT 액세스 토큰이 필요합니다

그리고 SirixDB HTTP 서버는 키 망토에서 온 JWT 액세스 영패와 코드를 교환하여 HTTP 응답에서 Nuxt로 보냅니다.js 기반 전단

SPA 대신 일반 모드인 경우 워크플로우를 단순화할 수 있습니다.노드Nuxt에서 온 js 서버입니다.js는 KeyClope와 직접 통신할 수도 있습니다. 잠시 후에 이 점을 볼 수 있습니다.이 설정에서 SirixDB HTTP 서버는 발표된 JWT 영패에 근거하여 루트의 권한을 검사합니다.그러나 이런 방식을 통해 전방에는 키드 페이지와 호스트/포트, 노드에 대한 상세한 정보를 알 필요가 없다.또한 Nuxt를 볼 수 있습니다.js는 기존 KeyClope에는 적용되지 않습니다.

👾 Nuxt。js 설정

Nuxt에서js 프로필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 디렉터리를 만들고 파일을 추가합니다.
Nuxt에서플러그인 폴더에 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 서버를 살펴보겠습니다.

지수d, 송전 시스템 🚀 SirixDB HTTP 서버: 수직.x 기반 REST API

OAuth2 로그인 루트와 OAuth2 설정과 관련된 모든 것을 설정해야 합니다.
우선 OAuth2 인증 코드 흐름에 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))
}

OAuth2 구성은 다음과 같은 방식으로 읽습니다.

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는 URL로 리디렉션을 지정합니다. 이 경우 SirixDB 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)
            }
        }
    }
}

types 노선(2단계).브라우저가 KeyClope 로그인 페이지로 리디렉션됩니다.

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()
    }
}

자격 증명을 제공한 후 브라우저는 redirect_uri(리셋 라우팅)로 전송되고 지정된 상태가 있습니다 (먼저 Nuxt.js에서 생성됨).그 다음은 Nuxt의 auth 모듈입니다.js는 URL 조회 매개 변수에서 GET /user/authorize 및 state 을 추출합니다.생성된 상태와 상태가 같으면 코드를 계속 발표하고 redirect\uuri와response\u 형식을 폼 매개 변수로 다시 저장합니다.code 노선(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 서버는 KeyClope에서 JWT 토큰을 검색하여 전면으로 보냅니다.
다음, Nuxt.js는 영패를 세션, 저장 등에 저장합니다.
마지막으로, Axios는 권한 수여 헤더에서 실행되는 모든 API 요청의 영패를 불러오는 영패로 보내야 한다.우리는 POST /token를 통해 영패를 검색할 수 있다.
Nuxt는 SirixDB HTTP 서버를 사용하는 간접 주소 지정이 아닙니다.js/노드.js는 Keyclope와 직접 상호작용할 수 있으며, SirixDB HTTP 서버는 JWT 영패만 검증합니다.
이 경우 this.$auth.getToken('keycloak') keydepage 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'
}

이 경우 KeyClope에서 허용하는 웹 소스에 nuxt.config.js 를 추가해야 합니다. 다음 섹션에서 볼 수 있습니다.
그러나 나는 이 점을 실현할 수 없다. 왜냐하면 Nuxt의 때문이다.js는 왠지 모르게 client\u secret을 keydepagehttp://localhost:3005에 보내지 않았습니다. - 단점:
오류: "unauthorized_client"
error\u 설명: "클라이언트 암호가 요청되지 않았습니다."

인증 모듈 💚 KeyClope 설정

의 설명에 따라 KeyClope를 설정할 수 있습니다.다음 설명은 SirixDB 요약입니다. (SirixDBs docker compose file을 사용하여 일부 부분을 건너뛸 수 있습니다.)그러나 다른 프로젝트의 키 페이지 setuo와 거의 같아야 합니다.
요컨대

브라우저를 엽니다.사이트 주소: this excellent Tutorial
사용자 이름token 및 암호admin로 로그인하여 Keycloves 웹 구성 인터페이스

에 액세스

admin 라는 새로운 영역 만들기

고객으로 이동 = > 계정

클라이언트 id를 sirixdb 로 변경

액세스 유형이 기밀로 설정되었는지 확인

자격 증명 탭으로 이동

클라이언트 기밀을 SirixDB HTTP 서버 구성 파일에 넣습니다(위에서 발표).sirix의 값을 KeyClope에서 설정한 값으로 변경합니다.

설정 탭에서 표준 스트림을 활성화해야 합니다.

유효한 리디렉션 URI를 http://localhost:8080 또는 포트 3000 또는 Nuxt가 있는 모든 위치로 설정합니다.js 응용 프로그램 실행

이 도메인

의 COR을 허용하기 위해 client.secret 에 정확한 값을 설정해야 합니다.
http://localhost:3005/*

결론

모든 것을 한데 안배하면 약간의 번거로움을 가져올 것이다.단순화 방법은 Nuxt를js는 우선 모든 인증을 실행하고 외부 API 서버에서 영패를 검사합니다.
이 문장이 도움이 되었는지, 아니면 내가 전체 권한 수여 과정을 너무 복잡하게 했는지 알려줘.
과SirixDB에 대해 저는 의견과 공헌을 얻고 싶습니다. 이것은 가장 주의할 만한 일입니다. -) 저는 백엔드 엔지니어입니다. 현재 Nuxt를 공부하고 있습니다.js/Vue.js와 TypeScript, 그리고 D3는 나의 여가 시간에 이 프로젝트를 위한 것이다.이것은 녹지 프로젝트이기 때문에 우리는 Vue를 사용할 수 있다.예를 들어 js 작성 API입니다.🐣
만약 당신이 이 프로젝트를 좋아한다면, 당신은 트위터에 공유하고 전파할 수 있습니다!?🙈
기여front-end 및 GitHub SirixDB💚

GitHub SirixDB 웹 프런트엔드 / sirixdb

SirixDB는 시제 데이터를 효율적으로 저장하고 조회하는 데 도움이 됩니다.커밋할 때마다 공간 절약형 스냅샷을 저장합니다.그것은 로그 구조로 데이터를 덮어쓰지 않습니다.SirixDB는 슬라이딩 스냅샷이라는 새로운 페이지 레벨 버전 제어 방법을 사용합니다.

sirix






| Download ZIP | Join us on Slack
첫 번째 요청을 처리하는 중입니까?이 무료 시리즈Community Forum와 다른 강좌에서 배울 수 있습니다.

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)

우리는 현재 바이너리 인코딩에서 XML과 JSON 데이터의 저장과 (시간 여행) 조회를 지원하고 있으며, 이 인코딩은 버전 제어를 지원하기 위해 맞춤형으로 되어 있다.우리의 색인 구조와 전체 저장 엔진은 본 컴퓨터의 버전 제어를 지원하기 위해 처음부터 작성되었다.미래에 우리는 다른 데이터 형식의 저장과 조회를 지원할 수도 있다.
 
How to Contribute to an Open Source Project on GitHub
 
참고:

GitHub에서 보기 / sirixdb

Nuxt 기반 SirixDB 웹 프런트엔드js/Vue。js，D3。js 및 Typescript

sirix-web-frontend


| Join us on Slack
첫 번째 요청을 처리하는 중입니까?이 무료 시리즈Community Forum와 다른 강좌에서 배울 수 있습니다.

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)

소개

How to Contribute to an Open Source Project on GitHub에서 토론
이것은 Community Forum, Vue.js 및 D3.js 기반의 웹 전단 저장소입니다.
SirixDB에 데이터베이스를 저장, 업데이트, 조회할 수 있는 다양한 상호 작용 가능성을 제공합니다.또한 프런트엔드에는 서로 다른 뷰를 기반으로 하는 SirixDB에 저장된 리소스 수정을 탐색하고 비교하는 대화식 시각화가 제공됩니다.
에 관하여...
TypeScript
친절한 인사
존네스