How to set up Javascript Soundcloud SDK for Web App - javascript

I'm trying to set up a SoundCloud SDK for a web application.
I've managed to get a pop up asking for authorisation with the following code, on clicking connect however it doesn't respond.
Can anyone see any problems with this?
Here is the Javascript.
SC.initialize({
client_id: 'mygeneratedid',
redirect_uri: 'file:///Users/simonmellows/Documents/Music%20Tech%20(Year%203)/Individual%20Project/Work/GUI%20Design.html'
});
// initiate auth popup
SC.connect().then(function() {
return SC.get('/me');
}).then(function(me) {
alert('Hello, ' + me.username);
});
Here is my callback.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body onload="window.setTimeout(window.opener.SC.connectCallback, 1)">
<b style="text-align: center;">This popup should automatically close in a few seconds</b>
</body>
</html>
I'm running the file on my computer, it's not being hosted anywhere else. Does it need to be locally hosted? Or even on a remote server in order to work?
Any advice would be much appreciated. The above code is just what I've found from the documentation.
Thanks!

To start with the value you specify as the "redirect_uri" MUST match the value you enter as the Redirect URI for Authentication on your registered Apps page on soundcloud.com (this it the same place you can view you client id & client secret).
The redirect URI must be an address that soundcloud can resolve and access.

Related

Trouble in adding the web app in new website with frame tag [duplicate]

This question already has answers here:
Google Apps Script does not load when embedded into iFrame
(1 answer)
How do I embed a standalone Google Apps Script web app that requires authorization into the new Google Sites?
(1 answer)
Closed 1 year ago.
I want to add web app in my website I try with frame tag
I deploy web app as
Execute as: User accessing the web app
Who has access: Anyone with Google account
so it required authentication before stating the app
so I get error in website like
Refused to display 'https://accounts.google.com/' in a frame because it set 'X-Frame-Options' to 'deny'.
so how can I solve this problem?
Error in website
Deploy Setting in Apps Script
App Script Code
1. code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('index').evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function getEmailID() {
return Session.getUser().getEmail();
}
2. index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Your Email ID is : <?= getEmailID() ?></h1>
</body>
</html>
Website on other domain Code on githiub
1. index.html
<!DOCTYPE html>
<html>
<head>
<title>Project 10</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style="margin:0;height: 100vh;width: 100vw;">
<iframe src="https://script.google.com/macros/s/AKfycby4yxHaRJW_CmoTiFgOEXQ0zeD36JPwU4dwzmmMTuJmzONEOto_aItCdD6vBQ3i57Ji/exec" height="100%" width="100%" frameborder="0" noresize="noresize"></iframe>
</body>
</html>
URL of Project
Website on other domain
Website on github domain = https://properson2020.github.io/project-10/
Website Code in github = https://github.com/properson2020/project-10
App Script
App script Web app = https://script.google.com/macros/s/AKfycby4yxHaRJW_CmoTiFgOEXQ0zeD36JPwU4dwzmmMTuJmzONEOto_aItCdD6vBQ3i57Ji/exec
Apps script code = https://script.google.com/d/1_o3_GmywWdyFRwjn6RtKdtBDujBhRtGyWW5FiWmnsELk7P-y7XhO064B/edit?usp=sharing
The getUser() method is deprecated.
Therefore, if you want to retrieve the active user's email address you will have to use either:
getActiveUser()
getEffectiveUser()
It is also important to keep in mind the following:
[getActiveUser()] Gets information about the current user. If security policies do not allow access to the user's identity, User.getEmail() returns a blank string.
Therefore, as long as the web app has been authorized by the user who runs it and the user has no security policies applied, you should be able to retrieve successfully the email address using getActiveUser().
Reference
Apps Script Session Class.

Play cannot reference external javascript

A very basic question
Cannot load external javascript resource on server
I am working on a Play framework project. I've made some basic html view with some Javascript. It works correctlly when I have my js code in the actual view.
However, when I tried moving js code to a separate file and load it using
<script> src="main.js" </script>
It works correctly when opened using plain chrome browser. However when I run it on server and it fails and chrome dev console prints the following message
GET http://localhost:9000/main.js 404 (Not Found)
I've tried setting up a GET request on targer URL but cannot pass main.js as an arguement to Ok method
def getmainJs()= Action {
Ok()
}
Is there a painless way to access the js code or do I have to go through the process of setting up the JavacriptRouter menntioned here. The app is only going to be 2 views to I kind of don't care about scalability
I created an example on how to serve a Javascript file:
Routes:
GET /foo sk.ygor.stackoverflow.q53319493.controller.ApplicationController.foo
GET /assets/*file controllers.Assets.versioned(file)
View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="#routes.Assets.versioned("main.js")"></script>
</body>
</html>

Google Sign-In Pops up and closes Immediately after

Just to make this clear, I am referring to this google sign as there are multiple: Google Sign-In for your web app
I have both the meta tag and script tag in the header of my page:
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="[ThatsWhereMyIDIs].apps.googleusercontent.com">
as well as the div element for the Sign-In within my body:
<div class="g-signin2" data-onsuccess="onSignIn" onclick="console.log('yay');"></div>
I used the 'yay' to check if the element was triggered, and it is, however the "data-onsuccess" is never called.
What could be the reason for that and furthermore, how do I fix it?
Any help is appreciated.
I have the same problem but only when I deploy. It works in a local server. I think it is because it requires https and I do not have that for the server I am testing.

javascript Open gmail and signin automaticly

I'm just building an experimental personal site where I could log myself into gmail with the press of a button.
Everithing goes fine, when I manually go to the gmail site and type the javascript command into the url line like this and press enter:
javascript: document.getElementsByName('Email').item(0).value='name'; document.getElementsByName('Passwd').item(0).value='password'; document.getElementsByName('signIn').item(0).click(); void(0);
But when I try to do the same from a page, nothing happens... Can someone please help me out?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script>
var name = 'name';
function login(url1) {
win = window.open(url1, nome);
win.document.getElementsByName('Email').item(0).value='name';
win.document.getElementsByName('Passwd').item(0).value='password';
win.document.getElementsByName('signIn').item(0).click(); void(0);
}
</script>
</head>
<body>
<button id="buton1" onclick="login('https://accounts.google.com')">GMAIL LOGIN</button>
</body>
</html>
I've checked a lot of forums and answers, and it seemed that this method should work, but it doesn't.
Now imagine that your code was followed by similar code that would send lots of spam to people using your GMail account.
Cross domain DOM manipulation is forbidden by browsers as it would be a huge security hole.
The exception is postMessage, but that requires the cooperation of both sites.
You need a browser extension for this sort of thing.

Cannot get rid of FOUC on my website

I am struggling with a flash of unstyled content on my website. When first visiting it you see the unstyled content before it is actually loaded on to the screen:
You can see for yourself here: http://galaxynode.com
I am not fluent in html so I need some detailed help:
Here is my code:
<html lang="en">
<head>
<title> Galaxy Node Server Hosting | Premium Minecraft Hosting For $2.99! </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css;">
<meta name="Author" content="Steve">
<meta name="Keywords" content="minecraft server hosting, dedicated server hosting, cheap minecraft server hosting, best minecraft server hosts, minecraft dedicated server hosting, online server hosting, free minecraft server hosting, minecraft server hosts, best minecraft server hosting, dedicated servers hosting, galaxy node">
<meta name="Description" content="Galaxy Node Server Hosting aims to provide the highest quality Minecraft servers at an extremely low price.
We have the best customer service of all Minecraft server hosting providers! You will not be disappointed!">
<body background="http://galaxynode.com/images/background.jpg">
<link rel="stylesheet" href="galaxynodewebsite_g.css" type="text/css" media="screen,projection,print"> <!--// Document Style //-->
<link rel="stylesheet" href="index_p.css" type="text/css" media="screen,projection,print"> <!--// Page Style //-->
</head>
<body>
// body content
</body>
</html>
Could someone tell me exactly what I can put in here to stop things from displaying until it is fully loaded? Any fix would be great! I do not know html so please tell me either exactly what I can put in here or something that I can understand without knowing much about html or javascript.
Remove <body background="http://galaxynode.com/images/background.jpg"> You have created another <body> tag.
you are essentially loading your stylesheets when the body is being loaded. You see the flash because the css properties haven't been applied. When the extra <body> tag is removed the stylesheets will be part of the <head> and will load first.
if you want to keep that background add a property in your CSS for the body. e.g.
body
{
background-image: url('http://galaxynode.com/images/background.jpg');
}

Categories