Skip to content

想做一个验证码有亿点难 #46

@zeroChen00

Description

@zeroChen00
@router.get('/xxx/API/Verification_Code')
async def verification_code():
    '''验证码生成'''
    # 定义图片大小及背景颜色
    image = Image.new('RGB', (120, 30), color=(73, 109, 137))
    # 使用系统自带字体,或指定字体文件路径
    font_path = "./static/arial.ttf"
    fnt = ImageFont.truetype(font_path, 15)
    d = ImageDraw.Draw(image)

    captcha_text = ''.join(random.choices(string.ascii_uppercase + string.digits, k=4))
    d.text((10, 10), captcha_text, font=fnt, fill=(255, 255, 255))

    for _ in range(random.randint(3, 5)):
        start = (random.randint(0, image.width), random.randint(0, image.height))
        end = (random.randint(0, image.width), random.randint(0, image.height))
        d.line([start, end], fill=(random.randint(50, 200), random.randint(50, 200), random.randint(50, 200)))

    for _ in range(100):
        xy = (random.randrange(0, image.width), random.randrange(0, image.height))
        d.point(xy, fill=(random.randint(50, 200), random.randint(50, 200), random.randint(50, 200)))

    buf = io.BytesIO()
    image.save(buf, format='PNG')
    buf.seek(0)
    return StreamingResponse(buf, media_type="image/png")

验证码写好了咋加呢?
UserLoginFormAdmin中

async def get_form(self, request: Request) -> Form:
        form = await super().get_form(request)
        # 添加验证码
        formitem = FormItem(name='verification_code', label='验证码', required=True)
        form.body.append(formitem)

表单是加上了,但是后续的验证码图片引入和刷新就没头绪了。图片引入src=不能直接点击刷新,自定义按钮功能的话,amis手册是直接使用ajax+api就搞定了。但是这里涉及的点:
buttons.append(Action(actionType="ajax", label=_("刷新验证码"), level=LevelEnum.primary))
Action没有api参数,api参数在ActionType.Ajax中,又不知道咋给这两个结合起来。另外就是图片引入涉及前端的重写:

page.body = [
            Html(
                html=f'<div style="display: flex; justify-content: center; align-items: center; margin: 96px 0px 8px;">'
                     f'<img src="/static/site_ico/favicon.png" alt="logo" style="margin-right: 8px; '
                     f'width: 48px;"><span style="font-size: 32px; font-weight: bold;">Amis Site</span></div>'
                     f'<div style="width: 100%; text-align: center; color: rgba(0, 0, 0, 0.45); margin-bottom: 40px;">{desc}</div>'
            ),
            Grid(columns=[{"body": [page.body], "lg": 2, "md": 4, "valign": "middle"}], align="center", valign="middle"),
        ]

不知道咋加在刷新按钮旁边。
求路过的佬给个demo

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions