Skip to content

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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