Ich habe gestern eine kleine Fediverse-Übersichtsseite gebaut, auf der alle Follower, die den Blog abonniert haben aufgelistet sind. Natürlich wollte ich auch einen CTA auf die Seite packen, damit man direkt auch folgen kann, doch im dezentralen Fediverse ist das nicht so einfach.

Bei Twitter würde man ja einfach auf twitter.com/knuspermagierblog verweisen und jeder, der dort gerade eingeloggt ist, kann direkt den Button drücken. Da im Fediverse alle auf unterschiedlichen Servern unterwegs sind, klappt das nicht so einfach. Normalerweise müsste man das Handle kopieren, es im Interface des Servers, oder der App eingeben und danach suchen.

Um den Vorgang etwas zu vereinfachen habe ich auf diversen Seiten schon diesen Flow gesehen, bei dem man zunächst sein eigenes Handle, also z. B. pwa@norden.social in ein Textfeld eingibt und direkt auf eine Seite weitergeleitet wird, die zum eigenen Server gehört, auf dem man dem zu folgenden Account folgen kann. Was für ein Satz.

In meinem Beispiel käme man dann auf folgende Adresse, die auf einem OStatus-Standard basiert.

https://norden.social/authorize_interaction?uri=knuspermagier@knuspermagier.de

Remote-Follow-Flow

Jedenfalls wollte ich es auch und baute es daher kurz auf die Seite ein. Hier der Source-Code, falls ihr es für eure eigenen Fediverse-Seiten klauen wollt:

<form data-sup>
    <input type="text" name="handle" placeholder="pwa@norden.social">
    <button>Los</button>
</form>

<script>
document.querySelector('[data-sup]').addEventListener('submit', (ev) => {
    ev.preventDefault();

    const value = document.querySelector('[name="handle"]').value;
    const [_, host] = value.split('@');

    fetch(`https://${host}/.well-known/webfinger?resource=acct:${value}`)
        .then(r => r.json())
        .then(j => {
            j.links.forEach(link => {
                if (link.rel === 'http://ostatus.org/schema/1.0/subscribe') {
                    location.href = link.template.replace('{uri}', 'pwa@norden.social');
                }
            })
        })
       .catch(() => {
            alert('Account nicht gefunden!')
        })
})
</script>

Was passiert da?

Ich versuche gerade mit Überschriften zu arbeiten, um längere Posts etwas zu strukturieren, wie gefällt euch das?

Natürlich könnte ich es mir einfach machen, und direkt davon ausgehen, dass das angegebene Handle zu einer Mastodon-Instanz gehört, die diesem Remote-Follow-Flow immer gleich implementiert, dann müsste ich nur den Hostnamen heraussplitten und /authorize_interaction?uri=… dranhängen.

Der Vollständigkeit halber gehen wir hier aber auf Nummer sicher und machen es... standardkonform? Wir rufen die Webfinger-Adresse des Servers auf und fragen nach, was er denn so für Links zum angegebenen Handle im Angebot hat. Ist ein Link dabei, der dem OStatus-Subscribe-Standard entspricht, nutzen wir den und leiten den/die User:in weiter. Easy peasy.

DSGVO

Ich bin ein kleiner DSGVO-Nerd und frage mich jetzt direkt, ob diese Implementierung überhaupt legal ist. Immerhin macht das Formular einen Request zu einem Drittanbieter und man weiß ja nun nicht, ob der Mastodon-Server nun in der EU steht oder auch nicht. Eigentlich bräuchte man also bestimmt noch eine Checkbox, in der steht, dass man sich damit Einverstanden erklärt, dass man seine IP zu einem Drittanbieter, der im schlimmsten Fall in den Vereinigten Staaten liegt, schickt.

Andererseits schickt man seine IP ja in jedem Fall zu einem Server, bei dem man eh einen Account hat, der hat also eh alle Daten über einen. Ich würde das also erstmal als okay einschätzen, aber bitte macht mich nicht dafür verantwortlich, wenn ihr wegen eines Webfinger-Requests abgemahnt werdet.

(Allgemein wünschte ich mir, ich müsste mir nicht ständig, bei allem, über die DSGVO Gedanken machen, aber meine Agenturzeit während der “Unserer Webseite muss jetzt noch schnell dafür fit gemacht werden”-Welle hat mich wohl für immer gebrandmarkt)

Schamlose Eigenwerbung

Wie ihr seht, so ein kleiner Follow-Helfer ist gar nicht so schwer auf der eigenen Webseite zu integrieren! Folgt mir (oder dem Blog) doch auf Mastodon um… mehr davon zu bekommen.