이온 프레임워크: 이메일 인증 사용자 등록 가이드
이메일 인증을 통한 사용자 등록
소개
이 섹션에서는 Back4App을 사용하여 사용자 등록 및 이메일 인증이 포함된 앱을 만드는 방법을 설명합니다.Parse Server 핵심 기능을 통해.
이것이 어떻게 보일지입니다:
언제든지 이 튜토리얼로 구축된 전체 Ionic 프로젝트에 접근할 수 있습니다. GItHub 저장소.
필수 조건
이 퀵스타트를 완료하려면 다음이 필요합니다:
- Back4App에서 생성된 앱.
1 - 설정하기
이 튜토리얼에서는 이전의 사용자 등록에서 중단한 지점부터 시작합니다.
2 - 이메일 인증 활성화
- “인증 이메일” 블록을 찾아서 설정. “인증 이메일” 블록은 다음과 같습니다:
3. 사용자 이메일 인증. 여기 있습니다:
4. 빈 필드를 채우고 이미 채워진 필드는 선호에 따라 수정하세요.
5. 저장 버튼을 클릭하세요.
3 - 가입하기
“ParseUser” 클래스의 두 가지 기본 속성은 ParseUser입니다. username과 password, 그리고 email이라는 세 번째 특별 속성도 설정해야 합니다. 이메일 인증을 통한 회원가입을 구현하기 위해 기본 사용자 등록과 동일한 방법을 사용할 것입니다. 그러나 이번에는 사용자를 홈 페이지로 보내는 대신, 로그인하기 위해 이메일을 인증하도록 요청할 것입니다.
사용자 생성이 완료되면 자동으로 Parse 대시보드에 추가되며, emailVerified 불리언 속성은 false로 설정됩니다. 이 시점에서 사용자는 귀하의 플랫폼에 로그인할 수 없어야 합니다. 사용자가 자신의 메일박스로 전송된 링크를 클릭하여 이메일을 인증하면 emailVerified 불리언은 자동으로 true로 설정되어, 사용자가 귀하의 플랫폼에 완전히 접근할 수 있게 됩니다.
“SignUpActivity”가 작동하도록 하려면 다음 단계를 따르세요:
“isSigningup”과 isSigningup 및 email 변수를 login.ts에 추가하여 이메일 입력을 토글하고 유지하세요:
1 // Parse Dependencies
2 email: string;
3 isSigningup: boolean;Make the signUp() 메서드가 이메일 주소를 parse User.signUp() 함수로 전송하도록 하세요:
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 에 *ngIf를 추가하여 isSigningup이 true일 때 또는 로그인할 때 isSigningup이 false일 때.
1 <ion-item *ngIf="isSigningup">
2 <ion-label stacked>E-mail</ion-label>
3 <ion-input type="email" [(ngModel)]="email"></ion-input>
4 </ion-item>
5
6 <div text-center margin-top *ngIf="!isSigningup">
7 <button ion-button margin-right (click)="isSigningup = true">
8 SIGN UP
9 </button>
10
11 <button ion-button color="secondary" (click)="signIn()">
12 SIGN IN
13 </button>
14 </div>
15
16 <div text-center margin-top *ngIf="isSigningup">
17 <button ion-button (click)="signUp()">
18 SIGN UP
19 </button>
20 </div>4 - 로그인
이제 사용자를 emailVerified 부울 검증을 추가하여 홈 페이지로 보내기 전에.
참고: 사용자가 Parse.User.logIn() 함수를 호출할 때 로그인하지만, 이메일 검증이 완료될 때까지 앱에 접근할 수 없습니다. 또한, logIn()을 호출할 때 데이터베이스에 세션 객체가 생성되므로, 이메일을 검증하지 않은 사용자가 애플리케이션에 접근하려고 할 때마다 Parse.User.logout()을 호출하는 것이 중요합니다. 그렇지 않으면 세션이 열려 있게 됩니다.
이제 사용자가 로그인할지 아니면 이메일을 확인해야 한다는 경고를 받을지를 결정하기 위해 emailVerified 검증을 구현해 보겠습니다:
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를 실행하고 몇 명의 사용자를 생성해 보세요. 또한 이메일을 확인하지 않고 등록한 후 로그인해 보아 실제로 오류가 표시되는지 확인하세요.
- 앱을 찾아서 대시보드 > 코어 > 브라우저 > 사용자를 클릭하여 생성한 사용자를 확인하세요!
완료되었습니다!
이 단계에서 Parse Server의 핵심 기능을 통해 Back4App을 사용하여 이메일 인증으로 앱에 로그인, 등록 또는 로그아웃할 수 있습니다!