Make Facebook permission window modal - javascript

I'm using the standard code from Facebook JS SDK in order to get the permissions for an application (this is an example with email permission):
FB.login(function(response) {
if (!response.authResponse) {
//user refused to grant permissions, redirect to the 'index' page
window.location = "/";
}
}, {scope:"email"});
When the user tries to get into the application's page (the function above is on page load), the permission request window pops-up, but it can be moved or even put in icon, while the user can still view the page. Is there any mean that I can assign the permission request window as a modal one?

You can get the user to login using the getLoginUrl() function in the PHP SDK. This redirects the user to a complete Facebook Login page and then have it redirect back to your app once complete.
E.g. https://www.facebook.com/dialog/oauth?client_id={app_id}&redirect_uri={redirect_url}

Related

How to redirect user to home page after login (JS, HTML)

i tried to create (my first) login page, i did communication between client and server with WebSocket in JS, it check credentials of user (Token that makes you login to page). Only thing that i can't figure out is how to redirect user to other page, with sure that, he will be logged into this account and to protect from not authorized users. (server -> (JS) nodemon, client -> JS, HTML, CSS)
I expect that someone will make this topic clear to me, and explain how to code it :)
I'm also new to js. but I thing the way you can do this
by using window.location.href = "homepage.html"
steps
create a homepage.html file
on successful login attempt redirect user to hompage.html file by window.location.href = "homepage.html"
on homepage load you will check if user's valid token is saved or not( or by whatever method you are authenticating a user)
if user is authenticated user then show him homepage's content otherwise redirect him ho login.html page.( will be used to prevent if user trys to access homepage.html directly by entering url in search bar)
I hope this answers your question. :)
window.location.href = "/";

How to authorise user for a web page in FB messenger, without logging in?

I am building a chat bot in FB messenger that saves user profile data, food and calorie consumption. I am using Node/Express/MongoDB for the backend and want the user to be able to open a personal dashboard page inside the chat with a link. So that URL would be something like www.myapp.com/:id where :id is a personal key.
The problem I have is how can only the user belonging to this page and data open this without having to login? Normally you would go to a website, login and be able to see the page, but this not a step I want in a chat bot. I want the user just to open the page in the chat, whether that is results in opening a browser tab or a native webview. Any advice on how I can achieve this?
To verify if the user on the page is the facebook user you intend the page to be for, add FB Messenger Extensions to the page.
When clicking a webview in your bot, Messenger extensions will be able to tell who they are logged in as, and allow you to do whatever you want with that info. In your case, checking if the userid matches the one passed by your bot in the url. There are many ways to check this, like splitting query strings, but I stuck with the example route in your question.
Use the following on your dashboard page. The below will check with FB who the logged in user is, and if it doesn't match the ID of the link they followed, deny them access with a redirect.
<script>
MessengerExtensions.getContext(<YOUR-APP-ID>,
function success(thread_context){
// User ID was successfully obtained.
var psid = thread_context.psid;
// Grab the user id from your url (assumes your url is /<USER_ID>)
var loc = window.location.pathname.replace(/^\/|\/$/g, '');
if (psid !=== loc) {
window.location.replace("http://YOUR_DOMAIN.com/error")
}
}, function error(err, errorMessage) {
// Error handling code
});
</script>
Docs on getting user id with Messenger Extensions
Try this:
Open Messenger, then open DevsConsole and go to Network tab. Now paste your link and click it. In the Network tab open the request details issued by the click. Under "Form Data" you should see this:
q:[{"user":<your_fb_id>,...
You can use this id to authenticate the user in your app - just couple it somehow with the authorized user in your app. This is just the first idea off the top of my head, it should be quite safe if you mix it e.g. with CORS security headers.

Spring Social - How to Redirect to original URL or authenticate via Popup/Iframe with reload

I have a web application which uses spring security with spring social integration. I have placed sign-in button (form post) on the menu of the application which can be accessed from any of the paths/webpages. I am able to sign-in by posting on /signin/{provider} from my webpage which redirects to google's login page for authentication and upon successful authentication redirects back to a "configured URL". I want this URL to be dynamic so the user is redirected back to original URL where the user clicked on Sign In With Google button.
Options I have:
Use SignInAdapter to return the URL to be redirected to. We get the native web request object here in signIn() method but I am not able to find a way to send some parameter say, callback url, during initial signin form post which may become available in signIn() method.
Upon FormPost, instead of redirecting in the same window, open an iframe/popup to handle the post response (which is actually the providers url like http://accounts.google.com/......). And after successful authentication reload the parent page. But here iframe does not allow cross domain urls. For popups, I don't know how to bring form post response in a popup.
This is an e-commerce application so want to strive for some best practices in terms of security and users constraints (like blocked popus).
Finally got it working with second approach mentioned in the question. Instead of doing sign in form post (signin/{providerId}) directly on click of "Login with Google" button, open a popup window (child window) with something like :
<button type="submit" onClick=
"window.open('/signin?formId=googleForm','Ratting','width=550,height=400,left=150,top=200,toolbar=0,status=0,');" class="googlelogin" style="border-width: 0px;">
</button>
and on this popup window, through javascript, do an auto form post during onload.
Configure the redirect url, which loads after succesful signin, to a page which has a javascript code which reloads your parent window. Something like:
(function(){
if (opener) {
opener.postMessage("reload", '*');
window.close();
}
else {
window.location.assign('/');
}
}());
The parent window should have a listener for message posted by child window. Something like:
function listener(event){
if (event.data === "reload")
document.location.reload();
}
if (window.addEventListener){
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}
Hope it helps someone looking for the solution to a very trivial use case like this.

Facebook Authentication before showing page

I trying to use facebook authentication in my ember.js app. If the use already have session with facebook (he already have opened facebook in another tab) and he visits my page, first login screen is shown for a moment and as soon as application gets response from facebook, user is redirected to Welcome page.
If user already have facebook session, How can I wait for facebook response and based on response decide to show my html.
In other words, I want to execute my javascript code before rendering the page. I am using following library for facebook authentication
http://luansantos.com/2012/03/06/using-facebook-js-sdk-with-emberjs/
Use deferReadiness method
for ember-facebook it could look like this (not tested):
App = Em.Application.create(Em.Facebook);
App.deferReadiness();
App.set('appId', 'YourAppId');
App.addObserver("/auth-token", function(sender, key, value) {
if(value == false) {
App.advanceReadiness();
}
});

Azure ACS Popup or In Page Redirect, What's better?

What to get more opinion on something I'm working on right now and what do you think is better in this situation.
Right now I'm building a login using the Azure ACS, and I wanted to know which would be better.
Option 1
When a user clicks the login they want to use it will open a popup window, and then they can login in there. But I can't close that popup window. Once they logged in I was hoping to close the popup and redirect to a different page from the tab they are on, but I'm not sure if that's possible with ACS.
Option 2
There's the in page redirect but that takes the user away from the site, and it's something I really didn't wanna do.
Is there a way to get option 1 to work the way I want it to work with Azure ACS?
As in:
User goes to my sign in page
User hits Google or Facebook
Popup open with the respective sign
After you logs in, popup closes
Tab user is on is redirect to user page, and I still have the FormCollection Object to use in that view.
Here's the js I'm using.
$(function () {
$(".signup a").click(function () {
var sizes = ["width=850,height=500"];
var url = $(this).attr("class");
var name = "popUp";
var size = sizes[0];
window.open(url, name, size);
});
});
In your ACS Relying Party configuration you have "Return URL" configuration. This URL is where ACS will post your security token. Or in other words the final redirect location once the user logs in with an identity provider.
So what you need to do is set the Return URL to something like: https://mysite/loggedin
And in the loggedin page/view reload the page which opened this page and close this page:
$(function() {
window.opener.location.reload();
self.close();
});
Once the ACS redirects to your site WSFam will create via WSSam the WS Fed session cookie, and once you reload your opener page, your page will be loaded with the WS Fed cookie which means you will have the logged in user.

Categories