Streamlit Captcha integration?

[Klaudioz]

Is any streamlit component to add a captcha ?

For example, I’m using from streamlit_authenticator import Authenticate for authentication.

If not, can I use just regular Python to accomplish that?

[Caroline]

Hey @Klaudioz,

I’m not aware of an existing Captcha component. It looks like you might be able to add a Captcha with the captcha library, although I haven’t tested it with Streamlit.

[alessandro_ciciarell]

Hi everyone🤗. I find this a very interesting theme after having bots storm my streamlit apps.

I would like to create a streamlit_captcha component but even though I know streamlit very well I have never created a component and I have to get the hang of it😪

However at the moment I have found a solution that uses SESSIONS and the CAPTCHA library to create a simple control that also works in the cloud.

MY SOLUTION

# pip install captcha streamlit


# import library
import streamlit as st
from captcha.image import ImageCaptcha
import random, string


# define the costant
length_captcha = 4
width = 200
height = 150

# define the function for the captcha control
def captcha_control():
    #control if the captcha is correct
    if 'controllo' not in st.session_state or st.session_state['controllo'] == False:
        st.title("Captcha Control on Streamlit🤗")
        
        # define the session state for control if the captcha is correct
        st.session_state['controllo'] = False
        col1, col2 = st.columns(2)
        
        # define the session state for the captcha text because it doesn't change during refreshes 
        if 'Captcha' not in st.session_state:
                st.session_state['Captcha'] = ''.join(random.choices(string.ascii_uppercase + string.digits, k=length_captcha))
        print("the captcha is: ", st.session_state['Captcha'])
        
        #setup the captcha widget
        image = ImageCaptcha(width=width, height=height)
        data = image.generate(st.session_state['Captcha'])
        col1.image(data)
        capta2_text = col2.text_area('Enter captcha text', height=30)
        
        
        if st.button("Verify the code"):
            print(capta2_text, st.session_state['Captcha'])
            capta2_text = capta2_text.replace(" ", "")
            # if the captcha is correct, the controllo session state is set to True
            if st.session_state['Captcha'].lower() == capta2_text.lower().strip():
                del st.session_state['Captcha']
                col1.empty()
                col2.empty()
                st.session_state['controllo'] = True
                st.experimental_rerun() 
            else:
                # if the captcha is wrong, the controllo session state is set to False and the captcha is regenerated
                st.error("🚨 Il codice captcha è errato, riprova")
                del st.session_state['Captcha']
                del st.session_state['controllo']
                st.experimental_rerun()
        else:
            #wait for the button click
            st.stop()
        
        
        
def your_main():
    st.title("Congratulation you are not a robot🤖")
    st.write("You can use this app without problems")
    
    # ADD HERE YOUR CODE
    
    if st.button("Go back to the main app"):
        del st.session_state['controllo']
        st.experimental_rerun()
       
       
# WORK LIKE MULTIPAGE APP         
if 'controllo' not in st.session_state or st.session_state['controllo'] == False:
    captcha_control()
else:
    your_main()

Streamlit app demo that implements cloud captcha and works great : https://rebrand.ly/CHATBOT-IAITALIA

The code starts with importing the necessary libraries, including Streamlit for building the app and ImageCaptcha for generating the captcha image. The constant values for captcha length, width, and height are defined.

Then, a function named captcha_control is defined to create the captcha widget and control the captcha verification process. The function first checks whether the controllo session state exists or is False. If it is not found or False, the captcha control process is started.

Inside the captcha_control function, a Streamlit title is displayed, and the controllo session state is set to False. Two columns are created to show the captcha image and text area for entering the captcha code. If the Captcha session state does not exist, a new captcha code is generated using a combination of uppercase letters and digits.

Next, the captcha image is generated using the ImageCaptcha library and displayed in the left column. The entered captcha text is captured in the text area in the right column. If the “Verify the code” button is clicked, the entered captcha text is compared with the Captcha session state. If they match, the controllo session state is set to True, and the app is rerun to switch to the your_main function. Otherwise, an error message is displayed, and the Captcha and controllo session states are deleted, and the app is rerun to restart the captcha control process.

If the “Verify the code” button is not clicked, the app waits for the user to enter the captcha text.

The your_main function is called when the controllo session state is True. It displays a congratulatory message and performs the main app’s functionality. If the “Go back to the main app” button is clicked, the controllo and Captcha session states are deleted, and the app is rerun to restart the captcha control process.

Finally, the code checks whether the controllo session state exists or is False. If it is not found or False, the captcha_control function is called. Otherwise, the your_main function is called to display the main app functionality. This process works like a multipage app, where the captcha_control function is the first page, and the your_main function is the second page.