Vue를 보호합니다.KeyClope이 있는 js 응용 프로그램

최근의 프로젝트에서, 나는 Vue.js 장기적으로 존재하는 Keycloak 응용 프로그램을 보호해야 한다. 이것은 훌륭한 소스 신분과 접근 관리 도구이다.불행하게도 Vuesample in Keycloak’s documentation에 결함이 있습니다.사용자가 어떤 조작을 하든지 간에 이 예는 분당 영패를 갱신할 것이다.나는 이런 행위가 매우 안전하다고 생각하지 않을 뿐만 아니라, 틀림없이 실제 용례를 만족시키지 못할 것이다.이 문서에서 Vue 특성에 더욱 부합하는 방법을 보여 드리겠습니다.js.
내가 여기에 기술한 용례 중 일부 페이지는 공공이고 일부 페이지는 신분 검증을 통해 보호된다.나는 또한 견본에 권한을 추가했다.따라서 보호된 콘텐츠에 접근하고자 하는 사용자는 키drope(인증)로 로그인하고 키drope(권한 수여)에서 정확한 역할을 분배해야 한다.이 용례는 공공 사이트의 보호 관리 부분과 유사하다.나는 진정한 고객이 내가 이곳에서 보여준 것만은 아니라는 것을 안다.이 간단한 예가 바로 출발점이다.이 짧은 영상은 우리가 본문에서 작성할 행위를 보여 준다.

TLDR；층계

KeyClope

에서 클라이언트 구성

Keyclope

에서 클라이언트 ID, 클라이언트 ID의 역할 이름과 영역 이름을 캡처

KeyClope

에서 사용자 만들기

Vue 애플리케이션

에 플러그인 생성

어플리케이션 시작에 플러그인 통합

검증할 라우팅 설정

보호된 자원을 관리하는 데 사용할 네비게이션 경비를 창설한다.

열쇠 망토 설정

이전에 KeyClopecheck out my article demonstrating how to run Keycloak locally using Docker을 설정하거나 구성하지 않은 경우키drope 실례를 실행하고 있다고 가정합니다. 키drope 관리 프로그램의 관리자 권한이 있고 영역이 만들어졌습니다.이 예에서 수행할 주요 임무는 클라이언트 프로그램 등록을 만들고 KeyClope에 사용자를 추가하는 것입니다.만약 당신이 이 점을 알고 있다면 코드 부분으로 넘어가기만 하면 됩니다. 그렇지 않으면 KeyClope을 사용하기 시작하겠습니다.

KeyClope에서 클라이언트 만들기

KeyClope의 클라이언트는 보호할 애플리케이션을 등록하는 방법입니다.Vue 응용 프로그램을 만들려면 클라이언트 ID가 필요합니다. 나중에 사용할 수 있도록 Vue 코드에서 도메인 이름을 추적해야 합니다.왼쪽 탐색 창에서 사용 중인 영역 아래의 클라이언트 링크를 클릭하여 기존 클라이언트를 보고 새 클라이언트를 만듭니다.
그림1.KeyClope에 새 클라이언트 추가
기존 클라이언트 목록의 왼쪽 상단에 있는 "만들기"단추를 누르면 프로그램에 새 클라이언트를 추가합니다.예를 들어 KeyClope을 사용하여 로그인하는 것을 보여 주는 Vue 프로그램을 만들 것입니다.
그림2.클라이언트 이름 지정 및 루트 URL 설정
클라이언트 id를 응용 프로그램 이름으로 설정하고 루트 URL을 Vue 응용 프로그램의 로컬 개발을 위한 URL로 설정합니다.내 예에서 URL은 http://localhost:8080입니다.저장 버튼을 클릭합니다.너의 협의가 정확하다는 것을 확보해라.http/https가 일치하지 않으면 나중에 문제가 발생할 수 있습니다.
클라이언트 세부 정보 페이지에서 클라이언트 프로토콜openid-connect, 액세스 유형public이 설정되어 있는지 확인합니다.다음 설정이 올바른지 확인합니다.
|재산|가치|이유|
| 루트 URL | http://localhost:8080/ | URL을 리디렉션하기 전에 접두어를 붙입니다 |
|유효한 URI 리디렉션 | http://localhost:8080/\* | 로그아웃 후 위치 리디렉션 |
| 웹 사이트 출처 | http://localhost:8080 | 허용 출처 CORS
(네트워크 애플리케이션에 중요)|

캐릭터를 만들다

각 클라이언트에는 하나 이상의 역할이 필요합니다.만약 캐릭터를 분배하지 않고 프로그램에서 그것을 검사하지 않는다면, 영역의 모든 사용자가 이 프로그램에 로그인할 수 있습니다.사용자 액세스를 제어하는 역할을 만들어야 합니다.고객 세부 정보 페이지에서 역할 탭을 클릭합니다.역할 탭에서 테이블의 오른쪽 위 모서리에 있는 역할 추가 버튼을 클릭합니다.캐릭터의 이름을 지정하고 저장합니다.나중에 Vue 애플리케이션에서 역할 이름을 사용해야 합니다.
그림3.새 클라이언트의 역할 만들기

사용자 작성

응용 프로그램 (클라이언트) 에 사용자가 로그인해야 합니다.이 프레젠테이션에 대해 우리는 두 명의 사용자를 만들 것이다.한 사용자가 우리가 방금 만든 캐릭터를 가지고 있는데, 한 사용자가 없습니다.우리는 사용자를 만들고 비밀번호와 역할을 분배할 것이다.왼쪽 탐색 창에서 사용자 링크를 클릭하여 시작합니다.
그림4.KeyClope 사용자 추가
이전에 일부 사용자를 추가한 경우에도 나열된 사용자를 볼 수 없습니다.테이블의 오른쪽 위 모서리에서 사용자 추가 버튼을 클릭합니다.
그림5.사용자 세부내용 추가
사용자 이름, 실제 이름 및 이메일을 입력합니다.저장 버튼을 클릭합니다.비밀번호 하나 달라고.
그림6.사용자에 대한 암호 설정
사용자 세부내용 페이지에서 자격 증명 탭을 클릭합니다.사용자에게 비밀번호를 주다.사용자가 암호를 변경하지 못하도록 하려면 임시 스위치를 닫기로 변경합니다.나는 로컬에서 개발을 실행할 때 이렇게 하지만, 비개발 환경에서 실제 사용자를 위해 계정을 만들 때는 이렇게 하지 않는다.암호 설정 버튼을 클릭합니다.

역할 할당

응용 프로그램 (클라이언트) 에 하나의 역할이 있기 때문에, 우리는 이 역할을 사용자에게 나누어 그들이 응용 프로그램에 로그인할 수 있도록 해야 한다.역할 매핑 탭을 클릭합니다.
그림7.사용자에게 클라이언트 역할 할당
고객 역할 드롭다운 목록에서 이전에 만든 고객을 선택합니다.이전에 만들어진 캐릭터는 거기에 있을 거예요.역할을 선택하고 선택 추가 > 버튼을 클릭합니다.사용자는 이제 사용할 수 있습니다.
같은 절차에 따라 두 번째 사용자를 만들지만, 이 사용자에게 어떤 역할도 할당하지 마십시오.이제 Vue에서 인코딩을 시작합니다.

Vue 설정

찾을 수 있습니다the sample code I wrote for this article at GitHub.Vue cli로 간단한 애플리케이션을 만들고 편집했습니다.
Key 망토에서 제공하는 라이브러리를 사용하여 인증 파이프라인을 구축할 것입니다.설치된 라이브러리의 버전이 사용 중인 KeyClope 인스턴스의 버전과 일치하는 것이 중요합니다.npm을 사용하여 설치할 수 있습니다. KeyClope 인스턴스는 버전 12.04입니다.npm install --save [email protected]KeyClope 인스턴스에서 JavaScript 라이브러리를 찾을 수도 있습니다.위치<yourServerUrl>/auth/js/keycloak.js

플러그인 만들기

전체 응용 프로그램에서 KeyClope 객체에 액세스하기 위해 Vue plugin를 만들었습니다.이 플러그인은 프로그램의 어느 곳에서든 인용할 수 있는 전역 $keycloak 대상을 만들 것입니다.플러그 인의 코드는 다음과 같습니다.

import Vue from 'vue'
import **_Keycloak_** from 'keycloak-js'

const options = {
  url: 'http://localhost:8001/auth/',
  realm: 'local-dev',
  clientId: 'vue-demo'
}

const _keycloak = Keycloak(options)

const **_Plugin_** = {
  install(Vue) {
    Vue.$keycloak = _keycloak
  }
}

**_Plugin_**.install = Vue => {
  Vue.$keycloak = _keycloak
  **_Object_**.defineProperties(Vue.prototype, {
    $keycloak: {
      get() {
        return _keycloak
      }
    }
  })
}

Vue.use( **_Plugin_** )

export default **_Plugin_**

주의해야 할 중요한 부분은 옵션스 대상에 있다.url 디렉토리를 사용하는 KeyClope 기본 서버 URL이어야 합니다./auth/ 및 realm는 위의 KeyClope 단계에서 클라이언트 구성으로 제공됩니다.
다음 단계는 clientId에서 Vue 애플리케이션을 시작하기 전에 플러그인에서 KeyClope 객체를 초기화하는 것입니다.따라서 main.js 파일은 다음과 같습니다.

import Vue from 'vue'
import App from './App.vue'
import **_router_** from './router'
import **_authentication_** from "@/plugins/authentication"

Vue.config.productionTip = false
Vue.use( **_authentication_** )

Vue.$keycloak
  .init({ checkLoginIframe: false })
  .then(() => {
    new Vue({
      **_router_** ,
      render: h => h(App)
    }).$mount('#app')
  })

이렇게 하면 KeyClope만 설정됩니다.그것은 아직 보호된 내용을 보호할 수 없다.프로그램이 항상 강제로 로그인되고 공공 내용이 없으면 변경하십시오.main.js에 사용된 초기화 함수:

.init({ onLoad: 'login-required', checkLoginIframe: false })

내비게이션 수위 만들기

로그인한 페이지의 안전을 확보하기 위해서 navigation guard, a feature in Vue intended for just this purpose를 만들어야 합니다.그러나 어떤 페이지가 안전하지 않은 페이지와 안전하지 않은 페이지인지 구분하는 방법이 필요합니다.Vue 라우터 구성 파일login-required에 태그를 설정하여 다음을 수행합니다.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      isAuthenticated: false
    }
  },
  {
    path: '/secured',
    name: 'Secured',
    meta: {
      isAuthenticated: true
    },
    component: () => import('../views/Secured.vue')
  },
  {
    path: '/unauthorized',
    name: 'Unauthorized',
    meta: {
      isAuthenticated: false
    },
    component: () => import('../views/Unauthorized.vue')
  }
]

상기 코드에서는 홈페이지와 권한이 부여되지 않은 메시지 페이지가 보호되지 않습니다.그러나 "Secured"라는 페이지는 안전합니다.내비게이션 위사는 이 속성을 검사하고 필요할 때 사용자에게 다시 로그인합니다.그래서 Vue 라우터에 이 기능을 만들었습니다. 이 기능은 전 세계 네비게이션 관리자입니다.

**_router_**.beforeEach((to, from, next) => {
  if (to.meta.isAuthenticated) {
    // Get the actual url of the app, it's needed for Keycloak
    const basePath = **_window_**.location.toString()
    if (!Vue.$keycloak.authenticated) {
      // The page is protected and the user is not authenticated. Force a login.
      Vue.$keycloak.login({ redirectUri: basePath.slice(0, -1) + to.path })
    } else if (Vue.$keycloak.hasResourceRole('vue-demo-user')) {
      // The user was authenticated, and has the app role
      Vue.$keycloak.updateToken(70)
        .then(() => {
          next()
        })
        .catch(err => {
          **_console_**.error(err)
        })
    } else {
      // The user was authenticated, but did not have the correct role
      // Redirect to an error page
      next({ name: 'Unauthorized' })
    }
  } else {
    // This page did not require authentication
    next()
  }
})

네비게이션 위사가 처리하는 네 가지 사용 상황:

페이지는 인증이 필요하지만 사용자는 인증되지 않습니다

페이지에는 인증이 필요합니다. 사용자는 인증을 통과했고 정확한 역할(권한 부여)을 가지고 있습니다.그들의 영패를 갱신하다.

페이지는 인증이 필요합니다. 사용자는 인증되었지만 권한이 없습니다.잘못된 페이지로 리디렉션합니다.

페이지에 인증 필요 없음

이것은 간단한 로그인 행위에 필요한 모든 코드입니다.실제로 KeyClope 객체의 단일 행 함수인 로그인 및 로그아웃 버튼을 포함하는 예제 코드에서 볼 수 있습니다.
이제 KeyClope을 사용하여 간단한 인증과 권한 부여를 보여 주는 프로그램이 있습니다.우리는 응용 프로그램에 세 개의 KeyClope 통합: Vue 플러그인, onLoad에 플러그인, 그리고 Vue 공유기를 추가했다.이 예는 당연히 확장할 수 있고, 특히 응용 프로그램이 API를 호출하고 있을 때 더 많은 기능이 필요하다. This article 는 Axios를 사용할 때 차단기를 사용하여 영패를 리셋하는 방법을 보여 준다.나는 이 Vue 중심의 예시가 Vue 응용 프로그램과KeyClope을 통합시키려는 사람들에게 도움을 줄 수 있기를 바란다.