import {Controls, Canvas, Meta, Story} from '@storybook/blocks';
import * as CaptchaStories from './Captcha.stories';

<Meta of={CaptchaStories} />

<div className="header">
  <h1>Captcha</h1>
  <p>Le composant `Captcha` est utilisé pour afficher un captcha à l’utilisateur. </p>
</div>

<Canvas
  of={CaptchaStories.Default}
  	source={{
		language: 'html',
		format: 'dedent',
		code: `
		<script lang="ts" setup>
			import { captcha } from '@cnamts/synapse'
		</script>

		<template>
			<VCard class="pa-8" width="400">
        <Captcha 
          url-create="..."
          url-get-image="..."
          url-get-audio="/..."
          service="(e) => {
            // call the API to verify the captcha and return the response
          }"
          @validation:success="(e) => { ... }"
          @validation:error="(e) => { ... }"
        />
      </VCard>
		</template>
		`
	}}
/>

<Story
  of={CaptchaStories.WarningDocProps}
/>

## API

<Controls of={CaptchaStories.Default} />

## Context d'utilisation

Le composant Captcha permet d'interagir avec l'api d'OBS <a href="https://www.orange-business.com/fr/solutions/securite/live-identity-captcha" target="_blank" rel="noopener noreferrer">Live Identity Captcha</a>.

Pour implémenter le composant avec l'api OBS, se référer à <a href="http://pad-st.cnamts.fr/pad-ddst/catalogue/products.html?product=captcha&division=dait" target="_blank" rel="noopener noreferrer">la documentation DDST</a>.

### Détails d'implementation

Les api Captcha d'OBS sont exposées en https.

Pour les appels réalisés depuis un back-end, il est nécessaire d'ajouter le root CA (autorité de certifications racine) au niveau du truststore du serveur hébergeant ce back-end.
Pour la production et la pré-production, le root CA "DigiCert Global Root CA" est accessible (voir informations de sécurité) depuis le site : <a href="https://captcha.liveidentity.com/documentation" target="_blank" rel="noopener noreferrer">https://captcha.liveidentity.com/documentation</a>.

De plus, les api Captcha d'OBS sont externes / non hébergées par la CNAM.
Il est donc nécessaire :
- d'autoriser ces appels sortant dans la liste blanche du firewall Cnam pour la production et le hors prod
- de réaliser l'ouverture des flux depuis la plateforme d'hébergement (ex : csh-dijon.cnamts.fr)
Logiquement, ces deux points ont été déjà réalisés.

## Précautions d'utilisation

Pour permettre une bonne expérience utilisateur et éviter de bloquer des utilisateurs légitimes potentiellement en situation de handicap, il est recommandé de suivre les bonnes pratiques suivantes :

 - Ne pas utiliser de captcha lorsque l'utilisateur est déjà authentifié.
 - Préférer l'utilisation de captcha invisible (API scoring) lorsque c'est possible.
 - Préferer l'utilisation de captcha uniquement lorsqu'un comportement suspect est détecté (ex : trop de tentatives de connexion échouées).