SoundCloud JS Authentication - javascript

Ok so i've been pulling my hair out for 2 days over this no doubt simple problem.
I'm using their JS SDK, I have created an app, hosted the callback html file, both redirect_uri fields are correctly populated. When I then call the SC.connect the popup loads, I accept permission... then nothing happens. The popup never closes and my authentication is not returned to the original page. I have done everything as they have said in their developer docs. I have checked out their demo pages which work, I have analysed the code, I have even copied to code exactly and run it on my site, same damn problem. Only thing I can think is that it has something to do with the callback.html file. Am I supposed to put code in there to return back to my site after auth? (if so they kept quiet about this in the docs) I checked out the soundcloud version of the callback.html file, there's contains nothing but a link to the sdk.js file? Which I even tried but no matter what I do I can't seem to get the popup to close after auth.
Any ideas guys?
And yes, I'm fairly new to using apis

In Soundcloud's sample callback.html, the code:
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
must be altered to:
<body onload="window.setTimeout(window.opener.SC.connectCallback, 1)">
This allows the popup to close properly and completes the login flow for the client side javascript SDK. Application settings must be correctly configured to the same domain (localhost or production, but not a mix of the two).

Related

Automatic back button functionality in UWP (JS) App

I have a UWP (JavaScript PWA template / VS 2017) that is meant for testing and development of a hosted application. There is not much fancy about it besides letting a developer or tester choose which application build it should navigate to. However, one thing annoys me and I cannot seem to fix it. In a previous incarnation of this UWP, anytime I opened it on Windows 10 and navigated to an app build, it would show a back button at the top that I could use to go back to the index.html for the UWP.
I have scoured the old code to see if I was missing something. I was thinking perhaps I had left out some code to enable the back button and handle when it is clicked. Something that might have looked like this:
// This is javaScript
const navigationManager = window.Windows.UI.Core.SystemNavigationManager.getForCurrentView();
navigationManager.appViewBackButtonVisibility = window.Windows.UI.Core.AppViewBackButtonVisibility.visible;
navigationManager.addEventListener("backrequested", window.history.back, false);
However, there was no such code in the old version. I also checked the code for the hosted app and I didn't find anything like it either. Regardless, whenever I open the old solution for this UWP, I get a back button with all the expected functionality but without any code to handle it.
Is there some kind of declaration in the app manifest or .jsproj maybe? Something that tells the application at build time that we want a back button that works "out of the box"?
UPDATE
I recreated the UWP with a fresh template and did some tests on it. The template automatically sets the start page to https://example.com and on this site there is a link for https://www.iana.org, so I whitelisted that domain in the content URIs. Navigating to the link there works. I get a back button.
Next, I replaced the template code with my own code, pointed it to index.html as the start page, and set up the content URIs. When I try to navigate to anything, I do not get a back button. Even if I go to https://www.iana.org, I do not see a back button.
Last, I replaced the start page with https://example.com. When I click the link on that page for https://www.iana.org, I get a back button.
I also removed all JavaScript utilizing WinRT in order to check if something there might be messing with it, but it had no effect.
Additional Info
After having a look at the old version, a major difference I see is that the index.html for the app was actually hosted and in my version it is part of the app. Per recent comments on this question, it seems that the back button functionality only works for hosted content?
For security reasons, the PWA project requires the project to run in the https environment, or it can be run in localhost when debugging locally.
The PWA project in UWP is to package the existing PWA program. This requires that the PWA project is already in the https or localhost environment. You can view some requirements of the PWA project here
Thanks.

DOM and JavaScript Engine used in Office365 Thick Clients

The product I work on offers SSO into Office365, through both the web and native, "thick" clients aka rich clients. Part of SSO-ing into an Office365 app, such as Excel for example, involves displaying my product's login page inside of the login popup window inside the thick client. The problem is, only on Windows, I get many JavaScript errors when trying to execute the JavaScript included in our login page (it happens to be using AngularJS, but I suspect many frameworks/libraries would be incompatible). It appears that console is not supported, along with document.body, and many other "essentials".
Does anyone have any knowledge of the DOM and script engines that are used here? The first page shown in the SSO flow is Microsoft's login page where you enter your email address, which then redirects to my product's login page (mapped by domain on the email address), and their page seems to render fine, so clearly it's possible to get HTML and JS to work nice (enough). I'd also take a recommendation on any kind of shim/polyfill that would help me get moving, as well.
After doing some more digging, it looks like I was able to solve my problem by specifying an HTTP Response header of name X-UA-Compatible with value IE=edge, which tells IE to render using the latest document standards. It looked like the web view was originally trying to render using IE7 compatibility mode, which explains why none of my JS was working as intended.
See https://stackoverflow.com/a/6771584/3822733 for more information on X-UA-Compatible, this is the question/answer that helped me solve this problem.

WP Admin trying to load asyncronously scripts in a htpasswd protected envirnoment

In my dev environment, for security reasons, my wp-admin folder is protected by basic authentication with htpasswd.
When i'm logged in the admin area (after passing Basic Authentication and Wordpress Login), wordpress tries to load several scripts by ajax with its load-scripts.php service but the script returns a 403 http error (forbidden) because of the Basic Authentication wall.
I've done some researches with no luck about how to solve this issue. Does anyone have any ideas or previous experience with this?
Ok I just fixed my problem. So good to know for anyone will get the same issue.
The solution is to disable the "CONCATENATE_SCRIPT" feature, enabled by default, by adding the following line to your wp-config.php
define('CONCATENATE_SCRIPTS', false);
Now the scripts don't get load by ajax but printed straight to the html page and everything works fine.
I think, although the page loading will be a bit slower than before as it will wait for all the scripts to be loaded, it's a good compromise if we want to add a bit more security to our admin area.
Where is the script inclusion located?
A the head or on the bottom?
The problem may come from the location .
If you can insert some code where you have tried.

google maps API JavaScript not running in html file but runs in w3schools

I attempted to get my current location and display in google-maps.
for this:
I activated the Javascript API(in google.developers site).
got the key to access the api.
copied the code in the link below to a html file( inserting my key when "calling" the api, of course).
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
When I ran the html file in the browser, I received an alert giving the error InvalidKeyOrUnauthorizedURL, but it seems that I did everything right, and actually it seems I really did, because when I ran the exact code in the W3Schools tutorials ("Try it your self") the result showed me my location.
So after this context, I would like to know why I can't run this code directly on the browser, I mean, It's kind of OK using the w3schools but it's not the properly way and it's questioning why it's invalid.
observations:
note that the file is not being hosted, it is my own computer.
I tried to run in Opera and Chrome browser- and they both failed.
I ran codes of google maps api successfully directly on the browser but they didn't need any key.
Thanks
It's because you are not hosting it on the local server.
Your browser won't allow location request to go through even if you allow all sites to track your location.
Set up a server on the localhost interface and then try running it. It should work just fine.
PS. Your browser will tell you when any location requests are blocked. In Chrome there will be a small icon on the right hand side of the URL bar after a request for location has been made.

Two days that all.js (Facebook SDK) is randomly not loading

we are experience since yesterday the "FB is not defined" error, caused by Facebook not serving all.js, which is the core Javascript SDK file.
Looking at the NET tab in Firebug or Chrome developer tools, I can see the get on all.js failing.
After a few page refreshes, it works correctly, then 10 minutes later is again not serving the file.
Is it a Facebook issue? Apparently we have no other network error, and we are not behind a proxy. Anyone else experiencing it? Facebook status page is not reporting any problem, and I cannot find anything recent on Google.
Is it "normal"? like Facebook limiting gets based on some "cap" or anything similar?
I have run into this same issue before. It was something that I could never really pin down but it was believed to be an issue with Facebook. My solution was to grab a copy of all.js and serve it up locally.
Your description sounds like a network issue, but if you are loading the SDK asynchronously and trying the use the FB object before it has fully loaded, it will cause this error and may also stop attempting to load the all.js due to the Javascript error.
To resolve this, put all references to the FB object inside of the window.fbAsyncInit function seen on this page: https://developers.facebook.com/docs/reference/javascript/
This may not be your issue, but that is almost always the solution when I see that error.
You must add the Facebook SDK all.js on the bottom of your page.
Before the Facebook SDK, you must add <div id="fb-root"></div>
After this load, you can call the function FB.
The call of Facebook SDK must be with the document.protocol HTTPS or HTTP.
Good luck !

Categories