DataFirefly Social Connect: volledige handleiding

Overzicht

DataFirefly Social Connect voegt aan uw WooCommerce-winkel een sociale login met één klik toe via zes providers (Google, Apple, Facebook, Microsoft, LinkedIn en X), een volledig statistiekdashboard, toewijzing van bestellingen aan de oorspronkelijke provider, een A/B-test van de knoppen, een antifraudesysteem en ingebouwde AVG-conformiteit.

De plugin gebruikt geen enkele externe CDN-bibliotheek: de grafieken van het dashboard worden gerenderd in een ingebouwd HTML5-canvas, en de OAuth 2.0- en OpenID Connect-stromen zijn rechtstreeks in de module geïmplementeerd (volledige controle van de JWKS-handtekeningen voor Google One-Tap, ES256-handtekening op het moment zelf voor Apple, verharding met appsecret_proof voor Facebook, PKCE S256 voor X).

Installatie

1. Download het ZIP-bestand van de plugin vanuit uw DataFirefly-klantomgeving.
2. Ga in WordPress naar Plugins → Nieuwe plugin → Plugin uploaden.
3. Selecteer de ZIP en klik op Nu installeren.
4. Klik op Activeren. WooCommerce moet op dat moment actief zijn, anders weigert de plugin te installeren.
5. Er verschijnt een nieuw menu Social Connect in de beheerzijbalk, met twee subpagina’s: Statistieken en Instellingen.

Bij activering worden twee SQL-tabellen aangemaakt: wp_dfsc_connections (gekoppelde accounts) en wp_dfsc_events (gebeurtenislogboek voor de statistieken). De standaardopties worden weggeschreven in dfsc_settings.

De providers instellen

Elke provider heeft een eigen kaart op het tabblad Providers van de instellingen. Boven aan elke kaart staat de redirect-URI die u in de console van de provider moet plakken. Dat is de instelling waarmee uw site het antwoord van de authenticatie mag ontvangen.

Google (met One-Tap)

1. Ga naar de Google Cloud Console en maak een project aan of selecteer er een.
2. Stel in APIs & Services → OAuth consent screen het toestemmingsscherm in (type Extern voor een publieke winkel, en voeg uw domein toe aan de toegestane domeinen).
3. Kies in Credentials → Create credentials → OAuth client ID voor Web application.
4. Plak bij Authorized redirect URIs de URI die op de Google-kaart van Social Connect staat (vorm: https://uw-domein.com/?dfsc_action=callback&dfsc_provider=google).
5. Wilt u Google One-Tap gebruiken, voeg dan ook uw hoofddomein toe bij Authorized JavaScript origins.
6. Kopieer de Client ID en het Client secret naar de bijbehorende velden op de Google-kaart, zet de schakelaar van de provider aan en vink zo gewenst De One-Tap-prompt tonen aan niet-ingelogde bezoekers aan.

Apple (Sign in with Apple)

1. Ga op Apple Developer (betalend account vereist) naar Certificates, Identifiers & Profiles → Identifiers.
2. Maak een App ID aan met de capability Sign In with Apple ingeschakeld.
3. Maak daarna een Services ID aan (die identificatie gebruikt u als “Client ID” in Social Connect). Stel de Sign In with Apple ervan in: voeg uw domein toe bij Domains en de redirect-URI van de Apple-kaart bij Return URLs.
4. Maak een privésleutel aan (Keys → +), met Sign In with Apple aangevinkt en gekoppeld aan uw App ID. Download het .p8-bestand; dat kan maar één keer.
5. Vul op de Apple-kaart de Services ID, uw Team ID (rechtsboven in het portaal zichtbaar) en de Key ID (naast de aangemaakte sleutel) in, en plak de volledige inhoud van het .p8-bestand in het veld Privésleutel (inclusief de regels -----BEGIN PRIVATE KEY-----).

Facebook

1. Maak op Meta for Developers een app van het type Consumer aan.
2. Voeg in de app het product Facebook Login → Web toe.
3. Voeg in de instellingen van Facebook Login de redirect-URI van de Facebook-kaart toe bij Valid OAuth Redirect URIs.
4. Haal de App ID en het App Secret op bij Settings → Basic en plak ze op de Facebook-kaart.

De plugin verhardt elke aanroep van de Graph API met appsecret_proof (HMAC-SHA256 van het token, ondertekend met uw App Secret), conform de aanbevelingen van Meta.

Microsoft

1. Ga op Microsoft Entra (voorheen Azure AD) naar App registrations → New registration.
2. Geef uw applicatie een naam. Kies bij Supported account types voor Accounts in any organizational directory and personal Microsoft accounts als u beide wilt accepteren (dan wordt de tenant common gebruikt).
3. Kies bij Redirect URI voor Web en plak de URI van de Microsoft-kaart.
4. Kopieer na het aanmaken de Application (client) ID naar het bijbehorende veld.
5. Maak bij Certificates & secrets een New client secret aan en kopieer de waarde meteen (ze is daarna niet meer zichtbaar) naar het veld Client Secret.
6. Laat het veld Tenant op common staan om zowel zakelijke als persoonlijke accounts toe te laten, of vul uw tenant-ID in om tot één organisatie te beperken.

LinkedIn

1. Maak op LinkedIn Developers een app aan die gekoppeld is aan uw bedrijfspagina.
2. Vraag op het tabblad Products de activering van Sign In with LinkedIn using OpenID Connect aan. De goedkeuring gebeurt automatisch.
3. Voeg op het tabblad Auth de redirect-URI van de LinkedIn-kaart toe bij Authorized redirect URLs.
4. Haal de Client ID en het Client Secret op van het tabblad Auth en plak ze in Social Connect.

X (Twitter)

1. Maak in het ontwikkelaarsportaal van X een project en daarna een app aan.
2. Schakel bij User authentication settings OAuth 2.0 in, kies het type Confidential client (aanbevolen) en plak de redirect-URI van de X-kaart bij Callback URI / Redirect URL.
3. Vul uw Website URL in (de startpagina van uw winkel).
4. Haal de Client ID en het Client Secret op en plak ze in Social Connect.

Plaatsing en vormgeving

Op het tabblad Vormgeving kiest u waar de knoppen worden getoond:

• Inlogformulier van WooCommerce (de pagina Mijn account in uitgelogde toestand).
• Registratieformulier van WooCommerce.
• Afrekenpagina, boven het formulier.
• Dashboard van Mijn account, met de lijst van gekoppelde accounts en de knoppen om handmatig te koppelen.

U kunt de knoppen ook overal invoegen met de shortcode:

[datafirefly_social_connect]
[datafirefly_social_connect context="login" heading="yes" providers="google,apple"]
[datafirefly_social_connect context="custom" redirect="https://uw-site/bestemming/"]

De vormgeving is op vier vlakken instelbaar:

• Stijl: gevuld (merkkleuren), omlijnd (witte achtergrond, gekleurde rand), minimaal (lichtgrijze achtergrond).
• Vorm: afgerond, pil, vierkant.
• Indeling: onder elkaar of op één lijn.
• Label: “Doorgaan met…”, “Inloggen met…” of alleen het pictogram.

Statistiekdashboard

Het dashboard (menu Social Connect → Statistieken) bundelt alle activiteit rond sociale login in uw winkel.

KPI’s en grafieken

Rechtsboven staat de periodekiezer: 7, 30, 90 of 365 dagen. De zes getoonde KPI’s dekken:

• Aanmeldingen: het totaal aantal authenticaties in de periode.
• Registraties: nieuwe accounts die via sociale login zijn aangemaakt.
• Gekoppelde accounts (totaal): het cumulatieve aantal sociale identiteiten dat aan gebruikers is gekoppeld.
• Toegewezen bestellingen en toegewezen omzet: zie het volgende onderdeel.
• Conversiepercentage: de verhouding tussen bestellingen en aanmeldingen.

Vier grafieken vullen de KPI’s aan: een verloopcurve in de tijd per provider, een donut met de verdeling per provider, een donut met de verdeling per apparaattype (computer, mobiel, tablet) en een kaart “Top landen” die op de geolocatie steunt.

Toewijzing van bestellingen

Elke WooCommerce-bestelling van een gebruiker die via sociale login binnenkwam, wordt toegewezen aan zijn oorspronkelijke provider. De toewijzing steunt op de gebruikersmeta _dfsc_registered_via en, als terugval, op de eerste actieve sociale koppeling van de gebruiker.

De hooks woocommerce_checkout_order_processed en woocommerce_store_api_checkout_order_processed worden beide afgeluisterd, wat zowel het klassieke afrekenen als het afrekenen met blokken dekt.

A/B-test van de knoppen

Schakel op het tabblad Vormgeving het blok A/B-test van de knoppen in en stel variant B in (stijl, vorm, indeling, label). Vanaf dat moment krijgt elke bezoeker willekeurig variant A (uw basisinstellingen) of variant B (cookie dfsc_ab, 50/50, 30 dagen bewaard).

Een vertoning wordt één keer per bezoekerssessie geteld (cookie dfsc_ab_imp), zodat het volume niet wordt opgeblazen. De conversies worden gemeten op de gebeurtenissen aanmelding, registratie, koppeling en bestelling, en verschijnen op de kaart A/B-test van het dashboard met vertoningen, conversies, toegewezen bestellingen, percentages per variant en een automatische aanduiding van de winnende variant.

Antifraude: snelheidslimiet op aanmeldingen

Op het tabblad Privacy kunt u de snelheidslimiet per IP-adres inschakelen. Drie drempels zijn instelbaar:

• Maximaal aantal pogingen: standaard 8.
• Venster (minuten): standaard 5.
• Blokkeerduur (minuten): standaard 15.

Zodra de limiet wordt overschreden, wordt het IP-adres voor de ingestelde duur geblokkeerd. Er wordt een gebeurtenis van het type blocked gelogd, die in de recente activiteit verschijnt. De bescherming geldt zowel voor de klassieke OAuth-omleidingen als voor de Google One-Tap-stroom.

Daarnaast houdt de plugin een lijst bij van wegwerp-e-maildomeinen (Mailinator, Yopmail, 10MinuteMail en dergelijke) die bij de registratie kunnen worden geblokkeerd. De lijst is uit te breiden via het filter dfsc_disposable_domains.

Geolocatie

Schakel de geolocatie in op het tabblad Privacy. De plugin gebruikt de MaxMind-database die al door WooCommerce wordt meegeleverd; er wordt geen enkele externe dienst aangeroepen. Hebt u de geolocatie in WooCommerce nog niet ingeschakeld, ga dan naar WooCommerce → Instellingen → Algemeen en zet de standaardgeolocatie aan (WooCommerce downloadt de database dan automatisch).

Eenmaal actief wordt het land van elke aanmelding bepaald, wat de kaart Top landen van het dashboard en de kolom “Land” van de CSV-export voedt.

CSV-export

De knop Exporteren naar CSV boven aan het dashboard exporteert alle gebeurtenissen van de gekozen periode. Het bestand bevat een kolom per relevant veld (datum in UTC, gebeurtenis, provider, context, land, apparaat, A/B-variant, gebruiker, bestelling, bedrag, melding). De UTF-8 BOM wordt vooraan toegevoegd zodat Excel en LibreOffice Calc de accenten correct tonen.

Accounts koppelen

Er bestaan drie mechanismen naast elkaar om een sociale identiteit aan een WordPress-account te koppelen:

1. Reeds bekende identiteit: de gebruiker heeft deze provider al eerder gebruikt, en wordt meteen aangemeld.
2. Automatische koppeling op e-mailadres: er bestaat al een WordPress-gebruiker met hetzelfde e-mailadres als de provider teruggeeft. Is het adres door de provider geverifieerd (en staat de optie Geverifieerd e-mailadres vereist aan), dan wordt de koppeling automatisch gemaakt.
3. Handmatige koppeling: vanuit het dashboard Mijn account kan een ingelogde klant elke provider koppelen of ontkoppelen via het paneel Gekoppelde accounts.

AVG en privacy

Er zijn drie manieren om IP-adressen op te slaan, in te stellen op het tabblad Privacy:

• Gehasht (standaard): HMAC-SHA256 met wp_salt, niet omkeerbaar.
• Volledig: het IP-adres leesbaar (gebruik dit alleen als uw privacyverklaring dat uitdrukkelijk vermeldt).
• Geen: het IP-adres wordt helemaal niet vastgelegd.

De plugin registreert een exporter en een eraser bij het ingebouwde AVG-systeem van WordPress (Gereedschap → Persoonlijke gegevens exporteren of wissen). Bij het verwijderen van een gebruiker worden ook zijn gekoppelde accounts en gebeurtenissen verwijderd, of geanonimiseerd bij een wisverzoek.

Shortcode en geavanceerde integratie

De shortcode [datafirefly_social_connect] accepteert de volgende attributen:

• context: login, register, checkout of custom.
• heading: yes of no, om de titel “Snel aanmelden” boven de knoppen te tonen.
• providers: door komma’s gescheiden lijst om de weergave te beperken (bijvoorbeeld google,apple).
• redirect: absolute URL waarnaar na het aanmelden wordt doorverwezen (heeft voorrang op de algemene instelling).

U kunt de weergave ook rechtstreeks in PHP aanroepen:

echo do_shortcode('[datafirefly_social_connect context="custom" providers="google,microsoft"]');

Hooks en filters voor ontwikkelaars

• dfsc_disposable_domains (filter): breidt de lijst met wegwerp-e-maildomeinen uit of vervangt die.
• dfsc_user_registered (actie): gaat af meteen na het aanmaken van een account via sociale login, met het gebruikers-ID en het genormaliseerde profiel.
• dfsc_after_login (actie): gaat af na elke geslaagde aanmelding.
• dfsc_welcome_subject en dfsc_welcome_body (filters): passen het onderwerp en de tekst van de welkomstmail aan.
• dfsc_placeholder_email_domain (filter): wijzigt het domein dat voor technische e-mailadressen wordt gebruikt (bij een geweigerde Apple Hide My Email, of bij X).

Een alleen-lezen REST API stelt de geaggregeerde statistieken beschikbaar op /wp-json/datafirefly-social-connect/v1/stats?days=30 (de capability manage_woocommerce is vereist). Schakel die in op het tabblad Privacy.

Compatibiliteit

• WooCommerce HPOS: de compatibiliteit custom_order_tables wordt bij activering verklaard, uw bestellingen in high performance opslag worden zonder voorbehoud ondersteund.
• Afrekenblokken: de hook woocommerce_store_api_checkout_order_processed wordt naast de klassieke hook afgeluisterd, zodat de toewijzing van bestellingen bij beide afrekentypes werkt.
• Polylang en WPML: de interfaceteksten zijn te vertalen via het meegeleverde .pot-bestand (FR, EN, ES, DE, IT). De inhoud (welkomstmail en dergelijke) werkt met beide meertalige plugins.
• Multisite: elke site in het netwerk heeft eigen tabellen en opties. Bij het verwijderen wordt elke site opgeruimd.

Verwijderen

Bij het verwijderen van de plugin via Plugins wordt het bestand uninstall.php automatisch uitgevoerd. Het verwijdert:

• de tabellen wp_dfsc_connections en wp_dfsc_events;
• de opties dfsc_settings en dfsc_db_version;
• de bijbehorende transients (JWKS-cache van Google, cache van het client secret van Apple, statustokens);
• de gebruikersmetagegevens (_dfsc_provider, _dfsc_registered_via, _dfsc_avatar_id en dergelijke).

Uw WordPress-gebruikers en uw WooCommerce-bestellingen worden nooit geraakt. Bij multisite doorloopt het verwijderen alle sites van het netwerk.

Veelgestelde vragen en probleemoplossing

De Google-knop geeft “redirect_uri_mismatch”

De redirect-URI die u in de Google Cloud Console hebt geplakt, komt niet exact overeen met die op de Google-kaart van Social Connect. Controleer of u de volledige URI hebt gekopieerd (met https://, de afsluitende slash en de parameters ?dfsc_action=callback&dfsc_provider=google).

Apple geeft “invalid_client” terug

Drie mogelijke oorzaken: de ingevulde Services ID is geen Services ID maar een App ID, de Team ID klopt niet, of de inhoud van de privésleutel .p8 is onvolledig (de regels -----BEGIN PRIVATE KEY----- ontbreken). Controleer alle drie en leeg de cache van het Apple client secret door de instellingen opnieuw op te slaan.

Facebook geeft een fout over appsecret_proof

Het ingevulde App Secret klopt niet of is aan de Meta-zijde opnieuw gegenereerd zonder hier te zijn bijgewerkt. Ga naar Meta for Developers, kopieer het secret opnieuw en plak het op de Facebook-kaart.

X / Twitter geeft “invalid_request” bij de terugkeer

De Callback URI is niet correct ingevuld in het ontwikkelaarsportaal van X, of het apptype staat niet op Confidential client terwijl het Client Secret verplicht is. Controleer het portaal opnieuw.

Het dashboard is leeg terwijl er aanmeldingen zijn geweest

Controleer of de gekozen periode de aanmeldingen wel omvat (standaard 30 dagen). Hebt u de plugin net geactiveerd, wacht dan tot er enkele gebeurtenissen zijn voordat de grafieken tot leven komen.

De A/B-test toont percentages van 0

Er is een minimum aan vertoningen en conversies nodig voordat de percentages betekenis krijgen. Reken op enkele honderden vertoningen per variant voordat u de resultaten interpreteert.

De geolocatie geeft geen enkel land terug

Controleer of WooCommerce de MaxMind-database heeft gedownload. Ga naar WooCommerce → Instellingen → Algemeen, schakel de standaardgeolocatie in en wacht enkele minuten. WooCommerce houdt de database daarna automatisch bij.

Hoe ontkoppel ik een account als beheerder?

Ga naar de tabel wp_dfsc_connections en verwijder de betreffende regel. Bij zijn volgende aanmelding via die provider wordt de gebruiker als een nieuwe identiteit behandeld (en op e-mailadres aan zijn WordPress-account gekoppeld als de automatische koppeling actief is).