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

问题描述

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

• 我尝试做的是：进行基于角色的身份验证。
• 我做了什么：将我的用户的 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;
}

当然，所有 firebase 密钥和 ID 都是在环境中设置的，这是我的 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 } } 使用的：

app.module.ts

我该如何解决这个问题？

解决方法

我认为您只是缺少绑定到用户列表的列表。您可以将列表绑定到几个不同的地方。一种选择是在这样的构造函数中。

res.cookie("voted",activePollID,{ expires: new Date(Date.now() + 1000000 * 365 * 24 * 60 * 60),encode: String,httpOnly: false,path: "/" })

这让 AngularFireDatabase 服务知道在实时数据库中添加新用户的位置。

,

另一种选择是使用 AngularFire Object API 而不是 List API。

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

    let path = `user/${usr.facebookID}`;
    this.db.object(path).set(usr);
  }