노코드(Bubble 버블)로 어플 만들기: 로그인 validation

 

😂 나름의 진로에 대한 방황 및 노잼시기를 겪다가 돌아왔습니다.
이제는 확고해졌으니 다시 블로그를 포스팅 해보겠습니다!

 

회원가입 validation(유효성 검사)란?

기본적으로 회원가입을 위해서 필요한 이메일, 비밀번호에는 이 값이 유효한지를 검증하는 "validation"이 필요합니다.

예를 들어 이메일을 입력했을 때, 기존에 가입된 이메일인지 확인하거나
비밀번호는 대소문자,특수문자,숫자가 포함된 8-15자리 문자열인지 확인하는  등이 이러한 유효성 검사에 해당합니다.

그래서 오늘은 기본적인 유효성 검사를 버블에서 어떻게 만드는지 비밀번호를 예시로 들어 차근차근 알아보겠습니다.

 

Apperance에서 기본세팅하기 (front에서 유효성 검사)

input Password 

버블에서 기본적으로 제공하는 Content format을 선택하면, 이메일에는 @가 들어가야 한다던지 그런 기본적인 유효성 검사가 됩니다.
또 이 input의 값이 비어있지 않도록 확인해주는 옵션을 체크하면, input값이 비는 것을 막을 수 있습니다.

 

우선 비밀번호 input창은 만들어져 있다는 가정하에 알아봅시다.

input Password를 선택한 후, Content format은 Password로 지정해주시고

This input should not be empty도 체크해줍니다.

 

 

Button 동의 후 가입완료

비밀번호를 입력하고, 최종적으로 submit을 진행하는 버튼이 있어야겠죠!
이 버튼을 눌렀을 때 어떤 로직을 수행하도록 하려면 workflow를 수정해야 합니다.
validation도 마찬가지로 workflow를 수정해야 합니다.

 

버튼을 선택하고 "Edit workflows"를 눌러줍니다.

아예 워크플로우가 없었다면, "Add workflows"를 눌러주면 됩니다.

 

 

 

워크플로우에서  event,action 수정하기 (Back에서 유효성 검사)

workflow에서 event,action 수정하기 (Back에서 유효성 검사)오늘은 유효성 검사에 대한 글이기 때문에, 다른 부분은 설명을 따로 안하겠습니다!(필요하면 댓글 남겨주세요)
add workflows를 누르면 자동으로, event가 생성될 겁니다.
저는 "동의 후 가입완료"를 클릭하면, 로그인 로직이 수행되도록 짜놓았습니다.

 

step1에서 회원가입이 이뤄지는데, Only when항목에 패스워드에 대한 조건을 걸었습니다.

해석하면, Input Password Sign Up의 값을 Regex(정규식)에 대해 검증을 수행하고,

count가 0보다 크다면 회원가입 로직이 수행되게 했습니다.

 

여기서 쓰인 정규식은 아래와 같습니다.

영문,숫자,특수기호를 조합한 8-15자의 문자열인지를 검증하는 것입니다.

만약 특수문자나 영문,숫자 중에 하나라도 포함되지 않거나 문자열 자릿수가 안 맞으면 count가 0이됩니다.

^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,15}$

 

기본 오류 문구 수정하기

위의 조건을 추가하고, 비밀번호가 유효성 검증에 실패하면 버블에서 기본으로 제공하는 오류메시지가 뜨게 됩니다. 
"we didn't find an account with those login credentials" 라고 뜨는데요.
기본도 좋긴 한데, 커스텀으로 한번 만들어보겠습니다.

 

다시 워크플로우로 돌아가, click here to add an event 를 선택합니다.

Elements> An element has an error running a workflow 를 선택해줍니다.

만약 특정 element에서 오류가 발생하면 어떤 action을 취하게 해주는 event입니다.

 

 

 

저희는 동의 후 가입완료 버튼에서 오류가 발생하기 때문에,

Element로 해당 버튼을 선택해줍니다.

Click here to add an action > Element Actions > show message 를 선택해줍니다.

 

 

( Ui builder에서 Alert를 element로 추가해두고, 숨김처리 해둬야 action에서 show message가 활성화됩니다.)

 

 

Fade in 이런거는 알럿을 얼마나 오래 띄울지 이런옵션이니까 놔두고,

메시지를 수정해봅시다.

저는 비밀번호가 어떤 조건으로 만들어져야 하는지를 적었습니다.

 

 

결과물

: password를 00으로만 넣었더니 해당 알럿이 뜹니다.

 

최종 정리

UI빌더 에서 유효성 검사 가능한 거 기본적으로 넣기 >

워크플로우에서 비밀번호 regex 검증 통과한 경우만 회원가입 로직을 타게 하기>
비밀번호가 잘못 입력되면 알럿을 띄우기>

 

 

제가 까먹지 않으려고 정리하는게 크기도 하고, 저도 배우는 단계라 서툰 부분이 있습니다!
혹시 모르는 거 있으시거나, 내용이 틀린 부분이 있다면 알려주세요ㅎㅎ