Schnellstart

In nur 6 Minuten startklar mit Skycloak. Diese Anleitung führt Sie durch das Erstellen Ihres ersten Clusters, das Einrichten eines Realms und einer Anwendung sowie die Umsetzung der Authentifizierung.

Voraussetzungen

• Ein Skycloak-Konto (kostenlos registrieren)
• Grundkenntnisse in OAuth 2.0 und OIDC
• Ihre Anwendung, bereit zur Integration

Schritt 1: Ersten Cluster erstellen (2 Minuten)

1. Melden Sie sich an Ihrem Skycloak-Dashboard an
2. Klicken Sie auf der Seite Clusters auf „Create Cluster“ (Cluster erstellen)
3. Wählen Sie Ihre Konfiguration:
   • Name: my-first-cluster
   • Region: die Region in Ihrer Nähe
   • Size (Größe): beginnen Sie mit Small
   • Keycloak Version: die aktuelle stabile Version wird empfohlen
4. Klicken Sie auf „Create“ (erstellen). Die Bereitstellung dauert in der Regel einige Minuten

Schritt 2: Realm erstellen oder auswählen (1 Minute)

Ein neuer Cluster bringt keinen vorgefertigten Standard-Realm mit. Legen Sie einen an (oder wählen Sie einen vorhandenen), bevor Sie Ihre Anwendung einrichten.

1. Öffnen Sie Ihren Cluster und wechseln Sie auf den Reiter Realms
2. Klicken Sie auf „Create Realm“ (Realm erstellen)
3. Name: my-realm
4. Klicken Sie auf „Create“ (erstellen)

Sie haben bereits einen Realm, den Sie nutzen möchten? Wählen Sie ihn auf dem Reiter Realms aus und überspringen Sie diesen Schritt.

Schritt 3: Anwendung erstellen (1 Minute)

1. Gehen Sie in Ihrem Cluster und Realm zu Applications
2. Klicken Sie auf „Create Application“ (Anwendung erstellen)
3. Folgen Sie dem Assistenten:
   • Type (Typ): Art Ihrer Anwendung (SPA, Web-App und weitere)
   • Technology (Technologie): Ihr Framework
   • Name: my-app
   • Redirect URI (Weiterleitungs-URI): http://localhost:3000/callback
4. Klicken Sie auf „Create“ (erstellen)

Sie erhalten:

• Client ID (Client-Kennung): your-client-id
• Client Secret (Client-Geheimnis): your-client-secret (bei vertraulichen Clients)
• Issuer URL (Aussteller-URL): https://your-cluster-id.app.skycloak.io/realms/my-realm

Schritt 4: Schnelle Integration (2 Minuten)

Beispiel für 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>;
}

Beispiel für 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 hält den angemeldeten Benutzer in der Session, beide
// Middlewares müssen also vor den Routen weiter unten eingebunden werden.
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);

Wie geht es weiter?

Herzlichen Glückwunsch! Sie haben soeben:

• ✅ einen Skycloak-Cluster erstellt
• ✅ Ihre erste Anwendung konfiguriert
• ✅ die Authentifizierung umgesetzt

Nächste Schritte

Diese Seiten liegen auf Englisch vor:

1. Benutzer anlegen: Testbenutzer erstellen und Zugriffe verwalten
2. Erscheinungsbild anpassen: passend zum Stil Ihrer Anwendung
3. Integrationen entdecken: tiefer in Ihr Framework einsteigen
4. MFA konfigurieren: zusätzliche Sicherheit ergänzen

Häufige Folgeaufgaben

🎨 Anmeldeseite gestaltenIhre Marke im Anmeldeablauf zeigen

👥 Teammitglieder hinzufügenGemeinsam im Team arbeiten

📊 Nutzung beobachtenKennzahlen zur Authentifizierung verfolgen

🔐 Produktivbetrieb vorbereitenDie Bereitstellung für den Produktivbetrieb rüsten

Brauchen Sie Hilfe?

• 📚 Vollständige Dokumentation: alle Anleitungen
• 🎫 Support: unser Team hilft weiter

---

Tipp: Aktivieren Sie den Debug-Modus in Ihrer Anwendung, um ausführliche Anmeldeprotokolle in der Protokollansicht zu sehen (auf Englisch).