# WordPress plugin

> Sign in with Vimine, the member card and enrolment on the association's WordPress site — no code.

URL: https://developers.vimine.network/en/guides/wordpress/

The **Vimine** WordPress plugin brings the three basics to the association's site, server-side (no tokens in
the browser, no JavaScript dependency):

- **Sign in with Vimine** — the member signs in with their own account (OAuth 2.1 with PKCE; the plugin is a
  confidential client and exchanges the code with the secret on the server);
- **Card** — the signed-in member's card as an image with the QR (`GET /v1/me/membership/card.svg`);
- **Enrolment** — the association's enrolment form (Embed).

## Installation

1. In WordPress open *Plugins → Add New Plugin*, search for "Vimine", install it and activate it: the plugin is in
   the [WordPress.org directory](https://wordpress.org/plugins/vimine/).
2. In the developers console register a **confidential** client. As redirect URI use the one shown under
   *Settings → Vimine* on the site (normally `https://yoursite/vimine-callback/`); pick the permissions (at
   least `profile:read membership:read`).
3. Under *Settings → Vimine* enter the client ID and secret (the secret is not shown again after saving).
4. For the enrolment form: under *Association › Enrolment* add the site's address (`https://yoursite`) to *Domains
   allowed to embed (iframe)*. Vimine shows the form only on the sites listed there: anywhere else the frame stays
   empty.

:::note[Updates]
WordPress offers new versions by itself, as for any plugin in the directory, and automatic updates can be turned on
from the *Plugins* page. A site that installed the zip this page used to offer gets them the same way, without
reinstalling: the settings are kept.
:::

## Usage

| Shortcode | Block | What it does |
|---|---|---|
| `[vimine_signin label="" return_to="" scope=""]` | Vimine — Sign in | a "Sign in with Vimine" button; "Sign out" when the member is signed in (revocation + Vimine sign-out too) |
| `[vimine_card]` | Vimine — Membership card | the signed-in visitor's card; invites to sign in otherwise |
| `[vimine_enroll slug="…" height="900" lang="" scheme="" accent="" background="" font=""]` | Vimine — Enrolment form | the association's enrolment form, in the site's language (if Vimine speaks it, Italian otherwise; `lang` to choose one); someone who already has a Vimine account is offered *Continue on Vimine*, which opens the page in a new tab where they join in one step ([why a new tab](https://developers.vimine.network/en/guides/embed-and-verify/#someone-who-already-has-a-vimine-account)) |
| `[vimine_events slug="…" filter="upcoming" limit="10"]` | Vimine — Events | the association's events with the places left (the public ones for visitors, every one for a signed-in member); each event links to its page on Vimine, where the registration happens ([guide](https://developers.vimine.network/en/guides/events/)) |

The blocks live in the editor under "Widgets", with the same options.

## How the session works

Back from the hosted sign-in page the plugin exchanges the code (PKCE verifier + secret), stores the tokens in a
WordPress *transient* and gives the browser only a session id (HttpOnly cookie, SameSite=Lax). The access token
refreshes itself with the refresh token; "Sign out" revokes the refresh token and goes through Vimine's
`/oauth/logout`, so the session ends there too. A member without a membership in the association sees the
matching message; an association whose API is not enabled gets `api_disabled`.

## Customisation

The enrolment form takes the theme's colours by itself when the theme declares them (block themes do): the background, the buttons' colour, and the typeface when it is one the form serves; otherwise it is light. *Settings → Vimine* sets the colour scheme, accent colour, background and typeface for the whole site; the shortcode's `scheme`, `accent`, `background` and `font` attributes, or the block's *Appearance* panel, change them for one form, with the values of [the form's look](https://developers.vimine.network/en/guides/embed-and-verify/#the-forms-look) (and `font="vimine"` for the form's own typeface).

The stylesheet is minimal and uses the `--vimine-accent` and `--vimine-accent-contrast` variables; every element carries a
`vimine-…` class. For anything richer (member data in the theme, enrolments from a back office) use the
[API](https://developers.vimine.network/api/) or the [server SDK](https://developers.vimine.network/en/sdk/server/) directly with the plugin's credentials.