Sorry for a big edit. I am starting over as I am not stating my question correctly.
I am trying to write a client side app in HTML5. I do not want it to be hosted on a website. I am not even sure this is possible, I am fairly new to this type of application.
Anyway, I want to access Google services, which requires authenticate such as OAuth. Being that it is javascript, it sounds like OAuth2 is what I need.
I am trying to open up the google authentication in a popup (I have this part), let the user allow access, and then pass flow back to my application which can then query Google services. Problem is either 1. it asks the user to copy/paste a token into the app whenever I use response_type=code, but if I use response_type=token it requires that I redirect back to a valid URL which, since this is not hosted on a webserver, there is none.
So how can I use OAuth, and let the user grant access seamlessly?
You should have some Redirect URL defined for Google to redirect to after the authentication is done. If you cant host your pages on any web site, you can very well host it in local host.
Regarding getting the access token from the popup to the main parent window, you can setup a timer in parent window which keeps on checking the document location of the popup. Once the document location matches the Redirect URL, u can parse the access token which will will be in the URL itself.
I wrote a tutorial on exactly the same problem (using local host) yesterday and here is the link:
http://www.gethugames.in/2012/04/authentication-and-authorization-for-google-apis-in-javascript-popup-window-tutorial.html
Hope you will find it useful.
To avoid a potential click jacking, Google authentication forces you to go to a full page login. I don't think you can control that.
EDIT after comment, here is a code extracted from the Google OAuth2 page that does it:
<body>
<a href="javascript:poptastic('https://accounts.google.com/o/oauth2/auth?scope=https://www.google.com/m8/feeds&client_id=21302922996.apps.googleusercontent.com&redirect_uri=https://www.example.com/back&response_type=token');">Try
out that example URL now</a>
<script>
function poptastic(url) {
var newWindow = window.open(url, 'name', 'height=600,width=450');
if (window.focus) {
newWindow.focus();
}
}
</script>
</body>
I believe you can use google api (gapi) for Oauth in Javascript.
Here is the documentation: Authentication using the Google APIs Client Library for JavaScript
You will not require the user to copy/paste any codes and you will not require to provide a redirect uri
All you need to do is: Go to your project in Google Developers Console and generate the following:
1. Generate new Client Id and choose options 'Installed Application' and 'Other'.
2. Generate a Public API Key
Sample Code from the above documentation:
// Set the required information
var clientId = 'YOUR CLIENT ID';
var apiKey = 'YOUR API KEY';
var scopes = 'https://www.googleapis.com/auth/plus.me';
// call the checkAuth method to begin authorization
function handleClientLoad() {
gapi.client.setApiKey(apiKey); // api key goes here
window.setTimeout(checkAuth,1);
}
// checkAuth calls the gapi authorize method with required parameters
function checkAuth() {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult); // scope and client id go here
}
// check that there is no error and makeApi call
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
makeApiCall();
}
}
// API call can be made like this:
function makeApiCall() {
gapi.client.load('plus', 'v1', function() {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
request.execute(function(resp) {
var heading = document.createElement('h4');
var image = document.createElement('img');
image.src = resp.image.url;
heading.appendChild(image);
heading.appendChild(document.createTextNode(resp.displayName));
document.getElementById('content').appendChild(heading);
});
});
}
I've written a mini JS library for the task, take it and see if it works for you.
https://github.com/timdream/wordcloud/blob/6d483cd91378e35b54e54efbc6f46ad2dd634113/go2.js
I am recently developing another project that rely on the same script, so I am isolating this one into an independent library project ... check the progress follows (if there are).
Related
I'm creating a Web App that allows users to sign in using their Google Account credentials. I'm using the Google Sign In API to do this.
So far, users can sign in and sign out and grant my app the required permissions. All good. However, I want to give my users the option to disassociate their google account with my app and destroy any data belonging to them.
I've looked through the documentation (https://developers.google.com/identity/sign-in/web/disconnect), and it only suggests this;
var revokeAllScopes = function() {
auth2.disconnect();
}
This doesn't seem to do anything. I can still sign in and sign out without needing to request any permissions for the App again. Am I missing something here, or is my understanding of how this works way off?
Here is the code for signing in and signing out;
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Sign out
Revoke Scopes
<script>
var revokeAllScopes = function() {
auth2.disconnect();
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
Any help would be much, much appreciated.
I found my mistake. I forgot I had declared the auth2 variable within the signout function, and therefore it wasn't available in the removeAllScopes function. My bad.
I have a web app that I would like the user to be able to add a file from their computer and upload it to my google drive. I have the choose file button working but I'm not sure as to how the function should look to access my google drive account and send the file upon a button click.
<h4>Upload a file:</h4>
<div class="form-group">
<input type="file" id="fileInput" name="fileInput"/>
</div><br>
I put this inside a infowindow and I'm able to search for and select a file from the user's computer.
I really just looking for the JS function to send it to my google drive.
Any help would be appreciated.
We had the same problem - and therefore developed a web service for anonymous uploading into the website owner's Google Drive.
See https://driveuploader.com/
You can easily create a reliable upload component, which can be embedded in any website with an iframe code, similarly like YouTube - or used as a part of other applications with a basic JavaScript API with webhooks.
After you create the uploader - embedding is done with the code like:
<iframe src="https://driveuploader.com/upload/{uploader key}/embed/"></iframe>
It runs in all latest web browsers - and supports unlimited file size uploads (tested on files with hundreds of gigabytes, yes GIGABYTES).
Because the component is responsive - it is perfect also for Wordpress or Google Sites websites.
If you need only a basic page where your friends, students, colleagues can securely drop into your Google Drive some (possibly large) files, then this is offered too - and completely for free.
Disclaimer: we are developers of this service.
You can find all the information you need and then some in Google's API reference but I've copied the important stuff for upload below. However, you will definitely need to look at their information regarding authentication which can be found at this link: https://developers.google.com/api-client-library/javascript/start/start-js . I have also included their authentication example below.
<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<script type="text/javascript">
var clientId = '837050751313';
var apiKey = 'AIzaSyAdjHPT5Pb7Nu56WJ_nlrMGOAgUAtKjiPM';
var scopes = 'https://www.googleapis.com/auth/plus.me';
function handleClientLoad() {
// Step 2: Reference the API key
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth,1);
}
function checkAuth() {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick(event) {
// Step 3: get authorization to use private data
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
return false;
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
// Step 4: Load the Google+ API
gapi.client.load('plus', 'v1').then(function() {
// Step 5: Assemble the API request
var request = gapi.client.plus.people.get({
'userId': 'me'
});
// Step 6: Execute the API request
request.then(function(resp) {
var heading = document.createElement('h4');
var image = document.createElement('img');
image.src = resp.result.image.url;
heading.appendChild(image);
heading.appendChild(document.createTextNode(resp.result.displayName));
document.getElementById('content').appendChild(heading);
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
});
}
</script>
// Step 1: Load JavaScript client library
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
One you have authentication set up the code below is how you can upload a document. You can also use a 'PUT' request. See this link for more information: https://developers.google.com/drive/web/manage-uploads
POST /upload/drive/v2/files?uploadType=media HTTP/1.1
Host: www.googleapis.com
Content-Type: image/jpeg
Content-Length: number_of_bytes_in_file
Authorization: Bearer your_auth_token
So, I'm trying to create a Gitter client for Windows Phone and to do so I need to use Bearer OAuth on their API. This process seems to result in a redirection to a gitter webpage (to get access tokens) and then it redirects to a web page specififed by my application. However obviously an APP is not a web page, so how am I supposed to get the returned temporary access token to use the API?
I've read a little bit about using ms-app://<security identifier> but it's all very fuzzy and little to no information seems to be about using it without using c#, but that's not what I'm looking for.
Any help would be greatly appreciated!
EDIT I just noticed this has been asked here oAuth 2.0 in Windows Phone 8.1 but hasn't been awnsered. Sorry for the duplication.
Seems that it was under my nose the whole entire time!
You can use Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAndContinue(startURI, endURI);
(docs are mainly c# but here: http://msdn.microsoft.com/en-us/library/dn631755.aspx)
i.e
var redirect_uri = 'ms-app://<sid>';
var client_id = '<client id>';
// testing
var requestUri = new Windows.Foundation.Uri(
'https://<site>/?client_id=' + client_id + '&redirect_uri=' + redirect_uri
);
Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAndContinue(requestUri, Windows.Foundation.Uri(redirect_uri));
app.addEventListener("activated", function (args) {
if (args.detail.kind == activation.ActivationKind.webAuthenticationBrokerContinuation) {
//take oauth response and continue login process
console.log(args.detail.webAuthenticationResult);
}
//Handle normal activiation...(hidden)
});
source: http://blog.stevenedouard.com/andcontinue-methods-for-windows-universal-apps/
What I really need is to load google apis client library for javascript when a user is logged in using google service. If a user is logged in using password or other external services, the library is not loaded.
Is this possible by any means?
Thanks.
If you want to load the library from an external URL after the user has logged in, you could try something like this (put this anywhere in your client code):
Tracker.autorun(function(c) {
var user = Meteor.user();
// replace this with the appropriate check for a google account
if (user && user.profile && user.profile.isGoogle) {
// stop the autorun now that the user is logged in
c.stop();
// load the api library
$.ajax({
url: '//url-to-fancy-google-api.google.com',
dataType: 'script',
cache: true
});
}
});
It is possible, use anti:modules package. First add it to the app:
meteor add anti:modules
Then create /layers folder inside your project and place your optional files in its subfolder:
/
layers
googleUser
someFile.module.js
anotherFile.module.js
...
Then in your code create a global module:
theApp = Module('$global').as('myApp');
and load it when necessary:
theApp.require('googleUser', function () {
console.log('googleUser code loaded');
});
So I am building a WebApp. There I want to have a Button to open and AutoLogin to the GoogleCalendar. I already tried to create a js but i guess i did something wrong.
The js Code:
var popupWindow;
function OpenCalendar() {
popupWindow = window.open('https://accounts.google.com/ServiceLogin?service=cl', 'Calendar');
popupWindow.focus();
popupWindow.document.getElementById('Email').value = 'mail';
popupWindow.document.getElementById('Passwd').value = 'pass';
}
You cannot access any resource from other domain through JavaScript. It is restricted due to security reasons. In short this is not possible.
You can take a look at Google Accounts authentication and authorization here at this link https://developers.google.com/accounts/