React

import { VimineProvider, useVimine, SignInButton } from '@vimine/sdk/react';

一个 provider：持有一个 Vimine 客户端，在挂载时处理登录返回，并把会话提供给组件树；一个 hook；一个按钮。需要 React ≥ 18（可选的 peer dependency：SDK 不会安装它）。

示例

main.jsx

import { Vimine } from '@vimine/sdk';
import { VimineProvider } from '@vimine/sdk/react';

const vimine = new Vimine({ clientId: 'vmc_…', redirectUri: `${location.origin}/vimine/callback` });

createRoot(document.getElementById('root')).render(
    <VimineProvider client={vimine} onSignedIn={({ returnTo }) => navigate(returnTo || '/')}>
        <App />
    </VimineProvider>
);

MembershipCard.jsx

import { useEffect, useState } from 'react';
import { useVimine, SignInButton } from '@vimine/sdk/react';

export function MembershipCard() {
    const { client, isSignedIn, loading, signOut } = useVimine();
    const [card, setCard] = useState(null);

    useEffect(() => {
        if (isSignedIn) client.membership.get().then(setCard);
    }, [client, isSignedIn]);

    if (loading) return <p>正在登录…</p>;
    if (!isSignedIn) return <SignInButton returnTo={location.pathname}>使用 Vimine 登录</SignInButton>;
    return (
        <>
            <p>会员卡：{card?.verdict === 'valid' ? '有效' : card?.verdict}</p>
            <button onClick={() => signOut()}>退出</button>
        </>
    );
}

provider 也必须挂载在回调页面（redirectUri）上：它正是在那里交换授权码。

<VimineProvider>

Prop
client	Vimine	实例（请在 render 之外创建）
handleRedirect	boolean，默认 true	页面加载时若带有登录参数，则交换授权码
onSignedIn	(result: RedirectResult) => void	交换之后调用：result.returnTo 即传给 signIn() 的值
onRedirectError	(error: VimineError) => void	access_denied、state_mismatch 等

useVimine()

返回：

client	该 Vimine 实例
session	当前会话或 null，每次登录、刷新和退出登录时更新
isSignedIn	!!session
loading	交换返回的授权码期间为 true
signIn(options?)	与 client.signIn 相同
signOut(options?)	与 client.signOut 相同

在 provider 之外使用时会抛出错误。

<SignInButton>

一个普通的 <button>，由点击开始登录（登录页面必须由用户操作触发）。接受 scopes、prompt、returnTo 以及任何按钮属性；loading 期间处于禁用状态。默认文字：“Accedi con Vimine”（意大利语）。