- 52
- 707 771
Genka
Germany
Приєднався 31 гру 2011
random programming stuff
Fullstack OAuth2 - Angular, Spring Boot & Keycloak
In this tutorial we build a complete OAuth2 secured webplatform using angular, spring boot with spring security and keycloak as the oauth server.
Done with angular 17 and spring boot 3 / spring security 6.
Github: github.com/tamani-coding/fullstack-oauth2-angular-spring-boot-keycloak
(00:00) - Intro
(00:58) - Keycloak via Docker
(03:03) - Keycloak Realm Configuration
(05:02) - Setup Angular & OAuth2 Login
(10:09) - JSON Web Token explained
(11:22) - Logout
(12:23) - Spring Boot, Spring Security, OAuth2 Setup
(20:23) - Use Acces Token to Call API
(22:40) - Authorize API with User Roles
(26:23) - Outro
Done with angular 17 and spring boot 3 / spring security 6.
Github: github.com/tamani-coding/fullstack-oauth2-angular-spring-boot-keycloak
(00:00) - Intro
(00:58) - Keycloak via Docker
(03:03) - Keycloak Realm Configuration
(05:02) - Setup Angular & OAuth2 Login
(10:09) - JSON Web Token explained
(11:22) - Logout
(12:23) - Spring Boot, Spring Security, OAuth2 Setup
(20:23) - Use Acces Token to Call API
(22:40) - Authorize API with User Roles
(26:23) - Outro
Переглядів: 10 283
Відео
Angular & Web Components - Using Angular Elements to create Custom Elements
Переглядів 7 тис.Рік тому
Web Components is a standard to create framework agnostic HTML elements. In Angular we create an Angular Component, using Angular Elements to expose this Component as a Custom Element and use it outside of Angular. This video provides a step-by-step introduction how to create a custom component with Angular, how to use it in plain HTML and to deal with Input and Output of that custom element. G...
Spring Boot Webflux CRUD Tutorial - Using Spring Data R2DBC & PostgreSQL
Переглядів 8 тис.Рік тому
We create a fully functional spring boot webflux CRUD service. So we can create, read, update and delete entries in a postgres database. This video explains which spring dependencies are needed, how to setup postgres database, with flyway schema scripts and configuration of the spring boot service. We apply best practices like three layer architecture and use Spring Data R2DBC with reactive rep...
three.js Marching Cubes - Create Meta Balls!
Переглядів 2 тис.Рік тому
In this video we check out the marching cubes algorithm and render meta balls in three.js! Github: github.com/tamani-coding/threejs-marching-cubes-example Stackblitz: stackblitz.com/github/tamani-coding/threejs-marching-cubes-example?file=README.md (00:00) - Intro (00:27) - Marching Cubes Algorithm (03:48) - Meta Balls Function (06:19) - Code of The Algorithm (11:51) - Outro
three.js Glass Objects with Physical Material
Переглядів 3,3 тис.Рік тому
The MeshPhysicalMaterial enables us to create realistic looking glass objects. In this video we achive that step by step by setting the relevant attributes of the material. Github: github.com/tamani-coding/threejs-glassy-object-effect Stackblitz: stackblitz.com/github/tamani-coding/threejs-glassy-object-effect (00:00) - Intro (00:20) - MeshPhysicalMaterial Setup (00:54) - Transmission & Roughne...
three.js Stencil Buffer - Learn the WebGL Stencil Buffer
Переглядів 5 тис.Рік тому
Hey, this video describes the WebGL stencil buffer and how to use it. With the stencil buffer you can hide or show parts of mesh objects. We develop a magic cube, where each cube faces shows or hides certain meshes. Chech out the github repo of this example! Github: github.com/tamani-coding/threejs-stencil-buffer-example Stackblitz: stackblitz.com/github/tamani-coding/threejs-stencil-buffer-exa...
three.js Render Target Tutorial - Render a Second Scene as a Texture
Переглядів 5 тис.Рік тому
Hey, in this video we try out the render target. We will render a second scene as a texture onto a plane and create the illusion of a window into a different scene. Github: github.com/tamani-coding/threejs-render-target-example Stackblitz: stackblitz.com/github/tamani-coding/threejs-render-target-example (00:00) - Intro (01:33) - Scene Setup (02:51) - Render Target (04:22) - Render Secondary Sc...
three.js with HTML text - Use Position Projection to display a Text Box
Переглядів 7 тис.Рік тому
In this video we create a text box which is attached to the position of a 3D model. This can be used to display a health bar, a damager counter, stat screen or user interface. Learn how to transform a 3d position into browser window position via projection. Github: github.com/tamani-coding/threejs-html-text Stackblitz: stackblitz.com/github/tamani-coding/threejs-html-text?file=README.md (00:00)...
Three.js Navigation Mesh Tutorial - Pathfinding with a Navmesh
Переглядів 9 тис.Рік тому
Hey, in this video we use the three-pathfinding library to find a path for a character in a 3D level. We also build our own level and a corresponding navmesh with the Blender extension UPBGE! Check out tutorial code: github.com/tamani-coding/threejs-navmesh-example Try it out: stackblitz.com/github/tamani-coding/threejs-navmesh-example (00:00) - Intro (01:11) - Scene Setup (02:08) - Build a Lev...
Discord Chatbot Tutorial - Implement a Discord Application in Javasacript
Переглядів 3192 роки тому
Let's build our own discord chatbot! github.com/tamani-coding/discord-bot-example (00:00) - Intro (01:10) - Prerequisites (01:21) - Create your own discord channel (01:38) - Setup ngrok for a public tunnel (02:53) - Discord Developer Portal (05:14) - Setup a Javascript Nodejs webapplication (09:02) - Discord Request Verification (11:02) - Handle a Ping Request (12:07) - Configure the Interactio...
Angular & Google Login OAuth2 / OpenID Connect - Using the angular-oauth2-oidc Library
Переглядів 37 тис.2 роки тому
Google has deprecated their Google Sign-In JavaScript client library. An angular google authentication can be implemented using Googles OAuth2 / OpenID Connect System. For that we use the anuglar-oauth2-oidc library, which is compatible will any authorization provider, which supports these standard protocols. The angular example application in video has full google login and logout supports and...
three.js & rapier3D - Character Terrain Movement
Переглядів 19 тис.2 роки тому
I extend my previous basic character controller with physics. Using rapier3D we get a physical world, generate randomized terrain, make our character move on that terrain and interact with other physical bodies! See previous video: ua-cam.com/video/C3s0UHpwlf8/v-deo.html Stackblitz: stackblitz.com/github/tamani-coding/threejs-rapier3d-character-terrain-movement Github: github.com/tamani-coding/...
three.js WebGL Shaders Tutorial - For Beginners
Переглядів 4,4 тис.2 роки тому
We use the three.js shader material and make our own vertex and fragment webgl shaders to discover the possibilities! Stackblitz: stackblitz.com/github/tamani-coding/threejs-webgl-shaders-tutorial Github: github.com/tamani-coding/threejs-webgl-shaders-tutorial (00:00) - Intro (00:20) - Shaders Introduction (03:46) - Use Shader Material with own shaders and uniforms (05:17) - Advanced Fragment S...
three.js Sprite Animation - Implement a Sprite Flipbook / Sprite Mixer
Переглядів 7 тис.2 роки тому
three.js Sprite Animation - Implement a Sprite Flipbook / Sprite Mixer
three.js Particles - Using three-nebula Particle Engine
Переглядів 9 тис.2 роки тому
three.js Particles - Using three-nebula Particle Engine
Angular Unit Test Tutorial - Crash Course for Angular & Jasmine
Переглядів 19 тис.2 роки тому
Angular Unit Test Tutorial - Crash Course for Angular & Jasmine
three.js Basic Character Controls - GLTFLoader, AnimationMixer, 3rd Person Controller
Переглядів 54 тис.3 роки тому
three.js Basic Character Controls - GLTFLoader, AnimationMixer, 3rd Person Controller
three.js Buffergeometry - How to Morph 3D Objects
Переглядів 26 тис.3 роки тому
three.js Buffergeometry - How to Morph 3D Objects
Angular ngrx-store Tutorial - Action, Reducer, Selector
Переглядів 20 тис.3 роки тому
Angular ngrx-store Tutorial - Action, Reducer, Selector
Angular Internationalization / i18n - Using ngx-translate & Phrase
Переглядів 18 тис.3 роки тому
Angular Internationalization / i18n - Using ngx-translate & Phrase
three.js & tween.js - Tweening Tutorial
Переглядів 12 тис.3 роки тому
three.js & tween.js - Tweening Tutorial
three.js Raycaster - Tutorial for mouse picking / drag & drop
Переглядів 33 тис.3 роки тому
three.js Raycaster - Tutorial for mouse picking / drag & drop
Akka Http Server Scala Tutorial - Build a Webservice
Переглядів 8 тис.3 роки тому
Akka Http Server Scala Tutorial - Build a Webservice
WebGPU Tutorial - Cube Rendering with Color, Texture and Light Shading
Переглядів 3,2 тис.3 роки тому
WebGPU Tutorial - Cube Rendering with Color, Texture and Light Shading
A Basic Scene Renderer with WebGPU - Tutorial
Переглядів 17 тис.3 роки тому
A Basic Scene Renderer with WebGPU - Tutorial
Thank You
For some reason this code doesn't work for me, is it possible something has changed in the three.js framework that I can't make it work with the same code?
Stencils have been turned off since R163, so you'll have to enable them manually from the render.
Gracias por el video. Esta excelente!
garbage that dont work!!
Why didnt you just use the dynamic rigidbody?
(vertices as any)[i + 2] = scale.y * randomHeight*1.1; //to bring terrain a lit closer to the feet
Hello mister thats a great tutorial you really passionate about clean three js i have learned by watching your examples i wanted to ask you while using typescript what roll up setting are you using to build the the final result before uploading to web server and why we must use it could you show us in one of you videos how to rollup the code please brother
The controls W A S D disappear in full screen mode
So in that case we have to add scope for all our custom developed APIs?
Very usefull thanks
Which angular, node and msal version you are used
thank you for this video but unfortunately your code in github and the what you showed us is different and if someone just follow the video their code won't get build.
A salad
cool
Is it possible to use Angular library in plain HTML file?
Can you help me with this error? R3InjectorError(Standalone[_AppComponent])[MsalService -> MsalService -> MsalService]: NullInjectorError: No provider for MsalService!
He sounds like a dorky Arnold Schwarzenegger 🤣. All aside, good content!
A short and comprehensive video , add more of webflux with microservice
Awesome content! Nice work 👏👏
Thanks! It helps me a lot!
Thank for the video.
thank you so much... This video is very useful to me and I go to implement that in my project.... Thank you!
Hola, sabes por que me sale este error localhost/:1 Access to XMLHttpRequest at 'localhost:8080/realms/spring-boot-client-dev/.well-known/openid-configuration' from origin 'localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
ua-cam.com/video/haCNfIQh9zw/v-deo.html
Thank you. That was helpful.
Great tutorial, a tip I would give is change the video name or qdd a tag like "Crash course ngrx store" will get more reach 😀
Cool tutorial and it works... until I want to run it in an HTML. It doesn't generate the runtime.js and I get loads of errors when I try to run the index.html. Anyone got a solution for that?
The whole development at TGV-train speed, wonderful. I wonder if I missed one thing: to do the formal validation of the incoming access token, the Spring boot would need the public key of Keycloak's self signed certificate and use it to validate the signature of the access token .
Can we add this to Aframe scene
Thks a lot for this video!!
Thks a lot!!!
Thank you very much for the content.
well done sir, it was clearly explained
It work for Mobile Plateform ?
Thanks a lot for making this Video
This is great and really helpful, but imho the background music has to go! 😂 thx dude
Pathfinding tutorial *using pathfinding library 😮💨
can somone please help me , what should be the redirect URL? is it url where i should send user after login? or something else, i am getting error ' url has no segment code'
thank you for your job, you are good at explanation, please keep on making more videos
Wonderful explanation and to the point. Great Resource. Thanks !!!
Will it work with the consent screen for gmail
gracias genio. no sabia como agregar Atributos.
Well explained. I tried similar way but looks like some modification is needed with latest angular and msal libraries. Like getting issues like Msal instance should be initialised before make use of it. If you could do similar video with latest libraries would be helpful.
thanks
Does this include the PCKE Flow?
according to the doc, yes it does manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/code-flow-+-pcke.html
Clear and concise, thank you for this!!!
Hi, I am getting this error " Error: Cannot resolve type entity i2.CommonModule to symbol at reflectTypeEntityToDeclaration"
Thks a lot for this really useful video!!
One thing I noticed was that my app was loaded for a second before redirecting to keycloak when initializeOauth was first called. If you turn on throttling in dev tools, you can see that the app loaded if you have any visible html template on your home page. In the console, you may also see "Angular is running in development mode" but this did not consistently show. And I think at 12:16 , you can see the home page for a quick second (set playback speed to 0.25). To prevent the app from loading before redirecting to keycloak, I made the following fix: { provide: APP_INITIALIZER, multi: true, deps: [OAuthService], useFactory: (oauthService: OAuthService) => { return () => { // added return here return initializeOauth(oauthService); }; }, }, And then in the function initializeOauth: return new Promise((resolve, reject) => { oauthService.configure(authConfig); oauthService.setupAutomaticSilentRefresh(); oauthService.loadDiscoveryDocumentAndLogin() .then(() => { // new code. not sure if return type of promise is important. as long as reject is called //when no token is found if (oauthService.hasValidIdToken()) { resolve(true); } else { reject(false); } }); }); Now, when intializeOauth is first called, there won't be any valid token, and the reject() will cause the angular app to stop loading. This can be confirmed in the console. Should see "ERROR false" that comes from the catch() in main.ts on bootstrapApplication(). I got this from www.tektutorialshub.com/angular/angular-how-to-use-app-initializer/
it works :) Beautiful and Clean Explanation, Thank you