# Das SDK installieren

> Das Paket @vimine/sdk, seine drei Einstiegspunkte, die Voraussetzungen.

URL: https://developers.vimine.network/de/start/install/

Das offizielle SDK ist **`@vimine/sdk`**: TypeScript, ESM, **ohne Abhängigkeiten** (es nutzt `fetch` und
WebCrypto). Der Einstiegspunkt für den Browser wiegt komprimiert etwa 7 kB.

<Tabs syncKey="pkg">
    <TabItem label="npm">
        ```sh
        npm install @vimine/sdk
        ```
    </TabItem>
    <TabItem label="pnpm">
        ```sh
        pnpm add @vimine/sdk
        ```
    </TabItem>
    <TabItem label="yarn">
        ```sh
        yarn add @vimine/sdk
        ```
    </TabItem>
</Tabs>

## Einstiegspunkte

| Import | Was er enthält | Wo |
|---|---|---|
| `@vimine/sdk` | `Vimine` („Mit Vimine anmelden“ + Mitglieder-API), `publicApi`, `VimineError`, die Typen | Browser; auch Node, mit einem eigenen Speicher |
| `@vimine/sdk/react` | `VimineProvider`, `useVimine`, `SignInButton` | React ≥ 18 (optionale Peer-Abhängigkeit) |
| `@vimine/sdk/server` | `VimineServer` (vertrauliche Clients, `client_credentials`, Sandbox) | Node ≥ 18 — nie im Browser |

```js title="browser"
import { Vimine, publicApi, VimineError } from '@vimine/sdk';
```

```js title="server"
import { VimineServer } from '@vimine/sdk/server';
```

```jsx title="React"
import { VimineProvider, useVimine, SignInButton } from '@vimine/sdk/react';
```

## Voraussetzungen

- **Browser**: `fetch`, `crypto.subtle` (WebCrypto) und `sessionStorage`/`localStorage` — jeder moderne
  Browser. Die Seiten müssen über `https` ausgeliefert werden (oder über `http://localhost` in der Entwicklung): WebCrypto ist
  auf unsicheren Origins nicht verfügbar.
- **Node**: 18 oder neuer (natives `fetch` und `globalThis.crypto`).
- **Bundler**: beliebig (Vite, webpack, esbuild, …) oder `<script type="module">` mit einem eigenen Bundle. Das
  Paket ist reines ESM.
- **TypeScript**: Die Typen sind enthalten; kein `@types/*` nötig.

## Die erste Anmeldung

```js title="app.js"
import { Vimine } from '@vimine/sdk';

const vimine = new Vimine({
    clientId: 'vmc_…',                                          // aus der Konsole Entwickler
    redirectUri: 'https://www.example.org/vimine/callback',  // für den Client registriert
    scopes: ['profile:read', 'membership:read']
});

document.querySelector('#sign-in').addEventListener('click', () => vimine.signIn());
```

```js title="callback.js"
const result = await vimine.handleRedirect();   // tauscht den Code ein, speichert die Sitzung
if (result) {
    const me = await vimine.me.get();
    console.log(`Hallo ${me.first_name}`);
}
```

Weiter mit [Mit Vimine anmelden](https://developers.vimine.network/de/guides/sign-in/) für den ganzen Ablauf, die Sitzung und die Abmeldung.