#167 - Login Form Throttle With Security Check v0.1

Limit failed login attempts and trigger a timed security check to prevent brute force attacks.

Demo ansehen

<!-- 💙 MEMBERSCRIPT #167 v0.1 💙 - LOGIN THROTTLE WITH SECURITY CHECK -->
<script>
(function() {
  const MAX_ATTEMPTS = 3;
  const STORAGE_KEY = 'ms_login_attempts';
  const SECURITY_DELAY = 30; // seconds
  
  const formWrapper = document.querySelector('[data-ms-code="login-throttle-form"]');
  const submitButton = document.querySelector('[data-ms-code="throttle-submit"]');
  const errorMessage = document.querySelector('[data-ms-code="throttle-error"]');
  const attemptCounter = document.querySelector('[data-ms-code="attempt-counter"]');
  const loginForm = formWrapper?.querySelector('[data-ms-form="login"]');
  
  if (!formWrapper || !submitButton || !loginForm) {
    console.warn('MemberScript #167: Required elements not found.');
    return;
  }

  function getAttemptData() {
    const stored = sessionStorage.getItem(STORAGE_KEY);
    if (!stored) return { count: 0, timestamp: 0 };
    
    try {
      return JSON.parse(stored);
    } catch {
      return { count: 0, timestamp: 0 };
    }
  }

  function setAttemptData(count, timestamp = Date.now()) {
    sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ count, timestamp }));
  }

  let attemptData = getAttemptData();
  let securityTimer = null;

  function updateUIState() {
    const remainingAttempts = MAX_ATTEMPTS - attemptData.count;
    
    // Don't update UI if security timer is running
    if (securityTimer) {
      return;
    }
    
    if (attemptData.count >= MAX_ATTEMPTS) {
      showSecurityCheck();
      showError('Too many failed attempts. Please wait for security verification.');
    } else {
      hideSecurityCheck();
      if (attemptData.count > 0) {
        showError(`Login failed. ${remainingAttempts} attempt${remainingAttempts === 1 ? '' : 's'} remaining.`);
      } else {
        hideError();
      }
    }
    
    if (attemptCounter) {
      if (attemptData.count >= MAX_ATTEMPTS) {
        attemptCounter.textContent = 'Security verification required';
        attemptCounter.style.color = '#e74c3c';
      } else if (attemptData.count > 0) {
        attemptCounter.textContent = `${remainingAttempts} attempt${remainingAttempts === 1 ? '' : 's'} remaining`;
        attemptCounter.style.color = attemptData.count >= 2 ? '#e67e22' : '#95a5a6';
      } else {
        attemptCounter.textContent = '';
      }
    }
    
    console.log(`UI State: ${attemptData.count}/${MAX_ATTEMPTS} attempts, security timer: ${securityTimer ? 'active' : 'inactive'}`);
  }

  function showSecurityCheck() {
    let securityBox = formWrapper.querySelector('[data-ms-security-check]');
    
    if (!securityBox) {
      securityBox = document.createElement('div');
      securityBox.setAttribute('data-ms-security-check', 'true');
      securityBox.style.cssText = `
        width: 100%;
        margin: 15px 0;
        padding: 20px;
        border: 2px solid #ff6b6b;
        border-radius: 8px;
        background: #fff5f5;
        text-align: center;
        box-sizing: border-box;
      `;
      
      submitButton.parentNode.insertBefore(securityBox, submitButton);
    }
    
    securityBox.innerHTML = `
      <strong>Security Check</strong><br>
      <small>Please wait ${SECURITY_DELAY} seconds before trying again</small><br>
      <div id="security-countdown" style="margin-top: 10px; font-size: 24px; font-weight: bold; color: #ff6b6b;">${SECURITY_DELAY}</div>
    `;
    
    // Disable submit button
    submitButton.disabled = true;
    submitButton.style.opacity = '0.5';
    
    // Clear any existing timer
    if (securityTimer) {
      clearInterval(securityTimer);
    }
    
    // Start countdown
    let timeLeft = SECURITY_DELAY;
    securityTimer = setInterval(() => {
      timeLeft--;
      const countdown = securityBox.querySelector('#security-countdown');
      if (countdown) {
        countdown.textContent = timeLeft;
      }
      
      if (timeLeft <= 0) {
        clearInterval(securityTimer);
        securityTimer = null;
        
        securityBox.innerHTML = `
          <strong style="color: #27ae60;">✓ Security Check Complete</strong><br>
          <small>You may now try logging in again</small>
        `;
        
        // Re-enable submit button
        submitButton.disabled = false;
        submitButton.style.opacity = '1';
        
        // Reset attempt count so user gets fresh attempts
        attemptData.count = 0;
        setAttemptData(0);
        
        // Update UI to reflect fresh state
        updateUIState();
        
        // Hide security box after 5 seconds (longer so user sees message)
        setTimeout(() => {
          if (securityBox) {
            securityBox.style.display = 'none';
          }
        }, 5000);
      }
    }, 1000);
  }

  function hideSecurityCheck() {
    const securityBox = formWrapper.querySelector('[data-ms-security-check]');
    if (securityBox && !securityTimer) {
      securityBox.remove();
    }
    
    if (securityTimer) {
      clearInterval(securityTimer);
      securityTimer = null;
    }
    
    // Only enable button if we're not in security check mode
    if (attemptData.count < MAX_ATTEMPTS) {
      submitButton.disabled = false;
      submitButton.style.opacity = '1';
    }
  }

  function showError(message) {
    if (errorMessage) {
      errorMessage.textContent = message;
      errorMessage.style.display = 'block';
    }
  }

  function hideError() {
    if (errorMessage) {
      errorMessage.style.display = 'none';
    }
  }

  function handleSubmit(event) {
    // Prevent submission if security check is active
    if (attemptData.count >= MAX_ATTEMPTS && securityTimer) {
      event.preventDefault();
      showError('Please wait for the security check to complete.');
      return false;
    }
    
    const currentAttemptCount = attemptData.count;
    
    setTimeout(() => {
      checkLoginResult(currentAttemptCount);
    }, 1500);
  }

  function checkLoginResult(previousAttemptCount) {
    const hasError = document.querySelector('[data-ms-error]') || 
                    document.querySelector('.w-form-fail:not([style*="display: none"])') ||
                    formWrapper.querySelector('.w-form-fail:not([style*="display: none"])') ||
                    loginForm.querySelector('[data-ms-error]');

    if (window.$memberstackDom) {
      window.$memberstackDom.getCurrentMember().then(member => {
        if (member && member.id) {
          // Success! Reset everything
          sessionStorage.removeItem(STORAGE_KEY);
          attemptData = { count: 0, timestamp: 0 };
          hideError();
          hideSecurityCheck();
          
          if (attemptCounter) {
            attemptCounter.textContent = 'Login successful!';
            attemptCounter.style.color = '#27ae60';
          }
          
        } else if (hasError) {
          handleFailedLogin(previousAttemptCount);
        }
      }).catch(() => {
        if (hasError) {
          handleFailedLogin(previousAttemptCount);
        }
      });
    } else {
      if (hasError) {
        handleFailedLogin(previousAttemptCount);
      } else {
        const successElement = document.querySelector('.w-form-done:not([style*="display: none"])');
        if (successElement) {
          sessionStorage.removeItem(STORAGE_KEY);
          attemptData = { count: 0, timestamp: 0 };
          hideError();
          hideSecurityCheck();
        }
      }
    }
  }

  function handleFailedLogin(previousAttemptCount) {
    attemptData.count = previousAttemptCount + 1;
    setAttemptData(attemptData.count);
    
    console.log(`Failed login attempt ${attemptData.count}/${MAX_ATTEMPTS}`);
    
    // Force UI update after a brief delay to ensure DOM is ready
    setTimeout(() => {
      updateUIState();
    }, 100);
  }

  function init() {
    loginForm.addEventListener('submit', handleSubmit);
    updateUIState();
    
    if (window.$memberstackDom) {
      window.$memberstackDom.getCurrentMember().then(member => {
        if (member && member.id) {
          sessionStorage.removeItem(STORAGE_KEY);
          attemptData = { count: 0, timestamp: 0 };
        }
      }).catch(() => {
        // No user logged in
      });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();
</script>

Erstellen des Make.com-Szenarios

1. Laden Sie den JSON-Blaupause unten, um angegeben zu bekommen.

2. Navigieren Sie zu Make.com und erstellen Sie ein neues Szenario...

3. Klicken Sie auf das kleine Kästchen mit den 3 Punkten und dann auf Blaupause importieren...

4. Laden Sie Ihre Datei hoch und voila! Sie sind bereit, Ihre eigenen Konten zu verknüpfen.

Brauchen Sie Hilfe mit diesem MemberScript?

Alle Memberstack-Kunden können im 2.0 Slack um Unterstützung bitten. Bitte beachten Sie, dass dies keine offiziellen Funktionen sind und der Support nicht garantiert werden kann.

Treten Sie dem 2.0 Slack bei
Anmerkungen zur Version
Attribute
Beschreibung
Attribut
Keine Artikel gefunden.
Leitfäden / Tutorials
Keine Artikel gefunden.
Tutorial
Was ist Memberstack?

Autorisierung und Zahlungen für Webflow-Websites

Fügen Sie Ihrer Webflow-Website Logins, Abonnements, Gated Content und vieles mehr hinzu - einfach und vollständig anpassbar.

Mehr erfahren

"Wir verwenden Memberstack schon seit langem, und Es hat uns geholfen, Dinge zu erreichen, die wir mit Webflow nie für möglich gehalten hätten. Es hat uns ermöglicht, Plattformen mit großer Tiefe und Funktionalität zu bauen, und das Team dahinter war immer sehr hilfsbereit und offen für Feedback.

Jamie Debnam
39 Digital

"Ich habe eine Mitgliedschaftsseite mit Memberstack und Jetboost für einen Kunden erstellt. Es fühlt sich wie Magie an, mit diesen Tools zu bauen. Als jemand, der in einer Agentur gearbeitet hat, wo einige dieser Anwendungen von Grund auf neu programmiert wurden, verstehe ich jetzt endlich den Hype. Das ist viel schneller und viel billiger."

Félix Meens
Webflix-Studio

"Eines der besten Produkte, um eine Mitgliederseite zu starten - ich mag die Benutzerfreundlichkeit von Memberstack. Ich war in der Lage, meine Mitgliederseite innerhalb eines Tages einzurichten und zu betreiben.. Einfacher geht's nicht. Außerdem bietet es die Funktionalität, die ich brauche, um die Benutzererfahrung individueller zu gestalten."

Eric McQuesten
Gesundheitstechnologie-Nerds
Off World Depot

"Mein Geschäft wäre ohne Memberstack nicht das, was es ist. Wenn Sie denken, dass $30/Monat teuer sind, versuchen Sie mal, einen Entwickler zu engagieren, der für diesen Preis individuelle Empfehlungen in Ihre Website integriert. Unglaublich flexible Tools für diejenigen, die bereit sind, einige minimale Anstrengungen zu unternehmen und die gut zusammengestellte Dokumentation zu lesen."

Riley Brown
Off World Depot

"Die Slack-Community ist eine der aktivsten, die ich kenne, und andere Kunden sind bereit, Fragen zu beantworten und Lösungen anzubieten. Ich habe ausführliche Bewertungen von alternativen Tools durchgeführt und wir kommen immer wieder auf Memberstack zurück - sparen Sie sich die Zeit und probieren Sie es aus."

Abtei Burtis
Gesundheitstechnologie-Nerds
Slack

Brauchen Sie Hilfe mit diesem MemberScript? Treten Sie unserer Slack-Community bei!

Treten Sie der Memberstack-Community Slack bei und fragen Sie los! Erwarten Sie eine prompte Antwort von einem Team-Mitglied, einem Memberstack-Experten oder einem anderen Community-Mitglied.

Unserem Slack beitreten