I followed this article to create OAuth for Ionic App with Firebase as backend service. Was able to bring up the app in Ionic Lab and social icons were visible. But when I click on any icon, nothing happens.
Just know that my code uses cordova-plugin-inappbrowser and I have very minimal knowledge about that. I except a Facebook or Twitter pop-up to show when I click on corresponding icons but it just doesn't seem to.
I see following error's in console:
When I click on the Facebook icon:
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'.
When I click on the Twitter icon:
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".`
What do I do to rectify this ?
When I manually do ionic serve, app loads in browser and when I click on Facebook icon, I am able to page getting redirected to Facebook login.
PS: I'm just a day old to this Ionic Framework.
Found a resolution & posting it as it may help others :
GITHub link from where i cloned the project. Then go to file www/js/controllers.js where a $scope.login() method is present in DashCtrl.
Auth.$authWithOAuthRedirect(authMethod).then(function(authData) {
console.log(authData);
})
This was the snippet which was giving problem, as it is trying to redirect to different page & it works fine in browsers but fails in app/ionic lab or whatever.
Instead do this if your work is specific to Ionic app version :
Auth.$authWithOAuthPopup(authMethod).then(function(authData) {
// after successfully logging in the user - do your magic stuff here
console.log(authData);
});