Genka
Genka
  • 52
  • 707 771
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
Переглядів: 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
three.js - 3D Text and Fonts
Переглядів 18 тис.3 роки тому
three.js - 3D Text and Fonts
Angular Internationalization / i18n - Using ngx-translate & Phrase
Переглядів 18 тис.3 роки тому
Angular Internationalization / i18n - Using ngx-translate & Phrase
Angular - Reactive Forms Tutorial
Переглядів 4,4 тис.3 роки тому
Angular - Reactive Forms Tutorial
three.js - (Basic) Post Processors
Переглядів 3,8 тис.3 роки тому
three.js - (Basic) Post Processors
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
Heightmap with WebGPU - Tutorial
Переглядів 2,1 тис.3 роки тому
Heightmap with WebGPU - Tutorial
WebGPU Tutorial - Cube Rendering with Color, Texture and Light Shading
Переглядів 3,2 тис.3 роки тому
WebGPU Tutorial - Cube Rendering with Color, Texture and Light Shading
WebGPU Computing Example - Tutorial
Переглядів 7 тис.3 роки тому
WebGPU Computing Example - Tutorial
A Basic Scene Renderer with WebGPU - Tutorial
Переглядів 17 тис.3 роки тому
A Basic Scene Renderer with WebGPU - Tutorial

КОМЕНТАРІ

  • @adeyemiadeyanju2247
    @adeyemiadeyanju2247 12 днів тому

    Thank You

  • @abitsalihu8556
    @abitsalihu8556 24 дні тому

    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?

    • @Kou2000s
      @Kou2000s 3 дні тому

      Stencils have been turned off since R163, so you'll have to enable them manually from the render.

  • @mariadelosangelesugasnavarro42
    @mariadelosangelesugasnavarro42 25 днів тому

    Gracias por el video. Esta excelente!

  • @sandermez3856
    @sandermez3856 Місяць тому

    garbage that dont work!!

  • @ThePapanoob
    @ThePapanoob Місяць тому

    Why didnt you just use the dynamic rigidbody?

  • @SimonSt-l2f
    @SimonSt-l2f Місяць тому

    (vertices as any)[i + 2] = scale.y * randomHeight*1.1; //to bring terrain a lit closer to the feet

  • @SimonSt-l2f
    @SimonSt-l2f 2 місяці тому

    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

  • @GauravSharma-ij1ym
    @GauravSharma-ij1ym 2 місяці тому

    The controls W A S D disappear in full screen mode

  • @noushadpvlr
    @noushadpvlr 2 місяці тому

    So in that case we have to add scope for all our custom developed APIs?

  • @sidduhedaginal
    @sidduhedaginal 2 місяці тому

    Very usefull thanks

  • @Sudheerkumar-ke9tv
    @Sudheerkumar-ke9tv 2 місяці тому

    Which angular, node and msal version you are used

  • @soheiljahangirie2477
    @soheiljahangirie2477 3 місяці тому

    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.

  • @luka4695
    @luka4695 3 місяці тому

    A salad

  • @bossgd100
    @bossgd100 3 місяці тому

    cool

  • @HarshilPatel-d8n
    @HarshilPatel-d8n 3 місяці тому

    Is it possible to use Angular library in plain HTML file?

  • @RonaldRaymundo-g5q
    @RonaldRaymundo-g5q 3 місяці тому

    Can you help me with this error? R3InjectorError(Standalone[_AppComponent])[MsalService -> MsalService -> MsalService]: NullInjectorError: No provider for MsalService!

  • @Alex-q1m
    @Alex-q1m 3 місяці тому

    He sounds like a dorky Arnold Schwarzenegger 🤣. All aside, good content!

  • @danielmigwi1999
    @danielmigwi1999 4 місяці тому

    A short and comprehensive video , add more of webflux with microservice

  • @VictorAlmeidaDev
    @VictorAlmeidaDev 4 місяці тому

    Awesome content! Nice work 👏👏

  • @다다-k9d
    @다다-k9d 4 місяці тому

    Thanks! It helps me a lot!

  • @brunosouzamarimex
    @brunosouzamarimex 4 місяці тому

    Thank for the video.

  • @Vega1593
    @Vega1593 4 місяці тому

    thank you so much... This video is very useful to me and I go to implement that in my project.... Thank you!

  • @samiralvaradocamayo5312
    @samiralvaradocamayo5312 4 місяці тому

    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.

  • @bbi-edu
    @bbi-edu 4 місяці тому

    ua-cam.com/video/haCNfIQh9zw/v-deo.html

  • @davoodsoleimani9482
    @davoodsoleimani9482 4 місяці тому

    Thank you. That was helpful.

  • @jakeblue35
    @jakeblue35 4 місяці тому

    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 😀

  • @banana828-qf9zn
    @banana828-qf9zn 4 місяці тому

    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?

  • @MartinvandenHoorn-p9n
    @MartinvandenHoorn-p9n 4 місяці тому

    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 .

  • @siddhipatil9648
    @siddhipatil9648 5 місяців тому

    Can we add this to Aframe scene

  • @ossBruno
    @ossBruno 5 місяців тому

    Thks a lot for this video!!

  • @ossBruno
    @ossBruno 5 місяців тому

    Thks a lot!!!

  • @Sparrowhawk-z7k
    @Sparrowhawk-z7k 5 місяців тому

    Thank you very much for the content.

  • @Sam-kr5ix
    @Sam-kr5ix 5 місяців тому

    well done sir, it was clearly explained

  • @KeerthiRajan-lj2tz
    @KeerthiRajan-lj2tz 6 місяців тому

    It work for Mobile Plateform ?

  • @daviddonadze221
    @daviddonadze221 6 місяців тому

    Thanks a lot for making this Video

  • @NeilMyatt
    @NeilMyatt 6 місяців тому

    This is great and really helpful, but imho the background music has to go! 😂 thx dude

  • @ajayraho
    @ajayraho 6 місяців тому

    Pathfinding tutorial *using pathfinding library 😮‍💨

  • @dawoodabdullah8630
    @dawoodabdullah8630 6 місяців тому

    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'

  • @yubanyuban8492
    @yubanyuban8492 6 місяців тому

    thank you for your job, you are good at explanation, please keep on making more videos

  • @TechtalkinNepali
    @TechtalkinNepali 6 місяців тому

    Wonderful explanation and to the point. Great Resource. Thanks !!!

  • @irajeshtailor
    @irajeshtailor 6 місяців тому

    Will it work with the consent screen for gmail

  • @francoXHardCore
    @francoXHardCore 6 місяців тому

    gracias genio. no sabia como agregar Atributos.

  • @ChandraMohanS_CMS
    @ChandraMohanS_CMS 6 місяців тому

    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.

  • @akashchoudhary5895
    @akashchoudhary5895 7 місяців тому

    thanks

  • @breaker1454
    @breaker1454 7 місяців тому

    Does this include the PCKE Flow?

    • @heygenka
      @heygenka 6 місяців тому

      according to the doc, yes it does manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/code-flow-+-pcke.html

  • @mihaimicsa2754
    @mihaimicsa2754 7 місяців тому

    Clear and concise, thank you for this!!!

  • @SumanshVerma
    @SumanshVerma 7 місяців тому

    Hi, I am getting this error " Error: Cannot resolve type entity i2.CommonModule to symbol at reflectTypeEntityToDeclaration"

  • @mario33067
    @mario33067 7 місяців тому

    Thks a lot for this really useful video!!

  • @FOSology
    @FOSology 7 місяців тому

    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/

  • @laassiliawissal9596
    @laassiliawissal9596 7 місяців тому

    it works :) Beautiful and Clean Explanation, Thank you