Facebook Javascript Canvas Login Redirect - javascript

I am building a facebook canvas application and want users, when they visit "apps.facebook.com/myApp", to be presented with the appropriate login dialogue immediately instead of showing my canvas page without having been logged in. With all the different login flows, I am confused!
Using javascript, how do I do this? Do I set the default canvas page to be a page with a script with a redirect url in it?

You should not immediately present them with the login dialog, it is best practice to show some intro screen with information about your app first. Else there is only a small authorization information and no use will really know what the app is about. Then let the user click on a "Login/Use/Start/..." button to present the authorization popup with the FB.login function of the JavaScript SDK:
https://developers.facebook.com/docs/reference/javascript/FB.login/
If you really want to require user authorization right at the beginning, user the PHP SDK:
https://github.com/facebook/facebook-php-sdk
See "$facebook->getLoginUrl()" - just redirect to the resulting URL if the user is not logged in.

Related

Facebook Login Button with redirection

i recently started working on a project that it required a Facebook login button.
I have successfully set up the button apart from the part where I must redirect the user to my dashboard area which must only be accessible to registered users.
From my understanding I need to fill this field here in the developers facebook settings page
which will redirect the user to my dashboard. I am guessing that the redirection link must include a token which will login the user automatically in my dashboard. Am I right so far?
My concern is if that link can be accessed by anyone and if someone get their hands on it can use it to login to my app without registering.

Is there any way to ask popup permission at first login?

In my project, pop-ups are a core part of the system. Is there any way to ask the user to allow pop-ups on the site at first login, as it happens for HTML 5 Notifications?
EDIT: I know pop-ups are a usually a bad practice, but our customer asked us to implement them for a good reason
You could use a url fragment appended to the end of the login redirect url (if when you login it redirects to /home you could make your login route redirect to /home#something_here instead), and have some javascript in your front end to detect when a page is loaded with that fragment and display the popup.
Also, if your popup is just HTML, you could conditionally render it only when rendering the login success page.

Facebook Javascript SDK new access token in the background

How can I refresh a long lived facebook access token in the background? From the facebook documentation
Even the long-lived access token will eventually expire. At any point,
you can generate a new long-lived token by sending the person back to
the login flow used by your web app - note that the person will not
actually need to login again, they have already authorized your app,
so they will immediately redirect back to your app from the login flow
with a refreshed token - how this appears to the person will vary
based on the type of login flow that you are using, for example if you
are using the JavaScript SDK, this will take place in the background,
if you are using a server-side flow, the browser will quickly redirect
to the Login Dialog and then automatically and immediately back to
your app again.
What I'm trying to reconcile is that in order to get a new access token you need to have the user login. In order to login, you must call FB.login(). According to the documentation, a user should click a button in order to login.
As noted in the reference docs for this function, it results in a
pop-up window showing the Login dialog, and therefore should only be
invoked as a result of someone clicking an HTML button (so that the
pop-up isn't blocked by browsers).
How can you refresh a long lived access token in the background with the facebook javascript SDK?
You can only refresh a User Token if the user visits your website: Use FB.getLoginStatus for that. You do not need to use FB.login - it would only work on user interaction (click event) anyway, because browsers usually block the popup if you try to call it automatically.

What options are there for embedding the Facebook Authorization Dialog in a custom modal dialog?

I am using ASP.Net MVC3 and have a very basic web site that uses the server side flow to perform the Facebook authentication and authorization. Presently the login button is defined with the following HTML:
I am able to get the user redirected to Facebook where they login and authorize the permissions and the site does get redirected back to my controller with an authorization token that I can convert to an access token. I have the 2 following problems that I am trying to solve:
1) Within the anchor's href, I have the "....display=popup" and was hoping that would result in a popup but instead my entire page is redirected to Facebook. Is there a way to use the server side flow with some JS to make the authorization dialog as a popup without resorting to using the Facebook Javascript SDK?
2) Assuming I can show the Authorization dialog as a popup, is there a way to force it to show within a truly MODAL popup dialog such as a jQueryUI Dialog so we can add some content with it? I have seen sites that have the popup but it just dims the page but it doesn't enforce that the user to complete the authorization before clicking back on the page.
Any insight is much appreciated.Thanks.
1) You can use the Facebook Like button or call FB.Login to create a popup. See the Facebook Javascript SDK for reference: https://developers.facebook.com/docs/reference/javascript/FB.login/
2) This is not possible.

Twitter connect from website without popup

I have a problem with a website I'm currently working on.
I have added a Tweet box to my page for the user to tweet about the current article. If the user submits from the Tweet box and is not currently logged in or is not connected with my site, he/she gets a popup from twitter asking for username/password and/or if he/she accepts the connection with my site.
If the user accepts the popup is closed and all is good, if the user declines the window is just closed and the tweet remains a dream of what could have been.
So far so good, But! My site is mainly aimed at smartphones (in particular iPhone), and if the user adds my site to the home screen (which I recommend) then the twitter popup fills the whole app window. This I can understand, and everything works out if the user accepts.
If, on the other hand the user declines, there is no window for the button to close so noting happens. My webapp is running fullscreen and standalone so doesn’t even have a back button. So if the user doesn’t accept the twitter connect, he/she basically needs to restart the app to get avay from the “popup”.
So (finally ;) ) my question is this; is there a twitter page that performs the connect authentication that is not required to be in a popup? A page that basically sends you back to the callback url on both accept and cancel? Or is there a different approach that I have over looked?
Looking forward to some helpful tips!
EDIT
I was suggested The standard OAuth flow and Web intents, the problem is that the app needs to be client code/javascript only. This makes The standard OAuth flow impossible because it sends application secrets over http/https wich makes me put the secrets in the javascript ( I might be somewhat of a hobbyist programmer but there are limits ;) ).
Web intent pages don't have a cancel/back button so I'm still stuck if the user dont want to connect and is running my app in stanalone mode.
I guess I should have included this in the original post, thanks anyway for the suggestions.
The standard OAuth flow for Twitter does not require a popup. You can instead redirect the current window. You will then have to process the the form submit yourself and post the status through your server.
You might also checkout Web Intents. The user posts the tweet from a mobile optimized twitter.com page.

Categories

Resources