React + TS Last.FM API cancel callback - javascript

I'm trying my hardest to properly implement my system with the Last.fm API, but I just cannot get it to work.
I am supposed to redirect the user to https://www.last.fm/api/auth?api_key=<API KEY>&cb=<CALLBACK>", which works perfectly fine as long as the user actually signs in. But if the user presses Cancel, you just end up at https://www.last.fm/api/None instead of the callback. Docs can be found here.
I tried to look into how other sites did it like openscrobbler.com, but the source code is unfortunately of no help. They also simply set the window's href to the right url with the same parameters as I do (logIn function here).
Alternatively I tried using a pop up window but that's also to no avail because I cannot access any of the data inside of the popup (CORS) and none of the events I tried (unload, beforeunload, close, ..) work.
Code I tried to redirect:
window.location.href = `https://www.last.fm/api/auth/?api_key=${api.lastFmApiKey}&cb=https://example.com/`;
And for the pop-up:
const popup = window.open(url, "Last.fm Login", `popup width=${loginWindowWidth}, height=${loginWindowHeight}, left=${left}, top=${top}`);
Any help with either getting the redirections to go right or a trick to get information from the popup window (when redirected specifically so I know when they are on the None page), would be greatly appreciated.
Thank you!

Related

JavaScript redirect user to new page

I am working on a web app using Firebase and Vanilla JavaScript. Let's say I have home page index.html, when user clicks to sign in, a popup appears where he will enter details. Since he signs in it means the URL should be localhost:5000/signin. Is it possible to do it with JavaScript from frontend or is there a need to add Node.js to redirect user respectively.
I am confused how this works and would appreciate if someone could explain how should I approach this.
You can change the url without changing or reloading the page in modern browsers.
window.history.pushState({}, 'Signin', '/signin');
Or you can use replaceState since you are using modal, however it will break back button functionality.
Please look at pushState
This will work:
<script>
function signin() {
window.open("/signin", "_blank", "width=500,height=300")
}
</script>
You can change width and height to your sign-in page width and height. Also, you can add some other properties to your popup. For more information visit https://www.w3schools.com/jsref/met_win_open.asp
This also might be helpful if you want to make your page maximized How to open maximized window with Javascript?

Navigate on another website using Javascript (Fill out a searchField and click search)

It is just that, I have a button that opens the website, but I can't figure out how to fill that field on that website and search for the String that I'm providing.
I really don't know where to look for this.
Right now, I open the website with :window.open(url); but that's it.
Using console, I can fill the txtInput using this $('#txtBuscar').val('geo');
Then click the button with this: $('#btnBuscar').click();
But I don't know how to do this from my function...
Any ideas on what to use?
Website is https://www.mercadopublico.cl/Home
You cannot do this without getting a Cross-Origin Resource Sharing (CORS) error.
Unless the site you are accessing allows it, you cannot access the code.
See How does Access-Control-Allow-Origin header work? for a full explanation.
I think you can't do that. Because when you use window.open(url); the browser opens a new window with url, but you script will be running in the previous window.
You could have the new site open up in an iframe on your page and then navigate the dom with your pages javaScript.

Facebook 'Like' Dialog Appears and Immediately Disappears

I've been having an issue with the Facebook Like button for quite some time. I've looked all over for a solution but am quite stuck. The error occurs on my site www.MapYourVote.com. When you go to a poll page and click 'Like' the dialog appears and quickly disappears. At the same time, the counter also goes to 1 and quickly goes back to 0.
The problem is always solved for individual poll pages by using the Facebook Debug tool (http://developers.facebook.com/tools/debug). Once you use it on the url, the like button will work as expected. The issue is my website is dynamic and I can't use the Facebook Debug tool every time someone creates a new poll. The Facebook Debug tool does not reveal any problems (apart from og image size but I doubt that's the issue).
Here is an example of a page in which the Like button does not work. If you were to enter this url into the Facebook Debug tool, the Like button would work.
http://www.mapyourvote.com/Poll/Election-Result-Feelings/
Any help would be much appreciated!
I also had this problem. I was constructing a referrer url to give link-sharers a credit, so there was a different url for each user that wanted to share something. The referrer link would give the user credit and redirect to the login page of my site. With this configuration, the like dialog would appear for a moment and then disappear again, unless I went to facebook's debug tool.
What fixed the problem for me was to change from a redirect to rendering the page directly from my referral link. In fact, I changed the referral link to be a ?r=refid parameter on my root page URL. It appears to work correctly if facebook doesn't have to follow a redirect to get the og: data.
I had a similar problem and it turned out I had too restrictive cookie policy set in my browser - I only allowed Facebook to use 1st party cookies. When I allowed Facebook to use other cookies, the problem was solved. It's hard to debug when no error appears other than the immediate pop-up closeup.
I had the same problem. It was caused by url value in data-href attribute. I had there url pointing to my localhost.
When I changed the url to existing one, problem was solved.
Hope it helps
For me, the problem (Like popup disappearing after a second) was happening when the Like button URL redirected to another URL.
The fix was to add og:type, og:url, and og:title (required per https://developers.facebook.com/docs/reference/opengraph/object-type/website), then running the URL through the Facebook debugger to clear the cache (https://developers.facebook.com/tools/debug).
More at https://stackoverflow.com/a/16597060/2391566

Facebook FB.login() Popup Won't Close in IE8

I've searched for answers to this -- seems like all the answers relate to the old Facebook API so the solutions are no longer relevant.
The problem I'm having: I've got a custom Facebook tab which has a button on it that, when clicked, triggers FB.login(). The way it should work is: user clicks to log in, popup comes up to authorize the app, user clicks authorize, the popup closes. This flow works correctly on all browsers except IE8 and below. On IE8, the user clicks to log in, the popup comes up to authorize the app, the user clicks authorize, then the content INSIDE the popup refreshes with the content from the redirect URL. Needless to say, this is not the desired experience for IE8 users :(
I've tried everything I could find: doublechecked that there are no javascript errors, ensured that there is a valid channel file, etc. Nothing appears to fix it. Everything is happening through secure (https), so I'm not sure if that has anything to do with it.
I've been trying to fix this for DAYS now; any help would be GREATLY appreciated!
Make sure fb-root element is only once in your page , I have faced this issues and when i made sure that fb-root div is only once the issue got resolved
You should specify a p3p header in all responses from your web server. Please see: http://www.hanselman.com/blog/TheImportanceOfP3PAndACompactPrivacyPolicy.aspx.
By "the content INSIDE the popup refreshes with the content from the redirect URL" do you mean that you are passing a redirect URL? If so, don't do that. The popups work using some cross-domain JavaScript magic with a specially constructed redirect URL. If you put your own, then the popups may break.
Also, make sure you're setting a proper channelUrl when you call FB.init().

How do you break out of frames without breaking the browser's back button?

A site that links to mine keeps my site in a frame, so I added the following JavaScript to my page:
if (window.top.location != window.location) {
window.top.location = window.location
}
Now if I get to my site via the offending site, my site successfully breaks out of the frame. But the back button breaks! The back button sends the user to the framed version of my site, which immediately breaks out again, returning him to where he was trying to leave! Is there a simple way to fix this?
window.top.location.replace(window.location);
The replace method is specifically for this purpose. It replaces the current item in the history state with the new destination so that the back button won't go through the destination you don't want.
jfriend00's answer is indeed correct. Using the window.location.replace method will work without affecting the back button.
However, I'd just like to note that whenever you want to stop a page from being framed, you should do more than just that! There are a couple methods of preventing a simple script like that from breaking out of the frame, which work in many modern browsers. Perhaps you can disable the page, display a message with a link to the full page, something like that. You could also use the X-Frame-Options response header that tells the browser not to display the page in a frame. If you don't take some of these measures, your site could be clickjacked.
Another solution is to open your site in a new window leaving a friendly message in the iframed site:
if (parent.frames.length)
{ window.open("mySite.htm", "MySite");
location.href= "framedMessage.htm";
}
Where framedMessage.htm contains some friendly/warning message.

Categories