Zum Inhalt springen
OAuth Auth Cloudflare

Beispiele

Beispiele

Abschnitt betitelt „Beispiele“

Sammlung von Code-Beispielen und Demo-Anwendungen.

Verfügbare Demos

Abschnitt betitelt „Verfügbare Demos“

Im Repository findest du mehrere Demo-Dateien:

Ultra-Simple Demo

Abschnitt betitelt „Ultra-Simple Demo“

ultra-simple-demo.html - Minimales Beispiel mit nur 2 Zeilen Code.

Compact Demo

Abschnitt betitelt „Compact Demo“

compact-demo.html - Kompaktes Widget-Beispiel.

Abschnitt betitelt „Menu Demo“

menu-demo.html - Dropdown-Menü mit Benutzer-Profil.

Widget Demo

Abschnitt betitelt „Widget Demo“

widget-demo.html - Vollständiges Widget mit allen Features.

Add Passkey Demo

Abschnitt betitelt „Add Passkey Demo“

examples/add-passkey-demo.html - WebAuthn Passkey-Registrierung.

Simple Login Button

Abschnitt betitelt „Simple Login Button“
<!DOCTYPE html>
<html>
<head>
  <title>Simple Login Demo</title>
</head>
<body>
  <h1>OAuth Auth Demo</h1>


  <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>
</body>
</html>

React Beispiel

Abschnitt betitelt „React Beispiel“
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);


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


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

WebAuthn Beispiel

Abschnitt betitelt „WebAuthn Beispiel“
<!DOCTYPE html>
<html>
<head>
  <title>WebAuthn Demo</title>
</head>
<body>
  <h1>Passkey Demo</h1>


  <button id="add-passkey">Passkey hinzufügen</button>
  <button id="login-passkey">Mit Passkey anmelden</button>


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


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


    document.getElementById('add-passkey').onclick = async () => {
      await webauthn.addPasskey();
      alert('Passkey hinzugefügt!');
    };


    document.getElementById('login-passkey').onclick = async () => {
      const result = await webauthn.authenticate();
      alert(`Angemeldet als ${result.user.name}!`);
    };
  </script>
</body>
</html>

Repository klonen

Abschnitt betitelt „Repository klonen“
Terminal-Fenster
git clone https://github.com/felixlammers/oauth-auth-cloudflare.git
cd oauth-auth-cloudflare

Alle Demo-Dateien sind im Repository enthalten.

Nächste Schritte

Abschnitt betitelt „Nächste Schritte“