이온 프레임워크: 이메일 인증 사용자 등록 가이드

이메일 인증을 통한 사용자 등록 소개 이 섹션에서는 back4app을 사용하여 사용자 등록 및 이메일 인증이 포함된 앱을 만드는 방법을 설명합니다 parse server 핵심 기능 을 통해 이것이 어떻게 보일지입니다 언제든지 이 튜토리얼로 구축된 전체 ionic 프로젝트에 접근할 수 있습니다 github 저장소 필수 조건 이 퀵스타트를 완료하려면 다음이 필요합니다 visual studio code (또는 원하는 웹 ide) ionic framework back4app에서 생성된 앱 다음의 새 parse 앱 튜토리얼 을 따라 back4app에서 parse 앱을 만드는 방법을 배우세요 다음의 사용자 등록 튜토리얼을 따라 back4app으로 회원가입, 로그인 및 로그아웃을 구현하는 방법을 배우세요 1 설정하기 이 튜토리얼에서는 이전의 사용자 등록 https //www back4app com/docs/ionic/ionic framework login screen 에서 중단한 지점부터 시작합니다 2 이메일 인증 활성화 앱에 가서 back4app 웹사이트 https //www back4app com/ 를 클릭하세요 서버 설정 서버 설정 “인증 이메일” 블록을 찾아서 설정 설정 “인증 이메일” 블록은 다음과 같습니다 3\ 사용자 이메일 인증 사용자 이메일 인증 여기 있습니다 4\ 빈 필드를 채우고 이미 채워진 필드는 선호에 따라 수정하세요 5\ 저장 저장 버튼을 클릭하세요 3 가입하기 “parseuser” 클래스의 두 가지 기본 속성은 parseuser parseuser 입니다 username 과 password , 그리고 email 이라는 세 번째 특별 속성도 설정해야 합니다 이메일 인증을 통한 회원가입을 구현하기 위해 기본 사용자 등록과 동일한 방법을 사용할 것입니다 그러나 이번에는 사용자를 홈 페이지로 보내는 대신, 로그인하기 위해 이메일을 인증하도록 요청할 것입니다 사용자 생성이 완료되면 자동으로 parse 대시보드 대시보드 에 추가되며, emailverified 불리언 속성은 false 로 설정됩니다 이 시점에서 사용자는 귀하의 플랫폼에 로그인할 수 없어야 합니다 사용자가 자신의 메일박스로 전송된 링크를 클릭하여 이메일을 인증하면 emailverified 불리언은 자동으로 true 로 설정되어, 사용자가 귀하의 플랫폼에 완전히 접근할 수 있게 됩니다 “signupactivity”가 작동하도록 하려면 다음 단계를 따르세요 “issigningup”과 issigningup issigningup 및 email email 변수를 login ts login ts 에 추가하여 이메일 입력을 토글하고 유지하세요 login ts 1 // parse dependencies 2 email string; 3 issigningup boolean; make the signup() signup() 메서드가 이메일 주소를 parse user signup() user signup() 함수로 전송하도록 하세요 login ts 1 signup() { 2 parse user signup(this username, this password, {email this email}) then((resp) => { 3 console log('signed up successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 this email = ''; 9 10 this toastctrl create({ 11 message 'account created successfully', 12 duration 2000 13 }) present(); 14 15 this issigningup = false; 16 }, err => { 17 console log('error signing in', err); 18 19 this toastctrl create({ 20 message err message, 21 duration 2000 22 }) present(); 23 }); 24 } 이제, 사용자가 가입할 때마다 html 요소를 보여주거나 숨기기 위해 login html login html 에 ngif ngif 를 추가하여 issigningup 이 true 일 때 또는 로그인할 때 issigningup 이 false 일 때 login html 1 2 e mail 3 4 5 6 7 8 sign up 9 10 11 12 sign in 13 14 15 16 17 18 sign up 19 20 4 로그인 이제 사용자를 emailverified 부울 검증을 추가하여 홈 홈 페이지로 보내기 전에 참고 사용자가 parse user login() parse user login() 함수를 호출할 때 로그인하지만, 이메일 검증이 완료될 때까지 앱에 접근할 수 없습니다 또한, login()을 호출할 때 데이터베이스에 세션 객체가 생성되므로, 이메일을 검증하지 않은 사용자가 애플리케이션에 접근하려고 할 때마다 parse user logout() parse user logout() 을 호출하는 것이 중요합니다 그렇지 않으면 세션 세션 이 열려 있게 됩니다 이제 사용자가 로그인할지 아니면 이메일을 확인해야 한다는 경고를 받을지를 결정하기 위해 emailverified 검증을 구현해 보겠습니다 login ts 1 // parse dependencies 2 signin() { 3 parse user login(this username, this password) then((user) => { 4 console log('logged in successfully', user); 5 6 if(user get('emailverified')) { 7 // if you app has tabs, set root to tabspage 8 this navctrl setroot('homepage') 9 } else { 10 parse user logout() then((resp) => { 11 console log('logged out successfully', resp); 12 }, err => { 13 console log('error logging out', err); 14 }); 15 16 this alertctrl create({ 17 title 'e mail verification needed', 18 message 'your e mail address must be verified before logging in ', 19 buttons \['ok'] 20 }) present(); 21 } 22 }, err => { 23 console log('error logging in', err); 24 25 this toastctrl create({ 26 message err message, 27 duration 2000 28 }) present(); 29 }); 30 } 5 앱 테스트하기 앱을 테스트하려면 ionic serve ionic serve 를 실행하고 몇 명의 사용자를 생성해 보세요 또한 이메일을 확인하지 않고 등록한 후 로그인해 보아 실제로 오류가 표시되는지 확인하세요 다음에서 로그인하세요 back4app 웹사이트 https //www back4app com/ 앱을 찾아서 대시보드 대시보드 > 코어 코어 > 브라우저 브라우저 > 사용자 사용자 를 클릭하여 생성한 사용자를 확인하세요! 완료되었습니다! 이 단계에서 parse server의 핵심 기능을 통해 back4app을 사용하여 이메일 인증으로 앱에 로그인, 등록 또는 로그아웃할 수 있습니다!