覆盖 restauth 密码重置电子邮件问题

Question

美好的一天，我正在尝试覆盖 Django allauth 的 password_reset_email。问题是它成功覆盖了，但我得到的是刚刚发送给用户的 html 代码，而不是 html 表示形式。

我期待收到一封风格化的电子邮件，就像我收到的确认电子邮件一样，但情况似乎并非如此。

在我的templates/registration/password_reset_email.html

{% load i18n %}
{% autoescape off %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Confirm Your E-mail</title>
    <style>
        .body {
            background-color: #f6f6f6;
            padding: 30px;
            display: flex;
            flex-direction: row;
            justify-content: center; 
            align-items: center;
        }
        
        .content {
            background-color: #FFFFFF;
            color: #4d4d4d;
            max-width: 400px;
            padding: 20px;
            margin: auto;
        }
        
        .title {
            font-size: 20px;
            font-weight: 600;
            margin: 10px 0;
            text-align: center
        }
        
        .intro {
            font-size: 15px;
            align-self: flex-start;
            color: #4d4d4d;
            margin-bottom: 15px;
        }
        
        .main-body {
            font-size: 15px;
            color: #4d4d4d;
            margin-bottom: 15px;
        }
        
        .alt-body {
            width: 100%;
            display: flex;
            flex-direction: row !important;
            justify-content: center !important;
        }

        .alt-body>a {
            font-size: 17px;
            font-weight: 500;
            text-decoration: none;
            color: #FFFFFF;
            margin: auto;
            margin-bottom: 15px;
        }
        
        .cta-button {
            background-color: #525659;
            padding: 9px 100px;
            border: 2px solid #525659;
            border-radius: 35px;
            align-self: center;
        }

        .cta-button:hover {
            background-color: #000000;
            border: 2px solid #000000;
        }
        
        .sub-body {
            font-size: 15px;
            color: #4d4d4d;
            margin-bottom: 15px;
            margin-top: 0;
            align-self: flex-start;
        }

        .sub-body a {
            text-decoration: none;
            color: #4d4d4d;
            font-size: 15px;
        }

        .sub-body a:hover {
            text-decoration: none;
            color: #4d4d4d;
        }

        .outro {
            margin: 20px 0;
        }

        .outro > p {
            font-size: 15px;
            margin-top: 3px;
            margin-bottom: 3px;
        }

        .outro a {
            text-decoration: none;
            color: #4d4d4d;
            font-size: 15px;
            margin-top: 3px;
            margin-bottom: 3px;
        }

        .outro a:hover {
            text-decoration: none;
            color: #4d4d4d;
        }
    </style>
</head>
<body class="body">
    <div class="content">
        {% blocktrans with site_name=current_site.name site_domain=current_site.domain %}

        <p class="title">Email Verification</p>

        <p class="intro">Hello there,</p>

        <p class="main-body">
            Simply click on the button to verify your cre8ive-mart email.
        </p>

        <div class="alt-body">
            <a href="{{ activate_url }}" class="cta-button">Verify Email</a>
        </div>
        
        <p class="sub-body">
            if you have any questions, please contact <a href="mailto:todoetester@gmail.com">todoetester@gmail.com</a>
        </p>

        <div class="outro">
            <p class="outro-greeting">Sincerely,</p>
            <p class="outro-main">cre8ive-mart</p>
            <a href="#" class="outro-website">cre8ivemart.com</a>
        </div>

        {% endblocktrans %}
    </div>
</body>
</html>
{% endautoescape %}

但是我收到的邮件是这样的

这只是我返回的 html 表示。而不是样式化的组件。

Answer 1

我看不到你使用的代码，但这里是我使用 django rest auth 的代码。

创建自定义密码重置序列化程序

from django.contrib.auth.forms import PasswordResetForm
from django.conf import settings
from django.utils.translation import gettext as _
from rest_framework import serializers

###### IMPORT YOUR USER MODEL ######
from .models import User


class PasswordResetSerializer(serializers.Serializer):
    email = serializers.EmailField()
    password_reset_form_class = PasswordResetForm

    def validate_email(self, value):
        self.reset_form = self.password_reset_form_class(data=self.initial_data)

        if not self.reset_form.is_valid():
            raise serializers.ValidationError(_('Error'))

        ###### FILTER YOUR USER MODEL ######
        if not User.objects.filter(email=value).exists():

            raise serializers.ValidationError(_('Invalid e-mail address'))
        return value

    def save(self):
        request = self.context.get('request')
        opts = {
            'use_https': request.is_secure(),
            'from_email': getattr(settings, 'DEFAULT_FROM_EMAIL'),

            ###### USE YOUR TEXT FILE ######
            'email_template_name': 'account/email/password_reset_key.html',
            'html_email_template_name': 'account/email/password_reset_key.html',
            'request': request,
        }
        self.reset_form.save(**opts)

然后将密码重置电子邮件模板设为 account/email/password_reset_key.html

然后在设置中，更新您的密码重置序列化程序以指向自定义密码重置序列化程序。

REST_AUTH_SERIALIZERS = {
    'PASSWORD_RESET_SERIALIZER': '<path to >password_serializer.PasswordResetSerializer'
}

这应该可行，如果不行，您将必须提供更多有关如何设置此特定密码重置流程的上下文，以便我们确定它为什么将其作为文本而不是 html 表示形式发送

Answer 2

使用更新版本的 django-rest-auth，我们需要更少的代码来实现 OP 想要的：

Settings.py

REST_AUTH_SERIALIZERS = {
    'PASSWORD_RESET_SERIALIZER': 'users.serializer.PasswordResetSerializer'
}

Serializer.py

from rest_auth.serializers import PasswordResetSerializer

class PasswordResetSerializer(PasswordResetSerializer):

    def get_email_options(self):
        return {
            'subject_template_name': 'account/email/password_reset_key_subject.txt',
            'email_template_name': 'account/email/password_reset_key.txt',
            # 'html_email_template_name': 'account/password_reset_key.html',
        }

覆盖 restauth 密码重置电子邮件问题

overriding restauth password reset email issues

django

django-rest-framework

django-allauth

django-rest-auth