Web2Py：如何自定义两步验证的第二步提交验证码表单？

Hey there! I’ve tinkered with Web2Py’s auth system and customizing 2FA flows quite a bit, so let me break down how to customize that second verification step form for you.

Web2Py’s built-in auth handles the first step (username/password) out of the box, but the second 2FA code submission form can feel rigid. Here’s how to take control of it:

1. Start with the Default View (Quick Customization) #

The easiest way to tweak the UI is to override the default 2FA form view:

• First, copy the default login_form_2fa.html from Web2Py’s core files (gluon/contrib/login_methods/views/auth/) into your app’s views/auth/ directory.
• Now you can rewrite the HTML to match your app’s design while keeping the core form logic intact. For example:

{{extend 'layout.html'}}
<div class="auth-2fa-container">
    <h2>Verify Your Account</h2>
    <p>Enter the 6-digit code from your authenticator app below:</p>
    {{=form.custom.begin}}
        <div class="form-field">
            <label for="code">Verification Code</label>
            {{=form.custom.widget.code}}
            {{if form.errors.code:}}
                <span class="error">{{=form.errors.code}}</span>
            {{pass}}
        </div>
        <button type="submit" class="btn btn-primary">Confirm & Login</button>
        <div class="form-footer">
            <a href="{{=URL('auth', 'request_2fa_code')}}">Resend code</a> | 
            <a href="{{=URL('auth', 'login')}}">Back to login</a>
        </div>
    {{=form.custom.end}}
</div>

Use form.custom.begin/form.custom.end to retain Web2Py’s form processing magic while rearranging elements, adding styles, or extra links.

2. Build a Fully Custom Form (Advanced Control) #

If you need to add custom logic (like supporting multiple 2FA methods or extra validation), create a custom form function and hook it into auth:

Step 1: Define the Custom Form Function #

Add this to your app’s models/db.py file:

def custom_2fa_form():
    # Create a custom form with your desired fields
    form = SQLFORM.factory(
        Field('code', 'string', label='Verification Code', 
              requires=[IS_NOT_EMPTY(), IS_LENGTH(min=6, max=6)]),
        formstyle='bootstrap5'  # Use your preferred form style
    )

    # Handle form submission
    if form.accepts(request.vars, session):
        # Grab the user ID stored by Web2Py after first-step login
        user_id = session.auth_2fa_user_id
        if not user_id:
            # Session expired, redirect back to login
            redirect(URL('auth', 'login'))
        
        # Verify the code using Web2Py's built-in method
        if auth.verify_2fa_code(user_id, form.vars.code):
            # Code is valid, complete the login
            auth.login_user(db.auth_user[user_id])
            redirect(URL('default', 'index'))
        else:
            # Invalid code, show error
            form.errors.code = 'That code is incorrect. Please try again.'
    
    # Pass the form to the view
    return dict(form=form)

Step 2: Hook It Into Auth #

Still in models/db.py, tell Web2Py to use your custom form instead of the default:

auth.settings.login_form_2fa = custom_2fa_form

Step 3: Create a Matching View #

Make a new view at views/auth/login_form_2fa.html (or use an existing one) to render your custom form:

{{extend 'layout.html'}}
<div class="custom-2fa-form">
    <h3>Secure Login Verification</h3>
    {{=form}}
</div>

3. Handle Edge Cases #

Don’t forget these details:

• Session Expiry: Check if session.auth_2fa_user_id exists before processing the form—if not, send users back to the initial login.
• Multiple 2FA Methods: Add a dropdown field to your custom form to let users choose between TOTP, SMS, etc., then branch your verification logic accordingly.
• Error Messaging: Clear, user-friendly errors help reduce frustration (e.g., "Code expired, please request a new one").

4. Test Everything #

• Validate correct code flow: Username/password → custom 2FA form → successful login.
• Test error states: Invalid code, empty input, expired session.
• Check UI consistency: Ensure the custom form matches your app’s design system.

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