@authup/客户端-web-kit

Vue 3 组件, 一个 Pinia会话商店, 并检查与 Authup 一起签名的应用程序的权限 .
登录表单,授权流,令牌刷新和管理员实体屏幕,每Authup客户端写一次.

安装 • 妇女 使用量 • 妇女 API 密码 • 妇女 文档

为什么?

一个在 Authup 上签名的 Vue 应用程序每次需要相同客户端的一半:一个在重新加载后幸存的会话,一个重新自我更新的会话,一个知道签名用户可能做什么的守护符,以及Authup 管理的实体的表格. Authup自己的管理员,账户和Auth控制台都是从这个软件包中构建的,你的应用程序也可以是.

安装

npm install @authup/client-web-kit

一揽子措施仅限无害环境管理,需要节点 >=26.0.0 用于构建和服务器渲染.

消费者用该应用程序安装套餐股(第二版将拆分):

npm install vue vue-router pinia ilingo @ilingo/vue @ilingo/validup-vue validup @validup/vue socket.io-client \
    @vuecs/core @vuecs/design @vuecs/button @vuecs/elements @vuecs/forms @vuecs/icon @vuecs/link \
    @vuecs/list @vuecs/overlays @vuecs/pagination @vuecs/tree

@vuecs/locale 是一个可选的对等点: 语言切换器在安装时使用它, 否则会掉回工具箱自己的地块 .

组件没有自己的CSS。 他们的风格生活在 @authup/client-web-kit-theme,而奥特普的全看 @authup/client-web-theme。用于 Nuxt, 使用 @authup/client-web-nuxt,用于安装工具箱.

使用量

安装插件

import { createPinia } from 'pinia';
import { createApp } from 'vue';
import vuecs from '@vuecs/core';
import installForms from '@vuecs/forms';
import installPagination from '@vuecs/pagination';
import clientWebKitTheme from '@authup/client-web-kit-theme';
import clientWebTheme from '@authup/client-web-theme';
import { buildVuecsInstallOptions, install } from '@authup/client-web-kit';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();
app.use(pinia);

install(app, {
    baseURL: 'https://auth.example.com',
    pinia,
});

const vuecsOptions = app.runWithContext(() => buildVuecsInstallOptions({
    themes: [clientWebKitTheme(), clientWebTheme()],
}));

app.use(vuecs, vuecsOptions);
app.use(installForms);
app.use(installPagination);

app.mount('#app');

• 在 vuecs 之前安装工具包 . install() 提供翻译 buildVuecsInstallOptions() 读来翻译提交按钮标签,所以它必须在里面运行 app.runWithContext() 在工具箱之后.
• 安装 @vuecs/forms 财务报告和审定财务报表 @vuecs/pagination 自己,过了 app.use(vuecs, ...)。 。 。 . 套件故意不安装,所以他们会取出你的主题.
• install() 提供商店、 HTTP 客户端( 带有符号续签钩)、 翻译和 @validup/vue 默认( 提交空白的可选字段为 null) (中文(简体) ). 实体组件仅在通过时在全球注册 components: true 或名单.

读取并驱动会话

import { StoreAuthStatus, injectStore } from '@authup/client-web-kit';

const store = injectStore(pinia);

await store.login({ name: 'admin', password: 'start123', realmId: 'master' });

if (store.status === StoreAuthStatus.AUTHENTICATED) {
    console.log(store.user?.name, store.realmName);
}

await store.resolve();
await store.logout();

• status 来源于商店持有的: unauthenticated (什么都没有), authenticating (飞行中的登录或代码交换), restoring (没有完整会话的文物,例如仅凭刷新标志)和 authenticated (地址、域名和用户信息).
• restoring 这不是一个旋转状态. 在某位呼叫者运行之前, 无法恢复会话 resolve(),它或者完成它(如果需要重新刷新)或者清除它。 等着 resolve() 在你的路由器警卫.
• lastAuthOrigin 表示当前会话是如何在这个应用实例中开始的: login, (中文(简体) ), exchange 或者说 restore。 。 。 .
• store.user 由符号反省并保存 id, (中文(简体) ), name, (中文(简体) ), displayName 财务报告和审定财务报表 email需要更多的时候,你自己装上完整记录.
• logout() 取消令牌配对,在cookie模式中也会结束服务器侧会话. 过 { revoke: false } 当拆解反应是失败而不是签出,所以瞬间出错不会破坏一个仍然好的会话.

在许可下打开 UI

import { PermissionName } from '@authup/core-kit';
import { usePermissionCheck } from '@authup/client-web-kit';
import { defineComponent, h } from 'vue';

export default defineComponent({
    setup() {
        const canUpdate = usePermissionCheck({ name: PermissionName.USER_UPDATE });

        return () => h('button', { disabled: !canUpdate.value }, 'Edit');
    },
});

裁判说 false 直至评估结束,并在届会或其判决发生变化时重新进行评估。 打电话一次 setup(),然后通过一个得到器而不是一个对象使上下文具有反应性. usePermissionCheckState() 添加a settled 来电者必须把"拒绝"和"尚未决定"区分开来 判决来自 POST /authorization/check; 检查是咨询, 因为服务器再次执行每个决定 .

使用授权代码流签名

import {
    buildAuthorizeURL,
    clearAuthorizationRequest,
    createPKCE,
    createState,
    injectStore,
    loadAuthorizationRequest,
    saveAuthorizationRequest,
} from '@authup/client-web-kit';

export async function startLogin() {
    const pkce = await createPKCE();
    const state = createState();
    const redirectUri = `${window.location.origin}/login/callback`;

    saveAuthorizationRequest({
        state,
        code_verifier: pkce.code_verifier,
        redirect_uri: redirectUri,
        client_id: 'my-app',
        realm_id: 'master',
    });

    window.location.href = buildAuthorizeURL({
        baseURL: 'https://auth.example.com',
        clientId: 'my-app',
        realmId: 'master',
        redirectUri,
        state,
        codeChallenge: pkce.code_challenge,
        codeChallengeMethod: pkce.code_challenge_method,
    });
}

export async function handleCallback(code: string, state: string) {
    const request = loadAuthorizationRequest();
    clearAuthorizationRequest();

    if (!request || request.state !== state) {
        throw new Error('Unexpected authorization response.');
    }

    await injectStore(pinia).exchangeAuthorizationCode(code, {
        code_verifier: request.code_verifier,
        redirect_uri: request.redirect_uri,
        client_id: request.client_id,
        realm_id: request.realm_id,
    });
}

• buildAuthorizeURL() 默认 scope 改为 global openid 财务报告和审定财务报表 prompt 改为 select_account,所以一个遗留的会话提供"继续作为/使用另一个账户". 过 prompt: '' 无.
• 也发出 ui_locales 财务报告和审定财务报表 ui_color_mode 从 vc-locale 财务报告和审定财务报表 vc-color-mode cookie,所以主机页面会以您的应用所使用的语言和颜色模式打开. 过 '' 选择退出.
• 重播 redirect_uri 从保存的请求. 符号端点比较字节的字节,到浏览器返回时 window.location 携带 code 财务报告和审定财务报表 state。在登录后返回页面时,将其输入回调器自己的查询(/login/callback?redirect=%2Fusers) (中文(简体) ).
• buildEndSessionURL() 建立RP启动的登录URL; store.idToken 这是 id_token_hint 这需要.

创建工作流程表

import { ALoginForm } from '@authup/client-web-kit';
import { defineComponent, h } from 'vue';

export default defineComponent({
    setup() {
        return () => h(ALoginForm, {
            onDone: () => { window.location.assign('/'); },
        });
    },
});

ALoginForm 使域拾取器、密码表、账户有验证器时的第二要素步骤和域的身份提供者 codeRequest它会发出 done 一旦商店举行会话 failed 错误。 其他工作流程组件是: AAuthorize, (中文(简体) ), AMfaChallengeForm, (中文(简体) ), ARegisterForm, (中文(简体) ), AActivateForm, (中文(简体) ), APasswordForgotForm, (中文(简体) ), APasswordResetForm, (中文(简体) ), ADeviceVerifyForm 财务报告和审定财务报表 AEndSessionForm。 。 。 .

同步账户的语言和颜色模式

import {
    COLOR_MODE_COOKIE,
    COLOR_MODE_UNSET,
    LOCALE_COOKIE,
    LOCALE_UNSET,
    createCookieRef,
    install,
} from '@authup/client-web-kit';

install(app, {
    baseURL: 'https://auth.example.com',
    pinia,
    preferences: {
        locale: createCookieRef(LOCALE_COOKIE, undefined, LOCALE_UNSET),
        colorMode: createCookieRef(COLOR_MODE_COOKIE, undefined, COLOR_MODE_UNSET),
    },
});

您的应用程序已经读取了它的语言和颜色模式 。 每场比赛都要让店主从帐号上播下种子 locale 财务报告和审定财务报表 color_mode 要求; 当账户中没有任何内容时, 它会写出一个明确的浏览器值一次; 在短暂的解开后, 更改为参考符会写回用户的属性 . createCookieRef() 返回每个 cookie 名称的一个 ref 值,因此每个读取同一 cookie 的组件都会看到相同的值.

将服务器上的数据交给浏览器

install(app, {
    baseURL: 'https://auth.example.com',
    pinia,
    isServer: true,
    hydrationStore: {
        get: <T>(key: string) => payload[key] as T | undefined,
        set: (key, value) => { payload[key] = value; },
        delete: (key) => { delete payload[key]; },
    },
});

payload 您的框架的每个请求水合有效载荷。 设有仓库, 收藏组件装入里面 onServerPrefetch 并记录他们的行,并记录许可判决;水利客户端采用这些判决,而不是再次取取. 没有商店,工具包就完全不执行服务器侧负载. 用每个请求的新对象返回:密钥没有带用户,所以在请求之间共享的存储将服务于一个用户行到另一个.

选项

第二项论点是: install(app, options)数字 :

API 密码

整个组成部分的参考文献是: 页:1。 。 。 .

页:1

• Cookie模式只用于API的自产地. 会话饼干是 SameSite=Strict 而服务器也要求 Sec-Fetch-Site: same-origin这样 cookieSession: true 在另一个原产地的API上, 在这个模式下,商店既不读也不写符号饼干.
• 坚固的饼干是象征 realm_management。 。 。 . 用户记录来源于每个 resolve()从来没有储存在饼干.
• 一个会话仅用于服务器报告符号 active。 。 。 . 被吊销或过期的进入令牌通过刷新,而不是作为现场会议执行.
• 主题不是可选的. 无 @authup/client-web-kit-theme组件的 CSS 生成未设置的类字符串 .

许可证

由 所制

现按 Apache 2.0 许可证。 。 。 .