OAuth [Facebook / Twitter] 当我点击社交图标 + 离子 + Firebase 时弹出窗口无法打开

Question

我按照这篇文章，用Firebase作为后端服务为Ionic App创建了OAuth。能够在Ionic Lab中打开应用程序，并且可以看到社交图标。但是当我点击任何图标时，什么也没发生。

只知道我的代码使用cordova-plugin-inappbrowser，我对此知之甚少。当我点击相应的图标时，我希望Facebook或Twitter弹出显示，但它似乎没有。

我在控制台看到以下错误:

当我点击Facebook图标时:

Refused to display 'https://www.facebook.com/login.php?
skip_api_login=1&api_key=150011636022826…
&display=popup&locale=en_US&logger_id=fe62445f-81aa-405e-b35f-
80f8fd220707' in a frame because it set 'X-Frame-Options' to 'DENY'.

当我点击Twitter图标时:

Refused to display 'https://api.twitter.com/oauth/authenticate?
oauth_token=nSzk7gAAAAAAuTInAAABV456ulg' in a frame because an ancestor 
violates the following Content Security Policy directive: "frame-ancestors 
'self' https://tweetdeck.twitter.com https://tdapi-
staging.smf1.twitter.com https://tdapi-staging.atla.twitter.com 
https://tweetdeck.localhost.twitter.com".`

我该怎么做才能纠正这个问题

当我手动做ionic serve时，应用程序在浏览器中加载，当我点击Facebook图标时，我可以将页面重定向到Facebook登录。

PS:我才用了一天这个Ionic Framework

Answer 1

找到分辨率&发布它，因为它可以帮助别人:

GITHub链接从我克隆的项目。然后转到文件www/js/controllers.js，其中$scope.login()方法存在于DashCtrl中。

Auth.$authWithOAuthRedirect(authMethod).then(function(authData) {
      console.log(authData);
    })

这是给出问题的代码片段，因为它试图重定向到不同的页面&它在浏览器中工作良好，但在app/ionic lab或其他地方失败

。

相反，如果你的工作是特定于Ionic应用程序版本:

Auth.$authWithOAuthPopup(authMethod).then(function(authData) {
          // after successfully logging in the user - do your magic stuff here
          console.log(authData);
        });