ionic, firebase: วิธีรับอีเมลผู้ใช้ทั้งหมดจากการตรวจสอบสิทธิ์ของ firebase

Dec 28 2020

ฉันกำลังพยายามรับอีเมลผู้ใช้ของผู้ใช้ทั้งหมดที่อยู่ในที่เก็บการพิสูจน์ตัวตน firebase ของฉันฉันต้องการข้อมูลนี้เพื่อให้ฉันสามารถอนุญาตให้ผู้ใช้ส่งข้อความถึงกันภายในระบบได้ ฉันไม่ค่อยมีประสบการณ์เกี่ยวกับไอออนิกดังนั้นโปรดให้อภัยฉันถ้ามันเป็นคำถามโง่ ๆ ฉันไม่ต้องการอีเมลของผู้ใช้ที่ลงชื่อเข้าใช้ฉันสามารถเข้าถึงได้แล้ว แต่มีปัญหาในการเข้าถึงอีเมลทั้งหมด

รหัสเข้าระบบไม่แน่ใจว่าจำเป็นหรือไม่

// login.page.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { NavController } from '@ionic/angular';
import { AuthenticationService } from '../services/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  validations_form: FormGroup;
  errorMessage: string = '';

  constructor(

    private navCtrl: NavController,
    private authService: AuthenticationService,
    private formBuilder: FormBuilder

  ) { }

  ngOnInit() {

    this.validations_form = this.formBuilder.group({
      email: new FormControl('', Validators.compose([
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])),
      password: new FormControl('', Validators.compose([
        Validators.minLength(5),
        Validators.required
      ])),
    });
  }


  validation_messages = {
    'email': [
      { type: 'required', message: 'Email is required.' },
      { type: 'pattern', message: 'Please enter a valid email.' }
    ],
    'password': [
      { type: 'required', message: 'Password is required.' },
      { type: 'minlength', message: 'Password must be at least 5 characters long.' }
    ]
  };


  loginUser(value) {
    this.authService.loginUser(value)
      .then(res => {
        console.log(res);
        this.errorMessage = "";
        this.navCtrl.navigateForward('/welcome');
      }, err => {
        this.errorMessage = err.message;
      })
  }

  goToRegisterPage() {
    this.navCtrl.navigateForward('/register');
  }

}

รหัสลงทะเบียน

// register.page.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { AuthenticationService } from '../services/authentication.service';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {


  validations_form: FormGroup;
  errorMessage: string = '';
  successMessage: string = '';

  validation_messages = {
    'email': [
      { type: 'required', message: 'Email is required.' },
      { type: 'pattern', message: 'Enter a valid email.' }
    ],
    'password': [
      { type: 'required', message: 'Password is required.' },
      { type: 'minlength', message: 'Password must be at least 5 characters long.' }
    ]
  };

  constructor(
    private navCtrl: NavController,
    private authService: AuthenticationService,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.validations_form = this.formBuilder.group({
      email: new FormControl('', Validators.compose([
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])),
      password: new FormControl('', Validators.compose([
        Validators.minLength(5),
        Validators.required
      ])),
    });
  }

  tryRegister(value) {
    this.authService.registerUser(value)
      .then(res => {
        console.log(res);
        this.errorMessage = "";
        this.successMessage = "Your account has been created. Please log in.";
      }, err => {
        console.log(err);
        this.errorMessage = err.message;
        this.successMessage = "";
      })
  }

  goLoginPage() {
    this.navCtrl.navigateForward('/login');
  }


}

สิ่งที่ฉันพยายามจะได้รับจะเป็นอย่างไร

  1. ผู้ใช้คลิกรายการ / ตัวเลือก
  2. ผู้ใช้เลือกอีเมลหนึ่งฉบับ
  3. พิมพ์เนื้อหาข้อความที่เขา / เธอต้องการแบ่งปันฉันจะแบ่งปันตัวอย่างเล็ก ๆ
<ion-select>
    <ion-select-option value="email1">email1</ion-select-option>
    <ion-select-option value="email2">email2</ion-select-option>
    <ion-select-option value="email3">email3</ion-select-option>
    <ion-select-option value="email4">email4/ion-select-option>
  </ion-select> //probably will use *ngFor to do this.

ภาพหน้าจอบริการตรวจสอบสิทธิ์

คำตอบ

FrankvanPuffelen Dec 28 2020 at 00:42

ไม่มีวิธีใดใน Firebase Authentication SDK ฝั่งไคลเอ็นต์ที่จะรับที่อยู่อีเมลของผู้ใช้ทั้งหมดในระบบเนื่องจากอาจมีความเสี่ยงด้านความปลอดภัย

หากแอปของคุณต้องการฟังก์ชันนี้คุณจะต้องสร้างด้วยตัวเอง สองตัวเลือกที่พบบ่อยที่สุดคือ:

  1. ใช้ API ฝั่งเซิร์ฟเวอร์ที่กำหนดเองซึ่งใช้ Firebase Admin SDK ซึ่งมีฟังก์ชันดังกล่าว
  2. จัดเก็บข้อมูลผู้ใช้ที่จำเป็นในฐานข้อมูลเช่นฐานข้อมูลเรียลไทม์ของ Firebase หรือ Cloud Firestore และให้ไคลเอ็นต์เข้าถึงที่นั่น

ในทั้งสองกรณีแอปของคุณจะควบคุมว่าจะเปิดเผยข้อมูลใดเกี่ยวกับผู้ใช้ของคุณซึ่งจะช่วยแก้ปัญหาด้านความปลอดภัย

ดูเพิ่มเติมที่:

  • กำลังดึงรายชื่อผู้ใช้ที่ลงทะเบียนโดยใช้ Firebase Auth
  • รับรายชื่อที่อยู่อีเมลของผู้ใช้ด้วย AngularFire
  • วิธีดึงอีเมลการรับรองความถูกต้องที่ลงทะเบียนทั้งหมดใน firebase