OAuth2 and Google to Protect Your Spring Security and Angular Application

Ғылым және технология

In this video I show how to configure a Spring Boot and Angular application to be protected with OAuth2 and Google. I show the Spring Security configuration to setup a resources server and a client server. I also show how to create the Google client in the GCP console.
This video belongs to a playlist where I show how to implement an Authorization Server with Spring Security: • Authorization Server
Chapters:
0:00:00 Introduction
0:02:20 Project creation
00:03:04 Spring Security
00:04:30 Thymeleaf homepage
00:07:11 OAuth2 configuration
00:07:47 Google App Creation
00:10:00 Public Pages
00:15:13 Google API
00:18:12 Custom Introspector
00:25:07 Authentication
00:32:15 Frontend Creation
00:35:19 Frontend read code
00:37:04 Frontend Components
00:41:53 Http Service
00:47:02 Demo
Repository: github.com/serlesen/fullstack...
My NEW eBook: sergiolema.dev/git-book/
Blog: bit.ly/47ornJL
LinkedIn: bit.ly/41Nn61q
Facebook: bit.ly/47rc9nh
My Desktop:
• Laptop: Macbook Pro 16' 2019
• Gaming Chair: amzn.to/47Vu6ed
• Mouse: amzn.to/3HoBwM1
• Desk: amzn.to/48Tc5Oi
• Screen: amzn.to/48VZkCL

Пікірлер: 84

  • @dxgamer5480
    @dxgamer54805 ай бұрын

    This video here saved me! I understand OAuth2 and OpenId Connect but to have it in the Spring Boot way is a lot harder to figure out. Thank you so much for ythese videos!

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    5 ай бұрын

    I'm so glad it helped you. I've also struggled a lot with this configuration 😅

  • @user-mj1yn4nd8z
    @user-mj1yn4nd8zАй бұрын

    Exactly what I was looking for! Thank you!

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    Ай бұрын

    So glad it helped you!

  • @bioniccommando2009
    @bioniccommando20094 ай бұрын

    Thankyou bro very much. I have seen many videos about oauth2. It is the best

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    4 ай бұрын

    Thank you Alisher!

  • @user-st8fj4bz9i
    @user-st8fj4bz9i5 ай бұрын

    This is a great tutorial. Thank you ✌👌

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    5 ай бұрын

    Thanks for watching Hamed!

  • @user-ki3rz3xo8h
    @user-ki3rz3xo8h6 ай бұрын

    Thanks a lot keep going

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    6 ай бұрын

    Thank you!!

  • @adrian333dev
    @adrian333dev6 ай бұрын

    Awesome Content 👍

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    6 ай бұрын

    Thank you Adrian!

  • @chawebinourelhouda807
    @chawebinourelhouda8072 күн бұрын

    great tutorial ! but what if i want to add the option : login with registered infos how i can i integrate it

  • @muadgra3545
    @muadgra35454 ай бұрын

    great content, do you have any video plans about adding a docker deployment for both the frontend and backend?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    4 ай бұрын

    I have a playlist dedicated to deploy the backend to AWS, using the artifact or a docker image. For the frontend, i deploy it directly to S3, bit.ly/402muTc

  • @yaserarshad6920
    @yaserarshad69206 ай бұрын

    Hi Sergio, This is the ONLY complete example I could find to make a standalone frontend work with spring boot security. Thanks a lot for that. One question - what would be the easiest way to disable security in the development environment so we can develop the back-end without logging in?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    6 ай бұрын

    Thank you so much! The best option is to have Maven profiles and have two Spring Security configurations that load depending on the Maven profile

  • @snakefoxxofekans
    @snakefoxxofekans11 күн бұрын

    Thanks alot !

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    11 күн бұрын

    Thanks to you for watching.

  • @anikalee3471
    @anikalee34713 ай бұрын

    hi! is the introspection-uri in your source code a placeholder? what should the actual uri be? Also, how does this integrate with the JWT tutorial that you've done separately? I'm trying to implement both in the same fullstack app but can't seem to interlink the 2! Thank you so much!!

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    2 ай бұрын

    The introspection uri is the real Google API URI, the one you must call to use the authentication requests. What do you want to integrate from the other videos? As this one is already a complete authentication system, where you don't need to handle the password.

  • @nadetdevfullstack7041
    @nadetdevfullstack70416 ай бұрын

    Excellent

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    6 ай бұрын

    Thank you!

  • @wanggewg
    @wanggewg7 күн бұрын

    Could you please make video to demo BFF pattern ( Backend for FrontEnd). BFF is thought more secure than PKCE flow. Reply

  • @MrThomas0304
    @MrThomas03043 ай бұрын

    Excellent video - thanks so much. How can I get the UserInfo to the client, e.g. if I want to display users name.

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    2 ай бұрын

    You can create a dedicated endpoint to return the user's information

  • @sadiulhakim7814
    @sadiulhakim78144 ай бұрын

    Nice Video

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    4 ай бұрын

    Thanks Sadiul!

  • @sanketkalokhe3548
    @sanketkalokhe35482 ай бұрын

    how did you learn this much brother. Can you tell me which course you referred?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    2 ай бұрын

    Practicing, practicing, practicing! There is no course better than create small projects by yourself.

  • @yaserarshad6920
    @yaserarshad69205 ай бұрын

    Hi Sergio, I am implementing your code in my application. The access token we get from google expires in 1 hour. Do you know how we can get refresh token and use it for subsequent requests? Thanks in advance

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    5 ай бұрын

    I didn't use it, but you have a Refresh Token method in the Google API, cloud.google.com/java/docs/reference/google-api-client/latest/com.google.api.client.googleapis.auth.oauth2.GoogleRefreshTokenRequest. Let me know if it works for you!

  • @yaserarshad6920

    @yaserarshad6920

    5 ай бұрын

    Thank you@@TheDevWorldbySergioLema

  • @iamdavidtega
    @iamdavidtega6 ай бұрын

    Hi sergio, can you create a tutorial on how to implement an auth filter for your application, how you validate the access token, and lastly how to combine local login and oauth login even with auth filter implementation, thanks

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    6 ай бұрын

    Wow! That's a complicated use case. Let me investigate a little bit. Maybe in several videos

  • @sanketkalokhe3548
    @sanketkalokhe35482 ай бұрын

    Can you create an in depth tutorial about oauth2 and how to customize it along with react?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    2 ай бұрын

    Something like this one: kzread.info/dash/bejne/mpqZsdOveNuuf5s.html ?

  • @davidev5238
    @davidev523814 күн бұрын

    Hi Sergio, thank you very much. I have a question please: what role does the userDto play in the autherization process since you registered no user ? In fact in my case I want to authenticate with Google my previously registered users Who have name, email, sellerType, address properties in a springboot registration standalone microservice. How can I handle this ? Thank you very much in advance.

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    10 күн бұрын

    This DTO is the user's information that come from Google. You can read some information like the name, email or phone number if the user accepts to share it.

  • @davidev5238

    @davidev5238

    8 күн бұрын

    @@TheDevWorldbySergioLema ok, so it means that the authentication process with Google has nothing to do with the way my users are registered in my backend registration service. If so, then how does Google Knows that the user with given email is authorized to access my app ?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    8 күн бұрын

    The way I show in this video, I allow all the users of the world with a Google account to log in the application. If you want to restrict the access, there are several ways: * in the Google client application, configure the emails/users which have access * in your application, have a table which lists all the users which have access to your application. Add another filter in Spring Security which checks if the user authenticated with Google is also present in your table.

  • @davidev5238

    @davidev5238

    7 күн бұрын

    Ok, il makes sens to me now. Thank you !

  • @creativegiant170
    @creativegiant1702 ай бұрын

    How would I authorize users tho? I mean how do I register (allow) some other email?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    2 ай бұрын

    With this solution, any user who has a Google account is authorized to access your application.

  • @user-zi4jy7gp4q
    @user-zi4jy7gp4q29 күн бұрын

    Does this also work when using Facebook for registration instead of Google?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    25 күн бұрын

    Yes, it's the same workflow.

  • @mdasadalihaidar1920
    @mdasadalihaidar19206 ай бұрын

    hey brother can you make a complete tutorial on spring boot microservices with security that will work with angular as frontend

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    6 ай бұрын

    I've been adding the frontend part (with Angular and React) to my old Spring Boot videos. Now it's time to move to the microservices videos 😉

  • @vladxd9587
    @vladxd95872 ай бұрын

    Hi, can u tell me how to implement logout using your method?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    2 ай бұрын

    The logout is a little bit more complicated. As it consists in a restful application, there is no way to know if the token was deleted from everywhere or not. Nevertheless, there are some options that I've described in this article: sergiolema.dev/2023/04/03/3-ways-to-invalidate-a-jwt-token-in-the-backend-side/

  • @vladxd9587

    @vladxd9587

    Ай бұрын

    @@TheDevWorldbySergioLema thanks

  • @efoamegnito3546
    @efoamegnito3546Ай бұрын

    Thanks for the video I would like to implement it in a personal project I have this error please help me NG04002: Cannot match any routes. URL Segment: '%5Bobject%20Object%5D'

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    Ай бұрын

    As described in the following question: stackoverflow.com/questions/72328214/angular-router-outlet-error-cannot-match-any-routes-url-segment it seems that you must respect the OAuth2 URL path. You can't use your custom URL segments

  • @efoamegnito3546

    @efoamegnito3546

    Ай бұрын

    the error occurs after pressing the url that I retrieved from the back-end at the frontend component chapter 40:59

  • @efoamegnito3546

    @efoamegnito3546

    Ай бұрын

    @@TheDevWorldbySergioLema the error is in the redirection to google login form

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    Ай бұрын

    Is the redirect URL configured in Google the same as the one used in your application? Do you use the standard URLs or OAuth2?

  • @efoamegnito3546

    @efoamegnito3546

    Ай бұрын

    @@TheDevWorldbySergioLema yes is Oauth2

  • @gustavosoarification
    @gustavosoarification4 ай бұрын

    How can I do this with OAuth2(Google) and JWT? (Sorry, my reply isn't showing in the comment)

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    4 ай бұрын

    You mean Google returns a JWT with some information (not just a plain token)?

  • @gustavosoarification

    @gustavosoarification

    4 ай бұрын

    @@TheDevWorldbySergioLema Yes! With some information

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    4 ай бұрын

    I don't know Gustavo. Check this OpenID workflow: developers.google.com/identity/openid-connect/openid-connect I think you can find something useful. Let me know if you figured it out.

  • @gustavosoarification

    @gustavosoarification

    4 ай бұрын

    @@TheDevWorldbySergioLema ok, thank youu

  • @pozzleng6328
    @pozzleng63284 ай бұрын

    brother how to set token expired time ?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    4 ай бұрын

    I don't think you can control the expiration time. It's managed by Google. I saw in the documentation that the default expiration time is 1 hour. If you find more information, let me know.

  • @m3hdim3hdi
    @m3hdim3hdi5 ай бұрын

    can we use this without webflux? if yes how?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    5 ай бұрын

    Yes you can use it without Webflux. But you have to use another library to request the Google API (like Retrofit or OkHttp).

  • @zenhsuld
    @zenhsuld6 ай бұрын

    Thanks a lot. facebook login?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    6 ай бұрын

    The next one 😅

  • @gustavosoarification
    @gustavosoarification4 ай бұрын

    How can I do this with JWT?

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    4 ай бұрын

    Only with a JWT? Without an OAuth2 workflow? I've made video some time ago which allows an Angular application to login into a Spring Boot backend with a JWT: kzread.info/dash/bejne/i4mly5OCmq--aKw.html

  • @gustavosoarification

    @gustavosoarification

    4 ай бұрын

    @@TheDevWorldbySergioLema noo, OAuth2 (Google) and JWT

  • @gustavosoarification

    @gustavosoarification

    4 ай бұрын

    ​@@TheDevWorldbySergioLema Noo, OAuth2 (Google) and JWT

  • @ultimatestrix4526
    @ultimatestrix452628 күн бұрын

    angular httpclientmodule deprecated 😭😭😢😢😢😢

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    25 күн бұрын

    Oh yes? Those things get deprecated very quickly

  • @MG-wx8yx
    @MG-wx8yx9 күн бұрын

    How much do you sleep per 24h? Your eyes are so white, mine are so red! Also, can you do the same tutorial but with Graphql instead of REST? Thanks for the very informative tutorial.

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    8 күн бұрын

    😅 At least 6 hours. Graphql is a topic I have in my todo list, but I never found the time to investigate it

  • @parthv6415
    @parthv6415Ай бұрын

    @TheDevWorldbySergioLema introspection-uri : what i have to add

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    Ай бұрын

    It's the Google API URL, the same I've used in the video, www.googleapis.com/

  • @parthv6415

    @parthv6415

    Ай бұрын

    ​@@TheDevWorldbySergioLema how can i make frontend with only core javascript without any framework or library that's my university's requirements ... guide me brooo

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    Ай бұрын

    I don't use any particular dependency in the frontend. I just use the Angular structure. With plain javascript, you can have a single HTML page with a piece of code in Javascript where you call the backend as I do in the video. The point will be to display different parts of the HTML page depending on the status of the connection (authenticated or not).

  • @ElnazAusArdSkelig
    @ElnazAusArdSkelig6 ай бұрын

    Thanks a lot! 🇰🇿❤‍🩹

  • @TheDevWorldbySergioLema

    @TheDevWorldbySergioLema

    6 ай бұрын

    You're welcome!

Келесі