5. 사용자 SNS로그인

약속잡기를 여러 사람들이 자신의 용도로 사용할 수 있도록 사용자 로그인을 추가해 봅니다. 여러 사용자가 사용을 하기 위해서는 사용자별 구분을 위한 (SNS)로그인과 또 각 사용자 별로 자신의 약속만 보이게 하는 구분이 필요합니다.

아래 목차를 따라서 진행 해 보세요.

1. 앱이 처음 시작할 때 로그인이 되어 있지 않을 경우 로그인을 시키는 이벤트를 추가합니다. 이를 위해 기존에 앱이 시작할 때 실행하는 약속리스트 이벤트의 맨 앞에 로그인 스크립트를 추가합니다.

   

   1. Event 탭을 선택합니다.

   2. 약속리스트 이벤트를 선택합니다.

   3. 스크립트를 추가하고

   4. 스크립트를 Drag 해서 맨 위로 옮깁니다.

   5. 스크립트에 다음 코드를 붙여넙니다.

if(!f.User.isLogin()){   //사용자가 로그인이 되어 있지 않다면
    f.User.snsLogin();   //SNSLogin 실행
    f.Event().break();   //이벤트 종료(뒤에 약속리스트를 가져오는 서비스를 하지 않고 종료)
}

SNS 로그인에 대 더 자세한 설명은 f.User 명세서에서 확인하실 수 있습니다.

1. 로그아웃 버튼에 로그아웃 이벤트를 추가합니다.

   
2. 로그아웃 이벤트에 자동함수로 로그아웃을 추가합니다.

   
3. 로그인 한 사용자의 이름이 나오도록 아래 영역을 변경합니다. “안녕하세요, 이은진님….” 선택

   
4. 함수를 이용해서 사용자 명을 가져옵니다.

   1. 텍스트에서 "이은진"영역을 삭제한 후

   2. 우측 사용자명 을 클릭하여 아래 스크립트 처럼 나오도록 합니다.

      

      
5. 기존의 약속리스트가 사용자별로 조회하도록 하기 위해서 사용자 데이터를 보내는 데이터에 추가합니다.

   

   1. 보내는데이터 > 사용자데이터 에 fBaseUserID 추가

   2. 고급설정 클릭

6. 서비스에도 검색 옵션을 추가합니다.

   

   1. 검색 체크

   2. 조건 내용 채워넣기

      • 필드명 : fBaseUserID

      • 연산자 : ==

      • 필드 값 콜렉션키 : fBaseUserID

7. 이제 디버깅을 통해서 로그인 기능이 추가 되었는지 확인해봅니다. 우측 상단의 초록색 버튼으로 디버깅 실행

   
8. 로그인여부를 해지 하여서 실제 사용자가 비로그인 상태로 접근했을 때의 상태를 재현해 봅니다. - 상단의 톱니버튼을 눌러서 로그인 여부를 해지

   
9. 디버거에서 SNS 로그인 시에 두가지 상황을 선택하여서 실행 할 수 있습니다. 이미 선택된 사용자를 로그인 된 상태로 바꾸거나, SNS로 새롭게 사용자를 등록하는 방법을 선택할 수 있습니다. - 새 사용자 추가 선택

   
10. SNS로그인 합니다.

11. 로그인이 완료되면 새로 가입한 사용자로 변경 합니다.

    1. 좌측 상단의 디버거 상단 변경 버튼을 클릭

       
    2. SNS로그인으로 새로 등록된 사용자를 선택

       
12. 사용자를 변경함에 따라 해당 사용자로 등록한 약속만 조회되는지 확인합니다.