안녕하세요. 이지이지입니다.
이번 포스팅은 앱인벤터에서 회원가입 및 로그인 만들기 마지막 시간으로 블록코딩을 해보도록 하겠습니다.
먼저 소스파일을 첨부해드리니, 참고하면서 포스팅을 읽기 바랍니다.
| 회원가입 블록코딩 |
다음 이미지는 회원가입 화면에 대한 전체적인 블록코딩입니다.
이제 한 덩어리씩 한 줄 한 줄 차례대로 살펴보도록 하겠습니다.
1. [btn_Double] 버튼을 클릭했을 때,
2. 만약 txt_Email에 입력된 값이 공백이라면
3. 이메일을 입력하지 않았다라는 Notifier1을 띄워라.
<br>은 한 줄 띄우라는 코드입니다.
4. 만약 txt_Email에 입력된 값이 공백이 아니라면
Web_Double 컴포넌트의 Url주소를 우측의 Join으로 연결된 텍스트 값으로 하라.
텍스트박스 윗부분에는 다음을 그대로 써주시고 https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=
아래부분에는 여러분의 파이어베이스 API키를 입력합니다.
5. 4번에 지정된 Url로 우측의 Join으로 연결된 텍스트 정보를 보내라.
(비밀번호를 4자리로하면, 분명 오류가 납니다. 여기서 네 자리로 설정한 이유는 이 블록은 이메일 중복만 체크하는 것이 목적인데 제대로 된 값을 넣을 경우 바로 회원가입이 되어 버리기 때문입니다. 그래서 비밀번호는 일부러 틀리게 넣고, 이메일 중복여부만 체크하고자 한 것입니다.)
※ 4~5번 블록은 첫 번째 과정에서 설명드렸듯 우리는 파이어베이스 사용자 인증을 사용할텐데,
이를 위해 Firebase Auth REST API를 사용한 것입니다.
이 포스팅에서는 회원가입과 로그인 이메일인증까지만 다루므로,
여러분이 이메일변경이라던가, 비밀번호변경 등을 스스로 코딩하기 위해서는
반드시 Firebase Auth REST API에 대한 이해가 조금은 필요합니다.
그래서 다음 코딩블록에 대한 설명에 앞서
Firebase Auth REST API에 대해 필수적인 부분만 알아보고 가겠습니다.
먼저 다음을 클릭하여 Firebase Auth REST API 설명화면에 접속합니다.
Firebase 인증 REST API
firebase.ml.naturallanguage.translate
firebase.google.com
접속 후 좌측의 REST 부분에서는 [Authentication and User Management]를 클릭 후
우측의 API Usage 부분에서는 [Sign up with email / password]를 클릭합니다.
(앞으로 여러분이 스스로 하실 때에는 우측의 API Usage 부분에서 필요한 부분을 클릭하여 참고하시면 됩니다.)
가급적 상단의 언어는 English로 해주시기 바랍니다. (속성 이름을 영어로 넣어서 넘겨야 하기 때문)
각 필수적인 항목에 대해서 설명을 드리겠습니다.
Method: POST
: 정보를 POST방식으로 넘긴다는 것입니다.
그래서 위의 블록코딩을 보면 call Web_Double.PostText블록을 사용한 것입니다.
Endpoint
: 정보를 보낼 주소라고 생각하면 됩니다. 복사해서 사용하면 됩니다.
위의 블록코딩에서 4에 해당되는 내용입니다.
[API_KEY]부분에는 여러분의 파이어베이스 프로젝트의 웹 API키를 입력하면 됩니다.
(이해가 안되시는 분은 회원가입 및 로그인 2번째 포스팅을 참고하시기 바랍니다.)
앱인벤터 회원가입 및 로그인 만들기(feat. 이메일 인증, 파이어베이스 DB) #2
안녕하세요. 이지이지입니다. 앱인벤터 회원가입 및 로그인 만들기 두 번째 시간으로 화면 구성을 해보도록 하겠습니다. ※ 참고: 화면의 크기 관계로 모든 컴포넌트(component)의 이름을 이미지에
egeasy.tistory.com
Request Body Payload:
표의 정보를 실어서 넘기라는 것입니다.
위의 블록코딩에서 5에 해당되는 내용입니다.
회원가입시에는 위의 표에서 보이듯 email, password, returnSecureToken의 정보를 넘겨야 합니다.
이 부분의 블록코딩만 크게 보면
password와 return~ 앞에 "&"가 있는 점을 유의하시기 바랍니다.
그리고 returnSecureToken은 위의 표에서 보면 "Should always be true."라고 되어 있기 때문에
따로 입력받을 필요없이 항상 블록코딩에서 바로 true로 써주어야 합니다.
Response Payload:
우리가 정보를 넘겼을 때, Firebase에서 우리에게 돌려주는 정보입니다.
idToken과 localID가 주로 필요합니다.
Common error codes:
흔히 발생하는 오류들의 예입니다.
이는 보통 사용자가 정보를 잘못 입력하는 경우로,
개발자가 이 경우에 대비해 알림창을 띄우는 등의 블록코딩을 해 둘 필요가 있습니다.
여기까지 회원가입에 필요한 REST API에 대한 설명이었습니다.
우측의 다른 부분 같은 경우 필요할 때, 살펴보면 되겠습니다.
다음 블록코딩 설명으로 넘어가겠습니다.
위의 블록은 맨 처음 블록의 5에서 파이어베이스 사용자 인증 서버로 데이터를 보낸 후
서버로부터 그 처리값을 받아왔을 때 실행되는 블록입니다.
1. [Web_Dobule] 컴포넌트가 텍스트 정보를 받았을 때
2. listData라는 지역변수를 빈 리스트로 만들어라
3. listData변수 값을 파이어베이스 사용자 인증 서버에서 받은 responseContent값을 입력해라.
(call Webdouble.JsonTextDecode: 파이어베이스 사용자 서버에서 받아오는 text 정보는 json형식으로 받아오게 되는데, 이를 앱인벤터 형식으로 바꾸어 listData에 저장하게 됩니다.)
4. returnMsg라는 지역변수에 listData에서 key를 error하는 값을 저장하고, 만약에 error라는 키가 없을 경우 returnMsg에 "not found"를 입력해라.
(ex. error: INVALID PASSWORD가 있을 경우 key는 error, 값은 INVALID PASSWORD라서, returnMsg에는 INVALID PASSWORD가 저장됩니다.)
5. 만약 responseContent에 "WEAK_PASSWORD"가 포함되어 있을 경우
(6). lbl.Return컴포넌트의 텍스트를 listData로 표시해라.
(6의 경우 에러가 났을 경우에 보여지는 메시지를 확인함으로써, 메시지가 어떻게 표현되는지 여러분에게 보여주고자 삽입한 것입니다. 실제 코딩에서는 필요없는 값으로 테스트 후 삭제하시면 됩니다.)
7. 알림창으로 사용가능한 이메일이라는 것을 보여주어라.
(왜 WEAK_PASSWORD인데 사용가능한 이메일이냐면, 맨 처음 블록 5에서 설명했듯이, 이메일 중복여부만 체크하기 위해서 비밀번호는 임시로 네 자리로 설정했기 때문입니다.)
8. responseContent에 "INVALID_EMAIL"이 포함되어 있을 경우
9. 올바른 이메일 형식이 아니라는 알림창을 보여주어라.
10. 이메일이 잘못되었으므로 사용자의 편의를 위해 txt_Email컴포넌트가 자동선택되게 하라.
11. responseContent에 "EMAIL_EXISTS"가 포함되어 있을 경우
12. 이미 존재하는 이메일이라는 알림창을 띄우라.
13. 이메일이 잘못되었으므로 사용자의 편의를 위해 txt_Email컴포넌트가 자동선택되게 하라.
1. 성별 정보를 저장하기 위해 전역변수 gender를 만들고 공백을 입력해둡니다.
2. chk_Man컴포넌트 정보가 변경되었을 때
3. 만약 chk_Man에 체크가 된다면
4. chk_Woman에 체크는 해제
5. 변수 gender에 "남자"를 저장
6. chk_Man에 체크가 되어 있다가 해제되었다면
7. 변수 gender에 "공백"을 저장
chk_Woman의 경우 chk_Man과 블록이 거의 같으므로 설명을 생략하도록 하겠습니다.
1. [회원가입] 버튼을 클릭했을 때
2. 만약 txt_Password1의 값이 비워져 있다면
3. 비밀번호를 입력해달라는 알림창을 띄워라.
4. 사용자의 편의를 위해 txt_Password1이 선택되도록 하라.
5~7. 2~4와 동일
8. 만약 비밀번호 입력과 비밀번호 확인의 값이 다르다면
9. 비밀번호가 일치하지 않는다는 알림창을 띄워라.
10. 사용자의 편의를 위해 txt_Password1이 선택되도록 하라.
11. 2~10의 경우가 아니라면(입력값에 오류가 없다면)
12. Web_Join컴포넌트의 URL주소를 우측의 Join으로 연결된 텍스트 값으로 하라.
(Firebase Auth REST API → Sign up with email / password의 Endpoint와 사용자 파이어베이스 프로젝트의 웹 API값을 입력합니다. 맨 처음 블록코딩 설명 참조)
텍스트박스 윗부분에는 다음을 그대로 써주시고 https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=
아래부분에는 여러분의 파이어베이스 API키를 입력합니다.
13. 12번에 지정된 Url로 우측의 Join으로 연결된 텍스트 정보를 보내라.
위의 블록은 바로 위의 블록의 13에서 파이어베이스 사용자 인증 서버로 데이터를 보낸 후
서버로부터 그 처리값을 받아왔을 때 실행되는 블록입니다.
1. Web_Join컴포넌트가 파이어베이스 사용자 인증 서버로부터 텍스트 정보를 받았을 때
2. 지역변수 listData를 공백 리스트로 지정하라.
3. 지역변수 listData에 파이어베이스 사용자 인증 서버로부터 들어온 responseContent를 저장하라.
4. 지역변수 returnMsg에 listData에서 키가 error인 값을 저장하라.
만약 error가 없다면 returnMsg에 "not found"를 저장하라.
5. 만약 returnMsg값이 "not found"라면(에러가 없다면)
6. 지역변수 uid에 listData에서 키가 localId의 값을 저장하라.
만약 localId 키가 없다면 "not found"로 저장하라.
7. 파이어베이스의 ProjectBucket을 User_Data/uid값으로 하라.
※ 파이어베이스의 ProjectBucket은 쉽게 폴더 정도로 생각하면 됩니다.
회원가입을 했을 때 상위 폴더 User_Data에 하위 폴더 uid를 생성하는 것입니다.
uid는 파이어베이스를 통해 회원가입을 했을 때 사용자가 받게 되는 고유 ID정도로 생각하시면 됩니다.
8. 파이어베이스 DB에 값을 저장하는데 tag는 gender로 값은 변수 gender에 입력된 값을 저장하라.
※ tag는 항목으로, valueToStore는 그 항목에 저장할 값으로 생각하시면 됩니다.
위 처럼 회원가입을 했을 때, 실제 파이어베이스에 저장된 값을 보면 다음과 같은 구조를 가지게 됩니다.
9. 이메일인증 메일을 보내기 위해 Web_SendVeri컴포넌의 URL 값을 우측의 Join으로 연결된 텍스트로 하라.
(Firebase Auth REST API → Send email verification의 Endpoint와 사용자 파이어베이스 프로젝트의 웹 API값을 입력합니다. 맨 처음 블록코딩 설명 참조)
텍스트박스 윗부분에는 다음을 그대로 써주시고 https://identitytoolkit.googleapis.com/v1/accounts:sendOobCode?key=
아래부분에는 여러분의 파이어베이스 API키를 입력합니다.
10. 파이어베이스 사용자 인증서버로 우측의 정보를 보내라.
(Firebase Auth REST API → Send email verification의 Request Body Payload에 필요한 정보를 입력합니다. 맨 처음 블록코딩 설명 참조)
11. 회원가입이 완료되었다는 것과 이메일 인증을 해달라는 알림창을 띄워라.
(12). 회원가입이 성공했을 때 파이어베이스 사용자 인증서버로 부터 오는 메시지를 확인하기 위한 레이블입니다. 참고하시고, 추후 삭제합니다.
13~21. 오류처리
이제 회원가입의 블록코딩은 모두 끝났습니다.
다음으로 로그인 화면의 블록코딩을 해보도록 하겠습니다.
| 로그인 블록코딩 |
먼저 로그인을 위한 전체 블록코딩입니다.
이제 각 블록별 설명입니다.
1. [회원가입] 버튼을 클릭했을 때, Screen1(회원가입 화면)을 띄워라.
1. [로그인] 버튼을 클릭했을 때
2~7. 오류처리
8. Web_Login컴포넌트의 Url을 우측의 Join으로 연결된 텍스트로 지정하라.
(Firebase Auth REST API → Sign in with email / password의 Endpoint와 사용자 파이어베이스 프로젝트의 웹 API값을 입력합니다. 맨 처음 블록코딩 설명 참조)
9. 파이어베이스 사용자 인증서버로 우측의 정보를 보내라.
(Firebase Auth REST API → Sign in with email / password의 Request Body Payload에 필요한 정보를 입력합니다. 맨 처음 블록코딩 설명 참조)
1. Web_Login 컴포넌트가 파이어베이스 사용자 인증 서버로부터 정보를 받았을 때
2. 지역변수 listData에 공백리스트를 저장하라.
3. 지역변수 listData에 파이어베이스 사용자 인증 서버로부터 받은 responseContent값을 저장하라.
4. 지역변수 returnMsg에 listData에서 key가 error인 값을 저장하라.
만약 error가 없다면 "not found"를 저장하라.
5. 만약 returnMsg에 저장된 값이 "not found"가 아니라면(에러가 없다면)
6. Web_Email 컴포넌트의 URL 주소를 우측의 Join으로 연결된 텍스트 값으로 하라.
(Firebase Auth REST API → Get User Data의 Endpoint와 사용자 파이어베이스 프로젝트의 웹 API값을 입력합니다. 맨 처음 블록코딩 설명 참조)
7. 파이어베이스 사용자 인증서버로 우측의 정보를 보내라.
(Firebase Auth REST API → Get User Data의 Request Body Payload에 필요한 정보를 입력합니다. 맨 처음 블록코딩 설명 참조)
8~11. 오류처리
1. Web_Email 컴포넌트가 파이어베이스 사용자 인증 서버로부터 정보를 받았을 때
2. 지역변수 listData에 공백리스트를 저장하라.
3. 지역변수 listData에 파이어베이스 사용자 인증 서버로부터 받은 resoponseContent 값을 저장하라.
※ 여기서는 사실 2~3부분은 쓸모가 없습니다. 계속 붙여넣다 보니까 들어가 버렸네요
4. 지역변수 returnMsg에 변수 listData에 key가 error인 값을 저장하라.
만약 에러가 없다면 "not found"로 저장하라.
5. 만약 resoponseContent에 "emailVerified:false"가 포함되어 있다면
6. 이메일 인증이 완료되지 않았다는 알림창을 띄워라.
7. 만약 resoponseContent에 "emailVerified:false"가 포함되어 있지 않다면(이메일 인증이 완료된 경우) 로그인에 성공했다는 알림창을 띄워라.
8. 만약 자동로그인에 체크가 되어 있다면
9~11. 사용자 휴대폰 TinyDB1에 자동로그인을 위한 정보를 저장하라.
12~14. 만약 자동로그인체 체크가 해제되어 있다면 사용자 휴대폰 TinyDB1에 자동로그인을 위한 정보를 삭제하라.
이상 앱인벤터 회원가입 및 로그인 만들기를 마치겠습니다.
참고로 javascript를 통해 좀 더 전문적인 인증기능을 사용하고자 한다면 다음 링크를 참고하도록 하세요~
Firebase Authentication in App Inventor Using Javascript
This tutorial is written by MIT Master Trainer Rich Interdonato. The Firebase component that is provided by App Inventor is super useful, especially when you need to update any number of apps with fresh data. In addition to using Firebase as a datastore, y
appinventor.mit.edu
댓글