I have a Facebook JS SDK login flow here: https://web.triller.co/#/user/login
When the user taps the Facebook button, the following function is executed:
loginFacebook() { const fbPromise = new Promise((resolve, reject) => { FB.login(resp => { if (resp.authResponse) { resolve(resp.authResponse.accessToken); } else { console.log(resp); reject(new Error('Facebook login canceled or failed.')); } }); }); return fbPromise .then(accessToken => api.postJson('user/login_facebook', { accessToken })) .then(this._handleLogin.bind(this)); } Basically, it calls FB.login(), and expects to receive a valid resp.authResponse. Unfortunately, it doesn't, even after successfully authenticating on the Facebook popup/tab. Instead, we receive { authResponse: undefined, status: undefined } and the following error from the browser:
Unsafe JavaScript attempt to initiate navigation for frame with URL 'https://m.facebook.com/v2.8/dialog/oauth?foo=bar' from frame with URL 'https://web.triller.co/#/user/login?_k=cmzdb6'. The frame attempting navigation is neither same-origin with the target, nor is it the target's parent or opener.
The error occurs immediately after authenticating within the Facebook popup/tab, and it only occurs on Android Chrome. Desktop Chrome (on a Mac) does not show the same error. Safari on iOS does not show the error, either.
Any thoughts on what's going on? Why the difference between Android Chrome and desktop Chrome? Could it have something to do with the hash in the URL?
4 Answers
Answers 1
In desktop this issue can be caused by XFINITY Constant Guard Protection Suite Chrome extension. Disble it and problem will be solved.
In Android, try removing XFINITY or similar security extensions or applications (Norton security antivirus).
https://developer.salesforce.com/forums/?id=906F00000008qKnIAI
Answers 2
I think it fails because of the m.facebook.com/... based on this https://en.wikipedia.org/wiki/Same-origin_policy#Origin_determination_rules (see the case for http://en.example.com/dir/other.html and why it fails). Although it shouldn't based on what I've done with the fb api this is weird, try making a cors request instead as a workaround?
Answers 3
This is a known issue here https://code.google.com/p/android/issues/detail?id=20254.
When the window.open is called without proper arguments, it will not be opened as expected.
It can be overcome by either updating the browser (for client, check the browser version and if old one, force them to update it).
Otherwise (not applicable for you since you can't change the FB function), pass the correct arguments to window.open
Answers 4
You can also have this implemented this way. This worked for me for all devices. Please read comments to understand the flow and code.
// THIS IS JS FILE YOU NEDD TO USE <script></scriipt> Tag on html page to include js code. /* 1. Javascript SDK init ******************************************************************************************************* 1 */ window.fbAsyncInit = function () { FB.init({ appId: '*****yorAPP-ID****', xfbml: true, version: 'v2.4' }); }; (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 = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); window.fbAsyncInit = function () { FB.init({ appId: 'enteYourAppIDHere', cookie: true, // enable cookies to allow the server to access // the session xfbml: true, // parse social plugins on this page version: 'v2.2' // use version 2.2 }); // Now that we've initialized the JavaScript SDK, we call // FB.getLoginStatus(). This function gets the state of the // person visiting this page and can return one of three states to // the callback you provide. They can be: // // 1. Logged into your app ('connected') // 2. Logged into Facebook, but not your app ('not_authorized') // 3. Not logged into Facebook and can't tell if they are logged into // your app or not. // // These three cases are handled in the callback function. // FB.getLoginStatus(function(response) { // statusChangeCallback(response); // }); }; // Load the SDK asynchronously (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 = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); /* 2. HTML FB Button USE THIS HTML CODE ON YOUR PAGE ********************************************************************************************* 2 */ // ADD Button to HTML /* 3. When User CLICK on FB LOGIN button it will call this function after you get response from fb ***************************** 3.1 */ // This function is called when someone finishes with the Login // Button. See the onlogin handler attached to it in the sample // code below. function checkLoginState() { FB.getLoginStatus(function (response) { statusChangeCallback(response); }); } //Above function is calling below function and passing response in it. // According to response we check login was success or not ******************************************************************* 3.2 // This is called with the results from from FB.getLoginStatus(). function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log(response); // The response object is returned with a status field that lets the // app know the current login status of the person. // Full docs on the response object can be found in the documentation // for FB.getLoginStatus(). if (response.status === 'connected') { // Logged into your app and Facebook. // So Login was success so you can do your stuff here... I am calling this below function on success testAPI(); } else if (response.status === 'not_authorized') { // The person is logged into Facebook, but not your app. document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { // The person is not logged into Facebook, so we're not sure if // they are logged into this app or not. document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.'; } } /* So if success logged in we call this functiom Here we use FB graph API to get user's data... ***************************************************************************** 3.3 */ // Here we run a very simple test of the Graph API after login is // successful. See statusChangeCallback() for when this call is made. // Here we run a very simple test of the Graph API after login is // successful. See statusChangeCallback() for when this call is made. function testAPI() { console.log('Welcome! Fetching your information.... '); FB.api('/me', function (response) { console.log(JSON.stringify(response)); var uname = response.name; var fbid = response.id; console.log(response.email); }); }<fb:login-button scope="public_profile,email" onlogin="checkLoginState();" login_text="Sign in with Facebook" data-size="xlarge"> </fb:login-button>
0 comments:
Post a Comment