Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zeroChen00 opened this issue Aug 27, 2024 · 0 comments
Open

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

zeroChen00 opened this issue Aug 27, 2024 · 0 comments

Comments

@zeroChen00
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant