Django OTP TOTP 如何在自定义模板中展示二维码

问题原因 #

你直接复用向导模板的{{ QR_URL }}报错，是因为该变量仅在官方双因素设置向导的视图上下文里才会被注入，且默认的qr命名路由仅在设置流程的临时session有效期内可访问，用户完成绑定后session清理，直接访问该路由就会触发404错误。

实现步骤 #

1. 视图层添加逻辑 #

首先在你渲染自定义模板的视图中，添加获取用户TOTP设备、生成二维码的逻辑：

import base64
import io
import qrcode
from django_otp.plugins.otp_totp.models import TOTPDevice
from two_factor.utils import totp_digits, get_otpauth_url

def your_custom_view(request):
    # 先判断用户是否已绑定TOTP
    totp_device = TOTPDevice.objects.filter(user=request.user, confirmed=True).first()
    context = {}
    if totp_device:
        # 生成otpauth链接
        otpauth_url = get_otpauth_url(
            accountname=request.user.username,
            issuer="你的站点名称", # 替换成你自己的站点名
            secret=totp_device.bin_key,
            digits=totp_digits()
        )
        # 生成二维码base64，不需要额外存储文件
        qr_img = qrcode.make(otpauth_url)
        buffer = io.BytesIO()
        qr_img.save(buffer, format="PNG")
        qr_base64 = base64.b64encode(buffer.getvalue()).decode()
        context["qr_base64"] = qr_base64
    else:
        # 未绑定的情况，可以添加引导跳转链接
        context["need_setup"] = True
    return render(request, "你的自定义模板路径.html", context)

2. 模板层调用 #

在你的自定义模板中添加如下代码即可展示：

<div class="d-flex justify-content-center">
  {% if qr_base64 %}
    <p><img src="data:image/png;base64,{{ qr_base64 }}" alt="TOTP绑定二维码" /></p>
  {% elif need_setup %}
    <p>您还未绑定双因素认证，请先<a href="{% url 'two_factor:setup' %}">完成绑定</a></p>
  {% endif %}
</div>

注意事项 #

• TOTP密钥属于用户敏感信息，视图中必须做权限校验，仅允许用户查看自身的二维码，禁止跨用户访问
• 如果你不想自己生成二维码，也可以自定义一个路由，参考官方qr视图的逻辑，做权限校验后返回对应二维码即可，不要直接使用原有的qr路由

内容的提问来源于stack exchange，提问作者rob