AngularJS单页面应用中Keycloak的配置
- 安装 keycloak.js
- app.module.js中创建Keycloak 对象
window.keycloak = new Keycloak({
url: 'http://keycloak-server/auth',
realm: 'myrealm',
clientId: 'myapp'
}); - app.module.js中初始化keycloak 添加回调,取消angular自动启动 使用angular.bootstrap(document, ["myApp"]);
window.keycloak
.init({
onLoad: "login-required"
})
.success(authenticated => {
if (authenticated) {
window.keycloak.loadUserProfile().success(function(profile) {
angular.bootstrap(document, ["myApp"]); // manually bootstrap Angular remove ng-app in <html lang="en" > //ng-app="myApp"
});
} else {
// keycloak init success, but authenticated no value ;
window.keycloak.login();
}
})
.error(function(err) {
window.keycloak.login();
}); - http请求中 Authorization token注入
// use bearer token when calling backend
app.config(['$httpProvider', function($httpProvider) {
var token = window.keycloak.token;
$httpProvider.defaults.headers.common['Authorization'] = 'BEARER ' + token;
}]); - 如果使用 https 代理中设置
const proxy = httpProxy.createProxyServer({
secure: false
});
- Keycloak配置
ycloak 配置 Configure > Clients > realmName 参数配置
* Valid Redirect URIs：*
Base URL Admin URL Web Origins：+
http://localhost:3000
参考： Keycloak JavaScript Adapter https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter
angular.bootstrap https://docs.angularjs.org/api/ng/function/angular.bootstrap