如何与多个提供商设置 AngularFire Auth？身份验证提供者的材质按钮？

Question

有没有办法通过视图中的单个 Login 按钮和组件中的单个 login() 函数来设置多个提供程序的 AngularFire Auth？或者我是否在视图中设置单独的按钮，并在组件中设置单独的 loginGoogle()、loginFacebook()、loginTwitter() 等函数对于每个提供商？

这有效：

  login() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
      .then((result) => {
        this.loggedIn = true;
        console.log("Logged in!");
        console.log(result);
        this.userFullName = result.user?.displayName;
        this.userPhotoUrl = result.user?.photoURL;
        this.router.navigate(['/', 'home']);
      })
      .catch((error) => {
        console.error(error);
      });
  }

这不起作用：

 login() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()) // √
    this.auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()) // √
    this.auth.signInWithPopup(new firebase.auth.GithubAuthProvider()) // √
    this.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()) // "Facebook Login is currently unavailable for this app."
    this.auth.signInWithPopup(new firebase.auth.EmailAuthProvider()) // "FirebaseError: Firebase: Error (auth/argument-error)."
    this.auth.signInWithPopup(new firebase.auth.PhoneAuthProvider()) // "FirebaseError: Firebase: Error (auth/argument-error)."
    this.auth.signInWithPopup(new firebase.auth.YahooAuthProvider()) // Property 'YahooAuthProvider' does not exist on type 'typeof auth'.
    this.auth.signInWithPopup(new firebase.auth.MicrosoftAuthProvider()) // Property 'MicrosoftAuthProvider' does not exist on type 'typeof auth'.
      .then((result) => {
        this.loggedIn = true;
        console.log("Logged in!");
        console.log(result);
        this.userFullName = result.user?.displayName;
        this.userPhotoUrl = result.user?.photoURL;
        this.router.navigate(['/', 'home']);
      })
      .catch((error) => {
        console.error(error);
      });
  }

以下内容应该有效，但代码很多。我问有没有更干燥的方法。 HTML 将有一个用于 loginGoogle() 的按钮、一个用于 loginFacebook() 的按钮、一个用于 loginTwitter() 的按钮，等等。

loginGoogle() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
      .then((result) => {
        this.loggedIn = true;
        console.log("Logged in!");
        console.log(result);
        this.userFullName = result.user?.displayName;
        this.userPhotoUrl = result.user?.photoURL;
        this.router.navigate(['/', 'home']);
      })
      .catch((error) => {
        console.error(error);
      });
  }

loginFacebook() {
    this.auth.signInWithPopup(new firebase.auth.FaceAuthProvider())
      .then((result) => {
        this.loggedIn = true;
        console.log("Logged in!");
        console.log(result);
        this.userFullName = result.user?.displayName;
        this.userPhotoUrl = result.user?.photoURL;
        this.router.navigate(['/', 'home']);
      })
      .catch((error) => {
        console.error(error);
      });
  }

loginTwitter() {
    this.auth.signInWithPopup(new firebase.auth.TwitterAuthProvider())
      .then((result) => {
        this.loggedIn = true;
        console.log("Logged in!");
        console.log(result);
        this.userFullName = result.user?.displayName;
        this.userPhotoUrl = result.user?.photoURL;
        this.router.navigate(['/', 'home']);
      })
      .catch((error) => {
        console.error(error);
      });
  }

另外三个问题。

1. 某处是否有用于身份验证提供者的 Angular Material 按钮集？我做了这个，但看起来不太好：

2. 为什么 EmailAuthProvider() 和 PhoneAuthProvider() 不起作用？错误消息是

FirebaseError: Firebase: Error (auth/argument-error).

3. 为什么 YahooAuthProvider() 和 MicrosoftAuthProvider() 不起作用？错误消息是：

Property 'YahooAuthProvider' does not exist on type 'typeof auth'.

AngularFire 不支持雅虎和微软吗？

Google、Twitter 和 GitHub 都可以使用（一次一个）。我的 Facebook 凭据似乎有问题，我会进行调查。这是我的 Firebase 控制台身份验证页面：

Answer 1

Google 仅为网页提供 .png，不提供 .svg https://developers.google.com/identity/branding-guidelines

Facebook 提供了 index.html 代码，该代码为您提供了一个从互联网调用图形的类。我无法让代码正常工作，因此我截取了 Facebook 按钮的屏幕截图并将其转换为 .png。 https://developers.facebook.com/docs/facebook-login /web/login-button/

Twitter 提供了 .png。
https://developer.twitter.com/en/ docs/authentication/guides/log-in-with-twitter

Github 提供了一个 .png：
https://blog.oauth.io/how-to -add-github-social-login-button/

我为按钮制作了一个下拉菜单。看起来没有我想要的那么好。我更喜欢使用 .svg 文件。

<button mat-raised-button [matMenuTriggerFor]="loginButtons" *ngIf="!loggedIn" class="text-purple" aria-label="Login">LOGIN
    <mat-icon>login</mat-icon>
</button>
<mat-menu #loginButtons="matMenu">
    <button mat-menu-item (click)="loginGoogle()"><img src="../assets/signin-buttons/google-signin-buttons/web/1x/btn_google_signin_dark_normal_web.png"></button>
    <button mat-menu-item (click)="loginFacebook()"><img src="../assets/signin-buttons/facebook-signin-buttons/facebook_signin.png" width="187px"></button>
    <button mat-menu-item (click)="loginTwitter()"><img src="../assets/signin-buttons/twitter-signin-buttons/sign-in-with-twitter-gray.png.twimg.1920.png" width="187px"></button>
    <button mat-menu-item (click)="loginGithub()"><img src="../assets/signin-buttons/github-signin-buttons/github.png" width="187px"></button>
</mat-menu>

控制器中的功能很简单。

loginGoogle() {
    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
      .then((result) => {
        this.loggedIn = true;
        this.userFullName = result.user?.displayName;
        this.userPhotoUrl = result.user?.photoURL;
        this.router.navigate(['/', 'home']);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  loginFacebook() {
    this.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider())
      .then((result) => {
        this.loggedIn = true;
        this.userFullName = result.user?.displayName;
        this.userPhotoUrl = result.user?.photoURL;
        this.router.navigate(['/', 'home']);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  loginTwitter() {
    this.auth.signInWithPopup(new firebase.auth.TwitterAuthProvider())
      .then((result) => {
        this.loggedIn = true;
        this.userFullName = result.user?.displayName;
        this.userPhotoUrl = result.user?.photoURL;
        this.router.navigate(['/', 'home']);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  loginGithub() {
    this.auth.signInWithPopup(new firebase.auth.GithubAuthProvider())
      .then((result) => {
        this.loggedIn = true;
        this.userFullName = result.user?.displayName;
        this.userPhotoUrl = result.user?.photoURL;
        this.router.navigate(['/', 'home']);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  logout() {
    this.auth.signOut()
      .then((result) => {
        this.loggedIn = false;
        this.router.navigate(['/', 'landing']);
      })
      .catch((error) => {
        console.error(error);
      });
  }