npm安装-g @ vue/cli
# 或
纱线全球添加 @ vue/cli
用Keycloak保护Vue.js单页应用程序
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-15.0.2,然后启动Keycloak运行以下命令。
在Linux上运行:
bin/独立。sh
在Windows运行中:
垃圾箱/独立蝙蝠
创建一个境界: “keycloak-demo”,如以下步骤所示:
去Keycloak管理控制台并使用用户名和密码登录 你之前创建的。
披着钥匙的境界相当于租户。 它允许创建独立的应用程序和用户组。 默认情况下
Keycloak中有一个领域叫做大师
。 这专用于管理密钥斗篷,不应用于
您自己的应用程序。
让我们创造我们的第一个境界。
将鼠标悬停在左上角的下拉菜单上,上面写着大师
,然后点击添加领域
用以下值填写表格:
名称:我的领域
点击创建
最初,在新的领域中没有用户,因此让我们创建一个:
点击用户
(左侧菜单)
点击添加用户
(桌子的右上角)
用以下值填写表格:
用户名:我的用户
名字: 你的名字
姓氏: 您的姓氏
点击保存
用户需要设置初始密码才能登录。 要做到这一点:
点击凭据
(页面顶部)
填写设置密码
带有密码的表格
点击上
旁边临时
防止第一次登录时必须更新密码
客户端选项卡允许您管理您的允许应用程序客户端
添加客户端: 添加客户端很简单,相同的过程适用于任何类型的应用程序。
客户ID: 您可以为您的应用程序提供任何合适的名称
协议: “OpenID-连接/saml”
根Url: 应用程序主机名
配置这两个字段很重要:
有效的重定向Url: 身份验证后,keycloak应该在哪里重定向? (取决于Web源配置,否则您将看到一个错误: 无效的请求URI)
网站来源: * 或 + ( * 用于通配符重定向,+ 用于特定于域 (验证所有子域): 例如: * .redhat.com)
让我们使用Vue-CLI创建一个简单的Vue应用程序
vue init webpack-简单应用-vue
添加官方keycloak js适配器
npm i keycloak-js-保存
添加日志库
npm i vuejs-记录器-保存
InitOptions: 您可以使用JSON文件或具有属性的对象
Keycloak主机网址:https:// 127.0.0.1:8080/auth
领域名称:Keycloak-演示
客户端ID:应用-vue
使用返回承诺的标准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运行开发