Django Allauth 自定义登录模板不起作用

Posted 2023-02-24

【中文标题】Django Allauth 自定义登录模板不起作用

【英文标题】：Django Allauth Customized Login Template Not Working

【发布时间】：2021-10-31 20:32:29

【问题描述】：

我已经使用引导样式和 widget_tweaks 自定义了 allauth 的登录模板。当我尝试使用该模板登录时，它不会将我重定向到主页，而是保留在同一个 login.html 模板中。但是，当我使用来自 /account/login.html/ 的 allauth 的原始模板登录时，一切正常，它会将我重定向到我的主页。我没有在我的自定义 login.html 模板中自定义某些内容。

下面是 django-allauth login.html 和我自定义的 login.html

django-allauth login.html

% extends "account/base.html" %

% load i18n %
% load account socialaccount %

% block head_title %% trans "Sign In" %% endblock %

% block content %

<h1>% trans "Sign In" %</h1>

% get_providers as socialaccount_providers %

% if socialaccount_providers %
<p>% blocktrans with site.name as site_name %Please sign in with one
of your existing third party accounts. Or, <a href=" signup_url ">sign up</a>
for a  site_name  account and sign in below:% endblocktrans %</p>

<div class="socialaccount_ballot">

  <ul class="socialaccount_providers">
    % include "socialaccount/snippets/provider_list.html" with process="login" %
  </ul>

  <div class="login-or">% trans 'or' %</div>

</div>

% include "socialaccount/snippets/login_extra.html" %

% else %
<p>% blocktrans %If you have not created an account yet, then please
<a href=" signup_url ">sign up</a> first.% endblocktrans %</p>
% endif %

<form class="login" method="POST" action="% url 'account_login' %">
  % csrf_token %
   form.as_p 
  % if redirect_field_value %
  <input type="hidden" name=" redirect_field_name " value=" redirect_field_value " />
  % endif %
  <a class="button secondaryAction" href="% url 'account_reset_password' %">% trans "Forgot Password?" %</a>
  <button class="primaryAction" type="submit">% trans "Sign In" %</button>
</form>

% endblock %

我的自定义 login.html

% comment % 
% extends "layouts/base-fullscreen.html" %
% load i18n %

% block title % Login % endblock %
% load widget_tweaks %
% block content %   

    <div class="auth-wrapper">
        <div class="auth-content">
            <div class="auth-bg">
                <span class="r"></span>
                <span class="r s"></span>
                <span class="r s"></span>
                <span class="r"></span>
            </div>
            <div class="card">
                <div class="card-body text-center">
                    <div class="mb-4">
                        <i class="feather icon-unlock auth-icon"></i>
                    </div>
                    <h3 class="mb-4">Login</h3>

                    <span class="mb-0 text-muted">
                        % if msg %
                             msg | safe 
                        % else %
                            Add your credentials
                        % endif % 
                    </span>

                    <br />
                    <br />

                    <form method="post" action="% url 'account_login' %">

                        % csrf_token %                   

                        <div class="md-form mb-2">
                            % render_field form.login class="form-control" placeholder=form.login.label %
                        </div>  
                        <span class="text-error"> form.login.errors </span>

                        <div class="md-form mb-2">
                            % render_field form.password class="form-control" placeholder=form.password.label %
                        </div>  
                        <span class="text-error"> form.password.errors </span>

                        <p class="mb-0 text-muted"><a class="button secondaryAction" href="% url 'account_reset_password' %">Forgot password?</a>
                        </p>

                        <div class="form-group text-left">
                            <div class="checkbox checkbox-fill d-inline">
                                <!-- <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-a1" checked=""> -->
                                % render_field form.remember class="form-control" placeholder=form.remember.label type="checkbox"%
                                <label for="id_remember" class="cr"> Remember me</label>
                            </div>
                        </div>
                        % if redirect_field_value %
                        <input type="hidden" name=" redirect_field_name " value=" redirect_field_value " />
                        % endif %
                        <button type="submit" name="login" class="btn btn-primary shadow-2 mb-4">Login</button>

                    </form>

                    <p class="mb-0 text-muted">Don’t have an account? <a href="% url 'account_signup' %" >Signup</a></p>
                    <br />
                </div>
            </div>
        </div>
    </div>

% endblock content %

settings.py 中的allauth 设置

LOGIN_REDIRECT_URL = '/'
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' 
SITE_ID = 1

ACCOUNT_LOGOUT_REDIRECT_URL = '/'   #couterpart to Django's LOGIN_REDIRECT_URL
ACCOUNT_LOGOUT_REDIRECT = '/'
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_UNIQUE_EMAIL = True
ACCOUNT_EMAIL_VERIFICATION = 'optional'

我所做的另一项更改是自定义 allauth 注册表单以采用额外的两个字段（名字和姓氏）。那个工作正常并重定向到登录网址

【参考方案1】：

这就是你的问题

% extends "account/base.html" %

如果您的本地 base.html 中有所有 boostrap、jquery 和 widget_tweaks，那么这就是您需要扩展的内容。 django-allauth 提供的默认 accounts/base.html，没有通过 bootstrap 自定义。

使用： % extends "base.html" % 代替

【参考方案2】：

您可能会收到来自表单验证器的错误。保留页面上的原始表单以检查其是否给出任何错误。从原始页面“accounts/login.html”复制 form.as_p 并将其粘贴到您的自定义模板中。如果有任何错误，它会显示它。

【讨论】：

form.as_p 可以找到。但是我无法添加自定义类，因为我无法访问各个字段

您可以创建自己的表单而无需添加 form.as_p 。创建您自己的 html 表单并添加您想要的类。按照您想要的方式设计它，但要确保每个字段的名称与 form.as_p 生成的名称相匹配。这可能看起来很长，但这是我通常的解决方法

你似乎没有明白我的意思。我的意思是，在页面底部添加 form.as_p 。如果表单出现任何错误，则会显示出来。这将有助于调试问题。另一种方法是将 request.user.is_authenticated 添加到登录页面，以查看用户是否实际登录。如果没有，则表单无法正常工作。如果是，那么您的重定向就是问题所在。