阿科塞瓦尔

Vue.js

用Keycloak保护Vue.js单页应用程序

在你开始之前

安装Vue-Cli

npm安装-g @ vue/cli
# 或
纱线全球添加 @ vue/cli

插件插件

npm安装-g @ vue/cli-init
# 或
纱线全球添加 @ vue/cli-init

使用符合内容安全策略 (CSP) 的运行时构建

代码存储库

git克隆https://github.com/keycloak/ keycloak-quickstarts.git
cd应用程序/应用程序-vue/
npm安装

启动Keycloak

从终端打开目录keycloak-15.0.2,然后启动Keycloak运行以下命令。

在Linux上运行:

bin/独立。sh

在Windows运行中:

垃圾箱/独立蝙蝠

Keycloak设置和客户端配置:

创建一个境界: “keycloak-demo”,如以下步骤所示:

登录管理控制台

Keycloak管理控制台并使用用户名和密码登录 你之前创建的。

创造一个境界

披着钥匙的境界相当于租户。 它允许创建独立的应用程序和用户组。 默认情况下 Keycloak中有一个领域叫做大师。 这专用于管理密钥斗篷,不应用于 您自己的应用程序。

让我们创造我们的第一个境界。

  1. 打开Keycloak管理控制台

  2. 将鼠标悬停在左上角的下拉菜单上,上面写着大师,然后点击添加领域

  3. 用以下值填写表格:

    • 名称:我的领域

  4. 点击创建

添加领域

创建用户

最初,在新的领域中没有用户,因此让我们创建一个:

  1. 打开Keycloak管理控制台

  2. 点击用户(左侧菜单)

    • 点击添加用户(桌子的右上角)

  3. 用以下值填写表格:

    • 用户名:我的用户

    • 名字: 你的名字

    • 姓氏: 您的姓氏

  4. 点击保存

添加用户

用户需要设置初始密码才能登录。 要做到这一点:

  1. 点击凭据(页面顶部)

  2. 填写设置密码带有密码的表格

  3. 点击旁边临时防止第一次登录时必须更新密码

设置密码

客户端配置:

客户端选项卡允许您管理您的允许应用程序客户端

  1. 添加客户端: 添加客户端很简单,相同的过程适用于任何类型的应用程序。

    • 客户ID: 您可以为您的应用程序提供任何合适的名称

    • 协议: “OpenID-连接/saml”

    • 根Url: 应用程序主机名

Vue应用客户端配置

配置这两个字段很重要:

  • 有效的重定向Url: 身份验证后,keycloak应该在哪里重定向? (取决于Web源配置,否则您将看到一个错误: 无效的请求URI)

  • 网站来源: * 或 + ( * 用于通配符重定向,+ 用于特定于域 (验证所有子域): 例如: * .redhat.com)

创建Vue应用

让我们使用Vue-CLI创建一个简单的Vue应用程序

vue init webpack-简单应用-vue

添加官方keycloak js适配器

npm i keycloak-js-保存

添加日志库

npm i vuejs-记录器-保存

InitOptions: 您可以使用JSON文件或具有属性的对象

使用返回承诺的标准keycloak api init方法调用。 成功时,在该成功方法中渲染Vue应用程序,以防止在身份验证完成之前暴露任何Vue资源。

在你的src/main.js的代码片段下面添加这个

让initOptions = {
  网址: 'http:// 127.0.0.1:8080/auth',领域: 'keycloak-demo',clientId: '应用程序-vu',onLoad: ' 需要登录'
}

令keycloak = Keycloak(initOptions);

keycloak.init({ onLoad: initOptions.onLoad })。然后 ((auth) => {
  如果 (!授权) {
    窗口.位置.重新加载 ();
  } 其他 {
    Vue.$ log.info (“已验证”);

    新Vue({
      el: '# app',
      渲染: h => h(App,{道具: { keycloak: keycloak } })
    })
  }


// 令牌刷新
  setInterval(() => {
    keycloak.updateToken(70)。然后 ((刷新) => {
      如果 (刷新) {
        Vue.$ log.info('令牌刷新' + 刷新);
      } 其他 {
        Vue.$ log.warn('令牌未刷新,对' 有效
          + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew-新日期 ().getTime() / 1000) + '秒');
      }
    })。抓 (() => {
      Vue.$ log.error('无法刷新令牌');
    });
  },6000)

})。抓 (() => {
  Vue.$ log.error (“认证失败”);
});
我正在将keycloak实例作为道具传递给应用程序组件。 它可以用来恢复令牌。

运行Vue应用程序:

# 启动应用程序: http:// 127.0.0.1:3000
npm运行开发
Vue应用