Schnellstart

Die schnellste Möglichkeit, OAuth Auth Cloudflare in deine Anwendung zu integrieren.

Ultra-Simple Integration (2 Zeilen Code)

Die einfachste Methode - nur 2 Zeilen Code!

<!-- Nur diese 2 Zeilen in deine HTML-Datei einfügen: -->
<script
  src="https://auth.deine-domain.de/client/simple-login-button.js"
  data-auth-url="https://auth.deine-domain.de"
></script>
<div id="auth-button"></div>

Das war’s! 🎉 Der Login-Button wird automatisch gerendert und zeigt nach erfolgreichem Login die Benutzer-Info an.

Erweiterte Konfiguration

Du kannst das Verhalten über Data-Attribute anpassen:

<script
  src="https://auth.deine-domain.de/client/simple-login-button.js"
  data-auth-url="https://auth.deine-domain.de"
  data-show-profile="true"
  data-button-text="Mit GitHub anmelden"
></script>
<div id="auth-button"></div>

Verfügbare Optionen

Attribut	Beschreibung	Standard
`data-auth-url`	URL deines Auth-Servers	Erforderlich
`data-show-profile`	Benutzer-Profil nach Login anzeigen	`true`
`data-button-text`	Text auf dem Login-Button	`"Login"`
`data-logout-text`	Text auf dem Logout-Button	`"Logout"`

Erweiterte Integration

Für mehr Kontrolle über den Authentifizierungsprozess verwende die Auth Client Library:

<!DOCTYPE html>
<html>
<head>
  <title>OAuth Auth Demo</title>
</head>
<body>
  <div id="auth-container"></div>

  <script type="module">
    import { AuthClient } from 'https://auth.deine-domain.de/client/auth-client.js';

    const auth = new AuthClient({
      authServerUrl: 'https://auth.deine-domain.de'
    });

    // Check if user is logged in
    const user = await auth.getUser();

    if (user) {
      console.log('Logged in as:', user.name);
      document.getElementById('auth-container').innerHTML = `
        <p>Welcome, ${user.name}!</p>
        <button id="logout-btn">Logout</button>
      `;

      document.getElementById('logout-btn').addEventListener('click', async () => {
        await auth.logout();
        location.reload();
      });
    } else {
      document.getElementById('auth-container').innerHTML = `
        <button id="login-btn">Login with OAuth</button>
      `;

      document.getElementById('login-btn').addEventListener('click', () => {
        auth.login();
      });
    }
  </script>
</body>
</html>

React Integration

Für React-Anwendungen:

import { useEffect, useState } from 'react';
import { AuthClient } from './auth-client';

const auth = new AuthClient({
  authServerUrl: 'https://auth.deine-domain.de'
});

function App() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    auth.getUser().then(user => {
      setUser(user);
      setLoading(false);
    });
  }, []);

  const handleLogin = () => {
    auth.login();
  };

  const handleLogout = async () => {
    await auth.logout();
    setUser(null);
  };

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {user ? (
        <>
          <p>Welcome, {user.name}!</p>
          <button onClick={handleLogout}>Logout</button>
        </>
      ) : (
        <button onClick={handleLogin}>Login</button>
      )}
    </div>
  );
}

export default App;

Vue Integration

Für Vue-Anwendungen:

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="user">
      <p>Welcome, {{ user.name }}!</p>
      <button @click="logout">Logout</button>
    </div>
    <div v-else>
      <button @click="login">Login</button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { AuthClient } from './auth-client';

export default {
  setup() {
    const user = ref(null);
    const loading = ref(true);
    const auth = new AuthClient({
      authServerUrl: 'https://auth.deine-domain.de'
    });

    onMounted(async () => {
      user.value = await auth.getUser();
      loading.value = false;
    });

    const login = () => {
      auth.login();
    };

    const logout = async () => {
      await auth.logout();
      user.value = null;
    };

    return { user, loading, login, logout };
  }
};
</script>

Token-basierte API-Aufrufe

Nach erfolgreicher Authentifizierung kannst du das JWT-Token für API-Aufrufe verwenden:

const auth = new AuthClient({
  authServerUrl: 'https://auth.deine-domain.de'
});

// Token abrufen
const token = await auth.getToken();

// API-Aufruf mit Token
const response = await fetch('https://api.deine-domain.de/user/profile', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

const data = await response.json();

Nächste Schritte

Client Library Details - Mehr über die Client-Bibliotheken
OAuth Setup - OAuth Provider konfigurieren
WebAuthn - Passkey-Authentifizierung hinzufügen
API Reference - Alle verfügbaren Endpoints