KeyCloak戦闘| Vueのプロジェクトの統合Keycloak

keycloakは、オープンソースのアイデンティティおよびアクセス管理ソリューションの最新のアプリケーションとサービスです。これは、アプリケーションやサービスの保護、ほとんどのコードのために容易になります。要するに、Keycloakは、主にWebアプリケーションやRESTfulなAPIのためのSSOを提供します。

基本的にKeycloak、あなたは自分自身をダウンロードすることができます。多くのオンライン入門チュートリアルでは、これが統合keycloakのVueのフレームワークを使用して、JavaScriptのアダプタから直接起動、ここがあります。

私たちは、ここで使用keycloak Vueのプラグインですvue-keycloak-js。私はもともと達成するためにはJavaScriptアダプターのネイティブを使用しますが、クロスドメイン頻繁に遭遇する問題のためのもの。それは置き換えvue-keycloak-js。公式文書プラグインVUE-keycloak-JS

まず、ダウンロードしてインストール

ダウンロードしてインストールvue-keycloak-jsを推奨cnpm、NPMわずかに遅いダウンロード速度を。

cnpm i --save @dsb-norge/vue-keycloak-js

第二に、の導入と使用

まず導入する必要がありvue-keycloak-js、あなたがそれにApp.vueで導入されていない場合、それはまた、Vueのを導入する必要があります。

import Vue from 'vue';

その後、再導入VUE-keycloak-JS

import keycloak from '@dsb-norge/vue-keycloak-js';

    Vue.use(keycloak , {
        init: {
            onLoad: 'login-required'
        },
        config: {
            url: 'http://localhost:8080/auth',
            realm: 'test',
            clientId: 'test-realm'
        },
        onReady: (keycloak) => {
            keycloak.loadUserProfile().success((data) => {
                requestAuth;
                console.log(data);
            });
        }
    });

ファサード（ファサードモード）を使用して、私のプロジェクトなので、私は、ログインインターフェースをkeycloak導入する必要があります。だから我々は、中App.vueで導入されていません。