Upload videos to youtube with javascript and without signing in to google - youtube

I want to allow visitors of my site to upload videos to my YouTube channel.
I don't want to force the visitors to sign in with Google.
I want the upload to be sent from the visitors browser directly to YouTube using CORS or similar. See example below.
I don't want to handle the video on my server. I don't like the idea of my server first receiving a 1GB (example) file and then sending it to YouTube. It would stress my storage capabilities and my bandwidth.
The example below is almost perfect.
The only problem with it is that it requires the user to sign in user their google account.
What I'm wondering is if I somehow can give the client the proper credentials to use MY account to upload the video.
Is that possible? Can I perhaps generate some kind of access token server side and send it to the client so that the client can upload a video to YouTube under my name?
Can it be done without giving the client the ability to do other stuff such as delete videos / edit my account etc?
Example here: https://youtube-api-samples.googlecode.com/git/yt-upload-javascript/index.html

it is possible. I'm building something similar at the moment. The general idea is that you store all the secure secret data on the server. (Client secret, refresh token etc)
Then when a client wants to upload a video to youtube, you check (via the server ) if the token has expired (1hr expiration time).
If it has you need to request a new access_token from youtube and then pass that back to the client for them to use.
Just for your info, I am using moment.js for the timekeeping and Meteor.js for the app.
var now = moment();
var result;
if (now.diff(Meteor.settings.youtube.expiration, 'minutes') >= 50) {
console.log('Getting new access token...')
var options = {
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
content: "client_secret=" + Meteor.settings.youtube.client_secret + "&grant_type=refresh_token&refresh_token=" + Meteor.settings.youtube.refresh_token + "&client_id=" + Meteor.settings.youtube.client_id
}
try {
result = HTTP.call("POST", 'https://www.googleapis.com/oauth2/v3/token', options);
Meteor.settings.youtube.access_token = result.data.access_token;
Meteor.settings.youtube.expiration = moment();
return Meteor.settings.youtube.access_token;
} catch (e) {
// Got a network error, time-out or HTTP error in the 400 or 500 range.
return false;
}
} else {
console.log('Returning access token...')
return Meteor.settings.youtube.access_token;
}

Related

MIcrosoft Graph get token request failing due to CORS

I am trying to get an access token to access one drive of the user inside the word online add-in. I am following the instructions on this link.
I used following URL to request authorization code from within ms word online add-in which I am developing.
https://login.microsoftonline.com/common/oauth2/v2.0/authorize?
client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&response_type=code
&redirect_uri=http://localhost/myapp/
&response_mode=query
&scope=offline_access user.read mail.read
&state=12345
I generate GET request with the following code:
function getAuthorizationCode() {
var xhr = new XMLHttpRequest();
xhr.open(
"GET",
"https://login.microsoftonline.com/common/oauth2/v2.0/authorize?\
client_id=6731de76-14a6-49ae-97bc-6eba6914391e\
&response_type=code\
&response_mode=query\
&scope=offline_access%20user.read%20mail.read\
&state=12345",
true
);
xhr.send();
xhr.addEventListener("readystatechange", processRequest, false);
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
}
}
}
But server is throwing error saying
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:3000' is therefore not allowed access.
If the above link is copied and pasted into the browser it works fine.
What should I do? Is there any other way to get access token inside MS Word Online add-in.
Office Web Add-ins include support for pulling a token based on the application user. This provides an SSO experience and eliminates the need to have them re-authenticate using the same credentials that they've already logged into the application with.
You can read about this functionality at Enable single sign-on for Office Add-ins.

How do you use an iOS Google ID Token to fetch a user's full profile from the backend (Node JS)?

I'm using the Google Login iOS SDK to login, then passing GIDGoogleUser.authentication.idToken to the server, which I'm then verifying in Node JS. The verification in the code below works fine. "payload" var ends up being correct with basic information about the user.
How do I translate the idToken into credentials that I can use to git the people.get endpoint? (I want to know whether the user is using the default Google profile photo or not, and that is available from the people.get endpoint.) This does not seem to be documented anywhere.
https://developers.google.com/people/api/rest/v1/people/get
var auth = new GoogleAuth;
var client = new auth.OAuth2(GoogleUtils.clientIDs, '', '');
client.verifyIdToken(
token,
GoogleUtils.clientIDs,
// Or, if multiple clients access the backend:
//[CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3],
function(e, login) {
if (e) {
return next(e, null);
}
var payload = login.getPayload();
return next(null, payload);
});
Thanks for your help. I can't seem to find any of this info in the documentation. Google's APIs are very poorly documented it seems.
Unfortunately, as noted, the current ID token payload does not say whether the photo is the default one (probably something we should add). If you need an access token to call Google's REST APIs (such as people.get) for more user data, then you need to obtain an OAuth auth code, and exchange it for access and refresh tokens, as documented at https://developers.google.com/identity/sign-in/ios/offline-access

Accessing Twilio MMS images

In Twilio when the ImageMedia URL is given it is accessing the twilio api as follows
https://api.twilio.com/2010-04-01/Accounts/{account sid}/Messages/{message sid}/Media/{media sid}
If you have manually logged into the twilio API that url redirects to the image located at
http://media.twiliocdn.com.s3-website-us-east-1.amazonaws.com/{account sid}/{image id}
How can I get the direct image ID from the twilio API to include in my web app?
I am working with node.js and every time I try to poll the media resources all I receive is the link to the api.twilio.com and not the mdeia.twiliocdn.com
The library doesn't handle this feature that I can find
However, if anyone else comes across the same problem here is the solution
install request.
Then just get NumMedia and MediaUrl parameters...
if(req.body.NumMedia > 0){
var request = require('request')
request.get(req.body.MediaUrl0).auth(config.twilio.sid, config.twilio.auth, false).pipe(fs.createWriteStream("/var/www/app/public/mms/" + sid + '1.jpg' ));
}
Remember that up to 10 images can be sent so you would just need the logic too gather those extra images.

Authentication for Node.js App with Angular.js and iOS Clients

I've tried to read as many different answers and posts as possible, but I still can't quite settle on a solution that fits my needs. I'm trying to work out the best (most efficient, but mostly more secure) way to handle user authentication, log in, etc.
I have a Node.js server, running on Express; I have an Angular.js web app; and I have an iOS app. I expose a RESTful API with Express/Node.js.
Cookies
The first things I read said to use cookies, and to store a session id/login token on the server side (hashed) and on the client side (unhashed). The client would transfer this id with each request, the server would hash it, parse it and process the request accordingly. This does not feel RESTful (not a huge issue), but more importantly, would I have to duplicate my API: one for username/password authentication (e.g. done via curl) and one for cookie-based authentication (e.g. my web app)?
Another problem with this: what I would do if I had multiple connections from the one user, e.g. they're logged in in two browsers, an iPhone and an iPad. Would my storage of their session ids need to now be an array?
HTTP Basic Auth
The next idea was to use HTTP Basic Auth (with SSL), which seems easy enough, but is not recommended because you need to transfer a username and password with each request. If I were to do it with HTTP Basic Auth, would I then store the username and password in cookies (or HTML local storage) to allow for 'Remember Me' functionality? Or could I combine the two: use HTTP Basic Auth for the actual requests (post a new post, etc.) and just use a session id stored in a cookie for the initial log in sequence/remember me aspects?
Is transmitting a session id more secure than just transmitting the user's password? How?
The session id is going to act ostensibly as a password, so to me transmitting it would have the same security issues as transmitting a password.
Basic Auth seems to be supported across all platforms, which is ideal. The main downside seems to be needing to transfer client authentication data with each request. Is there a way to mitigate this issue?
OAuth
OAuth seems like overkill for my needs. I think I would lose the ability to do curl commands to test my API. How is OAuth an improvement over the cookies method?
As you can probably tell, I'm a little confused by the diverse information available, so if you have a set of good links—applicable to this scenario—I would love to read them. I'm trying to find a solution that fits across all platforms, but is still as secure as possible. Also, if I have any of my terminology wrong, please correct me because it will make searching easier for me.
Thanks.
Update:
I've been thinking about this problem, and I've had an idea. Please tell me if this is dumb/insecure/any feedback, because I'm not sure if it's good.
When the user logs in, we generate a random session id (salted etc.). This optional session id is sent to the client, which the client can store (e.g. in cookies) if they choose; the session id is stored in the database.
This session id is then optionally sent with each request as either an HTTP Authentication header or query string, or the client can just send the username and password if they want (which gives us our regular REST API). At the server end, we check first for a session id parameter, if it's not present, we check for username/password. If neither are there—error.
On the server, we check that the session id is associated with the correct username. If it is, we complete the request.
Every time the user logs in, we create a new session id or delete the current one, and send this with the response to the log in request.
I think this lets me use the regular REST API, where appropriate, with Basic Auth, and maintain sessions/remember me functionality. It doesn't solve the multiple log ins issue, but otherwise I think this way should would. Please let me know.
I would use a token based authentication where you can send a token (automatically) with each request. You'll have to log in once, the server will provide you with a token which you can then use to send with each request. This token will be added to the HTML header, so that you don't have to modify each request to the browser.
You can set certain calls in the API so that they always need a token, while others might not be token protected.
For Express, you can use express-jwt (https://www.npmjs.org/package/express-jwt)
var expressJwt = require('express-jwt');
// Protect the /api routes with JWT
app.use('/api', expressJwt({secret: secret}));
app.use(express.json());
app.use(express.urlencoded());
If you want to authenticate you can create this function in your express server:
app.post('/authenticate', function (req, res) {
//if is invalid, return 401
if (!(req.body.username === 'john.doe' && req.body.password === 'foobar')) {
res.send(401, 'Wrong user or password');
return;
}
var profile = {
first_name: 'John',
last_name: 'Doe',
email: 'john#doe.com',
id: 123
};
// We are sending the profile inside the token
var token = jwt.sign(profile, secret, { expiresInMinutes: 60*5 });
res.json({ token: token });
});
And for protected calls something that starts with /api:
app.get('/api/restricted', function (req, res) {
console.log('user ' + req.user.email + ' is calling /api/restricted');
res.json({
name: 'foo'
});
});
In your Angular application you can login with:
$http
.post('/authenticate', $scope.user)
.success(function (data, status, headers, config) {
$window.sessionStorage.token = data.token;
$scope.message = 'Welcome';
})
.error(function (data, status, headers, config) {
// Erase the token if the user fails to log in
delete $window.sessionStorage.token;
// Handle login errors here
$scope.message = 'Error: Invalid user or password';
});
And by creating an authentication interceptor, it will automatically send the token with every request:
myApp.factory('authInterceptor', function ($rootScope, $q, $window) {
return {
request: function (config) {
config.headers = config.headers || {};
if ($window.sessionStorage.token) {
config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
}
return config;
},
response: function (response) {
if (response.status === 401) {
// handle the case where the user is not authenticated
}
return response || $q.when(response);
}
};
});
myApp.config(function ($httpProvider) {
$httpProvider.interceptors.push('authInterceptor');
});
If you have to support old browsers which do not support local storage. You can swap the $window.sessionStorage with a library like AmplifyJS (http://amplifyjs.com/). Amplify for example uses whatever localstorage is available. This would translate in something like this:
if (data.status === 'OK') {
//Save the data using Amplify.js
localStorage.save('sessionToken', data.token);
//This doesn't work on the file protocol or on some older browsers
//$window.sessionStorage.token = data.token;
$location.path('/pep');
}
}).error(function (error) {
// Erase the token if the user fails to log in
localStorage.save('sessionToken', null);
// Handle login errors here
$scope.message = 'Error: Invalid user or password';
});
And the authintercepter we swap for:
angular.module('myApp.authInterceptor', ['myApp.localStorage']).factory('authInterceptor', [
'$rootScope',
'$q',
'localStorage',
function ($rootScope, $q, localStorage) {
return {
request: function (config) {
config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + localStorage.retrieve('sessionToken');
return config;
},
response: function (response) {
if (response.status === 401) {
}
return response || $q.when(response);
}
};
}
]);
You can find everything except AmplifyJS in this article:
http://blog.auth0.com/2014/01/07/angularjs-authentication-with-cookies-vs-token/
Have a look to the yeoman generator for angular and node? The generator-angular-fullstack have a very nice structure for user authentification using passport.
You can see an example here :
the code: https://github.com/DaftMonk/fullstack-demo
the result: http://fullstack-demo.herokuapp.com/
Hope it helps!
I use generator-angular-fullstack, the /api services are not secured, get your _id from /api/users/me, logout, and go to /api/users/your_id_here, you will figure out that the /api not secured.

Put user_timeline Twitter on a website with new API 1.1

Time ago I have this code to put the 3 last tweets of an user:
jQuery.getJSON("http://twitter.com/statuses/user_timeline/"+ user +".json?callback=?&count=3", function(data) {
jQuery.each(data, function(i, object) {
var textt = object.text.linkify().atify().hashify();
jQuery("#twitter").append('<p><span class="text">' + textt + '</span><br/><span class="quan">' +parseTwitterDate(object.created_at) + '</span></p><hr/>');
});
});
Now, I read that API have changed for a new URL and needs to create an App with secure token (Oauth) for let to see tweets on a site.
I've created the App with the user that I would like to shown the tweets and I have the secure keys, but How I can show now the tweets? I need to put this keys on some line of Javascript code? But with Javascript I can't put this keys because are secrets...
In short: you need a OAuth authentication before you can use the 1.1 API. The only way is to implement this step server side and pull the feed from there with Javascript. While doing this caching the feed increases page load.
Remember to check out the display REQUIREMENTS from twitter. Really, yes really!
I've been working on a solution. In my search I found the following resources very helpful:
https://dev.twitter.com/docs/api/1.1
http://www.jaisenmathai.com/articles/twitter-async-documentation.html

Resources