[Streamlit] 로그인(user authentication) 기능 넣기

 

요즘 내가 자주 사용하고 있는 Streamlit!

 

빠르게 데이터 어플리케이션을 만들 수 있는

Streamlit 프레임워크에서 로그인 기능(user authentication)을 넣어보도록 하자!

 

 

만약 Streamlit 을 처음 사용해본다면?

https://yeomss.tistory.com/301

[Streamlit] 설치 및 시작하기 + 배포

위 링크를 참고하여 세팅해보자!!

 

 

 

 

 

0. 설치하기

 

사용자 인증에 필요한 양식을 위해 streamlit-authenticator 를 설치하고,

pip install streamlit-authenticator

 

코드에 import 해주자

import streamlit_authenticator as stauth

 

 

1. yaml 파일 생성 & 비밀번호 해싱(Hashing)

 

yaml 파일은 json, xml 파일과 같이 데이터 전송하는데 사용하는 파일,

파일 내부 규칙의 차이(?)가 있다고 한다.

credentials:
  usernames:
    jsmith:
      email: jsmith@gmail.com
      name: John Smith
      password: '123' # To be replaced with hashed password
    rbriggs:
      email: rbriggs@gmail.com
      name: Rebecca Briggs
      password: '456' # To be replaced with hashed password
cookie:
  expiry_days: 30  # 만료일 이라는데, 재인증 기능 필요없으면 0으로 세팅
  key: random_signature_key
  name: random_cookie_name
preauthorized:
  emails:
  - melsby@gmail.com

 

여기서 yaml 파일은 곧,

ID와 PW를 담고 있는 데이터베이스가 되는 것!

 

위와 같은 형식의 yaml 파일을 만들어줘야 하는데,,

비밀번호 해싱 안해주면, 위 코드처럼 코드에 비밀번호가 다 보이겠죠?

 

import 했던 stauth.Hasher를 사용하여,

yaml파일 생성&비밀번호 해싱까지 한번에 해주자!

 

 

yaml 파일 생성하기 귀찮은 분들을 위해

제가 대신 짜드립니다 ㅎㅎ

 

generate_keys.py 파일을 하나 생성해서

이름, ID, PW 리스트로 한번에 넣어놓고 실행하자

import yaml
import streamlit_authenticator as stauth

names = ["오구의모험","로그인테스트"]
usernames = ["오구", "로그인"]
passwords = ["1234","5678"] # yaml 파일 생성하고 비밀번호 지우기!

hashed_passwords = stauth.Hasher(passwords).generate() # 비밀번호 해싱

data = {
    "credentials" : {
        "usernames":{
            usernames[0]:{
                "name":names[0],
                "password":hashed_passwords[0]
                },
            usernames[1]:{
                "name":names[1],
                "password":hashed_passwords[1]
                }            
            }
    },
    "cookie": {
        "expiry_days" : 0, # 만료일, 재인증 기능 필요없으면 0으로 세팅
        "key": "some_signature_key",
        "name" : "some_cookie_name"
    },
    "preauthorized" : {
        "emails" : [
            "melsby@gmail.com"
        ]
    }
}

with open('config.yaml','w') as file:
    yaml.dump(data, file, default_flow_style=False)

물론, 파일 실행하고 나서 password 부분 지워주자!

 

지우지 않고 github에 업로드할 때,

.gitignore 사용해서 generate_keys.py 파일은 업로드에서 제외해줘도 가능!

 

 

 

생성된 파일 확인(config.yaml)

이름, ID, PW 다 해싱 되어있는지 확인

 

 

2. 로그인 위젯 생성 및 적용

 

해당 부분은 로그인 기능이 필요한 메인 페이지에 작성하도록 하자

import streamlit as st
import yaml

with open('config.yaml') as file:
    config = yaml.load(file, Loader=stauth.SafeLoader)

사용할 모듈들 import 해주고 config.yaml 파일을 불러오자

 

streamlit 블로그에서는 SafeLoader로만 적혀있는데,

Loader에는 맨 처음 import 했던 stauth.SafeLoader를 사용

 

 

이제 거의 다왔다!

## yaml 파일 데이터로 객체 생성
authenticator = stauth.Authenticate(
    config['credentials'],
    config['cookie']['name'],
    config['cookie']['key'],
    config['cookie']['expiry_days'],
    config['preauthorized']
)

## 로그인 위젯 렌더링
## log(in/out)(로그인 위젯 문구, 버튼 위치)
## 버튼 위치 = "main" or "sidebar"
name, authentication_status, username = authenticator.login("Login","main")

# authentication_status : 인증 상태 (실패=>False, 값없음=>None, 성공=>True)
if authentication_status == False:
    st.error("Username/password is incorrect")

if authentication_status == None:
    st.warning("Please enter your username and password")

if authentication_status:
    authenticator.logout("Logout","sidebar")
    st.sidebar.title(f"Welcome {name}")
    
    ## 로그인 후 기능들 작성 ##

 

받아온 데이터로 객체를 만들어 로그인 위젯에 렌더링 해준다.

login, logout 위젯이 있는데

 

첫 번째 파라미터는 위젯에 표시할 문구

두 번째 파라미터는 위젯 넣을 위치를 main, sidebar 중에 고른다. 

 

마지막으로 인증 상태에 따라

예외처리를 해주면 끝!

 

 

3. 결과

 

왼쪽 로그인 페이지에서 ID, PW를 입력하면,

오른쪽 사이드바에서 로그아웃 위젯과 함께 메인페이지에는 작성한 코드들이 나타난다!

 

DB에 연동하지 않아도

로그인 페이지를 구현할 수 있는게 장점이니

꼭 한번 구현해보자!!!

 

 

 

 

 

 

Streamlit 공식 블로그에 업로드 된 글을 참고 ▽▽

https://blog.streamlit.io/streamlit-authenticator-part-1-adding-an-authentication-component-to-your-app/

Streamlit-Authenticator, Part 1: Adding an authentication component to your app

 

 

※ 유튜브 영상, 공식 블로그 글도 있지만

영어 울렁증이 있는 여러분들을 위해,

그 울렁증을 극복해가며 힘들게 구현한 나의 코드를 남기기 위해,

자잘한 오류 수정하여 적어봅니다 ※