From ed1786da6515b3cf4e36748d7682bf13bd5f7ff8 Mon Sep 17 00:00:00 2001 From: Emanuele Ferrelli Date: Wed, 4 Jun 2025 13:45:02 +0200 Subject: [PATCH] Update auth and logs --- src/main.js | 4 +- src/views/pages/auth/Callback.vue | 124 +++++++----- src/views/pages/auth/Login.vue | 319 +++++++++++++++--------------- 3 files changed, 234 insertions(+), 213 deletions(-) diff --git a/src/main.js b/src/main.js index 0508832..41f8649 100644 --- a/src/main.js +++ b/src/main.js @@ -42,8 +42,8 @@ var auth = createAuth({ authRedirect: '/auth/login', loginData: {url: '/api/auth/login', method: 'POST', redirect: '/'}, logoutData: {url:'/api/auth/logout', redirect: '/auth/login'}, - fetchData: {url: '/api/auth/fetch-user', method: 'GET', enabled: true}, - refreshData: {url: '/api/auth/refresh-token', method: 'GET', enabled: true} + fetchData: {url: '/api/auth/fetch-user', method: 'GET', enabled: false}, + refreshData: {url: '/api/auth/refresh-token', method: 'GET', enabled: false} } }); diff --git a/src/views/pages/auth/Callback.vue b/src/views/pages/auth/Callback.vue index cc0d41e..7242b42 100644 --- a/src/views/pages/auth/Callback.vue +++ b/src/views/pages/auth/Callback.vue @@ -3,64 +3,92 @@ import { useAuth } from '@websanova/vue-auth/src/v3.js'; import axios from 'axios'; import { onMounted, ref } from 'vue'; import { useRouter } from 'vue-router'; -import { msalInstance } from './MsalConfig'; // wherever you created your MSAL instance +import { msalInstance } from './MsalConfig'; -const router = useRouter() +const router = useRouter(); const auth = useAuth(); -const message = ref('') +const message = ref(''); +const visible = ref(false); onMounted(async () => { - console.log("Mounted on callback") - - await msalInstance.initialize() - console.log("After initialize on callback") + console.log('[Callback] Mounted on callback'); + try { + await msalInstance.initialize(); + console.log('[Callback] After initialize on callback'); + } catch (e) { + console.error('[Callback] Errore durante initialize MSAL:', e); + message.value = "Errore durante l'inizializzazione di MSAL."; + visible.value = true; + return; + } - const response = await msalInstance.handleRedirectPromise() + let response; + try { + response = await msalInstance.handleRedirectPromise(); + console.log('[Callback] handleRedirectPromise response:', response); + } catch (e) { + console.error('[Callback] Errore in handleRedirectPromise:', e); + message.value = 'Errore durante la gestione del redirect.'; + visible.value = true; + return; + } - console.log("Response:",response) + if (response && response.accessToken) { + message.value = 'Logging in to the application...'; + console.log('[Callback] AccessToken presente:', response.accessToken); + console.log('[Callback] Account info:', response.account); + localStorage.setItem('msalUser', JSON.stringify(response.account)); - if (response) { - message.value ="Logging in to the application..." - localStorage.setItem('msalUser', JSON.stringify(response.account)) - axios.post("/msauth/exchange",{}, { - headers: { Authorization: `Bearer ${response.accessToken}` } - }).then(res=>{ - if(res.data.token){ - auth.token(null,res.data.token,false); - auth.fetch().then(response=>{ - console.log("1 user :" , response.data.data); - - if (!response.data.data.selectedProject) { - router.push({ name: 'projects-list' }); - } else { - router.push({ name: 'ks-document' }); + try { + console.log('[Callback] Chiamata a /msauth/exchange con accessToken...'); + const res = await axios.post( + '/msauth/exchange', + {}, + { + headers: { Authorization: `Bearer ${response.accessToken}` } } + ); + console.log('[Callback] Risposta da /msauth/exchange:', res); - }).catch(res=>{ - console.log("Error on token exchange:",res) - message.value = "Error authenticating on the application. Did you ask for authorization?" + if (res.data.token) { + console.log('[Callback] Token backend ricevuto:', res.data.token); + auth.token(null, res.data.token, false); + try { + console.log('[Callback] Chiamata a auth.fetch()...'); + const userResponse = await auth.fetch(); + console.log('[Callback] Risposta user fetch:', userResponse); + console.log('[Callback] userResponse.data:', userResponse.data); + console.log('[Callback] userResponse.data.data:', userResponse.data.data); + + if (!userResponse.data.data.selectedProject) { + console.log('[Callback] Nessun progetto selezionato, redirect a projects-list'); + router.push({ name: 'projects-list' }); + } else { + console.log('[Callback] Progetto selezionato, redirect a scenario-list'); + router.push({ name: 'scenario-list' }); + } + } catch (fetchErr) { + console.error('[Callback] Errore su fetch user dopo token exchange:', fetchErr); + message.value = 'User not configured for this application. Contact the administrator for details.'; + visible.value = true; + } + } else { + message.value = 'User not configured for this application. Contact the administrator for details.'; + console.error('[Callback] Nessun token ricevuto dal backend:', res.data); + } + } catch (error) { + console.error('[Callback] Error on token exchange:', error.response ? error.response.data : error); + message.value = 'An error occurred during the token exchange. Please try again.'; visible.value = true; - - }); - }else{ - message.value = "Error authenticating on the application. Did you ask for authorization?" - console.error("No token exchange with backend") - } - - - }).catch(res=>{ - console.log(res.data) - message.value = "Error authenticating on the application. Did you ask for authorization?" - }); - - - - } - - -}) + } + } else { + console.error('[Callback] Invalid response o access token mancante:', response); + message.value = 'Authentication failed. Please log in again.'; + visible.value = true; + } +}); \ No newline at end of file +
{{ message }}
+ diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue index 69c4151..608bc3b 100644 --- a/src/views/pages/auth/Login.vue +++ b/src/views/pages/auth/Login.vue @@ -3,177 +3,194 @@ import { useLayout } from '@/layout/composables/layout'; import { useAuth } from '@websanova/vue-auth/src/v3.js'; import axios from 'axios'; import Message from 'primevue/message'; -import { onMounted,computed, ref } from 'vue'; -import { msalInstance, msalrequest } from './MsalConfig'; +import { onMounted, ref } from 'vue'; import { useRouter } from 'vue-router'; -//import logo from '@/assets/Logo_Apollo_Transparent.png'; -import logo from '@/assets/apollo.jpg'; -const auth = useAuth(); +import { msalInstance, msalrequest } from './MsalConfig'; +const auth = useAuth(); const { isDarkTheme } = useLayout(); const username = ref(''); const password = ref(''); const error = ref(''); const visible = ref(false); -const logoSrc = ref(logo); const router = useRouter(); +const msaccount = ref(null); -const logoUrl = computed(() => { - return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`; +onMounted(async () => { + console.log('[onMounted] Inizializzazione MSAL...'); + try { + await msalInstance.initialize(); + const accounts = msalInstance.getAllAccounts(); + console.log('[onMounted] Accounts trovati:', accounts); + if (accounts.length > 0) { + msaccount.value = accounts[0]; + console.log('[onMounted] msaccount impostato:', msaccount.value); + } + } catch (e) { + console.error('[onMounted] Errore MSAL:', e); + } }); -const msaccount = ref(null); -onMounted(async () => { - await msalInstance.initialize() - const accounts = msalInstance.getAllAccounts() - - console.log("Accounts:",accounts) - if (accounts.length > 0) { - console.log(accounts) - msaccount.value= accounts[0] - - } -}) - const loginAD = async () => { - - var token = await msalInstance.acquireTokenSilent({ - scopes: msalrequest.scopes, - account: msaccount.value - }) - console.log("Token " ,token) - - axios.post("/msauth/exchange",{}, { - headers: { Authorization: `Bearer ${token.accessToken}` } - }).then(res=>{ - console.log("Token exhange done :",res.data.token) - if(res.data.token){ - auth.token(null, res.data.token,false) - auth.fetch().then(response=>{ - console.log("1 user :" , response.data.data); - - if (!response.data.data.selectedProject) { - router.push({ name: 'projects-list' }); - } else { - router.push({ name: 'ks-document' }); - } - console.log("response", response); - - }).catch(res=>{ - console.log("Error on token exchange:",res) - error.value = "Error authenticating on the application. Did you ask for authorization?" - visible.value = true; - + console.log('[loginAD] Avvio login AD...'); + try { + var token = await msalInstance.acquireTokenSilent({ + scopes: msalrequest.scopes, + account: msaccount.value }); - }else{ - error.value = "Error authenticating on the application. Did you ask for authorization?" + console.log('[loginAD] Token MSAL ottenuto:', token); + + axios + .post( + '/msauth/exchange', + {}, + { + headers: { Authorization: `Bearer ${token.accessToken}` } + } + ) + .then((res) => { + console.log('[loginAD] Token exchange response:', res.data); + if (res.data.token) { + auth.token(null, res.data.token, false); + auth.fetch() + .then((response) => { + console.log('[loginAD] User fetch response:', response.data.data); + if (!response.data.data.selectedProject) { + console.log('[loginAD] Nessun progetto selezionato, redirect a projects-list'); + router.push({ name: 'projects-list' }); + } else { + console.log('[loginAD] Progetto selezionato, redirect a scenario-list'); + router.push({ name: 'scenario-list' }); + } + }) + .catch((res) => { + console.error('[loginAD] Errore su fetch user dopo token exchange:', res); + error.value = 'User not configured for this application. Contact the administrator for details.'; + visible.value = true; + }); + } else { + error.value = 'User not configured for this application. Contact the administrator for details.'; + visible.value = true; + console.error('[loginAD] Nessun token ricevuto dal backend'); + } + }) + .catch((res) => { + console.error('[loginAD] Errore su token exchange:', res); + error.value = 'User not configured for this application. Contact the administrator for details.'; + visible.value = true; + }); + } catch (e) { + console.error('[loginAD] Errore generale:', e); + error.value = "Errore durante il login AD. Contattare l'amministratore."; visible.value = true; - - console.error("No token exchange with backend") - } - - - }).catch(res=>{ - console.log("Error on token exchange:",res) - error.value = "Error authenticating on the application. Did you ask for authorization?" - visible.value = true; - - }); - -} + } +}; const loginMsal = async () => { - await msalInstance.initialize() - msalInstance.loginRedirect(msalrequest) -} + console.log('[loginMsal] Avvio login MSAL redirect...'); + try { + await msalInstance.initialize(); + msalInstance.loginRedirect(msalrequest); + } catch (e) { + console.error('[loginMsal] Errore loginRedirect:', e); + error.value = 'Errore durante il login con Microsoft AD.'; + visible.value = true; + } +}; -const logoutAD = async () => { +const logoutAD = async () => { + console.log('[logoutAD] Logout AD...'); const logoutRequest = { account: msaccount.value, - mainWindowRedirectUri:window.location.href, + mainWindowRedirectUri: window.location.href }; - await msalInstance.logoutPopup(logoutRequest); -} + try { + await msalInstance.logoutPopup(logoutRequest); + console.log('[logoutAD] Logout completato.'); + } catch (e) { + console.error('[logoutAD] Errore durante il logout:', e); + error.value = 'Errore durante il logout AD.'; + visible.value = true; + } +}; const login_old = async () => { + console.log('[login_old] Login con username/password:', username.value); try { - await auth.login({ - data:{ - "username":username.value, - "password":password.value + await auth + .login({ + data: { + username: username.value, + password: password.value }, fetchUser: true - }).then((response) => { - console.log("1 user :" , response.data.data); - + }) + .then((response) => { + console.log('[login_old] Login response:', response.data.data); if (!response.data.data.selectedProject) { + console.log('[login_old] Nessun progetto selezionato, redirect a projects-list'); router.push({ name: 'projects-list' }); } else { - router.push({ name: 'ks-document' }); + console.log('[login_old] Progetto selezionato, redirect a scenario-list'); + router.push({ name: 'scenario-list' }); } - - console.log("response", response); - }).catch((err) => { - console.log("error", err); - error.value = 'Incorrect username or password. Please try again.'; + }) + .catch((err) => { + console.error('[login_old] Errore login:', err); + error.value = 'Incorrect username or password. Please try again.'; visible.value = true; - setTimeout(() => { visible.value = false; }, 3500); }); } catch (err) { - console.log('Error ' + err); + console.error('[login_old] Errore generale:', err); + error.value = 'Errore generico durante il login.'; + visible.value = true; } -} +}; - @@ -218,26 +230,7 @@ const login_old = async () => { justify-content: center; align-items: center; margin-bottom: 20px; - margin-top: -40px -} - -.error-message { - display: flex; - justify-content: center; - align-items: center; - text-align: center; - width: 100%; /* Ensure the message takes the full width of its container */ -} - -.logo-image { - border-radius: 50%; - width: 100px; - /* Adjust the size as needed */ - height: 100px; - /* Adjust the size as needed */ - object-fit: cover; - /* Ensures the logo scales nicely within the circle */ - display: block; + margin-top: -40px; } .error-message {