Vérification d'e-mails sur Shopify

Shopify n'expose pas de hook avant inscription côté boutique, mais vous pouvez vérifier les adresses par deux approches complémentaires :

App Proxy — un endpoint serveur que le JavaScript de votre boutique appelle avant l'envoi du formulaire d'inscription
Webhook customers/create — un webhook déclenché après la création d'un client, qui permet d'étiqueter ou de signaler les comptes douteux

Ce tutoriel couvre les deux motifs.

Prérequis

Une boutique Shopify et un compte Partner
Une application Node.js (Express ou équivalent) déployée publiquement
Une clé d'API Mailbeam (inscription gratuite)

Option A — App Proxy (temps réel, avant inscription)

Un App Proxy achemine les requêtes de {votre-boutique}.myshopify.com/apps/verify-email vers votre serveur.

Configurer l'App Proxy

Dans les réglages de votre application Partner Shopify → App proxy :

Subpath : apps
Subpath prefix : verify-email
Proxy URL : https://votre-serveur.com/api/verify-email

L'endpoint du proxy

// server/routes/shopifyVerify.js
import express from "express";
// Pas encore de SDK : voici le wrapper de 12 lignes de /docs/quickstart.
import { verifyEmail } from "./lib/mailbeam";

const router = express.Router();

router.post("/api/verify-email", async (req, res) => {
  const { email } = req.body;

  if (!email) {
    return res.json({ valid: false, error: "L'adresse e-mail est requise." });
  }

  try {
    const { valid, score, reason } = await verifyEmail(email);

    if (!valid || score < 60) {
      const message =
        reason === "disposable_domain"
          ? "Merci d'utiliser une adresse e-mail permanente."
          : "Merci de fournir une adresse e-mail valide.";
      return res.json({ valid: false, error: message });
    }

    res.json({ valid: true });
  } catch {
    // Échec permissif — ne bloquez pas l'inscription
    res.json({ valid: true });
  }
});

export default router;

JavaScript côté boutique

Ajoutez ceci au gabarit d'inscription de votre thème Shopify :

// assets/mailbeam-verify.js
(function () {
  const form = document.querySelector('form[action="/account"]');
  const emailInput = document.querySelector('input[name="customer[email]"]');

  if (!form || !emailInput) return;

  form.addEventListener('submit', async function (event) {
    // N'intercepte que les formulaires d'inscription
    const actionInput = form.querySelector('input[name="form_type"]');
    if (!actionInput || actionInput.value !== 'create_customer') return;

    event.preventDefault();

    const email = emailInput.value.trim();

    try {
      const res = await fetch('/apps/verify-email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });

      const { valid, error } = await res.json();

      if (!valid) {
        showError(emailInput, error || 'Merci d’utiliser une adresse e-mail valide.');
        return;
      }
    } catch {
      // Échec permissif sur erreur réseau
    }

    form.submit();
  });

  function showError(input, message) {
    let errorEl = document.getElementById('mailbeam-email-error');
    if (!errorEl) {
      errorEl = document.createElement('p');
      errorEl.id = 'mailbeam-email-error';
      errorEl.style.cssText = 'color: red; font-size: 0.875rem; margin-top: 0.25rem;';
      input.parentNode.insertBefore(errorEl, input.nextSibling);
    }
    errorEl.textContent = message;
    input.focus();
  }
})();

Option B — webhook customers/create (après inscription)

Ce motif s'exécute après la création du client par Shopify. Pratique pour étiqueter les comptes suspects :

// server/routes/shopifyWebhook.js
import crypto from "crypto";
// Pas encore de SDK : voici le wrapper de 12 lignes de /docs/quickstart.
import { verifyEmail } from "./lib/mailbeam";

router.post("/webhooks/customers/create", express.raw({ type: "application/json" }), async (req, res) => {
  // Vérifie la signature du webhook
  const hmac = req.headers["x-shopify-hmac-sha256"];
  const hash = crypto
    .createHmac("sha256", process.env.SHOPIFY_WEBHOOK_SECRET)
    .update(req.body)
    .digest("base64");

  if (hmac !== hash) {
    return res.status(401).send("Unauthorized");
  }

  const customer = JSON.parse(req.body.toString());
  const { email, id: customerId } = customer;

  try {
    const { valid, score } = await verifyEmail(email);

    if (!valid || score < 40) {
      // Étiquette le client pour relecture
      await tagShopifyCustomer(customerId, ["suspicious-email", "requires-review"]);
    }
  } catch {
    // Journalise sans faire échouer le webhook
    console.error("[Mailbeam] erreur de vérification");
  }

  res.status(200).send("OK");
});

Bonnes pratiques

Utilisez l'App Proxy pour la prévention en temps réel, le webhook pour l'audit
Renvoyez toujours { valid: true } dans les blocs catch — échec permissif
La vérification HMAC de Shopify est obligatoire pour les webhooks (bonne pratique de sécurité)