5680918445
- Created OAuth credentials setup guide for Google, Microsoft, Keycloak, ORY, and ZITADEL. - Added migration for oauth_identity table to store OAuth identities linked to users. - Implemented OAuthIdentity model for managing OAuth identities in the database. - Developed oauthService to handle OAuth login, user creation, and identity linking. - Created OAuthCallbackView and OAuthUserCallbackView components for handling OAuth responses in the frontend. - Added error handling and user feedback during the OAuth process.
99 lines
2.9 KiB
Vue
99 lines
2.9 KiB
Vue
<template>
|
|
<div class="oauth-callback-view">
|
|
<div class="oauth-callback-card surface-card">
|
|
<p class="oauth-callback-kicker">{{ title }}</p>
|
|
<h1>{{ message }}</h1>
|
|
<p v-if="!hasError" class="oauth-callback-status">{{ statusText }}</p>
|
|
<p v-else class="oauth-callback-error">{{ errorMessage }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import apiClient from '@/utils/axios.js';
|
|
|
|
export default {
|
|
name: 'OAuthUserCallbackView',
|
|
data() {
|
|
return {
|
|
hasError: false,
|
|
errorMessage: '',
|
|
message: 'Authentifizierung wird verknüpft...',
|
|
title: 'Externe Authentifizierung',
|
|
statusText: 'Bitte warten...'
|
|
};
|
|
},
|
|
methods: {
|
|
async finishLinking() {
|
|
const { code, state, error, error_description: errorDescription } = this.$route.query;
|
|
|
|
if (error) {
|
|
this.hasError = true;
|
|
this.message = 'Fehler bei der Authentifizierung';
|
|
this.errorMessage = errorDescription || error;
|
|
return;
|
|
}
|
|
|
|
if (!code || !state) {
|
|
this.hasError = true;
|
|
this.message = 'Fehler';
|
|
this.errorMessage = 'Code oder State fehlen. Bitte versuche es erneut.';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
this.statusText = 'Authentifizierung wird mit deinem Konto verknüpft...';
|
|
const response = await apiClient.post('/api/auth/oauth/user/exchange', { code, state });
|
|
|
|
this.message = 'Erfolgreich verknüpft!';
|
|
this.statusText = `${response.data.identity.displayName} wurde erfolgreich hinzugefügt. Du kannst diese Seite jetzt schließen oder zur Sicherheitsseite zurückkehren.`;
|
|
|
|
setTimeout(() => {
|
|
this.$router.replace('/settings/personal');
|
|
}, 3000);
|
|
} catch (linkError) {
|
|
this.hasError = true;
|
|
this.message = 'Fehler beim Verknüpfen';
|
|
this.errorMessage = linkError?.response?.data?.error || 'Ein Fehler ist aufgetreten. Bitte versuche es später erneut.';
|
|
console.error('OAuth user linking error:', linkError);
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.finishLinking();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.oauth-callback-view {
|
|
display: grid;
|
|
place-items: center;
|
|
min-height: calc(100vh - 140px);
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.oauth-callback-card {
|
|
width: min(100%, 520px);
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.oauth-callback-kicker {
|
|
margin: 0 0 0.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.oauth-callback-status {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.oauth-callback-error {
|
|
color: #a94442;
|
|
}
|
|
</style>
|