Trying to get my head around OAuth 2.0. I am building a cross platform google drive app using PhoneGap Build and JQM.
I am able to format the request URL correctly and on both iOS and Android. It prompts the user for ID/PW using InAppBrowser (tried child browser too). Next user gets prompt with blue button on web page to "Allow Access" just like on other google web sites/apps. On Android all is well user taps allow access and callback finds the success code and I can grab the token. On iOS I get a "Load Error" message in the status bar of InAppBrowser but I can't trap the error to see what it is. It seems as if the redirect parameter breaks things before the startLoad or endLoad event can be called to trap success/failure in the response from Google.
Playing with oauth2-playground my URL looks correct and like I said it is working fine on Android.
Anyone have any ideas what differences I need to look at with regard to iOS? Been stumped here for a couple of days. Any and all help greatly appreciated.
I have tried redirecting back to http//localhost and http//localhost/afterOauth.html where afterOauth.html is a page in the app to give the redirect something to call the startLoad/endLoad event.
Update: I really think the problem has something to do with the redirect I give the original Google request. If I change "localhost" to urn:ietf:wg:oauth:2.0:oob which shows up in the google documentation both Android and iOS behave the same. They take me to a page saying "Please copy this code, switch to your application and paste it there" With the code=4/MyCode below it.
Also, I added a loaderror callback. It does not fire on Android but does on iOS giving error code -1004 and error message: could not connect to the server. However in the event.url of this loaderror it clearly shows the code=4/myCode. What is the missing link here for iOS and successful OAuth between Google?
Related
I am struggling a little bit. I have a common url like www.domain.com/test.html
and i want Android users to get my app open if "test" is included, otherwise if they don't have the app their should be directed to the play store. I got everything implemented and it works with mozilla browser. But using chrome on Android it should be forbidden to automatically open the app if it is available!?. Now if the user enters www.domain.com/test.html and i recognize he is using Android and Chrome i tried the intent stuff in a script in a redirected www.domain.com/android_chrome.html:
<script> window.open("intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end","_self")
</script>
But the App won't open automatically. If i use a regular Link:
Take a QR code
it works. But i want to let it open automatically!
Google restricted starting intents from javascript apps, that's why it isn't working. Security reasons I guess. You should just display nice big link to let user switch to your app instead of website - or let him continue if he doesn't want to launch the app.
Forcing users into using app is bad, IMO. Splash screen suggesting to use it is okay, but don't push it.
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've configured Facebook Login, and it works on desktop browsers. However, when using an actual iPhone connected to my laptop, two things happen:
the first time I enter my login details (with Cordova in-app browser), Facebook gives me this page: http://cl.ly/image/0n3Z083o2H0j
after I close and reopen the app, I look in GapDebug and see a request to something like https://auth.firebase.com/auth/facebook/callback?code=YDFasdfjsdfh893&fb_redirect_uri%22%3A%22file... with an error message "Failed to load resource: You do not have permission to access the requested resource."
It looks like the fb_redirect_uri is trying to get a file path instead of a URL -- is that right? Do I have a data access problem or what?
Not sure exactly what was going on, but I updated AngularFire and FirebaseSimpleLogin and then it worked.
Okay, I'm at my wits end - I can't figure this one out. If you go into Facebook in Safari on a desktop/laptop and in the search bar type the name of my app: "Hopple Hop", and then click on the app itself (not the app page), instead of launching the app, it triggers this error message in Safari:
"Safari can't open "fbrpc://nativethirdparty/f?appid="
Followed by hundreds of characters. Basically, it's a big long URL string, in the "fbrpc://" protocol, and it tries to launch directly into the browser as-is.
As you can imagine, this is not the intended functionality of searching for my app. The intended functionality is that they type "Hopple Hop", click on it, and the Facebook canvas game starts. If you go to
https://www.facebook.com/appcenter/hopplehop/
You can see it there. And if you click "Play Now", it launches properly from:
https://apps.facebook.com/hopplehop/
I know it's probably a configuration issue. There is also an iOS app to go with it.
I'm not sure what the end cause was, to be honest. It appears to be a very specific configuration issue with my phone / Facebook account and the way I've authorized the game. It doesn't seem to be an issue for anyone else. I don't unfortunately know the root cause.
But if anyone else sees this error, it's likely only you are seeing it.
Thanks,
Glen
So far everything I've found on the subject, is a NO.
My app works fine when the user logs in and shares, but both actions require mobile safari, which is a less than ideal experience for the user, has anyone found a way to either share a post or log in to Google + using a UIWebView or GET/POST?.
Any help will be greatly appreciated.
Thanks.
Easiest answer is no, as you say. The SDK will actually try to fall back through the following:
Log in via Google+ app (this is the nice result, but requires having the Google+ app installed)
Log in via Chrome
Log in via Mobile Safari
You can control the first part with the attemptSSO flag on the GPPSignIn object - if you set that to NO it wont try to use the Google+ app. You'll generally want it to try the Google+ app first. Sharing always happens via the web (chrome/safari) with the current API version (1.2.1) though.
You can SignIn via Google+ into UIWebView.
GTMOAuth2ViewControllerTouch *_googlePlusCtrl = [[GTMOAuth2ViewControllerTouch alloc]
initWithScope:#"https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/plus.me"
clientID:GOOGLE_PLUS_CLIENT_ID
clientSecret:GOOGLE_PLUS_CLIENT_SECRET
keychainItemName:#"GooglePlus_Sample_App"
delegate:self
finishedSelector:#selector(viewController:finishedWithAuth:error:)];
Hope this will help you.
Well that's the thing. It's possible. First step - download sample project from here - https://github.com/emysa341/Login-with-gmail-google-g--using-oath-2.0-protocol. Second step, in the response- connection did finish loading, make another request - https://www.googleapis.com/oauth2/v1/userinfo?access_token=%# . Use the access token you got from the 1st request. Now in the response, you will get the user data. Also if you need the user's email, change the scope to "https://www.googleapis.com/auth/userinfo.email".