angular - Ionic / Angular / Capacitor / Firebase Facebook 身份验证和基于角色的身份验证

问题描述

我有一个正在Android创建的 facebook 身份验证，Ionic Angular Capacitor Firebase它正在完全工作。

我试图做的：进行基于角色的身份验证。
我做了什么：将我的用户的 facebook ID 注册到一个实时数据库中，我将为type每个用户创造价值。

所以当我的用户第一次登录时，我在实时数据库中创建了一个实体。

错误：数据库中没有创建任何内容，但我没有任何错误消息。

这是我的共享服务：

import { Injectable } from '@angular/core';
import { User } from './User';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})

export class UserService {
  userListRef: AngularFireList<any>;
  userRef: AngularFireObject<any>;

  constructor(private db: AngularFireDatabase) {}

  createUser(facebookID: string, name: string, email: string){
    let usr: User;
    usr.facebookID = facebookID;
    usr.name = name;
    usr.email = email;
    usr.type = "standard";

    return this.userListRef.push({
      facebookID: usr.facebookID,
      name: usr.name,
      email: usr.email
    })
  }

  getUser(facebookID: string) {
    let usr: User;
    this.userRef = this.db.object('/user/' + facebookID);
    this.userRef.snapshotChanges().subscribe(user => { user = user });
    return usr;
  }

    userExist(facebookID: string){
      if(this.getUser(facebookID).facebookID == facebookID) {return true;}
      else {return false;}
    }

  getUserList(){
    this.userListRef = this.db.list('/user');
    return this.userListRef;
  }

  updateUser(facebookID, username: string, type: string){
    let usr: User;
    usr = this.getUser(facebookID);

    return this.userRef.update({
      facebookID: usr.facebookID,
      name: username,
      email: usr.email,
      type: type
    })
  }
}

我的sign in功能facebook auth：

      async signIn(): Promise<void> {
    const FACEBOOK_PERMISSIONS = ['public_profile', 'email'];

    const result = await Plugins.FacebookLogin.login({ permissions: FACEBOOK_PERMISSIONS });
    if (result && result.accessToken) {
      let user = { token: result.accessToken.token, userId: result.accessToken.userId }
      let navigationExtras: NavigationExtras = {
        queryParams: {
          userinfo: JSON.stringify(user)
        }
      };
      this.router.navigate(["/feed"], navigationExtras);
    }
  }

我的用户类：

    export class User {
    $key: string;
    facebookID: string;
    name: string;
    email: string;
    type: string;
}

我尝试在我的数据库中创建条目的页面：

    import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
import { Router, ActivatedRoute } from '@angular/router';

import { UserService } from 'shared/user.service';

@Component({
  selector: 'app-feed',
  templateUrl: './feed.page.html',
  styleUrls: ['./feed.page.scss'],
})
export class FeedPage {
  logininfo: any;
  user: any;
  constructor(private route: ActivatedRoute,
    private router: Router,
    private usrService: UserService
  ) {
    this.route.queryParams.subscribe(params => {
      if (params && params.userinfo) {
        this.logininfo = JSON.parse(params.userinfo);
      }
    });
  }
  ionViewWillEnter() {
    this.getUserInfo();

    //Create a user based on facebookID
    if (this.usrService.userExist(this.user.id) == false) {
      this.usrService.createUser(this.user.id, this.user.name, this.user.email);
    }
  }

  async signOut(): Promise<void> {
    await Plugins.FacebookLogin.logout();
    this.router.navigate(['/home']);
  }

  async getUserInfo() {
    const response = await fetch(`https://graph.facebook.com/${this.logininfo.userId}?fields=id,name,gender,link,picture&type=large&access_token=${this.logininfo.token}`);
    const myJson = await response.json();
    this.user = myJson
  }
}

当然，所有的 Firebase 密钥和 ID 都是在环境中设置的，这是我app.module.ts利用的：

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';

import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireStorageModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

我怎么解决这个问题？

标签： angularfirebaseionic-frameworkcapacitorrole-based-access-control

angular - Ionic / Angular / Capacitor / Firebase Facebook 身份验证和基于角色的身份验证

问题描述

解决方案

推荐阅读