enter image description hereI am trying to implement Google sign in into my web forms page because we use G suite for business. basically I am using javascript to get the token then using ajax to post to the google api then I am looking at the HD claim to make sure they are apart of our domain and thne posting to the code behind the email and doing a lookup to get a user ID then setting the form cookie and trying to redirect to our defalut page. So we have a mvc app that I done this exact thing with and it works perfectly I just routed them to the controller. For some reason it just seems like I am not getting anything from my code behind code.
here is my javascript.
<script>
function onSignIn(googleUser) {
debugger;
const profile = googleUser.getBasicProfile();
let boolRedirectUrl = false;
const id_token = googleUser.getAuthResponse().id_token;
const pathname = window.location.pathname;
const url = window.location.href;
let redirectPath = "";
if (window.location.href.indexOf("ReturnUrl") > -1) {
boolRedirectUrl = true;
redirectPath = readQueryString("ReturnUrl");
}
const googleUrl = "https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=" + id_token;
$.ajax({
url: googleUrl,
dataType: 'json',
data: '{}',
contentType: 'application/json',
success: (data, status, xhr) => {
const domain = data.hd;
const email = data.email;
if (domain === "kimbelmechanical.com") {
$.ajax({
url: "Login.aspx/GoogleLogin",
type: "POST",
data: { 'email': email },
success: (data, status, xhr) => {
//window.location.href = "Default.aspx"
},
error: (xhr, status, error) => {
console.log("I stopeed on the call to controller " + status);
}
});
}
},
error: (xhr, status, error) => {
console.log(status);
}
});
};
function readQueryString(key) {
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&");
var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}
</script>
this is my c# code behind.
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public void GoogleLogin(string email)
{
string userID = "";
using (var context = new KPDataContext(KP.Common.KPConnectionString))
{
var user = context.Employees.Where(p => p.Email == email);
foreach (var e in user)
{
userID = e.Username;
}
}
if (userID != "")
{
FormsAuthentication.SetAuthCookie(userID, false);
Response.Redirect("~/Default.aspx", true);
}
}
if I redirect from the success to my default page it loads it default.aspx found but for some reason it does login.aspx?ReturnUrl=?default.aspx but stays on the login page so I am in a endless loop of loading the login page over and over.
Is it MVC? If so you can use RouteData along with creating a new instance of a controller. That controller can then execute a new web request with the new path like so:
var routeData = new RouteData();
routeData.Values.Add("message", errorModel.message);
routeData.Values.Add("action", "Index");
routeData.Values.Add("controller", "ErrorPage");
IController ctrl = new ErrorController();
ctrl.Execute(new RequestContext(new HttpContextWrapper(Context), routeData));
Response.End();
I am trying to create a Google Classroom course using the Google Classroom API and a service account. I am currently experimenting using JavaScript and I have everything set up and working to get a list of course. I set up a JWT and request an authentication token which I receive.
{"access_token":"----ACCESS TOKEN HERE----------","token_type":"Bearer","expires_in":3600}
When I use this to retrieve a user's course list (via GET) there is no problem. I receive back a proper response with a list of courses which I then display in a table.
When I try to use the same process to try to create a course (via POST), I get a 401 error:
{
"error": {
"code": 401,
"message": "The request does not have valid authentication credentials.",
"status": "UNAUTHENTICATED"
}
}
This is the code I use to authenticate:
function authenticate(callback) {
function b64EncodeUnicode(str) {
str = JSON.stringify(str);
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
return String.fromCharCode('0x' + p1);
}));
}
// constuct the JWT
var jwtHeader = {
"alg":"RS256",
"typ":"JWT"
}
jwtHeader = JSON.stringify(jwtHeader);
//construct the Claim
var jwtClaim = {
"iss":"psclassroomsync#psclassroomsync.iam.gserviceaccount.com",
"scope":"https://www.googleapis.com/auth/classroom.courses https://www.googleapis.com/auth/classroom.rosters",
"sub":"myemail#address.com", //this is an admin account I shouldn't really need this but tried with and without it
"aud":"https://www.googleapis.com/oauth2/v4/token",
"exp":(Math.round(new Date().getTime()/1000) + 60 * 10),
"iat":Math.round(new Date().getTime()/1000)
}
jwtClaim = JSON.stringify(jwtClaim);
//construct the signature
var key="-----BEGIN PRIVATE KEY-----Removed-----END PRIVATE KEY-----\n";
var jwtSign = b64EncodeUnicode(jwtSign);
var sJWT = KJUR.jws.JWS.sign("RS256", jwtHeader, jwtClaim, key);
var jwt = jwtHeader + "." + jwtClaim + "." + sJWT;
//request Token
var grantType = "urn:ietf:params:oauth:grant-type:jwt-bearer";
var tokenRequest = "grant_type=" + grantType + "&assertion=" + sJWT;
var postURL = "https://www.googleapis.com/oauth2/v4/token"
request = $j.ajax({
url: postURL,
type: "post",
data: tokenRequest,
success: callback
});
}
This is the code I use to GET the course list. (this works)
$j("#getClasses").click(function(event){
function getClasses(callback){
authenticate(function(data){
console.log(JSON.stringify(data));
var access_token = data["access_token"];
var apiUrl = 'https://classroom.googleapis.com/v1/courses'
var myData = 'teacherId=~(teacheremail)&access_token='+access_token;
var files = $j.ajax({
url: apiUrl,
type: "get",
data: myData,
success: function (data) {
var retreivedClasses = JSON.stringify(data);
for(var i = 0; i < data['courses'].length; i++){
nextObject = data['courses'];
$j('#classListTable').append('<tr><td>' + nextObject[i]['name'] + '</td><td>' + nextObject[i]['courseState'] + '</td><td>' + nextObject[i]['enrollmentCode'] + '</td></tr>');
}
//$j('#classList').text(retreivedClasses);
}
});
});
}
getClasses();
});
This is the code that I use to create a course via POST. I've hard coded a few of the variables for testing but still gives the 401 error.
$j("#createClass").click(function(event){
function createClass(callback){
authenticate(function(data){
console.log(JSON.stringify(data));
var access_token = data["access_token"];
var tokenInfo = $j.ajax({
url: 'https://www.googleapis.com/oauth2/v3/tokeninfo',
type: 'get',
data: "access_token="+access_token
});
var apiUrl = 'https://classroom.googleapis.com/v1/courses'
var myData = 'access_token='+access_token + '&ownerId=myemail#address.com&name=myClass'
console.log(myData);
var newGoogleClassroom = $j.ajax({
url: apiUrl,
type: "post",
data: myData,
success: function (data) {
var apiResponse = JSON.stringify(data);
$j('#classCreated').text(apiResponse);
}
});
});
};
createClass();
});
Finally, this is what I get when I get the token info. It looks fine to me i.e. proper scopes: (but I am new at this)
{
"azp": "removed",
"aud": "removed",
"scope": "https://www.googleapis.com/auth/classroom.courses https://www.googleapis.com/auth/classroom
.rosters",
"exp": "1474512198",
"expires_in": "3600",
"access_type": "offline"
}
I'd be grateful for any help.
Doug
P.S. I get the security implications of this code. It is in a secure environment for experimentation only. It won't see the light of day.
Based from this forum which is also receiving a 401 error, try to revoke the old oauth. As stated in this related thread, the 401 Unauthorized error you experienced may be related to OAuth 2.0 Authorization using the OAuth 2.0 client ID.
Suggested action: Refresh the access token using the long-lived refresh token. If this fails, direct through the OAuth flow.
I have a download function where the idea is that when the user clicks a button, it does an ajax call to a function that will create a csv file containing all of the information the user was viewing, and will return the file as a download. I have the server function creating a csv file, but I'm not sure how to make it download. This is my server-side code:
public ActionResult Download(Guid customerOrderId)
{
var order = this.UnitOfWork.GetRepository<CustomerOrder>().Get(customerOrderId);
var csv = new StringBuilder();
csv.Append("Customer,Bill To Name,Ship To Name,Patient,Order#,Order Date," +
"Line,Item#,Item Description,Qty,UOM,Price,Ext Price,Carrier," +
"Notes,Purchase Order");
var customer = order.CustomerNumber;
var billToName = order.BTDisplayName;
var shipToName = order.ShipTo.CustomerName;
var orderNum = order.OrderNumber;
var orderDate = order.OrderDate;
var carrier = order.ShippingDisplay;
var notes = order.Notes;
var subtotal = order.OrderSubTotalDisplay;
var total = order.OrderGrandTotalDisplay;
var shipping = order.ShippingAndHandling;
var tax = order.TotalSalesTaxDisplay;
var patient = "";
var purchaseOrder = order.CustomerPO;
foreach (var cartLine in order.OrderLines)
{
var line = cartLine.Line;
var itemNum = cartLine.Product.ProductCode;
var itemDesc = cartLine.Description;
var qty = cartLine.QtyOrdered;
var uom = cartLine.UnitOfMeasure;
var price = cartLine.ActualPriceDisplay;
var ext = cartLine.ExtendedActualPriceDisplay;
//Customer,Bill To Name,Ship To Name,Patient,Order#,Order Date," +
//"Line,Item#,Item Description,Qty,UOM,Price,Ext Price,Carrier," +
//"Notes,Purchase Order
var newLine = string.Format("{0},{1},{2},{3},{4},{5},{6},{7},{8},{9},{10},{11},{12},{13},{14},{15}",
customer, billToName, shipToName, patient, orderNum, orderDate, line, itemNum, itemDesc,
qty, uom, price, ext, carrier, notes, purchaseOrder);
csv.AppendLine(newLine);
}
csv.AppendLine();
csv.AppendLine("Subtotal,Shipping & Handling,Tax,Total");
csv.AppendLine(string.Format("{0},{1},{2},{3}", subtotal, shipping, tax, total));
var filename = "MSD-Order-" + orderNum + ".csv";
var bytes = Encoding.UTF8.GetBytes(csv.ToString());
return this.File(bytes, "text/csv");
}
And here is the ajax method:
function download(customerOrderId) {
$.ajax({
url: insite.core.actionPrefix + '/Checkout/Download/?customerOrderId=' + customerOrderId,
type: 'Post',
contentType: "application/json; charset=utf-8",
async: false,
cache: false,
success: function (data) {
alert("downloaded");
},
error: function (ex) {
console.log(ex);
}
});
}
In the success of the ajax call, I checked the value of "data" and it has the information, but I'm not sure how to make it download. What do I do once I receive the data?
Can't you just download it via a href like this?
public FileContentResult Download(Guid customerOrderId)
{
// your code
var response = new FileContentResult(bytes, "text/csv");
response.FileDownloadName = filename;
return response;
}
The link:
Download
You can store the file on server and send the URL with response. Then on ajax success function window.location=data.URL
Venerik has a valid answer as well, but keeping in line with your current implementation, I'd suggest the following.
You can return the string of the URL after saving the file to your server. Then do the window location redirection upon your success. I removed the variable assignments since nothing is being done with them other than sending to a method.
Here we write the file and return the string. You'll need to adjust the return to match your site information, etc.
public ActionResult Download(Guid customerOrderId)
{
var order = this.UnitOfWork.GetRepository<CustomerOrder>().Get(customerOrderId);
var csv = new StringBuilder();
csv.AppendLine("Customer,Bill To Name,Ship To Name,Patient,Order#,Order Date," +
"Line,Item#,Item Description,Qty,UOM,Price,Ext Price,Carrier," +
"Notes,Purchase Order");
foreach (var cartLine in order.OrderLines)
{
//Customer,Bill To Name,Ship To Name,Patient,Order#,Order Date," +
//"Line,Item#,Item Description,Qty,UOM,Price,Ext Price,Carrier," +
//"Notes,Purchase Order
csv.AppendLine(string.Format("{0},{1},{2},{3},{4},{5},{6},{7},{8},{9},{10},{11},{12},{13},{14},{15}",
order.CustomerNumber, order.BTDisplayName, order.ShipTo.CustomerName, "", order.OrderNumber, order.OrderDate, cartLine.Line, cartLine.Product.ProductCode, cartLine.Description,
cartLine.QtyOrdered, cartLine.UnitOfMeasure, cartLine.ActualPriceDisplay, cartLine.ExtendedActualPriceDisplay, order.ShippingDisplay, order.Notes, order.CustomerPO));
}
csv.AppendLine();
csv.AppendLine("Subtotal,Shipping & Handling,Tax,Total");
csv.AppendLine(string.Format("{0},{1},{2},{3}", order.OrderSubTotalDisplay, order.ShippingAndHandling, order.TotalSalesTaxDisplay, order.OrderGrandTotalDisplay));
var filename = "MSD-Order-" + orderNum + ".csv";
using (StreamWriter sw = File.CreateText(Server.MapPath("~/files/" + filename))
{
sw.Write(csv.ToString());
}
// adjust your url accordingly to match the directory to which you saved
// '/files/' corresponds to where you did the File.CreateText
// returning Content in an ActionResult defaults to text
return Content("http://foo.com/files/" + filename);
}
And in your AJAX method update your success function to redirect the page which will prompt the download:
function download(customerOrderId) {
$.ajax({
url: insite.core.actionPrefix + '/Checkout/Download/?customerOrderId=' + customerOrderId,
type: 'Post',
contentType: "application/json; charset=utf-8",
async: false,
cache: false,
success: function (data) {
window.location.href = data;
},
error: function (ex) {
console.log(ex);
}
});
}
I want to develop an app for Pebble. This app is going to tell you how long it takes from one place you set in options to another one taking in account traffic jams and stuff.
To achieve this I need to make a page that will return JSON. Pebble retrieves information using code like that:
var cityName = 'London';
var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName;
ajax(
{
url: URL,
type: 'json'
},
function(data) {
// Success!
console.log('Successfully fetched weather data!');
},
function(error) {
// Failure!
console.log('Failed fetching weather data: ' + error);
}
);
I created a small page with a js script that gets needed information from Yandex API:
var route;
ymaps.ready(init);
var myMap;
function init(){
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var time = 0;
var home = getParameterByName("h");
var work = getParameterByName("w");
ymaps.route([home, work],{avoidTrafficJams: true}).then(
function (router) {
route=router;
time = ((route.getTime())/60).toFixed(2);
var info = new Object;
info["home"] = home;
info["work"] = work;
info["time"] = ~~time+"m"+~~((time%1)*60)+"s";
JSON.stringify(info);
},
function (error) {
alert('Возникла ошибка: ' + error.message);
}
);
}
As you can see I can get a JSON string in the end. But how do I send it to clients when a request with right parameters is made?
I ended up using phantomjs and executing this js script on my php page.
I have made an account and have my api key currently i just want a simple search box and button that when hit will list the game and the image of that game
Have linked the site info below
http://www.giantbomb.com/api/documentation
I want to run is and get the output using json and jquery any help welcome
This is a working search now some what does not allow the user to enter in a new value and there is a problem bring up the image
two main problems wont load the image just says undefined and cant figure out how to make it a full search only when he user enters a new title
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "http://api.giantbomb.com/search/",
type: "get",
data: {api_key : "key here", query: "star trek", resources : "game", field_list : "name, resource_type, image", format : "jsonp", json_callback : "gamer" },
dataType: "jsonp"
});
});
function gamer(data) {
var table = '<table>';
$.each( data.results, function( key, value ) {
table += '<tr><td>' + value.image + '</td><td>' + value.name + '</td><td>' + value.resource_type + '</td></tr>';
});
table += '</table>';
$('#myelement').html(table);
}
</script>
</head>
<body>
<h1>Game Search</h1>
<input id="game" type="text" /><button id="search">Search</button>
<div id="myelement"></div>
</body>
</html>
Your working code as per standard of the giantbomb docs:
var apikey = "My key";
var baseUrl = "http://www.giantbomb.com/api";
// construct the uri with our apikey
var GamesSearchUrl = baseUrl + '/search/?api_key=' + apikey + '&format=json';
var query = "Batman";
$(document).ready(function() {
// send off the query
$.ajax({
url: GamesSearchUrl + '&query=' + encodeURI(query),
dataType: "json",
success: searchCallback
});
// callback for when we get back the results
function searchCallback(data) {
$('body').append('Found ' + data.total + ' results for ' + query);
var games = data.game;
$.each(games, function(index, game) {
$('body').append('<h1>' + game.name + '</h1>');
$('body').append('<p>' + game.description + '</p>');
$('body').append('<img src="' + game.posters.thumbnail + '" />');
});
}
});
http://jsfiddle.net/LGqD3/
GiantBomb Api example/explanation
First get your api key
Key: http://www.giantbomb.com/api/
Documentation: http://www.giantbomb.com/api/documentation
Your base url:
http://www.giantbomb.com/api/
Your url structure:
/RESOURCE?api_key=[YOUR_API_KEY]&format=json/FILTERS/FIELDS
/RESOURCE/ID example: /game/3030-38206/
The type of resource you which to return, in your case a search. Sometimes.. in case of a specific game you also want to pass in the ID under /ID (like in the example)
api_key
Your api key
You need this otherwise you cannot use the api :)
format
The format you which to output, in this case json.
FILTERS example: /search?limit=100
This manipulates the resourses output
See under the resources in the documentation for a what you can do.
FIELDS example: /search?field_list=description,
Which field to return, use this to "reduce the size of the response payload"
A game request for it's name & description would be:
http://www.giantbomb.com/api/game/3030-38206/?api_key=[YOUR-API-KEY]&format=json&field_list=name,description
A search request
Lets say we want to search for the game "Elder scroll online".
You would construct your url like this:
/search/?api_key=[YOUR-API-KEY]&format=json&query="elder scrolls online"&resources=game
To implement this in with $.ajax:
The ajax function
/*
* Send a get request to the Giant bomb api.
* #param string resource set the RESOURCE.
* #param object data specifiy any filters or fields.
* #param object callbacks specify any custom callbacks.
*/
function sendRequest(resource, data, callbacks) {
var baseURL = 'http://giantbomb.com/api';
var apiKey = '[YOUR-API-KEY]';
var format = 'json';
// make sure data is an empty object if its not defined.
data = data || {};
// Proccess the data, the ajax function escapes any characters like ,
// So we need to send the data with the "url:"
var str, tmpArray = [], filters;
$.each(data, function(key, value) {
str = key + '=' + value;
tmpArray.push(str);
});
// Create the filters if there were any, else it's an empty string.
filters = (tmpArray.length > 0) ? '&' + tmpArray.join('&') : '';
// Create the request url.
var requestURL = baseURL + resource + "?api_key=" + apiKey + "&format=" + format + filters;
// Set custom callbacks if there are any, otherwise use the default onces.
// Explanation: if callbacks.beforesend is passend in the argument callbacks, then use it.
// If not "||"" set an default function.
var callbacks = callbacks || {};
callbacks.beforeSend = callbacks.beforeSend || function(response) {};
callbacks.success = callbacks.success || function(response) {};
callbacks.error = callbacks.error || function(response) {};
callbacks.complete = callbacks.complete || function(response) {};
// the actual ajax request
$.ajax({
url: requestURL,
method: 'GET',
dataType: 'json',
// Callback methods,
beforeSend: function() {
callbacks.beforeSend()
},
success: function(response) {
callbacks.success(response);
},
error: function(response) {
callbacks.error(response);
},
complete: function() {
callbacks.complete();
}
});
}
search function
function search() {
// Get your text box input, something like:
// You might want to put a validate and sanitation function before sending this to the ajax function.
var searchString = $('.textox').val();
// Set the fields or filters
var data = {
query: searchString,
resources: 'game'
};
// Send the ajax request with to '/search' resource and with custom callbacks
sendRequest('/search', data, {
// Custom callbacks, define here what you want the search callbacks to do when fired.
beforeSend: function(data) {},
success: function(data) {},
error: function(data) {},
complete: function(data) {},
});
}
Example of a get game function
function getGame() {
// get game id from somewhere like a link.
var gameID = '3030-38206';
var resource = '/game/' + gameID;
// Set the fields or filters
var data = {
field_list: 'name,description'
};
// No custom callbacks defined here, just use the default onces.
sendRequest(resource, data);
}
EDIT: you could also make a mini api wrapper out of this, something like:
var apiWrapper = {};
apiWrapper.request = function(resource, data, callbacks) {
// The get function;
};
apiWrapper.search = function(data) {
// The search function
};
apiWrapper.getGame = function(id, data) {
// The game function
}
apiWrapper.init = function(config) {
var config = config || {};
this.apiKey = config.apiKey || false;
this.baseURL = config.baseURL || 'http://api.giantbomb.com';
}
apiWrapper.init({
apiKey: '[API-KEY]'
});
Have not tested the code, so there might be a bug in it, will clean it up tommorow :)
Edit: fixed a bug in $.ajax