I was interested in developing my app on Azure Mobile Services and notice the authentication flow uses iFrame pattern which does not work on Internet Explorer mobile. However, the authentication works fine on Safari mobile. It seems silly to develop an app using a Microsoft service that isn't supported by Microsoft browser. I assume there is a work around but I just can't find it. Can someone point me to a link or explain the solution? I could always fall back to building my own ASP.Net website with true page redirects instead of iframes, but I would rather leverage what Mobile Services offers. Any help is appreciated.
Edit (Response to phillipv):
Version:
I was using the starter project that is generated by the Mobile Services portal. It comes with a script reference in the index.html page seen here:
<script src='http://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.2.5.min.js'></script>
I modified the project slightly by adding a login button at the top, which when clicked calls the login function in the SDK, which was taken directly from the sample code as seen below:
client.login("facebook").done(function (results) {
alert("You are now logged in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Perhaps there is some flags i need to pass to the function to force it to use full redirects instead of iframe transport.
Browser Version: I'm not sure where to find this, but I'm on Windows Phone 8.1 which has auto updating apps so I assume whichever IE Mobile that is latest.
Related
My app is built on ionic 1 and I have followed this guide to get things working. https://github.com/BranchMetrics/cordova-ionic-phonegap-branch-deep-linking When you click on the branch url, the app opens up fine.
Now I want to setup android app links. When I receive an email with my web app url, eg: https://app.example.com, this should open up the app if mobile app is installed. If not user should be taken to play store/App store.
Also if the link has query params (the query params will be dynamic), this should be passed to the mobile app. eg: https://app.example.com/mypath?query_params=1234567890
Based on the path in the url, the user will be redirected to the respective page on the ionic app.
I have setup the branch sdk bower install branch-sdk. When I click on the url (https://app.example.com) this still opens up on browser. This is how my index.html in ionic app looks like.
<script src="lib/branch-sdk/dist/build.min.js"></script>
<script type="text/javascript">
console.log("Branch SDK Loading");
branch.init('key_test_ikEKvQjiZRwV1LXZ2hUlamfewwhVQ5rw', function(err, data) {
console.log("Branch SDK Loaded");
console.log("Branch SDK Err and Data ", err, data);
});
</script>
Any idea how to set these things up?
Alex from Branch.io here:
Everything you've described should generally be working once you've done the initial integration process. If you haven't already, I'd suggest reviewing our main integration guide to make sure all the steps were completed.
If you're still having difficulty, get in touch with our Integrations team. They're fantastic!
EDIT: this is due to using Postmark for email sending. To understand why this is a problem, take a read through this blog post. It's primarily about iOS Universal Links, but App Links work almost exactly the same way.
To get this working, you'll need to turn off link tracking on Postmark.
Attempting to load the Facebook MessengerExtensions appears not to work when using the in-browser experience for Facebook messenger (as opposed to the native apps on iOS or Android). When I interact with my bot's persistent menu to open a webview (that is trying to use MessengerExtensions), I get this error in the browser console of a newly opened tab:
Messenger Extensions are not enabled - could be "messenger_extensions" was not set on a url, the domain was not whitelisted or this is an outdated version of Messenger client
I have the impression that MessengerExtensions is simply not supported for the in-browser experience but have a couple of questions:
Can someone find where in the docs this lack of support is stated (because I've obviously missed it if it's there...)?
If this is supported somehow, suggestions for what I might be doing wrong? (I have confirmed that my persistent menu button has messenger_extensions: true and my web_url is whitelisted...)
Is there some kind of workaround (not using MessengerExtensions) for the webview opened in the browser to get the page-scoped user Id (PSUID) for the user interacting with the bot?
For a button generated with the Send API I could conceivably append the PSUID to the URL being opened as a query param (not sure of security considerations on that)
For the persistent menu the web_url of the button action is NOT dynamic (it's configured ahead of time) so I'm unsure how this URL when opened from the browser-based messenger interface is supposed to figure out what user opened it. Thoughts/Ideas?
I've just tried it on the chrome with facebook api version 2.10, and it works. When I clicked on the button, I got a "lightbox" looking window that opened on top of the messenger, and all the proper callbacks are called in javascript.
this is my button json:
{
type: 'web_url',
title: <title>,
url: <url>,
messenger_extensions: true,
fallback_url: <url>,
webview_height_ratio: 'tall'
}
these are a few things that I did:
the button spec should contain messenger_extensions: true
facebook whitelisted_domains doesn't do subdomains, so make sure you whitelist the entire url before the parameters.
fallback_url should be whitelisted as well.
I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.
Is there any tools or way to debug on Facebook Browser? Thanks.
This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.
tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.
Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this
http://192.xxx.1.127:3000/facebook-test
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)
function debug(str){$('body').append("<br>"+str);}
Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers
I am creating a widget in js that will be implemented across many websites,
Facebook requires me to give them "my domain" so they will know that I am verified.
The problem is that the widget will be used from many websites, and I am not going to manuly list all of those domains to Facebook.
How can I enable my app to work from those different websites using js only? (for the widget)
Thanks in advance.
Your widget will probably need to load its FB code within an iFrame that is hosted on your own domain. Then you'll need to use some cross-domain / cross-iframe JS hacks to get your system to communicate with the page that uses it. (Here's a good resource on doing that... http://softwareas.com/cross-domain-communication-with-iframes) This is definitely a pain, but it's the only way I can think of to do what you're trying to do. There may be some good JS libraries out there at this point to make this easier, but I'm not immediately aware of any.
The other option is to create a bunch of Facebook applications that each belong to a different domain. This would also bring some pain in terms of maintenance, but it would simplify the JS code you'd need to write quite a bit. This approach has some upside in terms of robustness -- if one of the sites using your widget goes rogue and gets the application banned for whatever reason, you other client sites won't be affected.
Facebook used to provide a "clone application" tool but just now I couldn't find it.
i use ajax for something similar. i ajax to a php page, and use the php sdk for all the requests. cross domain just fine.
EXAMPLE: should request most recent albums updated on facebook and display cover photo linked to the album on facebook.
<div id="pagealbums"></div>
<script>
function showAlbums(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttpA=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttpA=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpA.onreadystatechange=function()
{
if (xmlhttpA.readyState==4 && xmlhttpA.status==200)
{
document.getElementById("pagealbums").innerHTML=xmlhttpA.responseText;
}
};
xmlhttpA.open("GET","http://anotherfeed.com/feed.albums.php?pageid=facebook&type=list",true);
xmlhttpA.send();
}
showAlbums();
</script>
I am trying to get an App to redirect to an external website. I have found a company who has done it (See image). If you type in their name "Safarinow" the first result comes up which is an App. When you click the app you get redirected to "http://www.safarinow.com".
Would anyone know how to achieve this?
p.s. I am not actually a developer but rather a Social media manager so I have a limited understanding of coding etc. I have just been asked to find out how to do this for the lazy dev team.
Thanks in advance
That could be done by using Javascript in your application iframe. That javascript can change the top-url like that:
window.top.location = 'http://www.my-website.com/';
You just have to run this code when your website is loaded. For example by using jQuery:
jQuery(window).load(function() { window.top.location = 'http://www.my-website.com/'; });