前言:
如今姐妹们对“vue3 keycloak”大体比较珍视,大家都想要剖析一些“vue3 keycloak”的相关文章。那么小编也在网上网罗了一些关于“vue3 keycloak””的相关资讯,希望我们能喜欢,朋友们快快来学习一下吧!Keycloak使用步骤
当需要集成Keycloak实现SSO功能,或者保护REST API服务时,一般步骤包括如下:
部署Keycloak服务登录Keycloak控制台,创建Realm,以隔离相关资源在Realm中,根据要保护的客户端类型,创建合适的Client(这里的Client是Keycloak中的概念,会跟我们的实际应用对应,代表我们开发的应用在Keycloak中的一个表示)在Realm中创建角色和用户,并将角色映射给用户在我们开发的应用中集成Client Adapter,实现单点登录或者Token校验
其中,步骤2/3/4是在Keycloak管理控制台完成,步骤5在我们开发的应用中实现。
控制台操作Realm管理
登录Keycloak控制台后,左上角默认显式的是Master Realm,可以将鼠标移动到Master realm上,找到添加realm按钮,点击添加
Master Realm
Master realm是一个特殊的realm,由Keycloak默认创建,包含管理员账号。Master Realm主要用于创建和管理其他自定义Realm。
添加自定义Realm
将鼠标移动到左上角Master上,在弹出层中点击Add Realm,输入realm名称后,点击创建
自定义Realm配置
Realm创建完成后,可以在左上角选择之前创建的realm
切换realm之后可以对realm做相关的配置,比如登录相关的,是否允许用户自主注册(不需要通过管理员来创建)、是否允许用户修改用户名等;再比如页面主题相关的,如Locale配置等,这里就不展开了,详细操作可以参考官方文档
Client管理
这里的客户端是Keycloak中的概念,是我们开发的应用在Keycloak中的一个表示。客户端中配置的一些信息在我们应用程序跟Keycloak集成时会使用到。
创建Client
点击左侧菜单中的Clients,点击右上角Create按钮
在创建Client页面,填写Client ID(随便填写,可以跟应用名称保持一致,方便区分),Client Protocol选择默认的openid-connect,openid-connect相关介绍参考前文相关概念介绍部分
点击Save按钮后,一个Client就创建好了,但是很多配置使用的还是默认的,根据使用场景,有些参数需要修改
Client配置
回到Client列表页面,点击之前创建的client,进入到对应Client的配置页面,如下
在这里,主要关注Settings、Credentials以及Installation这几个tab页
Access Type
Access Type配置位于Settings tab页中,鼠标移到其后面的问号上,会有简短说明,大意是Confidential类型的客户端需要一个秘钥来启动登录协议。Public类型的客户端不需要保密。Bearer-only类型的客户端是永远不会发起登录的web服务。
根据OAuth 2.0规范,应用程序可以分为Confidential和Public两类。主要的区别在于应用程序是否能够安全地持有凭据(例如客户端ID和Secret)。这将影响应用程序可以使用的身份验证类型。
Confidential
Confidential客户端是能够使用授权服务器进行安全身份验证的应用程序,例如能够保证其注册的客户端秘钥的安全。Confidential应用程序可以以一种安全的方式持有凭据,而不会将其暴露给未经授权的方。它们需要一个可信的后端服务器来存储秘密。
因为Confidential类型的应用程序使用受信任的后端服务器,这种类型的应用程序一般采用授权码(Authorization Code Flow), 资源拥有者密码凭证授权(Resource Owner Password Flow), 或者是服务器之间使用Client Credentials Flow流程。
如果Access Type选择Confidential,会多出一些配置选项,如下:
首先,在Settings页面,Access Type配置项下方会多出一些URL配置,最主要的就是这里的Valid Redirect URIs,其表示Keycloak登录或登出成功后,重定向到我们应用程序的URL,可以是通配符。这里要注意,在使用授权码流程时,重定向的redirect_url参数一定要配置到这里来,不然会提示无效的重定向URL。Valid Redirect URIs可以配置多个。
其次,Access Type选择confidential并点击底下的 保存按钮后,会多出一个Credentials tab页,内容如下:
这里最重要的信息就是Secret,后面会使用到
Public
Public客户端不能使用已注册的客户端秘钥,一般是在浏览器或移动设备上运行的应用程序。
Public应用程序只能使用不需要使用其客户端Secret的授予类型,因为它们不能保持所需凭据的机密性。
可以看出,Public类型的Client没有Credentials tab页。使用PKCE授权代码流程的本地桌面或移动应用程序,以及一个基于javascript并使用隐式授权流程(Implicit Flow)的客户端web应用程序,都属于Public类型
Bearer-only
应用程序只允许Bearer-only令牌请求。当打开时,此应用程序不能参与浏览器登录。
可以看出,Bearer-only类型的应用不需要配置重定向URI
Access Type小结Confidential:适用于服务端应用,且需要浏览器登录以及需要通过秘钥获取access token的场景。比较典型的就是服务端渲染的web应用Public:适用于客户端应用,并且需要浏览器登录的场景。典型的使用场景就是前端web应用,包括使用vue、react实现的前端应用Bearer-only:适用于服务端应用,不需要浏览器登录,只允许使用bearer token请求的场景,例如后端提供的REST API,可以采用这种方式保护Secret
客户端Secret,根据Access Type选择的不同,有些类型的Client会有,有些会没有。在Credentials Tab页面查看
配置信息
在Installation Tab页中可以查看客户端配置信息
一般选择JSON格式。后续使用servlet-adapter时需要到这里来找到配置信息。
用户角色管理创建角色
点击左侧Roles菜单,点击右上角Add Role按钮
在添加角色页面,输入角色名称,点击保存
创建用户
点击左侧Users菜单,点击右上角Add User按钮
在用户添加页面,输入用户名,在Local部分可以选择使用的国际化语言,点击保存
用户角色关联
在用户列表页面,点击用户ID(用户列表没有数据的话可以通过搜索框或者点击View all users显示用户)
进入到用户配置页面,在Role Mappings Tab页面中,新创建的角色会出现在最左边的Available Roles框中
从Available Roles框中选中需要添加的角色,点击Add selected,完成用户和角色的关联。
标签: #vue3 keycloak