为什么我无法通过Angular应用中的OAuth使用Facebook登录？

编程问答 2022-08-16

问题描述

仅从2周前开始（可能更长，但是那时候我才意识到）我无法在我的角度应用程序上使用Facebook登录功能。当我单击它时，它显示以下信息：

enter image description here

完全空白的页面。但是，如果我将app_id更改为一些随机字符串，它将告诉我这是无效的应用程序ID。如果我使用本地主机，它将说不安全。

它首先在v6.0 api上发生。我以为api版本可能已过期，所以我将版本更改为8.0。但这似乎没有用。

任何人都可以确认是否是facebook的问题，或者我该如何解决？

我的代码在这里：

  ngOnInit() {    

    (window as any).fbAsyncInit = function() {
      FB.init({
        appId      : '325127648430858',cookie     : true,xfbml      : true,version    : 'v8.0'
      });
      FB.AppEvents.logPageView();
    };

    (function(d,s,id){
       var js,fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement(s); js.id = id;
       js.src = "https://connect.facebook.net/en_US/all.js#xfbml=true&xfbml=true&cookie=1&version=v8.0&appId=325127648430858";
       fjs.parentNode.insertBefore(js,fjs);
     }(document,'script','facebook-jssdk'));
  }

这是我的登录功能：

  loginFacebook() {
    console.log("submit login to facebook");
    FB.login((response)=>
        {
          console.log('submitLogin',response);
          if (response.authResponse)
          {
            //login success
            //login success code here
            //redirect to home page
            console.log('response.authResponse: ',response.authResponse);
            const accesstoken = response.authResponse.accesstoken;
            const userId = response.authResponse.userID;
            FB.api('/me',{fields: 'first_name,last_name,email,picture',access_token: accesstoken},response => {
              const first_name = response.first_name;
              const last_name = response.last_name;
              const email = response.email;
              const picture = response.picture;
              console.log('response: ',response);
              const res = {
                first_name: first_name,last_name: last_name,facebook_id: userId,email: email,username: 'fb' + userId,picture: picture
              }
              this.authService.facebookAuth(res).subscribe((user: any) => {
                console.log('user: ',user);
                console.log('user.token: ',user.token);
                console.log('user.user: ',user.user);
                localStorage.setItem('tri-token',user.token);
                localStorage.setItem('tri-user',JSON.stringify(user.user));
                const decodedToken = this.getDecodetoken();
                this.currentUser = user.user;
                const userRoles = decodedToken.role as Array<string>;
                console.log('userRoles: ',userRoles);
                this.checkLogin(userRoles);
                console.log('decodedToken: ',decodedToken);
                this.emitComplete();
              })
            })
            
            }
            else
            {
            console.log('User login Failed');
          }
      }
    );
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular8facebookoauthoauth