Introduce application tokens
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
191
js/src/views/OAuth/AuthorizeView.vue
Normal file
191
js/src/views/OAuth/AuthorizeView.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="container mx-auto w-96">
|
||||
<div v-show="authApplicationLoading && !resultCode">
|
||||
<o-skeleton active size="large" class="mt-6" />
|
||||
<o-skeleton active width="80%" />
|
||||
<div
|
||||
class="rounded-lg bg-mbz-warning shadow-xl my-6 p-4 flex items-center gap-2"
|
||||
>
|
||||
<div>
|
||||
<o-skeleton circle active width="42px" height="42px" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<o-skeleton active />
|
||||
<o-skeleton active />
|
||||
<o-skeleton active />
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-lg bg-white shadow-xl my-6">
|
||||
<div class="p-4 pb-0">
|
||||
<p class="text-3xl"><o-skeleton active size="large" /></p>
|
||||
<o-skeleton active width="40%" />
|
||||
</div>
|
||||
<div class="flex gap-3 p-4">
|
||||
<o-skeleton active />
|
||||
<o-skeleton active />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-show="!authApplicationLoading && !authApplicationError && !resultCode"
|
||||
>
|
||||
<h1 class="text-3xl">
|
||||
{{ t("Autorize this application to access your account?") }}
|
||||
</h1>
|
||||
|
||||
<div
|
||||
class="rounded-lg bg-mbz-warning shadow-xl my-6 p-4 flex items-center gap-2"
|
||||
>
|
||||
<AlertCircle :size="42" />
|
||||
<p>
|
||||
{{
|
||||
t(
|
||||
"This application will be able to access all of your informations and post content on your behalf. Make sure you only approve applications you trust."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-white shadow-xl my-6">
|
||||
<div class="p-4 pb-0">
|
||||
<p class="text-3xl font-bold">{{ authApplication?.name }}</p>
|
||||
<p>{{ authApplication?.website }}</p>
|
||||
</div>
|
||||
<div class="flex gap-3 p-4">
|
||||
<o-button @click="() => authorize()">{{ t("Authorize") }}</o-button>
|
||||
<o-button outlined tag="router-link" :to="{ name: RouteName.HOME }">{{
|
||||
t("Decline")
|
||||
}}</o-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="authApplicationError">
|
||||
<div
|
||||
class="rounded-lg bg-mbz-danger shadow-xl my-6 p-4 flex items-center gap-2"
|
||||
v-if="authApplicationGraphError?.status_code === 404"
|
||||
>
|
||||
<AlertCircle :size="42" />
|
||||
<div>
|
||||
<p class="font-bold">
|
||||
{{ t("Application not found") }}
|
||||
</p>
|
||||
<p>{{ t("The provided application was not found.") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<o-button
|
||||
variant="text"
|
||||
tag="router-link"
|
||||
:to="{ name: RouteName.HOME }"
|
||||
>{{ t("Back to homepage") }}</o-button
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
v-if="resultCode"
|
||||
class="rounded-lg bg-white shadow-xl my-6 p-4 flex items-center gap-2"
|
||||
>
|
||||
<div>
|
||||
<p class="font-bold">
|
||||
{{ t("Your application code") }}
|
||||
</p>
|
||||
<p>
|
||||
{{
|
||||
t(
|
||||
"You need to provide the following code to your application. It will only be valid for a few minutes."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<p class="text-4xl">{{ resultCode }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<o-button variant="text" tag="router-link" :to="{ name: RouteName.HOME }">{{
|
||||
t("Back to homepage")
|
||||
}}</o-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useRouteQuery } from "vue-use-route-query";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { computed, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useMutation, useQuery } from "@vue/apollo-composable";
|
||||
import { AUTH_APPLICATION, AUTORIZE_APPLICATION } from "@/graphql/application";
|
||||
import { IApplication } from "@/types/application.model";
|
||||
import AlertCircle from "vue-material-design-icons/AlertCircle.vue";
|
||||
import type { AbsintheGraphQLError } from "@/types/errors.model";
|
||||
import RouteName from "@/router/name";
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const clientId = useRouteQuery("client_id", null);
|
||||
const redirectURI = useRouteQuery("redirect_uri", null);
|
||||
const state = useRouteQuery("state", null);
|
||||
const scope = useRouteQuery("scope", null);
|
||||
|
||||
const OUT_OF_BAND_REDIRECT_URI = "urn:ietf:wg:oauth:2.0:oob";
|
||||
const resultCode = ref<string | null>(null);
|
||||
|
||||
const {
|
||||
result: authApplicationResult,
|
||||
loading: authApplicationLoading,
|
||||
error: authApplicationError,
|
||||
} = useQuery<{ authApplication: IApplication }, { clientId: string }>(
|
||||
AUTH_APPLICATION,
|
||||
() => ({
|
||||
clientId: clientId.value as string,
|
||||
}),
|
||||
() => ({
|
||||
enabled: clientId.value !== null,
|
||||
})
|
||||
);
|
||||
|
||||
const authApplication = computed(
|
||||
() => authApplicationResult.value?.authApplication
|
||||
);
|
||||
|
||||
const authApplicationGraphError = computed(
|
||||
() => authApplicationError.value?.graphQLErrors[0] as AbsintheGraphQLError
|
||||
);
|
||||
|
||||
const { mutate: authorizeMutation, onDone: onAuthorizeMutationDone } =
|
||||
useMutation<
|
||||
{ authorizeApplication: { code: string; state: string } },
|
||||
{
|
||||
applicationClientId: string;
|
||||
redirectURI: string;
|
||||
state?: string | null;
|
||||
scope?: string | null;
|
||||
}
|
||||
>(AUTORIZE_APPLICATION);
|
||||
|
||||
const authorize = () => {
|
||||
authorizeMutation({
|
||||
applicationClientId: clientId.value as string,
|
||||
redirectURI: redirectURI.value as string,
|
||||
state: state.value,
|
||||
scope: scope.value,
|
||||
});
|
||||
};
|
||||
|
||||
onAuthorizeMutationDone(({ data }) => {
|
||||
const code = data?.authorizeApplication?.code;
|
||||
const returnedState = data?.authorizeApplication?.state ?? "";
|
||||
|
||||
if (!code) return;
|
||||
|
||||
if (redirectURI.value !== OUT_OF_BAND_REDIRECT_URI) {
|
||||
const params = new URLSearchParams(
|
||||
Object.entries({ code, state: returnedState })
|
||||
);
|
||||
window.location.assign(
|
||||
new URL(`${redirectURI.value}?${params.toString()}`)
|
||||
);
|
||||
return;
|
||||
}
|
||||
resultCode.value = code;
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: computed(() => t("Authorize application")),
|
||||
});
|
||||
</script>
|
||||
138
js/src/views/Settings/AppsView.vue
Normal file
138
js/src/views/Settings/AppsView.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div v-if="loggedUser">
|
||||
<breadcrumbs-nav
|
||||
:links="[
|
||||
{
|
||||
name: RouteName.AUTHORIZED_APPS,
|
||||
text: t('Apps'),
|
||||
},
|
||||
{
|
||||
name: RouteName.ACCOUNT_SETTINGS_GENERAL,
|
||||
text: t('General'),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<section>
|
||||
<h2>{{ t("Apps") }}</h2>
|
||||
<p>
|
||||
{{
|
||||
t(
|
||||
"These apps can access your account through the API. If you see here apps that you don't recognize, that don't work as expected or that you don't use anymore, you can revoke their access."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<div
|
||||
class="flex justify-between items-center rounded-lg bg-white shadow-xl my-6"
|
||||
v-for="authAuthorizedApplication in authAuthorizedApplications"
|
||||
:key="authAuthorizedApplication.id"
|
||||
>
|
||||
<div class="p-4">
|
||||
<p class="text-3xl font-bold">
|
||||
{{ authAuthorizedApplication.application.name }}
|
||||
</p>
|
||||
<a
|
||||
v-if="authAuthorizedApplication.application.website"
|
||||
target="_blank"
|
||||
:href="authAuthorizedApplication.application.website"
|
||||
>{{
|
||||
urlToHostname(authAuthorizedApplication.application.website)
|
||||
}}</a
|
||||
>
|
||||
<p>
|
||||
<span v-if="authAuthorizedApplication.lastUsedAt">{{
|
||||
t("Last used on {last_used_date}", {
|
||||
last_used_date: formatDateString(
|
||||
authAuthorizedApplication.lastUsedAt
|
||||
),
|
||||
})
|
||||
}}</span>
|
||||
<span v-else>{{ t("Never used") }}</span> ⋅
|
||||
{{
|
||||
t("Authorized on {authorization_date}", {
|
||||
authorization_date: formatDateString(
|
||||
authAuthorizedApplication.insertedAt
|
||||
),
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<o-button
|
||||
@click="() => revoke({ appTokenId: authAuthorizedApplication.id })"
|
||||
variant="danger"
|
||||
>{{ t("Revoke") }}</o-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useLoggedUser } from "@/composition/apollo/user";
|
||||
import {
|
||||
AUTH_AUTHORIZED_APPLICATIONS,
|
||||
REVOKED_AUTHORIZED_APPLICATION,
|
||||
} from "@/graphql/application";
|
||||
import { useMutation, useQuery } from "@vue/apollo-composable";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { computed } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import RouteName from "../../router/name";
|
||||
import { IUser } from "@/types/current-user.model";
|
||||
import { formatDateString } from "@/filters/datetime";
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const { loggedUser } = useLoggedUser();
|
||||
|
||||
const { result: authAuthorizedApplicationsResult } = useQuery<{
|
||||
loggedUser: Pick<IUser, "authAuthorizedApplications">;
|
||||
}>(AUTH_AUTHORIZED_APPLICATIONS);
|
||||
|
||||
const authAuthorizedApplications = computed(
|
||||
() =>
|
||||
authAuthorizedApplicationsResult.value?.loggedUser
|
||||
?.authAuthorizedApplications
|
||||
);
|
||||
|
||||
const urlToHostname = (url: string | undefined): string | null => {
|
||||
if (!url) return null;
|
||||
try {
|
||||
return new URL(url).hostname;
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const { mutate: revoke, onDone: onRevokedApplication } = useMutation<
|
||||
{ revokeApplicationToken: { id: string } },
|
||||
{ appTokenId: string }
|
||||
>(REVOKED_AUTHORIZED_APPLICATION, {
|
||||
update: (cache, { data: returnedData }) => {
|
||||
const data = cache.readQuery<{
|
||||
loggedUser: Pick<IUser, "authAuthorizedApplications">;
|
||||
}>({ query: AUTH_AUTHORIZED_APPLICATIONS });
|
||||
if (!data) return;
|
||||
if (!returnedData) return;
|
||||
const authorizedApplications =
|
||||
data.loggedUser.authAuthorizedApplications.filter(
|
||||
(app) => app.id !== returnedData.revokeApplicationToken.id
|
||||
);
|
||||
cache.writeQuery({
|
||||
query: AUTH_AUTHORIZED_APPLICATIONS,
|
||||
data: {
|
||||
...data,
|
||||
loggedUser: {
|
||||
...data.loggedUser,
|
||||
authAuthorizedApplications: authorizedApplications,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: computed(() => t("Apps")),
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user