OAuth [Facebook / Twitter] 当我点击 Social Icons + Ionic + Firebase 时弹出窗口没有打开

Question

我按照 this article 为使用 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 框架。

Answer 1

找到一个解决方案并张贴它，因为它可能对其他人有帮助：

GITHub link from where i cloned the project. Then go to file www/js/controllers.js 其中 $scope.login() 方法存在于 DashCtrl 中。

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

这是出现问题的代码段，因为它试图重定向到不同的页面并且它 在浏览器中工作正常 但是在 app/ionic 实验室或其他方面失败。

如果您的工作特定于 Ionic 应用程序版本，则改为执行此操作：

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

OAuth [Facebook / Twitter] 当我点击 Social Icons + Ionic + Firebase 时弹出窗口没有打开

OAuth [Facebook / Twitter] Pop Up doesn't open when I click on Social Icons + Ionic + Firebase

cordova

ionic-framework

firebase

firebase-authentication

ionic-popup