🐛 Fix authorize

This commit is contained in:
2025-09-26 01:00:07 +08:00
parent f95d6778c2
commit 0c36ff1bcd

View File

@@ -7,7 +7,7 @@
<div class="pa-8">
<div class="mb-4">
<img
:src="$vuetify.theme.current.dark ? IconDark : IconLight"
:src="colorMode.value == 'dark' ? IconDark : IconLight"
alt="CloudyLamb"
height="60"
width="60"
@@ -34,32 +34,36 @@
<!-- App Info Section -->
<div v-if="clientInfo" class="mb-6">
<div class="d-flex align-center mb-4">
<v-avatar
v-if="clientInfo.picture"
:src="clientInfo.picture.url"
:alt="clientInfo.client_name"
size="large"
class="mr-3"
/>
<div class="d-flex align-center mb-4 text-left">
<div>
<h3 class="text-xl font-semibold">
{{ clientInfo.client_name || 'Unknown Application' }}
{{ clientInfo.clientName || "Unknown Application" }}
</h3>
<p class="text-base">
{{ isNewApp ? 'wants to access your Solar Network account' : 'wants to access your account' }}
{{
isNewApp
? "wants to access your Solar Network account"
: "wants to access your account"
}}
</p>
</div>
</div>
<!-- Requested Permissions -->
<v-card variant="outlined" class="pa-4 mb-4">
<v-card variant="outlined" class="pa-4 mb-4 text-left">
<h4 class="font-medium mb-2">
This will allow {{ clientInfo.client_name || 'the app' }} to:
This will allow
{{ clientInfo.clientName || "the app" }} to:
</h4>
<ul class="space-y-1">
<li v-for="scope in requestedScopes" :key="scope" class="d-flex align-start">
<v-icon class="mt-1 mr-2" color="success">mdi-check-box</v-icon>
<li
v-for="scope in requestedScopes"
:key="scope"
class="d-flex align-start"
>
<v-icon class="mt-1 mr-2" color="success" size="18"
>mdi-check</v-icon
>
<span>{{ scope }}</span>
</li>
</ul>
@@ -86,27 +90,6 @@
Deny
</v-btn>
</div>
<div class="mt-4 text-sm text-center">
By authorizing, you agree to the
<v-btn
variant="text"
size="small"
@click="openTerms"
class="px-1 text-capitalize"
>
Terms of Service
</v-btn>
and
<v-btn
variant="text"
size="small"
@click="openPrivacy"
class="px-1 text-capitalize"
>
Privacy Policy
</v-btn>
</div>
</div>
</div>
</v-col>
@@ -118,12 +101,14 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useSolarNetwork } from '~/composables/useSolarNetwork'
import { ref, computed, onMounted } from "vue"
import { useRoute } from "vue-router"
import { useSolarNetwork } from "~/composables/useSolarNetwork"
import IconLight from '~/assets/images/cloudy-lamb.png'
import IconDark from '~/assets/images/cloudy-lamb@dark.png'
import IconLight from "~/assets/images/cloudy-lamb.png"
import IconDark from "~/assets/images/cloudy-lamb@dark.png"
const colorMode = useColorMode()
const route = useRoute()
const api = useSolarNetwork()
@@ -137,11 +122,9 @@ const isLoading = ref(true)
const isAuthorizing = ref(false)
const error = ref<string | null>(null)
const clientInfo = ref<{
client_name?: string
home_uri?: string
clientName?: string
homeUri?: string
picture?: { url: string }
terms_of_service_uri?: string
privacy_policy_uri?: string
scopes?: string[]
} | null>(null)
const isNewApp = ref(false)
@@ -158,7 +141,8 @@ async function fetchClientInfo() {
clientInfo.value = await api(`/id/auth/open/authorize?${queryString}`)
checkIfNewApp()
} catch (err: any) {
error.value = err.message || 'An error occurred while loading the authorization request'
error.value =
err.message || "An error occurred while loading the authorization request"
} finally {
isLoading.value = false
}
@@ -173,19 +157,19 @@ function checkIfNewApp() {
async function handleAuthorize() {
isAuthorizing.value = true
try {
const data = await api<{ redirect_uri?: string }>('/auth/open/authorize', {
method: 'POST',
body: {
...route.query,
authorize: 'true',
},
})
const data = await api<{ redirect_uri?: string }>(
"/id/auth/open/authorize",
{
method: "POST",
query: route.query
}
)
if (data.redirect_uri) {
window.location.href = data.redirect_uri
}
} catch (err: any) {
error.value = err.message || 'An error occurred during authorization'
error.value = err.message || "An error occurred during authorization"
} finally {
isAuthorizing.value = false
}
@@ -195,29 +179,21 @@ function handleDeny() {
// Redirect back to the client with an error
// Ensure redirect_uri is always a string (not an array)
const redirectUriStr = Array.isArray(route.query.redirect_uri)
? route.query.redirect_uri[0] || clientInfo.value?.home_uri || '/'
: route.query.redirect_uri || clientInfo.value?.home_uri || '/'
? route.query.redirect_uri[0] || clientInfo.value?.homeUri || "/"
: route.query.redirect_uri || clientInfo.value?.homeUri || "/"
const redirectUri = new URL(redirectUriStr)
// Ensure state is always a string (not an array)
const state = Array.isArray(route.query.state)
? route.query.state[0] || ''
: route.query.state || ''
? route.query.state[0] || ""
: route.query.state || ""
const params = new URLSearchParams({
error: 'access_denied',
error_description: 'The user denied the authorization request',
state: state,
error: "access_denied",
error_description: "The user denied the authorization request",
state: state
})
window.open(`${redirectUri}?${params}`, "_self")
}
function openTerms() {
window.open(clientInfo.value?.terms_of_service_uri || '#', "_blank")
}
function openPrivacy() {
window.open(clientInfo.value?.privacy_policy_uri || '#', "_blank")
}
// Lifecycle
onMounted(() => {
fetchClientInfo()