Guide de démarrage rapide

Démarrez avec Skycloak en seulement 6 minutes. Ce guide vous accompagne dans la création de votre premier cluster, la mise en place d’un realm et d’une application, puis l’intégration de l’authentification.

Prérequis

• Un compte Skycloak (inscription gratuite)
• Des notions d’OAuth 2.0 et d’OIDC
• Votre application prête à être intégrée

Étape 1 : créer votre premier cluster (2 minutes)

1. Connectez-vous à votre tableau de bord Skycloak
2. Cliquez sur « Create Cluster » (créer un cluster) sur la page Clusters
3. Choisissez votre configuration :
   • Name (nom) : my-first-cluster
   • Region (région) : la plus proche de vous
   • Size (taille) : commencez par Small
   • Keycloak Version (version de Keycloak) : la dernière version stable est recommandée
4. Cliquez sur « Create » (créer). Le provisionnement prend généralement quelques minutes

Étape 2 : créer ou sélectionner un realm (1 minute)

Un nouveau cluster n’est livré avec aucun realm « par défaut ». Créez-en un (ou choisissez-en un existant) avant de configurer votre application.

1. Ouvrez votre cluster et allez dans l’onglet Realms
2. Cliquez sur « Create Realm » (créer un realm)
3. Name (nom) : my-realm
4. Cliquez sur « Create » (créer)

Vous disposez déjà d’un realm à utiliser ? Sélectionnez-le dans l’onglet Realms et passez à la suite.

Étape 3 : créer une application (1 minute)

1. Allez dans Applications, dans votre cluster et votre realm
2. Cliquez sur « Create Application » (créer une application)
3. Suivez l’assistant :
   • Type : le type de votre application (SPA, application web, etc.)
   • Technology (technologie) : votre framework
   • Name (nom) : my-app
   • Redirect URI (URI de redirection) : http://localhost:3000/callback
4. Cliquez sur « Create » (créer)

Vous recevrez :

• Client ID (identifiant client) : your-client-id
• Client Secret (secret client) : your-client-secret (pour un client confidentiel)
• Issuer URL (URL de l’émetteur) : https://your-cluster-id.app.skycloak.io/realms/my-realm

Étape 4 : intégration rapide (2 minutes)

Exemple React

npm install react-oidc-context oidc-client-ts

// App.js
import { AuthProvider } from 'react-oidc-context';

const oidcConfig = {
  authority: 'https://your-cluster-id.app.skycloak.io/realms/my-realm',
  client_id: 'your-client-id',
  redirect_uri: 'http://localhost:3000/callback',
  scope: 'openid profile email',
};

function App() {
  return (
    <AuthProvider {...oidcConfig}>
      <YourApp />
    </AuthProvider>
  );
}

// LoginButton.js
import { useAuth } from 'react-oidc-context';

function LoginButton() {
  const auth = useAuth();

  if (auth.isAuthenticated) {
    return (
      <div>
        Welcome {auth.user?.profile.email}!
        <button onClick={() => auth.signoutRedirect()}>Logout</button>
      </div>
    );
  }

  return <button onClick={() => auth.signinRedirect()}>Login</button>;
}

Exemple Node.js

npm install express express-session passport passport-openidconnect

const express = require('express');
const session = require('express-session');
const passport = require('passport');
const { Strategy } = require('passport-openidconnect');

const app = express();

// passport-openidconnect conserve l'utilisateur authentifié en session : les
// deux middlewares doivent donc être montés avant les routes ci-dessous.
app.use(
  session({
    secret: process.env.SESSION_SECRET,
    resave: false,
    saveUninitialized: false,
  })
);
app.use(passport.initialize());
app.use(passport.session());

passport.serializeUser((user, done) => done(null, user));
passport.deserializeUser((user, done) => done(null, user));

passport.use(
  new Strategy(
    {
      issuer: 'https://your-cluster-id.app.skycloak.io/realms/my-realm',
      authorizationURL:
        'https://your-cluster-id.app.skycloak.io/realms/my-realm/protocol/openid-connect/auth',
      tokenURL:
        'https://your-cluster-id.app.skycloak.io/realms/my-realm/protocol/openid-connect/token',
      userInfoURL:
        'https://your-cluster-id.app.skycloak.io/realms/my-realm/protocol/openid-connect/userinfo',
      clientID: 'your-client-id',
      clientSecret: 'your-client-secret',
      callbackURL: 'http://localhost:3000/callback',
      scope: 'openid profile email',
    },
    (issuer, profile, done) => done(null, profile)
  )
);

app.get('/login', passport.authenticate('openidconnect'));
app.get(
  '/callback',
  passport.authenticate('openidconnect', {
    successRedirect: '/',
    failureRedirect: '/login',
  })
);

app.listen(3000);

Et ensuite ?

Félicitations ! Vous venez de :

• ✅ Créer un cluster Skycloak
• ✅ Configurer votre première application
• ✅ Mettre en place l’authentification

Étapes suivantes

Ces pages sont disponibles en anglais :

1. Ajouter des utilisateurs : créez des utilisateurs de test et gérez les accès
2. Personnaliser l’apparence : accordez le tout au style de votre application
3. Explorer les intégrations : allez plus loin avec votre framework
4. Configurer le MFA : ajoutez un facteur de sécurité supplémentaire

Tâches fréquentes

🎨 Personnaliser la page de connexionMettez votre marque en avant lors de l'authentification

👥 Ajouter des membres d'équipeTravaillez avec votre équipe

📊 Suivre l'utilisationMesurez l'activité d'authentification

🔐 Préparer la productionMettez en place un déploiement de production

Besoin d’aide ?

• 📚 Documentation complète : tous nos guides
• 🎫 Support : notre équipe vous répond

---

Astuce : activez le mode debug dans votre application pour consulter le détail des journaux d’authentification dans le visualiseur de journaux (en anglais).