Chrome Extension OAUTH with Spotify API - javascript

I've been writing a chrome extension using the Spotify API and just got to the part where I need OAUTH to finish it up.
I've been looking at the spotify oath page (https://developer.spotify.com/web-api/authorization-guide/)
and it says you can just make a GET call and it'll take you to the page to log in, however when I implement it, it does nothing. I feel like I am missing some code but I am not sure what I am missing.
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// Just alerting it to see what it came up with
alert(xhr.responseText);
}
}
xhr.open("GET", "https://accounts.spotify.com/authorize/?client_id=<clientID>&response_type=code&redirect_uri=https%3A%2F%2Fwww.google.com%2F", true);
xhr.send();
that is the code I have now (with client id filled in), and running it does nothing. (I specified http://www.google.com/ as my callback for now)

An XHR request will not, under any circumstance, open a page.
Running this code should return you the page contents, but you do nothing with it - certainly not properly display it for the user to interact with.
It seems like you need to read more on OAuth in general. That said:
Chrome extension API provides a specific tool for this: chrome.identity.launchWebAuthFlow(). It will take care of showing the auth page to the user and passing the token back to you. You need to use a specific "virtual" URL for it - see the chrome.identity documentation for more details. Also note that this API can't be used in a content script, you'll need to delegate this to the background page.

Related

Can I get code from a private GitHub repository using a GET Request?

I'm building a website and I want to have some simple authentication. I know this isn't the safest method, but I want something quick and simple. Also, there's no sensitive data on the website that needs extremely secure authentication.
Here's the method I want to use:
I have a private GitHub repo, where there is a JSON file with a person's credentials in this format:
{
"admin": {
"username": "USERNAME_HERE",
"password": "PASSWORD_HERE",
"id": 7777
}
}
When a user tries to log in, is there a way a request can get the data from the JSON file?
I tried using raw.githubusercontent.com (raw code) but since the repo is private, There's an access token needed at the end of the URL. The access token also expires in some time and a new one is needed.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(xhttp.response);
let a = JSON.parse(xhttp.response);
}
};
xhttp.open("GET", "https://raw.githubusercontent.com/username/repo/master/json/data.json?token=MY_TOKEN", true);
xhttp.send();
This works for some time, but then the token expires and the token is also visible within the source code so that method's a no.
If there is some permanent type of token that I can use, I also need to hide it from the source code.
If I can't do this, then is there any way I could host a file online, and be the only one with access to it, perhaps with a token? And it would be nice if I could get some ideas on how I can hide a token from the source code.
I know this isn't the safest method, but I want something quick and simple.
It isn't remotely safe, nor quick, nor simple.
When a user tries to log in, is there a way a request can get the data from the JSON file?
Use the Github API to read the file (this will require them to authenticate against Github as a user who has permission to read your repository which makes the whole thing awful).
If I can't do this, then is there any way I could host a file online, and be the only one with access to it, perhaps with a token?
Any kind of server-side authentication system will do that.
And it would be nice if I could get some ideas on how I can hide a token from the source code.
The only way to do that would be to have the user type the token in (or use a password manager, etc).

XMLHttpRequest is not being made from FIrefox extension

I am trying to communicate currently playing YouTube data with a node.js Express server via a Firefox extension. The extension loads correctly. However, the request simply isn't made. As in, the function to send the request just isn't called. I made sure that code execution continues before and after the function is called. Here is the code I wrote to send the video title to the main server.
const hostname = "localhost:3621";
console.log("Plugin Started");
function sendTitle(title) {
const request = new XMLHttpRequest();
const url = `http://${hostname}/?song=${title}`;
console.log(url);
request.open("GET", url);
request.send(null);
console.log("Request sent");
console.log(request.url);
}
This sendTitle() function is called periodically by another function, that retrieves the name from the web page. This function is called using the setInterval() function, and is called every 5000ms
function getVideoTitle() {
// Get the current video title by reading page elements
// This will be used to report the video information back to the server
var pageItems = document.getElementsByClassName("ytd-video-primary-info-renderer");
var titleObject = pageItems[6];
console.log(titleObject.innerHTML);
sendTitle(encodeURIComponent(titleObject.innerHTML));
}
I have verified that both of these functions are being called.
One other thing I tried was running the code I wrote in the sendTitle() function directly from the console. This worked and the request was sent. I also enabled Access-Control-Allow-Origin on the node.js Express server as this was causing issues.
I have no idea why Firefox seems to simply skip over the request.send() part. No errors are reported, and code execution continues as normal.
I can also open the URL that the script produces in another tab and the request is sent fine. I have verified that this is not a problem with the server or the code I have written. I'm assuming this has something to do with Firefox's privacy configurations.
Please confirm that the request was not denied by tracking protection.
You could click this shield icon as next pic after you try to send a ajax request.
Then you could see if this request has been blocked by Firefox. If so please close this block and try again.

Importing events from MS Office 365 (PHP)

I have an intranet site for a small medical clinic, and on the front page I want to display upcoming events associated with the clinic-wide MS Office 365 email account.
I'm new to APIs, so some resources on how to get started would help.
The site is in PHP, but as I understand it, API functions can be done in JavaScript - either way is fine.
Once I can get an XML or JSON file from Microsoft, I'm pretty sure I can figure out how to format it for the site. The problem is just getting the info.
So far I have:
<script>
var req = new XMLHttpRequest();
req.open("GET", "https://outlook.office365.com/api/v1.0/users/{email address}/events", false);
req.send();
console.log(req.status);
console.log(req.StatusText);
</script>
The console logged:
"NetworkError: 401 Anonymous Request Disallowed
I've also tried the line req.open("GET", "https://outlook.office365.com/api/v1.0/users/me/events", false{or true}/ {username}, {password});, to which the console logged
NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
Almost all the documentation I can find is directed toward individual users (employees of a company) interfacing with their 365 accounts through some web-based interface, so almost all of the urls have /me/ in them, indicating they have authenticated somehow. But I want my PHP or JavaScript script to automatically authenticate a single user and retrieve information. I imagine this requires hard-coding the user and password somewhere, but I've found no examples like that.
I'm obviously in way over my head, but can anyone offer any advice on how I can get this done? Or read more about how APIs work? Most of the documentation out there is directed at people who already have a certain level of knowledge, which I don't have, and don't really know how to get.
Thanks.
Missing part is authentication (OAuth) to connect from your app to O365..
Maybe this helps http://msdn.microsoft.com/library/bde5647a-fff1-4b51-b67b-2139de79ce4a%28Office.15%29.aspx
Yes, you do need to authenticate against the Office 365 APIs as indicated previously. To make calls against Office 365, you must register your app for OAuth against Azure AD.
I'd suggest looking at http://dev.office.com/getting-started/office365apis. It should guide you through setting up authentication and show you how to make the rest call.

Communicating between client and server

If I were to build an app where a user could put javascript code on their website and, for example, it would track the number of impressions the site got, what would be the best way to send the information to my server?
XHR / XMLHttpRequest
The verb is probably best implemented as POST here.
MDN API link is the best I can give since it's a vague scenario:
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
Here is a small function to send an XMLHttpRequest:
function sendXMLRequest()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","http://myserver.com", true);
xmlhttp.send();
}
(adapted from http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp)
You would also have to find some way of calling this function when the site gets an 'impression' (or whatever event you want to track).
I would recommend using a web bug/pixel tracking. This makes a GET request to the server. This request wont be blocked by the same origin policy. The big analytics companies all use web bugs. Omniture and Google Analytics.
Basically you do a fake image request and put some extra tracking data on the call.
var webBug = new Image();
webBug.src = "http://yourserver.com/tracking/?visitorId=abc123&sessionId=123abc"
or just put the image into the html,
<img src="http://yourserver.com/tracking/?visitorId=abc123&sessionId=123abc"/>
http://en.wikipedia.org/wiki/Web_bug

Javascript XMLHttpRequest Login Promp

I am new to javascript and wrote a simple extension to parse the gmail atom feed and display the number of unread emails.
My problem is if for some reason you're not logged into your google account, the extension attempts to check the feed and Safari will display a login box like this.
alt text http://img576.imageshack.us/img576/743/loginhd.png
And since I check every 10 seconds these prompts stack up and hijack the browser to the point where you can't go login. Also loggin via this prompt seems to do nothing.
Is there anyway to ignore failed attempts to read the feed? My request looks like this:
xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', url, true);
xmlHttp.onreadystatechange = checkForNewMessagesCallBack;
xmlHttp.send(null);
I do not see it as a failed attempt so you can ignore it .. more like in progress and you are asked for info so that it can complete..
If this is for personal use you could use the https://username:password#URL
The security risks of that method are of course obvious ..

Categories

Resources