Kit de marque et d'identité
Ressources officielles pour intégrer la connexion UniAuth à votre application. Marques bouclier, boutons prêts à l'emploi, badges et widgets intégrables — le tout au même endroit.
Marque bouclier
Le bouclier UniAuth est la marque principale. Utilisez-le comme icône de référence dans les boutons de connexion, les fiches d'applications et la documentation.
<img src="https://uniauth.id/brand/oauth/mark.svg" alt="UniAuth" width="24" height="24" />Boutons de connexion
Démo interactive — choisissez le thème, la taille, la forme et le texte pour prévisualiser le bouton en direct avec de vrais états de survol. Copiez le HTML généré pour l'intégrer à votre application.
Démo en direct — survolez et cliquez
Ressources SVG
Badges de confiance
Démo interactive — choisissez le thème et la variante de texte pour prévisualiser le badge en direct avec effet de survol. Copiez le HTML pour l'intégrer à votre pied de page, barre latérale ou page de paiement.
Badges plats (pill)
Badges plats de style shields.io pour les fichiers README, la documentation et les tableaux de bord. Choisissez une variante et copiez le Markdown ou le HTML.
Sceaux de confiance
Sceaux de confiance bien visibles pour les pages de paiement, les barres latérales et les pages de sécurité. Basculez le thème et le style pour prévisualiser, puis copiez le HTML.
Badge flottant et barre de confiance
Démos en direct — activez l'affichage du badge flottant en coin d'écran ou de la barre de confiance en pied de page. Survolez le badge flottant pour voir l'effet d'élévation.
Widget — JavaScript clé en main
Le moyen le plus rapide d'ajouter la connexion UniAuth. Une seule balise script affiche un bouton à la marque et gère automatiquement tout le flux OAuth PKCE.
Mode popup (recommandé sur ordinateur)
L'utilisateur reste sur votre page. L'authentification s'effectue dans une popup. Les jetons sont transmis via le callback.
<script src="https://uniauth.id/brand/oauth/uniauth-widget.js"></script>
<div id="uniauth-signin"></div>
<script>
UniAuth.renderButton('#uniauth-signin', {
clientId: 'your-client-id',
redirectUri: 'https://yourapp.com/callback',
mode: 'popup', // opens auth in a centered popup
theme: 'dark',
onSuccess: function(result) {
console.log('Logged in!', result.accessToken);
},
onError: function(err) {
console.error('Auth failed:', err.error);
}
});
</script>Mode redirection
Navigue en pleine page vers UniAuth, puis redirige avec le code. Fonctionne partout.
<script src="https://uniauth.id/brand/oauth/uniauth-widget.js"></script>
<div id="uniauth-signin"></div>
<script>
UniAuth.renderButton('#uniauth-signin', {
clientId: 'your-client-id',
redirectUri: 'https://yourapp.com/callback',
mode: 'redirect', // full-page navigation
theme: 'dark'
});
</script>
<!-- On your /callback page: -->
<script>
UniAuth.handleCallback({
clientId: 'your-client-id',
redirectUri: 'https://yourapp.com/callback'
}).then(function(result) {
if (result.success) {
console.log('Access token:', result.accessToken);
}
});
</script>Détection automatique (par défaut)
mode omis — détection automatique : popup sur ordinateur, redirection sur mobile.
UniAuth.renderButton('#uniauth-signin', {
clientId: 'your-client-id',
redirectUri: 'https://yourapp.com/callback',
// mode omitted — auto-detects popup (desktop) or redirect (mobile)
});Toutes les options
| Option | Type | Par défaut | Description |
|---|---|---|---|
| clientId | string | — | Votre identifiant client OAuth (obligatoire) |
| redirectUri | string | origin/callback | Adresse de redirection après l'authentification |
| mode | string | auto | "popup" | "redirect" — détection automatique si omis |
| scope | string | "openid profile email" | Scopes OAuth à demander |
| theme | string | "dark" | "dark" | "light" | "outline" | "neutral" |
| size | string | "standard" | "small" | "standard" | "large" |
| text | string | "signin" | "signin" | "continue" |
| shape | string | "rectangular" | "rectangular" | "pill" |
| width | number | auto | Largeur fixe en pixels |
| locale | string | "en" | Langue du texte du bouton |
| onSuccess | function | — | Callback avec les jetons une fois l'authentification popup terminée |
| onError | function | — | Callback en cas d'erreur d'authentification ou de fermeture de la popup |
| onSignIn | function | — | Gestionnaire de clic personnalisé (ignore le flux OAuth) |
| popupWidth | number | 480 | Largeur de la fenêtre popup en pixels |
| popupHeight | number | 640 | Hauteur de la fenêtre popup en pixels |
| loginHint | string | — | Préremplit l'e-mail sur la page de connexion UniAuth |
| prompt | string | — | "login" | "consent" | "none" |
| nonce | string | — | Nonce du jeton d'ID pour la protection anti-rejeu |
Afficher un badge
<div id="uniauth-badge"></div>
<script>
UniAuth.renderBadge('#uniauth-badge', {
theme: 'light', // 'light' | 'dark'
text: 'secured' // 'powered' | 'secured' | 'identity'
});
</script>Classes CSS — Intégration HTML
Pour un contrôle total, utilisez la feuille de style autonome avec des noms de classes sémantiques. Aucun JavaScript requis — uniquement du HTML et du CSS.
Inclure la feuille de style
<link rel="stylesheet"
href="https://uniauth.id/brand/oauth/uniauth-buttons.css" />Bouton sombre
<a href="https://uniauth.id/api/oauth/authorize?client_id=YOUR_ID&..."
class="uniauth-btn uniauth-btn-dark">
<span class="uniauth-btn-icon"></span>
Sign in with UniAuth
</a>Bouton clair
<a href="..." class="uniauth-btn uniauth-btn-light">
<span class="uniauth-btn-icon"></span>
Sign in with UniAuth
</a>Bouton contour
<a href="..." class="uniauth-btn uniauth-btn-outline">
<span class="uniauth-btn-icon"></span>
Continue with UniAuth
</a>Modificateurs
<!-- Small -->
<a class="uniauth-btn uniauth-btn-dark uniauth-btn-sm">...</a>
<!-- Large -->
<a class="uniauth-btn uniauth-btn-light uniauth-btn-lg">...</a>
<!-- Pill shape -->
<a class="uniauth-btn uniauth-btn-dark uniauth-btn-pill">...</a>
<!-- Full width -->
<a class="uniauth-btn uniauth-btn-dark uniauth-btn-block">...</a>
<!-- Icon only -->
<a class="uniauth-btn uniauth-btn-dark uniauth-btn-icon-only">
<span class="uniauth-btn-icon"></span>
</a>
<!-- Disabled -->
<a class="uniauth-btn uniauth-btn-dark" disabled>...</a>
<!-- Loading -->
<a class="uniauth-btn uniauth-btn-dark uniauth-btn-loading">
<span class="uniauth-btn-icon"></span>
Signing in...
</a>Classes de badge
<a href="https://uniauth.id" class="uniauth-badge uniauth-badge-light">
<span class="uniauth-badge-icon"></span>
<span>Powered by <strong>UniAuth</strong></span>
</a>
<a href="https://uniauth.id" class="uniauth-badge uniauth-badge-dark">
<span class="uniauth-badge-icon"></span>
<span>Secured by <strong>UniAuth</strong></span>
</a>Composant React
Composant React prêt à l'emploi pour Next.js, Vite ou toute application React. Utilise le SDK officiel @uniauth/react ou peut s'utiliser de façon autonome.
Avec le SDK @uniauth/react
import { UniAuthProvider, LoginButton } from '@uniauth/react';
function App() {
return (
<UniAuthProvider
issuer="https://uniauth.id"
clientId="your-client-id"
redirectUri="https://yourapp.com/callback"
>
<LoginButton theme="dark" />
</UniAuthProvider>
);
}Composant autonome
interface UniAuthButtonProps {
clientId: string;
redirectUri: string;
scope?: string;
theme?: 'dark' | 'light' | 'outline' | 'neutral';
size?: 'small' | 'standard' | 'large';
text?: 'signin' | 'continue';
className?: string;
}
const SHIELD_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>`;
export function UniAuthButton({
clientId,
redirectUri,
scope = 'openid profile email',
theme = 'dark',
size = 'standard',
text = 'signin',
className = '',
}: UniAuthButtonProps) {
const label = text === 'continue'
? 'Continue with UniAuth'
: 'Sign in with UniAuth';
const heights = { small: 'h-9', standard: 'h-11', large: 'h-[52px]' };
const iconSizes = { small: 'w-[34px]', standard: 'w-[42px]', large: 'w-[50px]' };
const fonts = { small: 'text-[13px]', standard: 'text-sm', large: 'text-base' };
const themes = {
dark: 'bg-[#0a0a0a] border-[#0a0a0a] text-[#fafafa] hover:bg-[#262626]',
light: 'bg-white border-[#d4d4d4] text-[#0a0a0a] hover:bg-[#f5f5f5]',
outline: 'bg-transparent border-[#a3a3a3] text-[#262626] hover:bg-black/[0.04]',
neutral: 'bg-[#f5f5f5] border-[#e5e5e5] text-[#171717] hover:bg-[#e5e5e5]',
};
async function handleClick() {
const array = new Uint8Array(32);
crypto.getRandomValues(array);
const verifier = btoa(String.fromCharCode(...array))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
const digest = await crypto.subtle.digest(
'SHA-256', new TextEncoder().encode(verifier)
);
const challenge = btoa(String.fromCharCode(...new Uint8Array(digest)))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
const stateArr = new Uint8Array(16);
crypto.getRandomValues(stateArr);
const state = btoa(String.fromCharCode(...stateArr))
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
sessionStorage.setItem('uniauth_code_verifier', verifier);
sessionStorage.setItem('uniauth_state', state);
const params = new URLSearchParams({
response_type: 'code',
client_id: clientId,
redirect_uri: redirectUri,
scope,
state,
code_challenge: challenge,
code_challenge_method: 'S256',
});
window.location.href =
`https://uniauth.id/api/oauth/authorize?${params}`;
}
return (
<button
type="button"
onClick={handleClick}
aria-label={label}
className={`inline-flex items-center gap-0 border rounded-md
font-medium transition-colors cursor-pointer select-none
${heights[size]} ${fonts[size]} ${themes[theme]} ${className}`}
style={{ paddingRight: size === 'large' ? 20 : 16 }}
>
<span
className={`flex items-center justify-center
${iconSizes[size]} ${heights[size]}
border-r border-current/15`}
dangerouslySetInnerHTML={{ __html: SHIELD_SVG }}
/>
<span className="flex-1 text-center">{label}</span>
</button>
);
}Boutons SVG à intégrer
SVG de boutons pré-rendus — l'intégration la plus simple. Intégrez-les simplement via une balise <img> ou <object>. Aucun CSS ni JS nécessaire.
<!-- Dark "Sign in" button -->
<a href="https://uniauth.id/api/oauth/authorize?client_id=YOUR_ID&...">
<img src="https://uniauth.id/brand/oauth/btn-signin-dark.svg"
alt="Sign in with UniAuth" height="44" />
</a>
<!-- Light "Sign in" button -->
<img src="https://uniauth.id/brand/oauth/btn-signin-light.svg"
alt="Sign in with UniAuth" height="44" />
<!-- Outline "Sign in" button -->
<img src="https://uniauth.id/brand/oauth/btn-signin-outline.svg"
alt="Sign in with UniAuth" height="44" />
<!-- Dark "Continue with" button -->
<img src="https://uniauth.id/brand/oauth/btn-continue-dark.svg"
alt="Continue with UniAuth" height="44" />
<!-- Icon-only buttons -->
<img src="https://uniauth.id/brand/oauth/btn-icon-dark.svg"
alt="UniAuth" width="44" height="44" />
<img src="https://uniauth.id/brand/oauth/btn-icon-light.svg"
alt="UniAuth" width="44" height="44" />Fichiers SVG disponibles
| Fichier | Taille | Description |
|---|---|---|
| btn-signin-dark.svg | 240 x 44 | « Sign in with UniAuth » sombre |
| btn-signin-light.svg | 240 x 44 | « Sign in with UniAuth » clair |
| btn-signin-outline.svg | 240 x 44 | « Sign in with UniAuth » contour |
| btn-continue-dark.svg | 260 x 44 | « Continue with UniAuth » sombre |
| btn-continue-light.svg | 260 x 44 | « Continue with UniAuth » clair |
| btn-icon-dark.svg | 44 x 44 | Bouton icône seule sombre |
| btn-icon-light.svg | 44 x 44 | Bouton icône seule clair |
| btn-icon-outline.svg | 44 x 44 | Bouton icône seule contour |
Directives de marque
Suivez ces directives pour garantir une représentation cohérente de la marque UniAuth dans votre application.
À faire
- Utiliser les SVG de boutons officiels ou les classes CSS tels que fournis
- Conserver une zone de protection d'au moins 8 px autour du bouton
- Utiliser la variante sombre sur fond clair et la variante claire sur fond sombre
- Dimensionner le bouton comme les autres boutons de connexion sociale de votre interface
- Utiliser « Sign in with UniAuth » ou « Continue with UniAuth » comme texte du bouton
- Inclure l'icône bouclier — c'est la marque de reconnaissance principale
À éviter
- Modifier la forme, les proportions ou l'épaisseur du trait de l'icône bouclier
- Ajouter des aplats de couleur au bouclier — c'est toujours une marque en trait seul
- Utiliser le logo UniAuth pour suggérer une approbation sans partenariat
- Afficher le bouton à moins de 36 px de haut ou en modifier le texte
- Placer le bouton sur des fonds chargés qui réduisent le contraste
- Pivoter, déformer ou appliquer des effets (ombre portée, halo) à la marque
Palette de couleurs
UniAuth utilise une palette monochrome. Tous les éléments de marque emploient des gris neutres — aucune couleur d'accent.
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif. Graisse 500 (medium) pour le texte des boutons, 700 (bold) pour le logotype « UniAuth ».Tous les téléchargements
Toutes les ressources du kit d'identité, classées par type.
Marques bouclier
SVG de boutons
Badges de confiance
Badges plats
Sceaux de confiance
Kit logo complet
Les icônes PNG/SVG multi-tailles et les logos complets sont également disponibles dans le répertoire /brand/.
Prêt à intégrer ?
Enregistrez votre application OAuth dans la console développeur pour obtenir votre identifiant client, puis utilisez l'une des méthodes ci-dessus pour ajouter la connexion UniAuth.