I have encountered a problem that seems to defy the solutions proposed for similar questions on other platforms.
My local development site is hosted on a virtual machine at:
Upon loading the index.php page, I have a specific javascript code running (with the correct appId):
/* facebook auth */
window.fbAsyncInit = function() {
FB.init({
appId: '01234567890',
channelUrl: 'http://lamp.site/channel.html'
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
Subsequently, when a button is clicked, a particular javascript function is triggered:
#HTML
<li><a class="btn" href="#" ng-click="connectToFacebook()">Connect with Facebook</a></li>
#Snippet in AngularJS Controller
$scope.connectToFacebook = function() {
facebookConnect.authenticate(
function(reason) { // fail
console.log(reason);
},
function(user) { // success
console.log('logged in',user);
//Session.login();
});
return false;
}
#Factory in AngularJS module
.factory('facebookConnect', function() {
return {
authenticate: function(fail, success) {
FB.login(function(response) {
console.log(response);
if (response.authResponse) {
FB.api('/me', success);
} else {
fail('User cancelled login or did not fully authorize.');
}
});
}
}
The Facebook authentication process works seamlessly in Firefox when I click the button. However, using Chrome or Safari on my PC, as well as Safari Mobile on my iPhone, triggers an error message and displays certain console data:
Unsafe JavaScript attempt to access frame with URL
https://www.facebook.com/dialog/permissions.request from frame with URL
http://lamp.site/index.php?page=login. Domains, protocols and ports must match.
Object
authResponse: null
status: "not_authorized"
__proto__: Object
User cancelled login or did not fully authorize.
Although my testing URL is added correctly in the developer section of the Facebook app, it only works in Firefox. The channels file associated with this setup can be accessed at:
<script src="http://connect.facebook.net/en_US/all.js"></script>
I have experimented with including and excluding http: in the src= tag within the channel file, but the issue persists.
The settings for the Facebook app are as follows:
- App domains: lamp.site
- Site URL:
- Mobile site URL:
Given its successful operation in Firefox, I am perplexed by the errors occurring in other browsers. Enabling cross-site scripting is not a viable solution, particularly for a mobile site. Has anyone recently resolved this issue? All related inquiries remain unanswered...
EDIT: To simplify matters, I have set up a new app ID on my website.
A screenshot displaying the app ID obtained from the Facebook Dev application panel can be found above.
Feel free to examine the source code, which has been directly copied from here:
https://developers.facebook.com/docs/guides/web/
The required channel file does exist:
Despite these efforts to streamline the process, I am still plagued by the recurring "An error occurred. Please try again later." message, albeit now redirecting to Facebook without authenticating and closing.
Edit: Upon adding the necessary site URLs, the simplified example now functions as intended.
Since the live site operates smoothly, the issue likely pertains to my local domains. An entry in my /etc/hosts/ file specifies the IP address of the VirtualBox Ubuntu server running on my laptop as:
192.168.0.13 lamp.site
This ensures seamless browsing of the site.