본문 바로가기
앱인벤터/앱인벤터 코딩따라하기

앱인벤터에서 자바스크립트를 사용하여 Firebase 인증-설계편

by flycoding 2022. 11. 17.
반응형

앱인벤터에서 자바스크립트를 사용하여 Firebase 인증-설계편

 

앱인벤터 홈페이지에 나와 있는 튜터리얼을 참고해서 작성한 것이다. 튜터리얼의 목적은 앱인벤터의 많은 블록은 이해하고 활용할 수 있도록 도와주는 프로그램들로 구성되어 있다.

 

App Inventor에서 제공하는 Firebase 구성 요소는 특히 새 데이터로 앱을 여러 개 업데이트해야 할 때 매우 유용하다. Firebase를 데이터스토어로 사용하는 것 외에도 앱의 웹 사이트 인증을 활용하여 사용자 관리 요구사항을 처리할 수 있다. 즉, 가입, 이메일 확인 및 로그인을 의미한다. 또한 모든 사용자 정보가 Firebase 서버에 저장 및 유지 관리되므로 사용자 인증의 가장 어려운 문제가 해결된다.

 

Firebase는 신규 사용자와 기존 사용자를 설정하고 로그인하는 데 필요한 모든 단계를 처리하는 자바스크립트 코드를 제공한다. 자세한 내용은 여기를 참조하십시오. 이 자바스크립트 코드는 정적 HTML 파일에 포함될 수 있으며, 이를 앱 Inventor로 생성한 앱에 추가할 수 있다. 웹 뷰어 구성 요소를 통합하여 이를 처리하고 앱 Inventor가 실행 중인 자바스크립트 내부를 볼 수 있도록 몇 가지 간단한 수정을 수행하면 된다. 이 모든 것은 다음 절에서 설명될 것이다. 그러나 먼저 Firebase 계정을 설정하고 사용자가 전자 메일과 암호를 사용하여 인증할 수 있도록 설정해야 한다.

 

자, 이제 시작해보자...

 

Email/암호 인증을 사용하기 위한 설정

Firebase 계정이 있으면 데이터스토어를 설정하는 것이 매우 쉽다. Firebase 인증을 생성하고 로그인하면 Firebase 인증을 사용하는 데 필요한 단계는 4단계뿐이다.

 

단계1)

Firebase 인증을 사용하려면 먼저 프로젝트를 생성해야 gks다. 이 작업은 https://console.firebase.google.com/에서 완료할 수 있다. Add project 버튼을 클릭하기만 하면 Create a project 대화상자가 나타난다. 대화 상자 필드를 완료한 다음 CREATE PROJECT 버튼을 클릭한다.

 

단계1-1) Firebase 신규프로젝트 생성단계

앱인벤터 SimpleFirebaseAuthenticator  Firebase 신규프로젝트 생성과정 1-1

 

단계1-2) Firebase 프로젝트를 위한 Google 애널리틱스

앱인벤터 SimpleFirebaseAuthenticator  Firebase 신규프로젝트 생성과정 1-2

 

단계1-3) Google 애널리틱 구성

Google 애널리틱 계정 선택 혹은 만들기

 

앱인벤터 SimpleFirebaseAuthenticator  Firebase 신규프로젝트 생성과정 1-3

 

완료되면 아래와 같은 화면이 나온다.

앱인벤터 SimpleFirebaseAuthenticator  Firebase 신규프로젝트 생성과정 1단계 완료 화면

 

단계2)

아래 이미지에 표시된 Add Firebase to your web app 버튼을 클릭합니다.

단계2-1) 웹앱의 닉네임을 등록한다.

앱인벤터 SimpleFirebaseAuthenticator Firebase에 웹앱 등록 2-1

 

 

단계2-2) 웹앱에 Firebase 추가

웹 앱에 Firebase 추가 대화상자는 App Inventor 앱에서 Firebase 웹 사이트 보안을 사용하는 데 필요한 모든 정보를 보여줍니다. 이 정보에는 다음이 포함됩니다.

  • apiKey
  • databaseURL
  • storageBucket
  • messageSenderId

이러한 값은 쉼표로 구분된 키:값 쌍으로 표시되며, 물결 괄호 {}로 둘러싸여 있다. 이 정보는 App Inventor Blocks Editor에서 FirebaseCredentials 변수 값으로 사용된다.

앱인벤터 SimpleFirebaseAuthenticator Firebase에 웹앱 등록 2-2

참고: authDomain 및 projectId 키 값 쌍은 선택 사항이므로 원하는 경우 삭제할 수 있다. 그러나 다음과 같이 모든 키와 값 주위에 있는 따옴표와 주변 괄호를 기억해야 한다.

 

모든 키/값 쌍에는 따옴표가 있어야 한다. Firebase 창에서 복사/붙여넣기를 하는 경우 따옴표를 추가해야 할 수도 있다. 이 모든 정보를 한 줄로 압축할 수 있으며 잘 작동합니다.

 

단계3)

마지막으로 Firebase Authentication 페이지에서 Email/Password Sign-In 메서드를 활성화해야 한다. 여기에는 인증 메뉴 옵션(왼쪽)을 선택한 다음 아래와 같이 전자 메일/암호 행 끝에 있는 연필 아이콘을 클릭하면 된다.

 

앱인벤터 simplefirebaseauthenticator 인증절차 3-1

 

저장 버튼을 클릭하면 아래와 같은 화면이 나온다

 

앱인벤터 simplefirebaseauthenticator 인증절차 3-2

 

전자 메일/암호 인증을 활성화한 후 저장을 클릭하면 Firebase가 웹 사이트와 App Inventor 앱에서 Firebase를 사용할 수 있다. Authenticator.html 페이지(아래)를 통해 Firebase 자체 보안 기능과 성능을 활용할 수 있다.

 

 

Firebase Website Authentication HTML file 편집(FirebaseAuthenticator.html)

아래 html 예제 파일은 거의 원본 파일과 유사한 복사본이다. 

 변경된 내용은 아래의 노란색으로 강조 표시됩니다. 변경이 필요한 이유는 웹 뷰어 구성 요소가 웹 페이지 내에서 실행될 때 자바스크립트와 통신할 수 있는 특별한 자바스크립트만을 이해하기 때문이다. 웹 뷰어 내부에서 Firebases 웹 사이트 인증을 사용하여 앱 Inventor 앱은 사용자에게 앱이 실제 웹 사이트인 것처럼 로그인 페이지를 보여줄 수 있으며, 사용자가 로그인하면 웹 뷰어는 사용자가 인증되었는지 여부를 앱에 알릴 수 있다.

 

firebaseauthenticator.html
0.01MB

 

 

 

Firebase Website authentication을 사용하는 앱인벤터 앱의 디자인

Firebase 웹사이트 인증을 위한 앱인벤터 화면 디자인은 매우 단순하다. 총 3개의 컴포넌트는 사용한다. 웹뷰어, 알림, 시계 컴포넌트를 사용한다. 디자인은 아래 그림과 같다.

 

앱인벤터 SimpleFirebaseAuthenticator 화면 디자인

 

앱인벤터 SimpleFirebaseAuthenticator 앱 컴포넌트

앱인벤터 구성 요소는 디자이너 창의 왼쪽 팔레트 제목에 있다. 컴포넌트는 안드로이드 폰이나 아이폰에서 앱을 만들 때 사용하는 기본 요소이다. 화면에 버튼과 레이블 컴포넌트를 활용하여 화면을 구성하고 앱을 만들려고 한다.

 

컴포넌트 리스트

. 웹뷰어컴포넌트 :

  - FirebaseAuthenticator.html 파일을 로드하고,

  - Firebase website의 인증 시스템을 접근에 필요한 자바 스크립트를 사용한다.

. 알림 컴포넌트 :

  - 로그인 과정의 상태에 관한 정보를 사용자에게 메시지를 알려주기 위해 사용한다. 

  - 사용자가 성공적으로 로그인이 되었을 때 알려준다.

. 시계 컴포넌트 :

  - Firebase 로그인을 처리하는 WebViewers Javascript의 상태를 주기적으로 확인한다.

 

 

아래 그림은 앱이벤터로 작성한 SimpleFirebaseAuthenticator 앱의 디자인과 사용된 컴포넌트이다.

앱인벤터 SimpleFirebaseAuthenticator 화면 디자인

 

웹뷰어, 알림, 시계 컴포넌트 설정값 설정하기

간단하고 단순한 앱이라 각 컴포넌트의 속성값을 별도로 설정하지 않는다.

지금까지 SimpleFirebaseAuthenticator 앱의 설계편을 작성하였다. 다음 글에 앱인벤터 SimpleFirebaseAuthenticator 앱 코딩편을 꼭 참조하기 바란다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.

 

반응형

댓글