Integration Issue: Angular 17 Client with Spring Boot rest APIs + CAS 5.3 Authentication

[abdessamad kech]

Hi,

I set up CAS server 5.3 and configured a Spring Boot Cas service with Spring Security to delegate authentication to CAS. It is working fine. When I try to call an API (GET, for example) from the browser, I get redirected to the CAS login page. After the authentication validation, the resource or API response is displayed in the browser as a JSON.

However, I am facing an issue when trying to call the Spring Boot CAS service APIs from my Angular client (version 17). When I make the first API call from the Angular app, I am not authenticated, so I get the CAS login page as the API response. To handle this, I redirect the user to the CAS login page from the Angular app. Another problem arises after authentication: instead of returning the API response to the Angular app and setting the necessary cookies, the API response is displayed directly in the browser.

I have been stuck on this issue for over a week and would greatly appreciate any guidance or suggestions to resolve it.
Thank you in advance for your help!

[Ray Bon]

abdessamad,

I suggest you upgrade to the latest cas version, 7.1.x

It  sounds like your Angular client needs to interact with the Spring Boot service with the proxy protocol; see protocol flow https://apereo.github.io/cas/7.1.x/protocol/CAS-Protocol.html#proxy-webflow-diagram

and config https://apereo.github.io/cas/7.1.x/authentication/Configuring-Proxy-Authentication.html

Ray

On Tue, 2025-01-21 at 17:24 -0800, abdessamad kech wrote:

You don't often get email from abdessam...@gmail.com. Learn why this is important

[abdessamad kech]

Hi Ray,

Our production environment uses Java 8, while CAS 7.1 requires Java 21. I tried using CAS 6 with Java 17, but I encountered build errors.
I think the main challenge is configuring Angular to consume CAS service APIs and manage the login page and redirection effectively. Angular does not need to interact directly with the CAS server, as Spring Security on the CAS server handles this flow.

the problem I have is when I call the spring boot app (CAS SERVICE) API from Angular  I get the CAS login page HTML as an API response instead of redirecting me to it in the browser. 

If you have any suggestions or insights on how to resolve these issues, I would greatly appreciate it!

Best regards

[Ray Bon]

abdessamad,

You could look into upgrading your production java. Security is an important part of upgrades, especially for something like cas.

Your user is accessing angular app not the spring boot app, so your user can not log in to spring boot app. If I understand correctly, you have two problems; how to log in to spring boot service and how does spring boot service know this particular user of a particular angular app is the one who authenticated.

Possibilities to get the flow working.

1. angular app becomes a cas client (search this user group for discussion on this), then it uses the proxy flow I suggested earlier

2. angular app has a login page that redirects to a login page in spring boot service, user goes through normal login flow, spring boot app redirects to angular app after successful login. You will have to create some login token in spring boot app that can be sent to the angular app and used for each api call. The token will have to be secured in some way  so a different user can not steal it.

3. access to angular app is through a protected page in spring boot service; so like option 2 but user accesses spring boot service first

The login page that the angular app received was not from the api response. Spring boot cas client blocked (secured) the api and returned the redirect to the login page. Your browser followed the redirect to cas login which was then consumed by the angular app. The angular app would have to detect this and tell the browser to redirect (again). After login, cas will redirect to the spring boot service, not the angular app. The spring boot app will then allow the API call and the response will be dumped to the browser and not your angular app. So how does the user get back to the angular app?

Think of it like this; if your back end is secure, your front end should be as well.

Ray

P.S. If the angular app needs to consume a different API, only option 1 will work.

On Thu, 2025-01-23 at 03:55 -0800, abdessamad kech wrote:

You don't often get email from abdessam...@gmail.com. Learn why this is important

Hi Ray,

Our production environment uses Java 8, while CAS 7.1 requires Java 21. I tried using CAS 6 with Java 17, but I encountered build errors.
I think the main challenge is configuring Angular to consume CAS service APIs and manage the login page and redirection effectively. Angular does not need to interact directly with the CAS server, as Spring Security on the CAS server handles this flow.

the problem I have is when I call the spring boot app (CAS SERVICE) API from Angular  I get the CAS login page HTML as an API response instead of redirecting me to it in the browser. 

If you have any suggestions or insights on how to resolve these issues, I would greatly appreciate it!

Best regards

Le mercredi 22 janvier 2025 à 19:56:02 UTC+1, Ray Bon a écrit :

abdessamad,

I suggest you upgrade to the latest cas version, 7.1.x

It  sounds like your Angular client needs to interact with the Spring Boot service with the proxy protocol; see protocol flow https://apereo.github.io/cas/7.1.x/protocol/CAS-Protocol.html#proxy-webflow-diagram

and config https://apereo.github.io/cas/7.1.x/authentication/Configuring-Proxy-Authentication.html

Ray

On Tue, 2025-01-21 at 17:24 -0800, abdessamad kech wrote:

You don't often get email from abdessam...@gmail.com.Learn why this is important

[Ray Bon]

Abdessamad,

Do you mean these dependencies?:

implementation "org.apereo.cas:cas-server-support-token-tickets"

implementation "org.apereo.cas:cas-server-support-rest-tokens"

https://apereo.github.io/cas/7.1.x/installation/Configure-ServiceTicket-JWT.html

https://apereo.github.io/cas/7.1.x/protocol/REST-Protocol-Request-ServiceTicket.html

You may need to set the size of the keys (unless those were generated by cas on startup.

Did you configure your service definition?, https://apereo.github.io/cas/7.1.x/installation/Configure-ServiceTicket-JWT.html#register-clients

You could also search for JWT on this blog https://fawnoos.com/blog/

Ray

On Mon, 2025-01-27 at 20:09 +0100, abdessamad kech wrote:

Hi,

I tried CAS 6.6 but i am getting trouble with JWT authentication. I want the jwt so I can consume the cas services. but it is not working don't know why. When I test in postman instead of getting the JWT I get the Service Tickect.

this is my cas configuration:

server.ssl.key-store=file:/etc/cas/thekeystore
server.ssl.key-store-password=changeit
server.port=8443
logging.config=file:/etc/cas/config/log4j2.xml
cas.server.name=https://localhost:8443
cas.server.prefix=${cas.server.name}/cas
cas.serviceRegistry.initFromJson=true
cas.serviceRegistry.config.location=classpath:/services
###Token/JWT Tickets ENCRIPTION
cas.authn.token.crypto.enabled=true
#
cas.authn.token.crypto.signing-enabled=true
cas.authn.token.crypto.signing.key=qX2l95jVVoZQDWLNiFnhQF43agCtdMxRnIXOO9g
#
cas.authn.token.crypto.encryption-enabled=true
cas.authn.token.crypto.encryption.key=Dkkpi7iUKqidOXXmeAbr4RyHirYmgQgqqUrIo6q_JPNks2i

this is the apis I try to get the token so I can configure the angular application to consume cas protected apis.

POST /cas/v1/tickets HTTP/1.1
Host: your-cas-server.com
Content-Type: application/x-www-form-urlencoded

username=your_username&password=your_password

POST /cas/v1/tickets/TGT-12345 HTTP/1.1
Host: your-cas-server.com
Content-Type: application/json

{
  "service": "https://your-service-url.com"
}

I add the JSON and token dependencies in the gradle. build.

Objectif:
My purpose is to configure the Angular app to consume the Cas service application and get data from the API. I tried using the service ticket, but it didn't work. I also know I am trying to use the JWT, but the problem is still the same.

Can you guide me through this? If you have time, we can schedule a point. I have been stuck in this for approximately 20 days.
 Best regards

Le lun. 27 janv. 2025 à 19:55, Ray Bon <rb...@uvic.ca> a écrit :

Abdessamad,

I do not knowwhat features were available in 5.3.

You may be able to get a list of configurable properties with (if the build uses gradle):

./gradlew exportConfigMetadata

(you can also try ./gradlew tasks)

With a 500 error, there should be log messages outlining the problem.

Ray

On Sun, 2025-01-26 at 00:24 +0100, abdessamad kech wrote:

Hi Ray,

Thank you for your time. I really appreciate it.
I followed your advice to upgrade to cas 7.1 but I got a problem after the build I cannot access to the login page. I am using jdk 21.0.2. I'll send you a screenshot of the problem so you can understand it better.

I want also to ask you if CAS 5.3 supports JWT and OAuth protocols?

best regards,

Abdessamad

[abdessamad kech]

Hi,

this is my service definition:

{

  "@class": "org.apereo.cas.services.RegexRegisteredService",

  "serviceId": "http://localhost:8900/login/cas",

  "name": "casSecuredApp",

  "id": 8900,

  "logoutType": "BACK_CHANNEL",

  "logoutUrl": "http://localhost:8900/exit/cas"

}

I have a separate app angular and spring boot. the spring boot app is protected by CAS and the JSON below is it definition. How can I call spring boot apis from the angular app.
How can I implement this with stateless authentication between angular and spring boot cas service?
what are the different ways? and how to configure it (if there is any tutorial)?
 Does the angular app need to be registered in the CAS too?
Does CAS 6.6 support these solutions or do I need to upgrade CAS?
Can you explain the flux between the apps (angular, spring boot, CAS)?

thank you

--
- Website: https://apereo.github.io/cas
- List Guidelines: https://goo.gl/1VRrw7
- Contributions: https://goo.gl/mh7qDG
---
You received this message because you are subscribed to the Google Groups "CAS Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cas-user+u...@apereo.org.
To view this discussion visit https://groups.google.com/a/apereo.org/d/msgid/cas-user/109b073f32d6cfc59e4c2e9abd573844d0484d72.camel%40uvic.ca.

[Ray Bon]

Abdessamad,

The service definition needs the following property to use JWT instead of ST, see the link about configuring service ticket jwt:

"jwtAsServiceTicket" 

Search the fawnoos blog for tutorials.

The REST protocol that you are using 'should' allow you to do what you want. https://apereo.github.io/cas/7.1.x/protocol/REST-Protocol.html

It would require the angular app  getting the user's credentials and submitting them to cas. You will have to figure out how to keep them secure.

The other approach is to have the angular app authenticate with cas and use the cas proxy protocol to access spring boot api. (see earlier links to cas docs).

Ray