前言：

前端Angular集成Keycloak：

1.使用github开源的的库 keycloak-angular：

安装Keycloak Angular和keycloak客户端keycloak-js库：

Angular中设置Keycloak：

Keycloak登录：

2.自己实现集成Keycloak功能：

实现Keycloak登录：

登录成功，获取Keycloak相关信息：

3.关于Nginx配置：

后端Django集成Keycloak:

1.实现中间件：

2.实现Keycloak的API工具类：

代码地址：

前言：

一个企业往往拥有多个应用系统，如果每个应用都有独立的用户认证和授权管理功能，这不仅需要运维人员维护多套用户管理系统，用户使用每个系统时都要登录一次，非常不方便。如果能够将所有应用系统的用户集中管理，用户只登录一次，就可以无需再次登录而访问所有系统，这将会大大改善用户体验。本文前端Angular, 后端Django，基于Keycloak搭建单点登录系统。所以代码均经过验证，直接从工程代码中拷贝。

前端代码部署到nginx, 前后端代码分开部署

前端Angular集成Keycloak：

本文使用前端登录，而不是后端登录的方式。后端只负责检测前端发送的请求是否登陆过Keycloak，以及访问Keycloak server的几个API。

前端要怎样集成Keycloak呢？本文提供两种方式

1.使用github开源的的库 keycloak-angular：

请参考github：https://github.com/mauriciovigolo/keycloak-angular

前端集成Keycloak，根据官方文档，keycloak提供了一个JavaScript adapter，详情请参考：https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter

这个keycloak-angular库对keycloak提供的这个JavaScript adapter进行了包装，可以帮助用户在Angular应用中更方便的使用, 它提供了以下特性：

提供了一个keycloak服务，它包装了要在Angular中使用的keycloak-js函数，为原始函数（keycloak-js文件中提供的函数）提供了额外的功能，并且还添加了新的函数，使其更容易被Angular应用程序使用
通用的AuthGuard实现，用户可以通过继承其认证逻辑和角色加载，自定义所需要的AuthGuard逻辑。
提供了一个HttpClient拦截器，登录成功之后，每个http请求都会在header中增加认证信息(其实就是登录成功之后的keycloak access token)，用户可以禁用这个拦截器，也可以设置排除某个url的http请求。下面是拦截器源码中，给http请求的header中增加access token的代码：

  /*** Adds the token of the current user to the Authorization header** @param req* @param next*/private handleRequestWithTokenHeader(req: HttpRequest<any>,next: HttpHandler): Observable<any> {return this.keycloak.addTokenToHeader(req.headers).pipe(mergeMap(headersWithBearer => {const kcReq = req.clone({ headers: headersWithBearer });return next.handle(kcReq);}));}

安装Keycloak Angular和keycloak客户端keycloak-js库：

具体版本请根据自己的angular版本和keycloak版本进行设置。

npm install keycloak-angular keycloak-js

本文所用版本：

当然，如果用户想用自己keycloak服务器中的keycloak-js，可以选择不安装keycloak-js库，而是在index.html入口文件中直接下载keycloak server中的keycloak.js文件。

<!doctype html>
<html>
<head><meta charset="utf-8"><title>Conduit</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css"><link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css"><link rel="stylesheet" href="//demo.productionready.io/main.css"><!-- 导入keycloak服务器的keycloak.js脚本文件 --><script src="http://127.0.0.1:8082/auth/js/keycloak.js" type="text/javascript"></script>
</head>

Angular中设置Keycloak：

为了确保Keycloak在Angular应用启动时被初始化，必须在AppModule中添加一个APP_INITIALIZER provider。这个provider将调用如下所示的initializeKeycloak工厂函数，该函数将设置Keycloak服务，以便在应用程序中使用它。

keycloak-init.ts

import { KeycloakService } from 'keycloak-angular';export function initializeKeycloak(keycloak: KeycloakService) {return () =>keycloak.init({config: {realm: "master",//设置Realmurl: '/auth', //程序部署到nginx上，该请求将被反向代理到keycloak server。clientId: 'frontend-client', //设置clientcredentials : {secret : "8f28abe0-f4de-476d-bd8b-5354d78639de"}//设置client credentials},initOptions: {onLoad: 'login-required',flow: 'standard'},}).then(() => {//登录成功var roleId = "0";var roleTypes = {"ROLE_ADMIN": "1","ROLE_VIEWER": "2", "ROLE_OPERATOR": "3"};var roleArray = keycloak.getUserRoles(true); //登录成功，获取当前登录用户的role信息//登录成功后，将role信息保存到sessionStorage，以后整个应该中随时随处可以使用if(roleArray.length == 0){sessionStorage.setItem('userRole', "3");}else{roleArray.indexOf("ADMIN_ROLE") != -1 ? sessionStorage.setItem('userRole', "1"): roleArray.indexOf("OPERATOR_ROLE") != -1 ? sessionStorage.setItem('userRole', "2"): sessionStorage.setItem('userRole', "3")}console.log("Debug: the current user name is: " + keycloak.getUsername(),)//得到keycloak 的 access token。keycloak.getToken().then(data => {console.log("Debug: the keycloak access token is " + data);sessionStorage.setItem('accessToken', data);})}).catch((error) =>//登录失败console.error('Keycloak login failed: ', error));}

在AppModule中添加APP_INITIALIZER provider:

import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { initializeKeycloak } from './core/services/keycloak-init'; //导入initializeKeycloak工厂函数@NgModule({declarations: [AppComponent, FooterComponent, HeaderComponent],imports: [BrowserModule,CoreModule,SharedModule,HomeModule,AuthModule,AppRoutingModule,KeycloakAngularModule],providers: [//添加APP_INITIALIZER provider{provide: APP_INITIALIZER,useFactory: initializeKeycloak,multi: true,deps: [KeycloakService],},],bootstrap: [AppComponent]
})

Keycloak登录：

Keycloak设置完成之后，启动Angular应用，浏览器中输入 https://localhost/ ，自动重定向到keycloak登录页面。

登录成功之后，每次向后端发送请求，发现header中加入了keycloak access token信息（keycloak-angular提供的HttpClient拦截器会加入access token）。

  getBackendInfo(){this.brucetest = JSON.stringify({"hello":"bruce"});this.http.get(`/api/adminresource/`).subscribe(response => {console.log("Debug: the value of res is " + JSON.stringify(response));this.brucetest = JSON.stringify(response);},err => {console.log("Debug: error message" + err);})}

2.自己实现集成Keycloak功能：

如果担心开源的keycloak-angular库不安全或者有隐患，那么可以自己实现前端keycloak登录功能。

本文中Angular应用启动后，自动路由到login组件，我们在login组件中集成keycloak功能（用户自便，什么组件都行）。

首先判断是否登录了keycloak，如果已经登录的话，cookie中会有一个key，叫做"code"。

getCookie(cname) {var name = cname + "=";var ca = document.cookie.split(';');for (var i = 0; i < ca.length; i++) {if (ca[i].indexOf(name) >= 0) {console.log(ca[i].slice(ca[i].indexOf(name)));return ca[i].slice(ca[i].indexOf(name) + 5)}}return "";
}
this.code = this.getCookie('code');

实现Keycloak登录：

然后判断code的值是否为空，如果为空并且程序中没有保存过keycloak access token，说明没有登录，重定向到keycloak登录地址；如果不为空，说明登录了，获取keycloak 的access token， refresh token等信息。

if (this.code == '') {this.checkAccessToken();
} else {this.getAccessToken();
}//如果code为空，则判断是否保存过keycloak access token，如果没有，则说明没有登录过，需要登录keycloak。
checkAccessToken() {if (!this.getUser().accessToken) { this.getUser()是自己实现的一个函数，用来访问sessionStorage, 请自行实现，非常简单。this.redirectKeycloakSSO();} else {//已经登录，直接跳转到应用的主界面。this.router.navigateByUrl('/home');}
}
//重定向到keycloak登录页面。
redirectKeycloakSSO() {let url = "/auth/realms/" + this.keycloakRealm + "/protocol/openid-connect/auth";let params = "redirect_uri=" + this.redirect_uri + "/&client_id=" + this.client_id + "&response_type=" + this.response_type + "&scope=" + this.scope;window.location.href = url + "?" + params;
}

登录成功，获取Keycloak相关信息：

登录成功后，使用cookie中的code值，访问Django后端，获取keycloak的access token, refresh token等

//登录后使用cookie中的code值获取keycloak的access token, refresh token等信息。
getAccessToken() {let data = {"redirect_uri": this.redirect_uri + "/","code": this.code,}jQuery.ajax({url: this.csfWidgets.backendUrl + "/api/keycloak/token/",data: JSON.stringify(data),type: "POST",async: false,contentType: 'application/json',complete: (xhr) => {},success: (data, status, xhr) => {document.cookie = 'params=0;expires=' + new Date(0).toUTCString();if(! data.hasOwnProperty("access_token")){console.log('Error: Can not get keycloak access token!');return;}this.getUserInfo(data);},error: (data, status, xhr) => {console.log("Failed: " + JSON.parse(data.responseText).resMsg);},fail: (data, status, xhr) => {console.log("Failed: " + JSON.parse(data.responseText).resMsg);}});
}

下面只简单贴一下后端Django程序收到前端发送的request后，是怎样利用code和redirect_uri信息取得keycloak的access token，refresh token等信息。这个get_refresh_token函数肯定是在View中被调用，此处不贴代码了，太啰嗦。

def get_refresh_token(self, code, redirect_uri):payload = {"client_id": self.client_id,"code": code,"redirect_uri": redirect_uri,"grant_type": 'authorization_code',"client_secret": self.client_secret_key}#keycloak server的API。URL = '%s/realms/%s/protocol/openid-connect/token' % (self.server_url,self.realm)# sending get request and saving the response as response objecttry:#访问keycloak server，获取access token, refresh token等信息。#reponse = requests.get(url = URL, headers=self.headers,verify=False,proxies=self.proxies)response = requests.post(url = URL, data=payload,verify=False)responseData = ""if response.status_code > 201:if response.status_code == 403:responseData = {"res_status":403,"detail":"This user does not have permission to get keycloak refresh token from keycloak."}elif response.status_code == 401:responseData = {"res_status":401,"detail": str(response.text)}else:responseData = {"res_status":response.status_code,"detail":"Can't get access and refresh token from keycloak server, " + str(response.text)}return responseDataelif response.headers.get('Content-Type') is not None and 'json' in response.headers.get('Content-Type'):# extracting data in json formatdata = response.json()return dataelse:responseData = {"res_status":response.status_code,"detail":"Can't get access and refresh token from keycloak server, " + str(response.text)}return responseDataexcept Exception as e:print("Debug: Can't get keycloak refresh token because of: " + str(e))self.logger.error("Exception found when try to get refresh token from keycloak: " + str(e))if type(e) == requests.exceptions.ConnectionError :return {"res_status":500,"detail":"ConnectionError, can't connect the keycloak server."}return {"res_status":500,"detail":"Can't get keycloak refresh token."}

前端获取到response后，解析response信息，从中获得access token, refresh token等信息，并保存到sessionStorage中，解析access token 得到role信息，并且保存到sessionStorage中，以上操作完成后，认证过程全部完成，跳转到主界面 this.router.navigateByUrl('/home');

//解析response信息，参数data是传入的response信息
getUserInfo(data) {var tokenInfo = this.decodeToken(data.access_token);var roleId = "0";var roleArray = tokenInfo['realm_access']['roles'];//console.log("Debug: the current user roles is " + roleArray);if(roleArray.length == 0){roleId = '3';}else{roleArray.indexOf("ADMIN_ROLE") != -1 ? sessionStorage.setItem('userRole', "1"): roleArray.indexOf("OPERATOR_ROLE") != -1 ? sessionStorage.setItem('userRole', "2"): sessionStorage.setItem('userRole', "3");}const userinfo = JSON.parse(sessionStorage.getItem('user'));const user = userinfo ? userinfo : {};Object.assign(user, {username: tokenInfo['preferred_username'],roleId: roleId,passwordFlag: false, //Don't use original method to change the admin user password.});// this.role = data.roles;const keycloakAuthInfo = {"accessToken": data.access_token,"refreshToken": data.refresh_token};//将信息保存到sessionStorage中。this.updateUser(keycloakAuthInfo);this.updateUser(user);//将access token, refresh token信息保存到cookie中，这样以后每次向后端发送http请求，都会自动带上access token信息。this.csfWidgets.setCookie("keycloakToken=" + data.access_token);//所以认证授权工作完成之后，跳转到主界面this.router.navigateByUrl('/home');
}

至此，所有的认证工作均已完成，系统可以在keycloak保护下正常工作了，前端发送的每个http请求，都会带上access token信息（cookie中设置了access token，所有http请求都会带上这个access token），后端Django中间件会检查这个access token是否有效，如果有效，则执行业务代码，正常工作；如果失效（例如过期），则返回401错误，让用户重新登录。

3.关于Nginx配置：

前端在发送登录请求的时候，nginx会通过反向代理将请求转发到keycloak server，从而重定向到keycloak登录页面，登录后再获取access token，但此时token中的issuer地址是nginx地址，后端使用这个access token访问keycloak server的时候，会要求issuer地址是keycloak server地址，而不是nginx地址，这就需要nginx的反向代理来解决，具体请参考：https://blog.csdn.net/wdquan19851029/article/details/111869846

后端Django集成Keycloak:

前面大体介绍了一下整个keycloak认证的整个过程，包括前端和后端的流程。下面详细介绍后端的实现。

主要是需要实现一个中间件，作用是拦截来自Angular前端的每个请求，进行认证检查。从request的Header获取keycloak access token，利用这个token去访问keycloak server，如果能够成功，说明用户登录了，中间件返回"None"，继续执行View，进行业务处理；如果失败，说明用户没有登录，中间件直接返回HttpResponse，请求完毕，不再继续进行业务处理。

下图是中间件工作原理：

1.实现中间件：

在settings.py中配置Keycloak信息：

KEYCLOAK_CONFIG = {'KEYCLOAK_SERVER_URL': 'https://127.0.0.1:8443/auth',#跟前端保持一致，使用相同的Realm和client'KEYCLOAK_REALM': 'master','KEYCLOAK_CLIENT_ID': 'frontend-client', 'KEYCLOAK_CLIENT_SECRET_KEY': '8f28abe0-f4de-476d-bd8b-5354d78639de','KEYCLOAK_BEARER_AUTHENTICATION_EXEMPT_PATHS':[r'api/keycloak/token/*', r'api/keycloak/config/*',r'api/automation/token/*',r'api/keycloak/logout/'] #python Regular expression
}

其中配置在"KEYCLOAK_BEARER_AUTHENTICATION_EXEMPT_PATHS"中的url，中间件不会进行用户认证检查，例如使用code获取access token信息的"api/keycloak/token/"，因为是前端登录之后第一次访问后端，此时还未获得access token信息，所以不进行认证检查。

中间件的具体实现：具体细节看代码注释

class KeycloakMiddleware(MiddlewareMixin):def __init__(self, get_response):""":param get_response:"""self.config = settings.KEYCLOAK_CONFIG# Read configurationstry:self.server_url = self.config['KEYCLOAK_SERVER_URL']self.client_id = self.config['KEYCLOAK_CLIENT_ID']self.realm = self.config['KEYCLOAK_REALM']except KeyError as e:raise Exception("KEYCLOAK_SERVER_URL, KEYCLOAK_CLIENT_ID or KEYCLOAK_REALM not found.")self.client_secret_key = self.config.get('KEYCLOAK_CLIENT_SECRET_KEY', None)self.client_public_key = self.config.get('KEYCLOAK_CLIENT_PUBLIC_KEY', None)self.default_access = self.config.get('KEYCLOAK_DEFAULT_ACCESS', "DENY")self.method_validate_token = self.config.get('KEYCLOAK_METHOD_VALIDATE_TOKEN', "INTROSPECT")self.keycloak_authorization_config = self.config.get('KEYCLOAK_AUTHORIZATION_CONFIG', None)self.keycloak_bearer_authentication_exempts = self.config.get('KEYCLOAK_BEARER_AUTHENTICATION_EXEMPT_PATHS', None)# Djangoself.get_response = get_response#lockself.lock = threading.Lock().........................................................def process_view(self, request, view_func, view_args, view_kwargs):"""Validate only the token introspect.:param request: django request:param view_func::param view_args: view args:param view_kwargs: view kwargs:return:"""#Check if this request path is no authentication required, if yes, go to views.if len(self.keycloak_bearer_authentication_exempts) > 0:path = request.path_info.lstrip('/')print("Debug: the url path is " + path)if any(re.match(m, path) for m inself.keycloak_bearer_authentication_exempts):logger.debug('** exclude path found, skipping')return NoneaccessToken = "";#如果Header中没有token信息'HTTP_AUTHORIZATION'，则判断'HTTP_COOKIE'中有没有if 'HTTP_AUTHORIZATION' not in request.META:if not request.META.get('HTTP_COOKIE'):print("Debug: can't get the cookie keycloak token");return JsonResponse({"detail": NotAuthenticated.default_detail},status=NotAuthenticated.status_code)else:#得到token信息accessToken =request.COOKIES["keycloakToken"];print("Debug: the request cookie token is: " + accessToken);#如果Header中有token信息'HTTP_AUTHORIZATION'，则从'HTTP_AUTHORIZATION'中获取token。if not accessToken.strip():auth_header = request.META.get('HTTP_AUTHORIZATION').split()accessToken = auth_header[1] if len(auth_header) == 2 else auth_header[0]print("Debug: the request token is " + accessToken);try:#使用keycloak API工具类KeycloakHttpRequest，访问keycloak server获取用户信息keycloakHttpRequest = KeycloakHttpRequest(self.server_url,self.client_secret_key,self.realm,self.client_id)#访问keycloak server，得到登录用户信息keycloakUserInfo = keycloakHttpRequest.get_userinfo(accessToken)print("Debug: the keycloakUserInfo is: " + json.dumps(keycloakUserInfo))keycloakUserRoles=''#print("Debug: the userInfoData username is %s, user ID is %s " % (userinfo['preferred_username'],userinfo['sub']))if keycloakUserInfo is not None: if "res_status" in keycloakUserInfo:return JsonResponse({"detail": keycloakUserInfo['detail']},status=keycloakUserInfo['res_status'])if 'user_roles' in keycloakUserInfo:# 从用户信息中获取role信息。keycloakUserRoles = keycloakUserInfo['user_roles']request.META['USER_ROLES'] = ','.join(keycloakUserRoles)else:#Get user roles(User must have the Client Roles 'view-users', otherwise there will be exception.)print("Debug: current user is: " + keycloakUserInfo['sub'])//如果用户信息keycloakUserInfo中没有role信息，则直接访问keycloak server获取roles = keycloakHttpRequest.get_user_roles(keycloakUserInfo['sub'],accessToken)if "res_status" in roles:return JsonResponse({"detail": roles['detail']},status=roles['res_status'])if roles is None or not len(roles):keycloakUserRoles = Nonerequest.META['USER_ROLES'] = 'VIEWE_ROLE'else:keycloakUserRoles = [user['name'] for user in roles]request.META['USER_ROLES'] = ','.join(keycloakUserRoles)

在keycloak中间件实现之后，将其加入到settings.py中的MIDDLEWARE列表中.

2.实现Keycloak的API工具类：

工具类KeycloakHttpRequest.py调用各种API（带上access token）访问keycloak server，获取需要的信息，例如获取用户信息，得到用户role信息，使用refresh token刷新access token，keycloak登出等等。此工具类是供中间件（例如获取用户信息）和View（例如 keycloak登出）使用的。

class KeycloakHttpRequest(object):def __init__(self,server_url,client_secret_key,realm='master',client_id='admin-cli'):if server_url.endswith('/'):self.server_url = server_url[:-1]else:self.server_url = server_urlself.realm = realmself.client_id = client_idself.client_secret_key = client_secret_keyself.proxies={'http':'http://cnproxy.int.nokia-sbell.com/proxy.pac','https':'http://cnproxy.int.nokia-sbell.com/proxy.pac'}def get_userinfo(self, accessToken):headers={'Authorization': 'Bearer ' + accessToken,'Content-Type': 'application/json'}#http://$KC_SERVER/$KC_CONTEXT/realms/$KC_REALM/protocol/openid-connect/userinfo"userInfoUrl = '%s/realms/%s/protocol/openid-connect/userinfo' % (self.server_url,self.realm)try:#userInfoResponse = requests.get(url = userInfoUrl, headers=self.headers,verify=False,proxies=self.proxies)userInfoResponse = requests.get(url = userInfoUrl, headers=headers,verify=False)userInfoData=''print("debug: the userinfo reponse info is : " + str(userInfoResponse))if userInfoResponse.headers.get('Content-Type') is not None and 'json' in userInfoResponse.headers.get('Content-Type'):userInfoData = userInfoResponse.json()else:if userInfoResponse.status_code == 403:userInfoData = {"res_status":403,"detail":"This user does not have permission to access the user info from keycloak."}elif userInfoResponse.status_code == 401:userInfoData = {"res_status":401,"detail": str(userInfoResponse)}else:userInfoData = {"res_status":userInfoResponse.status_code,"detail":"Can't get the user info from keycloak server."}return userInfoDataexcept Exception as e:print("Debug: the error message: " + str(e))print("Debug: the type of Exception : " + str(type(e)))if type(e) == requests.exceptions.ConnectionError :return {"res_status":500,"detail":"ConnectionError, can't connect the keycloak server."}return {"res_status":401,"detail":"Can't get the user info from keycloak server."}def get_user_roles(self,user_uuid, accessToken):headers={'Authorization': 'Bearer ' + accessToken,'Content-Type': 'application/json'}#/auth/admin/realms/{realm}/users/{user-uuid}/role-mappings/realmURL = '%s/admin/realms/%s/users/%s/role-mappings/realm' % (self.server_url,self.realm,user_uuid)# sending get request and saving the response as response object try:# print("Debug: try to get user roles from keycloak server " + URL)#reponse = requests.get(url = URL, headers=self.headers,verify=False,proxies=self.proxies)response = requests.get(url = URL, headers=headers,verify=False)print("Debug: user roles reponse string is:" + str(response.headers))print("Debug: user roles reponse string is:" + str(response.headers.get('Content-Type')))userRoleData=''if response.headers.get('Content-Type') is not None and 'json' in response.headers.get('Content-Type'):# extracting data in json format # print("Debug: user roles reponse string is:" + str(response))data = response.json()# print("Debug: the user roles info is " + str(data))return dataelse:if response.status_code == 403:userRoleData = {"res_status":403,"detail":"This user does not have permission to get the user role info from keycloak."}elif response.status_code == 401:userRoleData = {"res_status":401,"detail": str(response)}else:userRoleData = {"res_status":response.status_code,"detail":"Can't get the user role info from keycloak server."}return userRoleDataexcept Exception as e:print("Debug: the error message: " + str(e))print("Debug: the type of Exception : " + str(type(e)))if type(e) == requests.exceptions.ConnectionError :return {"res_status":500,"detail":"ConnectionError, can't connect the keycloak server."}return {"res_status":500,"detail":"Can't get the user role info from keycloak server."}

代码地址：

本文代码github地址：https://github.com/wdquan1985/Angular-Django-Keycloak

前端集成keycloak使用方式一，使用开源的keycloak-angular库。用户可以根据上面提供的第二种方式自己实现集成keycloak。前端提供的主界面及其简单，因为完全没必要加入其它任何业务，只是完成keycloak登录后，进入主界面，发送一个http请求，然后在主界面将response显示出来就好。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

angular和vue的对比学习之路
vue-ng打开vue的中文官网一段关于vue的描述 HTML 模板 JSON 数据，再创建一个 Vue 实例，就这么简单。那我么再看下angular中文网 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要…...
2024/4/21 2:46:22
学习笔记Vue（三） —— 双向数据绑定机制（与angular对比）
一、Angular中的双向数据绑定（脏检查机制）： AngularJs 为 scope 模型上设置了一个监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch，用来…...
2024/4/21 2:46:23
angular react vue 浏览器兼容情况汇总
一、逻辑层框架 （1）angular Angular早在1.3版本就抛弃了对ie8的支持。 （2）react React 早在0.14.x 版本就抛弃了对ie8的支持。 （3）vue Vue就没打算支持ie8 二、UI层框架 （1）bootst…...
2024/4/21 2:46:21
angular和vue的差别
vue仅仅是mvvm中的view层，只是一个如jquery般的工具库，而不是框架，而angular而是mvvm框架。vue的双向邦定是基于ES5 中的 getter/setter来实现的，而angular而是由自己实现一套模版编译规则，需要进行所谓的“脏”检查&a…...
2024/4/21 2:46:19
前端框架React，Angular和Vue详解
前端框架React，Angular和Vue详解1. 三种架构概述2. Vue概述2.1 Vue简介2.2 Vue起源2.3 Vue特点3. React简介3.1 React概述3.2 React起源3.3 React特点4. Angular概述4.1 Angular简介4.2 Angular起源4.3 Angular特点5. 三种框架对比分析5.1 开源性质5.2 核心发展5.3 …...
2024/4/21 2:46:18
快速入门Angular或Vue前端环境配置和项目运行
本文档仅介绍Angular和Vue项目的环境安装到项目运行，具体相关api请到相应官网进行学习第一步：建议安装编译器：vscode（也可以使用idea等其他编译器) 安装地址：https://code.visualstudio.com/Download 设置中文语言环…...
2024/4/24 14:24:36
前端集成—Angular 1.0项目iframe嵌入Vue项目
文章目录angular代码修改加入集成模块： app/app.jsiframe集成的样式： /vue-integration/_vue-integration.scssiframe集成的html代码 ： /vue-integration/vue-integration.htmliframe集成的控制器代码 ： /vue-integration/vue-in…...
2024/4/21 2:46:16
Vue\React\Angular的区别
1. 基本概念 Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。 React 是一个用于构建用户界面的 JavaScript 库 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff…...
2024/5/1 0:33:30
KgoUI（1）之技术选型angular 和 vue
框架源代码：码云最近几年前端技术发生了很大的变化，新技术，新开发模式层出不穷。之前divcssjs 包打天下的时代已经不复存在了。说到前端技术目前最火的莫过于三大mvvm框架 vue （vue并不算是mvvm框架，应该说是个m…...
2024/4/21 2:46:14
Angular vs React vs Vue
文章目录前言一、Introduce1. Start2. License3. Popularity4. Job market二、Community and development三、Library Size四、Learn curve五、Use1. Basic Use2. Debug3 Css 动画4 Create project5 Dependencies六、Performance1. DOM manipulation2. Startup time3. Memory a…...
2024/4/21 2:46:13
Angular父子组件通信及和vue的对比
文章目录一、父向子组件传递父组件给子组件传值-Input1 传入数据2 子组件引入Input模块3 子组件获取父组件数据父组件向子组件传递方法父组件向子组件传递自身二、父组件获取子组件使用ViewChild获得子组件本身三、子组件通过output触发父组件的方法1. 子组件引入output和event…...
2024/4/20 5:17:30
angular和vue还有jquery的区别
angularjs简单介绍和特点首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, service, directive, 各个模块之间也可以进行通信, 但是整体结构上是比较清晰的, 就是说其代码组…...
2024/4/20 20:18:20
对vue与angular和react的对比
概念：vue是一个构建数据驱动的web界面的渐进式框架，它的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件 vue对比angular 1、vue在设计之初参考了很多angularjs的思想 2、vue相对比与angular比较简单 3、 vue相对比与angular比较小巧&…...
2024/4/20 20:18:18
一份全面的React、Angular和Vue.js比较指南
对于开发人员而言，选择技术栈有时是一件相当棘手的任务。因为您需要综合考虑诸如：预算、时间、应用大小、最终用户、项目目标、以及可用资源等多方面因素。无论您是初学者、开发人员、自由职业者还是项目架构师，只有详细了解了每种框架的优…...
2024/4/20 20:18:17
什么是Vue?Vue双向数据绑定原理以及生命周期详解
微信公众号：程序员W W来分享啦~ 今天W的分享目前前端最流行的框架之一Vue.js 下面跟W一起探索吧~ 尤雨溪的Vue.js 对于Vue.js的理解 —— 什么是Vue.js —— Vue.js是一套构建用户界面的渐进式框架 Vue被设计为可以自底向上逐层应用。 Vue的核心库只关…...
2024/4/21 2:46:12
vue响应式原理（数据双向绑定的原理）
先来了解一下几个相关概念 1、渐进式框架下面是摘自知乎的一个解答（个人认为讲述比较好的回答）： 在我看来，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定…...
2024/4/21 2:46:11
vue数据双向绑定原理-observer
1）vue数据双向绑定原理-observer2）vue数据双向绑定原理-wather3）vue数据双向绑定原理-解析器Complie vue数据双向绑定原理, 和简单的实现去他喵的底层原理,框架内核, 老夫写代码只用Jquery 。个人觉得,不论是否是长期与之交集, 还…...
2024/4/27 5:55:55
前端框架Vue、angular、React的优点和缺点
前端框架Vue、angular、React的优点和缺点学习web前端开发中，会有很多的框架，那么目前流行的框架有哪些呢？ 一、Vue.js 其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。 Vue.js通过…...
2024/4/21 2:46:09
Vue双向绑定原理，教你一步一步实现双向绑定
当今前端天下以 Angular、React、vue 三足鼎立的局面，你不选择一个阵营基本上无法立足于前端，甚至是两个或者三个阵营都要选择，大势所趋。所以我们要时刻保持好奇心，拥抱变化，只有在不断的变化中你才能利于不败之地&…...
2024/4/20 8:26:25
vue的双向绑定原理及一步一步实现MVVM
vue的双向绑定原理及简单实现MVVM几种实现双向绑定的做法MVVM实现思路整理MVVM是什么MVVM框架与MVC框架的主要区别有两点：MVVM实现1、实现数据监听器Observer2、实现指令解析器Compile3、实现订阅者Watcher4、实现MVVM本文主要围绕几种实现双向绑定的做法、“实现数…...
2024/4/21 2:46:07

Angular前端 + Django后端 + Keycloak 实现SSO功能

前言：

前端Angular集成Keycloak：

1.使用github开源的的库 keycloak-angular：

安装Keycloak Angular和keycloak客户端keycloak-js库：

Angular中设置Keycloak：

Keycloak登录：

2.自己实现集成Keycloak功能：

实现Keycloak登录：

登录成功，获取Keycloak相关信息：

3.关于Nginx配置：

后端Django集成Keycloak:

1.实现中间件：

2.实现Keycloak的API工具类：

代码地址：

相关文章

最新文章