OAuth 2.0 with Angular and Spring Boot, Google implemention.
Google’s OAuth 2.0 APIs can be used for both authentication and authorization. OAuth 2.0 implementation for authentication document describes Google’s OAuth 2.0 implementation for authentication (which conforms to the OpenID Connect specification) step by step. (ref: https://developers.google.com/identity/protocols/oauth2/openid-connect). In this tutorial, we will see the Spring Security implementation details for each step.
Most of the time I will refer to Google , Spring and The OAuth 2.0 Authorization Framework rfc6749 standard documentations.
Note 1: This implementation is not production-ready!
Note 2: Naming convention will be according to rfc6749 standard.
- Resource Owner: Google user who will provide Google username and password.
- User-Agent: Chrome (Angular Application).
- Authorization Server: Google itself.
- Client: Spring Boot application.
This implementation includes 2 parts. An Angular SPA and Spring Boot (backed by spring-cloud-starter-oauth2, spring-boot-starter-oauth2-client and spring-boot-starter-security) applications. Frontend and backend implementations can be reached on Github.
For each step in Server Flow section in the Google documentation, you will find a log section in the Spring Boot application. Log file will be generated in src\main\resources\oauth2RelatedLogs.txt location.
Let’s see the user interface and events in the backend.
1- Resource Owner is on https://localhost:4200 and not logged in.
Resource owner (Google user) has done nothing yet. Client (Spring Boot application) is in the initial state.
2- Resource owner clicked “Login via Google”
Resource owner will see the Google Login Page. Resource Owner must gives consent before starting the flow.
3- User-agent is redirected to Google Sign-in page.
Resource Owner gives consent. The authentication code flow starts. And Access Token Request are done just after a successful authentication code response. Client Secret is used in Access Token Request as a header parameter.
4- User-agent is redirected to Angular Application (https://localhost:4200/)
After successul authentication, Client has all it needs (access token) for communicating with Google APIs.
5- User clicked “Get Resource Owner Info using Authenticated User (via Spring Boot Session)” button
Access Token response from Authorization Server (Google) includes basic Resource Owner information (id-token). This call to Client will not call any Google API. The API response will be generated using Authenticated user information in related Java session (JSESSIONID is being used).
6- Resource Owner clicked “Get Resource Owner Info using Google API” button
Access Token response from Authorization Server (Google) includes access_token. This access_token is used in this API call by Client.
Here we saw all the steps which are mentioned in Google documentation.
Client Application registration in Google must be completed before running the applications.
Application.yml file in Spring Boot application must be prepared according to Client Application registration.
About Spring Boot Application. There 3 important classes. CustomAuthorizationRequestResolverBeforeRedirectingForAuthentication, CustomOAuth2AuthorizationCodeGrantRequestConverter and CustomOAuth2AccessTokenResponseConverter. If you check Spring Security implementations, you will see that these 3 classes are doing exactly the same things. I just used them to intercept the Authentication Code and Acces Token Requests (and responses).
About Angular Application. I tried to keep the Frontend as simple as possible. It has only 2 Angular components (header and home) and everything happens on https://localhost:4200.
- Run the Angular application on port 4200 using “ng server--ssl true”.
- JSESSIONID is kept as Cookie.
That’ s all. You can see all the details in oauth2RelatedLogs.txt file under resources folder.
