How to move only login page to another server with django (CSRF token missing)

I have login page with django authentication system.

Now, I want to move only the login page to another server(external login page).

So, my purpose is make username and password field on another server(external login page), then login to the django system.

I made html on another server.

<form method="POST" action="http://djangoserver.com/">
   <input type="text" name="username">
   <input type="password" name="password">
  <input type="submit">
</form>

However, this shows the error.

Reason given for failure:
    CSRF token missing

I checked the login page html source as django automatically created and confirmed there is csrf that django middleware makes.

    <form method="POST">
        <input type="hidden" name="csrfmiddlewaretoken" value="VEkMTu0EpmLbMVLRh4h9MOcuvcryIlA0M1USByG7R5PXkgYvMyzAhdKyq7gohpko">
            Username
            <input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" class="form-control" placeholder="Username" required id="id_username">
            
            Password
            <input type="password" name="password" autocomplete="current-password" class="form-control" placeholder="Password" required id="id_password">
            
        <button type="submit">login</button>
    </form>

So, I guess I should mimic like this about csrf in external login page.

Is there any good suggestion?

You have to add csrfmiddlewaretoken field in your form. because this login page is outside of the actual server, you have to create an endpoint in the project to generate csrf token and you call it with javascript and put it in your form. here is the codes:

<form method="POST" action="http://YOUR-WEBSITE.XYZ/">
   <input type="hidden" name="csrfmiddlewaretoken" id="csrf_token">
   <input type="text" name="username">
   <input type="password" name="password">
   <input type="submit">
</form>

<script>
   // Fetch the CSRF token from the Django server
   fetch('http://YOUR-WEBSITE.XYZ/csrf_token/')
      .then(response => response.json())
      .then(data => {
         // Set the CSRF token value in the form
         document.getElementById('csrf_token').value = data.csrf_token;
      });
</script>

and your view in the application should be something like this:

from django.http import JsonResponse
from django.middleware.csrf import get_token

def get_csrf_token(request):
    csrf_token = get_token(request)
    return JsonResponse({'csrf_token': csrf_token})

Make sure to include the URL for this view in your Django server's URL configuration.