Windows Live JavaScript SDK authentication/login (OAuth) handling trouble - javascript

I'm currently looking at the Microsoft Live JavaScript SDK (OneDrive mostly) and I'm having some problems with the OAuth login process. I am using the examples found on MSDN pages to log-in/authenticate but there is something weird going on.
Whenever I do WS.init() my page refreshes... and when I call the same function again I get the popup window I expected. I click to accept, but the popup does not close and instead load the page which I came from.
I normally would expect no redirect here at all and the popup window should just close normally leaving me on the page from which I came.
I have ensured that my redirect URI (account.live.com application settings) is the exact same as the hostname I am developing this thing on. I faced a similar problem with dropbox.js's OAuth process, but that was simply solved by adding a OAuth reciever page. So I get the feeling that I'm missing something here. Anyone else familiar with how this works ? I'm having trouble finding any info on this.

After some more digging I finally found my answer. Turns out Windows Live SDK has the same solution as dropbox.js (which I mentioned in my question).

Related

Pop Up not redirecting after successful login into azure AD

I have implemented Azure AD with my web application. on clicking login window a pop up open with URL https://login.microsoftonline.com. it ask for Azure ad username and password, After successful login a code is return as parameter but pop up never route back to main page it just stays there.
Has anyone encountered this scenario?
This was working but stopped suddenly. Can there be a proxy issue or browser issue?
Many users have said that if you create a UserAgentApplication on the redirected page it will close the popup.
If you are using MSAL, you need to have the msal object instantiated in the page pointed to by the redirectUri, so that this object closes the popup.
You can also resolve this by using an SPFx extension on every page so the login popup is able to close. In the redirect URL (SPFx/AAD), you can specify the root site collection URL.
See related threads:
https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/174
https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/611
Angular Application stuck in an endless loop
I faced the same issue for SSO in Angular Project,
In my case, I created a wrong platform (i.e. Web).
Once I created a platform "Single-page application".
It worked fine for me.
I hope this might help someone.
Documentation URL for creating platform : https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-app-registration
Documentation URL for angular integration : https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-angular-auth-code

Check if app is installed from webpage

I have an iOS and Android app and I'm building a corresponding website. I would like that the webpage, if opened using a mobile device, opens the app or its corresponding app store page (without using Facebook app links).
On the app side everything is working, including the url schema.
Does someone know how to implement this procedure, without external services, using HTML and JS?
Thanks in advance for your help.
To be honest, this is kind of a pain to implement on your own. There is no easy way to handle everything without a ton of nasty edge cases, most notably the 'Cannot Open Page" error users will see if they don't have your app installed. Until iOS 9, a reasonable basic implementation was putting a JavaScript redirect like this into a dedicated redirect page on your site:
setTimeout(function() {
window.location = "https://yourdomain.com";
}, 25);
// If "yourapp://" is registered, the user will see a dialog
// asking if they want to open your app. If they agree, your
// app will launch immediately and the timer won't fire.
// If not installed, you'll get an ugly "Cannot Open Page"
// dialogue and your fallback page will open when the timer expires.
window.location = "yourapp://";
Unfortunately this would still show a 'Cannot Open Page' error, but until recently it was possible to get around this in a reasonably user-friendly way by using a more nuanced version of this script. Sadly, Apple intentionally broke that with the iOS 9.2 update, so custom URL schemes are actually pretty much useless for deep linking now, unless you are certain the app is already installed on that device.
Apple is obviously trying to push the newer Universal Links standard as much as possible. Universal Links lets you use a normal http:// URL to a page on your website (the page could be a simple redirection to your desired fallback webpage without the custom URL trigger that causes the 'Cannot Open Page' error), which is intercepted by your phone and sent directly into your app if installed.
This is quite a lot to handle, so the best option might be a free service like Branch.io (full disclosure: I work with the team) to take care of all the technical aspects. You can find examples of apps using the Branch service here.

Ink Filepicker broken with wall links from the Facebook IOS app

When posting a link to our web site to someones Facebook wall, the ink file picker stops working when the person uses the Facebook IOS application.
The file picker comes up and works normally, but as soon as you try to submit the image, the error in the attached screenshot appears below appears.
The text is cut off but it is something like "...results to application. Communication iframe...".
All works fine in the android FB application which clearly opens links in an external browser. But with the FB IOS, our web site seems to render inside the FB app through some sort of deep linking magic. It seems clear that this is some sort of cross domain issue that has been recently introduced by changes at FB.
Has anyone come across this? Any workarounds?
This question may be related to this one here:
Opening Up Facebook app outside Facebook
Full message is "Cannot send results to the application. Communication iframe not found.. Please close this window and try again." (should be responsive)
Filepicker isn't able to communicate when it is run inside FB IOS app. A solution might be to force it to display filepicker in the browser.

Meteor rendering in Adobe DPS Overlay after redirect from Facebook Login

I'm running into a pretty specific problem (2 problems, actually, but I believe they're related) and am hoping someone out there can shed some light on what's going on.
I have a Meteor application running inside an HTML overlay inside of an Adobe Digital Publishing Suite (DPS) article. I've tested this with as simple of a configuration as possible, and am able to reproduce the issue consistently.
Overview
1- Meteor works fine in Mobile Safari, and Mobile Chrome on an iPad (3rd gen, ios 6.1.7) but the rendering inside of an Adobe DPS article is generating an error:
TypeError: 'undefined' is not a function
While this error doesn't affect rendering, I believe it's related to my 2nd problem:
2- Upon redirect from facebook authentication (alt. / non-JSSDK flow) the page will not render at all, but there is no additional error message other than #1 above.
Code Example / Details
1. "Headless" browser
I'm Using an HTML overlay in an article, set up inside of InDesign and published to DPS using Folio Producer. The overlay is pointing to a test url (e.g. http://dmx.dod.fbchat.meteor.com), and is refreshed each time the specific page on the article is brought into view.
The details of the browser are as follows:
appVersion: 5.0 (iPad; CPU OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like 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 do know that there are some restrictions on this browser (for example, alert = null;), and it's considered "headless" because it's not a legitimate version of chrome or safari, with no address bars, etc.
2. The redirect is achieved via the following method
create a brand new Meteor project (e.g. meteor create DPSFBRender)
decide on the meteor uri you're going to host it from (e.g. dmx.dod.fbchat.meteor.com)
create an application on facebook (https://developers.facebook.com/apps), note the App ID.
add your meteor uri to the domain and to the redirect uri on facebook. for example:
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 testing URL were dmx.dod.fbchat.meteor.com, my FB App ID were 514080555337856 and my list of permissions were lengthy (see below), my 2nd 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
deploy / publish your article, open it up inside DPS viewer on the iPad, and click on the button, to activate the redirect.
You'll be prompted to allow the FB app permissions, accept.
You'll be navigated back to your meteor url, but the page will not appear.
If you change article pages, go out of the article and back in, or just bring up your app bar, and then go back to the article, the page will refresh, and render.
As long as you have your permissions set (as long as you aren't prompted to accept), the page will render fine. It is only after the FB prompts from the custom login and the subsequent redirect that the page won't render.
If you want to test it again, log into your fb account in a regular browser, and delete the app.
3. Debugging / Discovery
I started debugging this, using debuggify, and that's when I was able to see the TypeError: 'undefined' is not a function error. It doesn't stop anything from rendering at first glance, but I believe on the redirect that it is the culprit (see thoughts section below).
This error will appear on ANY meteor page that is rendered inside a DPS overlay. It doesn't have to be a redirect, or have anything on it. You can simply create a new meteor project, deploy it, point an HTML overlay in DPS to it, and the error will appear (only noticeable with a remote debugging tool like debuggify).
Likewise, this error will not occur inside of the IOS safari mobile browser, or the chrome browser. The above-mentioned rendering problem after redirect from FB will also work as expected in both browsers (the page will render after the "accept permissions" screens).
The 'undefined'... error has no stack trace:
Stack: TypeError: 'undefined' is not a function at ? (http://dmx.dod.fbchat.meteor.com/:1:0)
..although we do know that it happens after the load event:
Happened: After onload
Thoughts
I'm thinking this may be a combination of the dynamic JS loading inherent in Meteor, combined with the redirect. Simply, the redirect isn't waiting long enough for the JS to load (especially handlebars) and it therefore isn't rendering.
I don't believe the entire page is shut down, because in my app (not the tests) I am harvesting the App Key inside the URL Hash, and successfully storing it. So, I know that Javascript isn't completely shut down on the page. It's just the rendering portion for some reason that is not working.
I believe the 'undefined' is not a function error is related - could be Jquery, Handlebars, DDP.... something isn't loaded when expected. On a normal page load (e.g. a refresh) the browser is overcoming this. On the redirect from FB, it isn't.
It may have to do with the JS/Browser restrictions for the embedded DPS browser. Adobe limits some functionality (for security and for performance reasons), and maybe they're turning something off that meteor needs to run.
Workarounds I've tried:
Using the Default Meteor FB Login -- doesn't recognize the 'headless browser', and popups are disallowed in DPS anyway.
Using the standard JSSDK login flow from FB -- same deal, popups aren't allowed
Ideas?
So, at this point, I'm open to anything, even if it's not solving this specific problem.
Workarounds, similar problems you've experienced, thoughts, speculation on why this may be happening on the redirect, but not normally, etc.
I know there may be several ways to skin this cat, but I'm stuck right now, and would love to hear some suggestions. I just need to get FB login to work, inside of DPS. I don't care how, even if all the code is client side (this is just a test, not a production system)
I've even considered trying to edit the accounts-facebook and accounts-base packages in meteor to recognize a headless browser, but don't even know where to start on that...
Also, the 'undefined'... error happens on every single meteor page inside a DPS article, no matter what. That's annoying, and may be useful for some mobile headless browser compatibility improvements, if someone has any idea why it's occurring.
Follow ups are welcome as well. I'll be monitoring this thread.
It turns out that Tom Coleman helped me find this specific problem.
When JS is minified, if there's a missing semicolon, it can wreak havoc, and cause the above-mentioned 'undefined' error.
So, after further testing, I've discovered that this is most likely inside of the Adobe-specific DPS Javascript that is loaded with every overlay.
I've filed a bug with Adobe and will see if/when it's fixed, if it fixes the rendering problem as well.

Facebook Javascript SDK: FB.login() doesn't work on Firefox/IE

I'm building a very simple facebook application that just fetches a user's notifications from Facebook and also allows them to login. The URL is: http://widget.sidepage.co/_jump_frame.html
This works perfectly on Chrome - where the user is allowed to log in and authorize the app through a standard Facebook popup and once the app is authorized, it works well.
The problem is, on Firefox, clicking on the Facebook icon on the widget only opens a blank tab. There are no popup blocker warnings or JS errors thrown at the console.
Any pointers on how to fix this?
oh dude easy fix this is a Defining document compatibility issue...
and for what exactley you will need i suggest doing exactly what I did to find out what your issue was run your app in firefox 16 and request to view the page source and observe the mark up as it is rendered to firefox and then do a little research on what it is that firefox 16 needs as far as a compatible input to run your code. It shouldn't be too bad. Best to you.. A few other sources. On this topic and legacy compatibility.
helpful link
helpful link
hope that helps dude :)

Categories

Resources