KeyCloak实战|Vue项目集成Keycloak

keycloak是一个面向现代应用和服务的开源身份和访问管理解决方案。它使得针对应用程序和服务的保护变得容易，几乎不需要代码。简而言之，Keycloak的主要是为Web应用或者RESTful API提供SSO。

关于Keycloak的基础知识，你可以自己下载。网上有很多入门的教程，本篇直接从JavaScript Adapter着手，使用Vue框架进行keycloak的集成。

我们这里用的是Vue中的keycloak插件vue-keycloak-js。原本我打算用原生的JavaScript Adapter来实现，但是频繁遇到了跨域的问题。所以换成了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);
            });
        }
    });

因为我的项目中使用了Facade（门面模式），所以我需要在登录界面中引入keycloak。因此就不在App.vue中引入了。

三、配置keycloak

通常来说，你看这篇文章之前应该已经配置好了keycloak。不过我在配置完js之后遇到了跨域问题。因此我在此处顺带说下。

首先需要添加一个域realm

然后在刚才添加的域下面添加一个客户端Client

编辑客户端，解决跨域问题。此处你应该在Web起源(Web origin)中填入你客户端的URL地址。我这里因为是测试效果，所以填了*，但是这是不安全的，建议你按需要配置。

参考文章

vue中sso登录使用VueKeycloak登录

Keycloak doc：JavaScript Adapter

StackOverFlow：keycloak CORS Headers in 401