Ionic으로 Back4App을 활용한 로그인 인터페이스 구현하기

ionic 프레임워크 프로젝트에 로그인 화면 추가하는 방법 소개 이 섹션에서는 ionic 앱에 페이지를 생성하고, 회원가입, 로그인 및 로그아웃을 구현하는 방법을 배웁니다 이렇게 보일 것입니다 전제 조건 이 빠른 시작을 완료하려면 다음이 필요합니다 visual studio code (또는 원하는 웹 ide) ionic framework back4app에서 생성된 앱 새 parse 앱 튜토리얼 을 따라 back4app에서 parse 앱을 만드는 방법을 배우세요 언제든지 이 튜토리얼로 구축된 전체 ionic 프로젝트에 접근할 수 있습니다 github 리포지토리 1 parse sdk 설치 기존 ionic 프로젝트가 있다고 가정할 때, 가장 먼저 해야 할 일은 parse sdk를 설치하는 것입니다 다음 명령어를 실행하여 설치할 수 있습니다 $ npm install parse 2 앱의 자격 증명 설정 당신의 app component ts app component ts , parse parse 를 가져오고 back4app parse 서버에 대한 연결을 초기화합니다 app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; 키를 찾는 방법을 모른다면, 첫 번째 ionic 튜토리얼을 확인하세요 템플릿에서 시작하기 3 로그인 페이지 만들기 이제 로그인 페이지를 만들어 보겠습니다 다행히도 ionic이 모든 것을 처리해 줍니다 우리가 해야 할 일은 다음 명령어를 실행하는 것입니다 $ ionic generate page login 이 페이지 뷰에서는 사용자 이름 사용자 이름 과 비밀번호 비밀번호 입력란과 회원가입 및 로그인 버튼 두 개를 추가해야 합니다 login html 1 insert your credentials 2 3 4 username 5 6 7 8 9 password 10 11 12 13 14 15 sign up 16 17 18 19 sign in 20 21 이제 signin() signin() 및 signup() signup() 메서드를 구현해 보겠습니다 이는 우리의 로그인 로그인 뷰에서 언급되었습니다 login ts 1 signup() { 2 parse user signup(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 9 this toastctrl create({ 10 message 'account created successfully', 11 duration 2000 12 }) present(); 13 }, err => { 14 console log('error signing in', err); 15 16 this toastctrl create({ 17 message err message, 18 duration 2000 19 }) present(); 20 }); 21 } 자세한 내용을 알아보세요 signup() signup() 에서 parse 문서 login ts 1 signin() { 2 parse user login(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // if you app has tabs, set root to tabspage 6 this navctrl setroot('homepage') 7 }, err => { 8 console log('error logging in', err); 9 10 this toastctrl create({ 11 message err message, 12 duration 2000 13 }) present(); 14 }); 15 } 자세한 내용을 알아보세요 parse user login() parse user login() 에서 parse 문서 이것이 어떻게 보여야 하는지입니다 4 로그아웃 구현하기 홈페이지(또는 사용자가 로그인 후 이동할 페이지)로 이동하여 로그아웃을 구현해 보겠습니다 먼저, home html을 열고 로그아웃을 위한 버튼을 추가하세요 login html 1 you are logged in! 2 3 4 5 log out 6 7 이제 logout() logout() 메서드를 구현하고 요청이 실패할 경우 toast toast 컴포넌트를 추가합시다 home ts 1 logout() { 2 parse user logout() then((resp) => { 3 console log('logged out successfully', resp); 4 5 this navctrl setroot('loginpage'); 6 }, err => { 7 console log('error logging out', err); 8 9 this toastctrl create({ 10 message 'error logging out', 11 duration 2000 12 }) present(); 13 }) 14 } 자세히 알아보세요 parse user logout() parse user logout() 에서 parse 문서 이렇게 보여야 합니다 5 루트 페이지 설정 의 중요한 기능은 parse parse 가 장치에서 사용자가 로그인했는지 여부를 기억한다는 것입니다 즉, 사용자가 앱을 닫더라도 앱이 열릴 때 세션을 복원할 수 있습니다 이를 통해 앱의 초기 페이지가 우리의 loginpage loginpage 또는 homepage homepage 가 될지를 결정할 수 있습니다 이를 위해 우리는 단지 currentasync() currentasync() 호출하면 됩니다 이는 로그인된 사용자를 반환하거나 null null 을 반환합니다 app component ts 1 parse user currentasync() then(user => { 2 console log('logged user', user); 3 4 this rootpage = user ? 'homepage' 'loginpage'; 5 }, err => { 6 console log('error getting logged user'); 7 8 this rootpage = 'loginpage'; 9 }) 자세히 알아보세요 parse user currentasync() parse user currentasync() 에서 parse 문서 마지막으로, 모든 설정이 완료되었습니다! 이 시점에서 ionic serve ionic serve 를 실행하면 로그인, 회원가입 및 로그아웃 기능이 작동하며, 사용자가 로그아웃할 때까지 로그인한 사용자를 기억합니다