edbf356158
- 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.
83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<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> |