angular - 使用 Angular 和 Google Firebase 登录 Facebook 失败 - URL 被阻止

Question

我正在开发一个 basic web app衡量一些政治受欢迎程度。为了获得正确的民意调查，我们需要使用 Facebook、Twitter 和 Google 帐户等社交媒体帐户对用户进行身份验证。

我选择了 Angular 作为我的前端技术，它位于 Google Firebase platform如下this instruction进行身份验证。

对于 Firebase Facebook 登录身份验证提供商服务 ( auth.service.ts )

@Injectable({
   providedIn: 'root'
})

export class AuthService {

  constructor(
    public afAuth: AngularFireAuth, // Inject Firebase auth service
) { }

// Sign in with Facebook
FacebookAuth() {
   return this.AuthLogin(new auth.FacebookAuthProvider());
}  

// Auth logic to run auth providers
AuthLogin(provider) {
   return this.afAuth.auth.signInWithPopup(provider)
     .then((result) => {
         console.log('You have been successfully logged in!')
     }).catch((error) => {
        console.log(error)
    })
   }
}

singin组件代码很简单如下

import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../shared/services/auth.service";

@Component({
   selector: 'app-sign-in',
   templateUrl: './sign-in.component.html',
   styleUrls: ['./sign-in.component.css']
})

export class SignInComponent implements OnInit {

   constructor(public authService: AuthService) { }
   ngOnInit() { }

}

singin components 的 HTML 代码

<!-- Calling FacebookAuth Api from AuthService -->
<div class="formGroup">
   <button type="button" (click)="authService.FacebookAuth()">
      Log in with Facebook
   </button>
</div>

这是开发者在 Facebook 上的配置。 App ID ，和App Secret放入 Firebase 中以在两者之间建立连接。

我登录facebook > 设置:client Oauth login , web OAuth login在...上 并添加这些 URL 进行重定向。

在设置 > 基础知识

我错过了什么才能避免以下错误？

URL 被阻止:此重定向失败，因为重定向 URI 未在应用程序的客户端 OAuth 设置中列入白名单。确保客户端和 Web OAuth 登录已打开，并将所有应用程序域添加为有效的 OAuth 重定向 URI。

顺便说一句，应用程序正在使用 Google 登录，您可以看到重定向 URL 为 https://political-monitor.firebaseapp.com/profile

更新:

• 去掉逗号网址后的网址，站点网址仅为 https://political-monitor.firebaseapp.com/ (尚未工作)
• 重定向网址仅为 https://political-monitor.firebaseapp.com/profile (尚未工作)
• 感谢 Venkatesh 在下面的第一个回复。我从 Firebase 获取了重定向 URL，并将其放入 Facebook 设置中。 URL 被阻止的消息消失了。需要再取得进展才能解决控制台中的此问题 Error getting access token from facebook.com, OAuth2 redirect uri is: https://political-monitor.firebaseapp.com/__/auth/handler

Answer 1

https://big-data-privacy.firebaseapp.com/__/auth/handler

转到 firebase 控制台启用 Facebook 登录，然后

您必须在 Facebook oauth 重定向 URL 中重新配置 firebase authcall