I am facing a rather specific problem (in fact, 2 problems, but I believe that they are related), and I hope that someone there can shed light on what is happening.
I have a Meteor application running inside an HTML overlay inside an Adobe Digital Publishing Suite (DPS) article. I checked this with the simplest possible configuration and was able to reproduce the problem sequentially.
Overview
1 Meteor works fine in Mobile Safari and Mobile Chrome on the iPad (3rd gen, ios 6.1.7), but rendering inside an Adobe DPS article causes an error:
TypeError: 'undefined' is not a function
Although this error does not affect rendering, I believe this is due to my second problem:
2- When redirecting from authentication to facebook ( alt./non-JSSDK flow ), the page will not be displayed at all, but there is no additional error message other than # 1 above.
Sample Code / Details
1. Headless Browser
I use HTML overlay in an article configured inside InDesign and published to DPS using Folio Producer. The overlay points to a test URL (for example, http://dmx.dod.fbchat.meteor.com ) and is updated every time a particular page is displayed in an article. Browser Details:
appVersion: 5.0 (iPad, CPU OS 6_1_3, like Mac OS X) AppleWebKit / 536.26 (KHTML, e.g. Gecko) Mobile / 10B329
userAgent: Mozilla / 5.0 (iPad, CPU OS 6_1_3, like Mac OS X) AppleWebKit / 536.26 (KHTML, like Gecko) Mobile / 10B329
I know that there are some restrictions for this browser (for example, alert = null; ), and it is considered "headless" because it is not a legitimate version of chrome or safari, without addresses, etc.
2. Forwarding is carried out using the following method
- create a new Meteor project (e.g.
meteor create DPSFBRender ) - select the meteoric uri that you are going to place with him (for example,
dmx.dod.fbchat.meteor.com ) - create an application on facebook ( https://developers.facebook.com/apps ), pay attention to the application identifier.
- add your meteorite uri to the domain and redirect uri to facebook. eg:
domain: dmx.dod.fbchat.meteor.com
redirect uri: http://dmx.dod.fbchat.meteor.com/
add the following two lines to the click event for the button inside your default meteor project js file:
var randID = Meteor.uuid(); window.location.href = 'https://www.facebook.com/dialog/oauth?client_id=[FB APP ID]&redirect_uri=[URL WHERE YOU'LL HOST TEST]&state='+randID+'&response_type=token&scope=[LIST OF PERMISSIONS];
So, for example, if my test URL was dmx.dod.fbchat.meteor.com , my FB application id was 514080555337856 , and my permission list was long (see below), my second line would look like this:
var randID = Meteor.uuid(); window.location.href = 'https://www.facebook.com/dialog/oauth?client_id=514080555337856&redirect_uri=http://dmx.dod.fbchat.meteor.com/&state='+randID+'&response_type=token&scope=create_note,email,friends_about_me,friends_actions.books,friends_actions.music,friends_actions.news,friends_actions.video,friends_activities,friends_birthday,friends_education_history,friends_events,friends_games_activity,friends_groups,friends_hometown,friends_interests,friends_likes,friends_location,friends_notes,friends_photo_video_tags,friends_photos,friends_questions,friends_relationship_details,friends_relationships,friends_religion_politics,friends_status,friends_subscriptions,friends_videos,friends_website,friends_work_history,photo_upload,publish_actions,publish_stream,read_friendlists,read_mailbox,share_item,status_update,user_about_me,user_friends,user_groups,user_interests,user_photos,user_relationship_details,user_status,video_upload,xmpp_login';
deploy your meteor app to the test uri (e.g. meteor deploy dms.dod.fbchat.meteor.com )
point your html overlay inside your DPS article to your URL
expand / publish your article, open it inside the DPS view on iPad and click the button to activate the redirect.
You will be asked to allow the permissions of the FB application, accept.
You will be redirected to your meteorite URL, but the page will not appear.
If you change the pages of articles, exit the article and back, or simply lift the application bar and then return to the article, the page is updated and displayed.
As long as you have your permissions set (until you are prompted to accept), the page will look great. Only after the FB prompts you to enter a user login and subsequent redirect, the page will not be displayed.
If you want to test it again, log in to your fb account in a regular browser and uninstall the application.
3. Debugging / detection
I started debugging this using debuggify, and this is when I was able to see the TypeError: 'undefined' is not a function error. At first glance, this does not interfere, but I believe in redirecting that this is a criminal (see the "Thoughts" section below).
This error will appear on ANY meteorite page that appears inside the DPS overlay. It should not be a redirect or have anything on it. You can simply create a new meteor project, deploy it, overlay HTML overlay on it in DPS, and an error will appear (only visible with the remote debugging debugging tool).
Similarly, this error will not occur inside the Safari IOS mobile browser or Chrome browser. The aforementioned rendering problem after redirecting with FB will also work as expected in both browsers (the page will be displayed after the "permission resolution" screens).
The error 'undefined'... does not have a stack trace :
Stack: TypeError: 'undefined' is not a function? ( http://dmx.dod.fbchat.meteor.com/:1:07 )
.. although we know that this happens after the load event:
Occurred: After loading
Thoughts
I think it could be a combination of JS dynamic loading inherent to Meteor, combined with redirection. Just a redirect does not wait long enough to load JS (especially steering wheels), and therefore this is not rendering.
I do not believe the whole page is closed because in my application (and not in tests) I collect the application key inside the Hash URL and successfully save it. So, I know that Javascript is not completely closed on the page. This is just part of the rendering for some reason that doesn't work.
I believe the error 'undefined' is not a function is related - maybe JQuery, Handlebars, DDP .... something does not load when expected. With normal page loading (such as refreshing), the browser overcomes this. When redirecting with FB, this is not so.
Perhaps this is due to the limitations of JS / Browser for the built-in DPS browser. Adobe limits some functionality (for security and performance reasons), and maybe they are forcing something to turn off the meteorite.
Workarounds I've tried:
- Using Default Meteor FB Login - does not recognize a "mute browser", and pop-ups are in any case prohibited in DPS.
- Using a standard JSSDK input stream from FB is the same, pop-ups are not allowed
Ideas?
So, at the moment I am open to anything, even if it does not solve this particular problem.
Workarounds, similar problems that you encounter, thoughts, thoughts about why this might happen when redirecting, but not in normal mode, etc.
I know that there can be several ways to fool this cat, but I am stuck right now and would like to hear some suggestions. I just need to get an FB login to work inside DPS. I don’t care, even if all the code is the client side (this is just a test, not a production system).
I even thought about trying to change my Facebook accounts and account bases into a meteor to recognize a mute browser, but I don’t even know where to start ...
In addition, the error 'undefined'... occurs on every meteorite page inside a DPS article, no matter what. This is annoying and can be useful for some headset-free browser improvements if someone knows why this is happening.
Follow-up is also welcome. I will follow this thread.