Knappen

embed.js renderar knappen och sköter PKCE-utmaningen. Den laddar ingenting utifrån och har inga beroenden.

<script src="https://login.aegiscentralid.se/embed.js"
        data-client-id="DITT-CLIENT-ID"
        data-redirect="https://din-sajt.se/callback"></script>

<div class="aegis-signin"></div>

Varianter

Sätt data-variant på elementet, eller på script-taggen för att ändra förvalet.

<div class="aegis-signin"></div>                          <!-- primär, 48 px -->
<div class="aegis-signin" data-variant="secondary"></div>  <!-- vit yta -->
<div class="aegis-signin" data-variant="dark"></div>       <!-- mörk bakgrund -->
<div class="aegis-signin" data-variant="compact"></div>    <!-- 36 px -->
<div class="aegis-signin" data-variant="icon"></div>       <!-- enbart skölden -->

Ikonvarianten får en läsbar etikett för skärmläsare även när texten är dold.

Inställningar

Attribut	Betydelse	Förval
`data-client-id`	Klientens id. Obligatoriskt.	—
`data-redirect`	Din callback-adress. Obligatoriskt.	—
`data-scope`	Vad du begär.	`openid profile email`
`data-variant`	Utseende.	`primary`
`data-label`	Knapptext.	`Logga in med Aegis`

Egen knapp

Vill du bygga knappen själv anropar du Aegis.login() från vilket element du vill. Skriptet sköter fortfarande PKCE och omdirigeringen.

<button onclick="Aegis.login()">Min egen knapp</button>

Om din sajt kör strikt CSP

Släpp fram login.aegiscentralid.se för både script-src och style-src:

script-src 'self' https://login.aegiscentralid.se;
style-src  'self' https://login.aegiscentralid.se;

Knappens CSS ligger i en egen fil i stället för i ett injicerat <style>-block, just för att den ska fungera under en strikt policy.