Add OAuth integration for multiple providers and implement user linking

- 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.
2026-05-15 13:59:40 +02:00
parent 81c726c24b
commit 5680918445
16 changed files with 7620 additions and 949 deletions
--- a/frontend/src/views/auth/OAuthCallbackView.vue
+++ b/frontend/src/views/auth/OAuthCallbackView.vue
@@ -0,0 +1,83 @@
+<template>
+    <div class="oauth-callback-view">
+        <div class="oauth-callback-card surface-card">
+            <p class="oauth-callback-kicker">{{ $t('home.nologin.oauth.callbackKicker') }}</p>
+            <h1>{{ $t('home.nologin.oauth.callbackTitle') }}</h1>
+            <p v-if="!hasError">{{ $t('home.nologin.oauth.callbackText') }}</p>
+            <p v-else class="oauth-callback-error">{{ errorMessage }}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import apiClient from '@/utils/axios.js';
+
+export default {
+    name: 'OAuthCallbackView',
+    data() {
+        return {
+            hasError: false,
+            errorMessage: ''
+        };
+    },
+    methods: {
+        ...mapActions(['login']),
+        async finishLogin() {
+            const { code, state, error, error_description: errorDescription } = this.$route.query;
+
+            if (error) {
+                this.hasError = true;
+                this.errorMessage = errorDescription || error;
+                return;
+            }
+
+            if (!code || !state) {
+                this.hasError = true;
+                this.errorMessage = this.$t('home.nologin.oauth.callbackMissing');
+                return;
+            }
+
+            try {
+                const response = await apiClient.post('/api/auth/oauth/exchange', { code, state });
+                await this.login({ user: response.data, rememberMe: true });
+                await this.$router.replace('/settings/personal');
+            } catch (loginError) {
+                this.hasError = true;
+                this.errorMessage = loginError?.response?.data?.error || this.$t('home.nologin.oauth.callbackFailure');
+            }
+        }
+    },
+    mounted() {
+        this.finishLogin();
+    }
+};
+</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-error {
+    color: #a94442;
+}
+</style>
--- a/frontend/src/views/auth/OAuthUserCallbackView.vue
+++ b/frontend/src/views/auth/OAuthUserCallbackView.vue
@@ -0,0 +1,98 @@
+<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>