MMA Auth

Ein Login für alle deine Projekte

Ein Script-Tag, und dein Webprojekt weiss, wer davor sitzt. Passwörter, Mails und Sessions erledigt dieser Service.

Demo ausprobieren Konto erstellen 

<script
  src="https://auth.mmacodeclub.ch/sdk.js"
  data-require-login
></script>

<p>Hallo <span data-mma="name"></span></p>
<button data-mma-logout>Abmelden</button>

So baust du ihn ein

Script einbinden

Mit data-require-login ist die Seite nur für angemeldete Personen sichtbar. Alle anderen landen automatisch beim Login und danach wieder bei dir. Elemente mit data-mma füllt das Script selbst. 

<script src="https://auth.mmacodeclub.ch/sdk.js" data-require-login></script>

<p>Hallo <span data-mma="name"></span></p>
<button data-mma-logout>Abmelden</button>
data-mma="name" Zeigt Name, email, klasse oder id
data-mma-login Klick startet die Anmeldung
data-mma-logout Klick meldet ab
data-mma-show="in" Nur sichtbar, wenn angemeldet ("out": nur wenn abgemeldet)

User in JavaScript verwenden

Die id ändert sich nie. Nimm sie als Schlüssel, wenn du Daten pro Person speicherst. 

<script src="https://auth.mmacodeclub.ch/sdk.js"></script>
<script type="module">
  const user = await mmaAuth.requireLogin();

  console.log(user.id);     // "u_k3x9..." bleibt immer gleich
  console.log(user.name);   // "Lea Muster"
  console.log(user.email);  // "lea.muster@example.ch"
  console.log(user.klasse); // "MMP24"
</script>
mmaAuth.requireLogin() Gibt den User zurück oder leitet zum Login
mmaAuth.user() Gibt den User zurück oder null, ohne umzuleiten
mmaAuth.login() Startet die Anmeldung
mmaAuth.logout() Meldet ab und lädt die Seite neu
mmaAuth.fetch(url) Wie fetch, aber mit deinem Token

Backend absichern

Was im Browser versteckt ist, ist nicht geschützt. Sobald dein Projekt ein Backend hat, prüft dieses bei jeder Anfrage, wer fragt. Im Frontend rufst du deine API so auf: 

// Schickt dein Token automatisch als "Authorization: Bearer ..." mit
const res = await mmaAuth.fetch('/api/notizen');
const notizen = await res.json();

Im Backend lädst du eine Hilfsdatei in dein Projekt und benutzt sie: mma-auth.js für Node und Express, mma-auth.php für PHP. 

import express from 'express';
import { requireUser } from './mma-auth.js';

const app = express();
app.use(express.static('public'));

app.get('/api/notizen', requireUser(), (req, res) => {
  // req.user = { id, name, email, klasse }
  res.json(notizenVon(req.user.id));
});
<?php
require 'mma-auth.php';

$user = mma_require_user();   // beendet mit 401, wenn niemand angemeldet ist

header('Content-Type: application/json');
echo json_encode(notizen_von($user['id']));

Wo dein Projekt laufen darf

Der Login funktioniert nur von freigeschalteten Adressen aus. Diese gelten für alle:

Läuft dein Projekt auf einer eigenen Domain? Trag sie unter Mein Konto ein, dann ist sie sofort freigeschaltet.

Öffne dein Projekt lokal über einen Server, zum Beispiel mit der Erweiterung «Live Server» in VS Code. Eine per Doppelklick geöffnete Datei (file://) kann sich nicht anmelden.