Issues with using d2l remote plugins (insert stuff cim) example not working - desire2learn

I am new to Brightspace and been fiddling with the remote plugins sample (logo). I can load the sample logo project, but cannot get it to insert into the page. I have uploaded the file but get a 404 error on submit. Can someone `
$( document ).ready(function() {
$('#submitFormButton').click( function() {
$.ajax({
url: "/getisfdetails",
data: {
image: $("input[name='image']:checked").val()
},
success: function(response){
$("input[name='lti_message_type']").val(response.lti_message_type);
$("input[name='lti_version']").val(response.lti_version);
$("input[name='content_items']").val(response.content_items);
$("input[name='oauth_version']").val(response.oauth_version);
$("input[name='oauth_nonce']").val(response.oauth_nonce);
$("input[name='oauth_timestamp']").val(response.oauth_timestamp);
$("input[name='oauth_consumer_key']").val(response.oauth_consumer_key);
$("input[name='oauth_callback']").val(response.oauth_callback);
$("input[name='oauth_signature_method']").val(response.oauth_signature_method);
$("input[name='oauth_signature']").val(response.oauth_signature);
$("#isfForm").prop('action', response.lti_return_url);
$("#isfForm").submit();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<body>
<h3>Select an logo:</h3>
<input type="radio" name="image" value="brightspace-logo.png"> <img src="../content/isf/brightspace-logo.png" alt="Brightspace Logo"><br />
<input type="radio" name="image" value="d2l-logo.png"> <img src="../content/isf/d2l-logo.png" alt="D2L Logo"><br />
<div hidden>
<form id="isfForm" method="POST">
<input type="hidden" name="lti_message_type" />
<input type="hidden" name="lti_version" />
<input type="hidden" name="content_items" />
<input type="hidden" name="oauth_version" />
<input type="hidden" name="oauth_nonce" />
<input type="hidden" name="oauth_timestamp" />
<input type="hidden" name="oauth_consumer_key" />
<input type="hidden" name="oauth_callback" />
<input type="hidden" name="oauth_signature_method" />
<input type="hidden" name="oauth_signature" />
</form>
</div>
<br />
<button id="submitFormButton">Submit</button>
</body>
` how do you set this cookie in the javascript? I believe a cookie needs to be set??? and I do not see how to set it? or maybe I am missing something else that is not noted in the documentation.

I would highly recommend you consider using LTI Advantage/1.3 instead of Remote Plugins. LTI provides a standards-based integration approach & a better developer experience.
https://community.brightspace.com/s/article/LTI-Integration-Guide

If you are working with a partner of D2L please get in touch with the partner team and technical assistance is available. Your information here is appreciated but we are glad to examine the full context and use case as these errors are not hugely uncommon during dev. Otherwise, I echo Paul's suggestion, but I understand if it is not immediately possible.
partners#d2l.com or talk with your team that knows D2L!

Depending on which browser you are in you might be seeing the recent effects of the third-party cookie blocking that the browsers are adopting. Because LTIs (both 1.1 and 1.3/Advantage) typically launch into iframe any access to those cookies are regarded as third party. This effectively means two things
You need to be aware of the cookie access routines where a user action must be taken to request access to the browser storage API using document.requestStorageAccess()
You need to be marking your cookies appropriately with the new SameSite cookie directives
Without these the browser will mark your cookie request as a 'Tracking cookie' and refuse to serve it along with the request or make it accessible via javascript.
An alternative is also to detect that the LTI launch is happening inside the an iframe and to bust that iframe out to a new window, or alternatively configure the launch inside Brightspace to not use a iframe at all.

Related

Amazon s3 form post/upload redirecting to bucket after success on iOS safari/chrome only how to stop?

I have a web app that allows users to upload photos to an S3 bucket via HTML form. It works exactly as expected on all desktop browsers, which is to do nothing after a successful upload. However in iOS safari and iOS chrome, it redirects to the bucket. If I "Handoff" the page over to safari on my mac it is an xml response of the entire bucket, it appears.
Does anyone know why this would happen and how to fix it? Normally I can find something via google and the forums but I'm finding nothing!
We are not specifying "success action redirect" or "success action status" on our form.
Also, it works as expected in chrome on an android device.
We do not want any sort of redirect to occurs, we handle things on the client after clicking the submit/post button.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id ="mainContent">
<form action="https://s3.amazonaws.com/{!awsKeySet.Name}" method="post" enctype="multipart/form-data" id="uploadForm">
<input type="hidden" name="key" id="key" />
<input type="hidden" name="AWSAccessKeyId" value="{!awsKeySet.AWS_AccessKey_Id__c}" />
<input type="hidden" name="policy" value="{!policy}" />
<input type="hidden" name="signature" value="{!signedPolicy}" />
<input type="hidden" name="acl" value="{!acessType}" />
<input type="hidden" name="Content-Type" value="{!Content_Type}" />
<!--input type="hidden" name="success_action_status" value="201" /-->
<!--input type="hidden" name="success_action_redirect" value="{!ForRedirect}" /-->
<h4 class="fileToUpload">Select a File to Upload in AWS</h4><br />
<div class="row">
<input type="file" size="50" name="file" id="file" />
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="submit" value="Upload" id="btn_submit" />
</div>
<div id="progressNumber"></div>
</form>
</div>
<script>
$(document).ready(function () {
var _requestBucket;
$("#btn_submit").click(function(event){
//alert(1);
event.preventDefault();
var _file;
_file = $("#file").val().replace(/.+[\\\/]/, "");
console.log('_file '+ _file);
$("#key").val(_file);
$("#uploadForm").submit();
});
});
</script>
Thank you!
I wish someone could have shed more light on this but sadly, this is a bug in iOS webkit browsers. It appears to have been fixed in Android and Desktop. So, if anyone stumbles on this problem, included is the bugzilla link for it
Bugzilla link for Proper handling of HTTP 204
More detail : According to the amazon s3 docs
If the value is set to 200 or 204, Amazon S3 returns an empty document with a
200 or 204 status code.
If the value is set to 201, Amazon S3 returns an XML document with a
201 status code.
If the value is not set or if it is set to an invalid value, Amazon S3
returns an empty document with a 204 status code.
According to HTTP 1.1 -
10.2.5 204 No Content
The server has fulfilled the request but does not need to return an
entity-body, and might want to return updated metainformation. The
response MAY include new or updated metainformation in the form of
entity-headers, which if present SHOULD be associated with the
requested variant.
If the client is a user agent, it SHOULD NOT change its document view
from that which caused the request to be sent. This response is
primarily intended to allow input for actions to take place without
causing a change to the user agent's active document view, although
any new or updated metainformation SHOULD be applied to the document
currently in the user agent's active view.
The 204 response MUST NOT include a message-body, and thus is always
terminated by the first empty line after the header fields.
This is not happening in either webkit browsers for iOS, currently. Sadly. I cannot find a way around this, other for Apple to fix it!

PayPal purchase link deprecated?

For years I have used a link to Paypal to let users purchase from our site:
https://www.paypal.com/xclick/business=[OURMAILADDRESS]&item_name=[ProductName]&amount=26%2e80&shipping=0%2e00&no_shipping=0&no_note=1&tax=0&currency_code=EUR&lc=it&bn=PP%2dBuyNowBF&charset=UTF%2d8'
The link stopped working about 2 weeks ago.
I cannot find any info on the net about it being deprecated.
Can anyone shine some light on this topic?
It looks like paypal has removed support for the paypal.com/xclick links that they previously recommended using (in the Website Payments Standard Checkout Integration Guide pdf from 2006).
Change your link to:
https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=...
For subscriptions, use:
https://www.paypal.com/cgi-bin/webscr?cmd=_xclick-subscriptions&business=...
The link you provided is not showing a 404 not found error. It goes to paypal's splash screen page. From there a user can sign in. The url is redirected towards https://www.paypal.com/home. Looks like you're had a function there that isn't working any longer. I haven't seen that before, but do have a possible solution.
If you want to provide users a way to buy with paypal on your site, a common (and not hard) method is in the html with a paypal code such as code you've created on paypal's website (under "settings" you can create a button and paste the code into your website) or by hand creating an html Form with Input fields yourself.
You're sending the data that would be in the Input fields that would show up in the Form $_GET action to paypal in the url. Paypal doesn't talk about handling data that way. Maybe whatever was allowing that to work unofficially,no longer does.
There's a lots of examples of how to create a paypal button html code on SO. I can post some if you'd like. This site tells the input fields that your url data can be created with: https://developer.paypal.com/docs/classic/paypal-payments-standard/integration-guide/Appx_websitestandard_htmlvariables/
Here's an example:
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart"> <!-- I'm using cart, you want to stick the buy now option value in here. -->
<input type="hidden" name="business" value="yoru business signon email">
<input type="hidden" name="lc" value="EUR">
<input type="hidden" name="item_name" value="Whats bought">
<input type="hidden" name="amount" value="15.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="rm" value="1">
<input type="hidden" name="shopping_url" value="http://www.yours.com/OnlinePayButtons.php">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_SM.gif:NonHosted">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height=".8">
</form>
You have to pick out of the link to html variables, what inputs you need in the form. This gives a structure and idea of what it looks like.

Automatically search website field and get resulting URL

I want to automatically search a string at http://www.drugbank.ca/ and get the resulting URL (the search field is at the top of the page). The website can't be searched just by manipulating the URL. Is there a server-based way to do this? I want to create my own webpage with an input field and button to "Search DrugBank for X and get the URL".
Thanks.
You need to get the contents of:
http://www.drugbank.ca/search?query=searchstring
You can't do this with javascript it's not allowed by the browser to query sites of different domains (due to: http://en.wikipedia.org/wiki/Same_origin_policy).
I would do it with php and create a file like searchDrugBank.php:
<?php
$urlContent = file_get_contents('http://www.drugbank.ca/search?query=' . $_GET['q']);
// process $urlContent however you want
?>
And then you put on your site:
<form method="get" action="searchDrugBank.php">
<input type="text" name="q" />
<input type="submit" value="Search drugbank"/>
</form>
(Since you asked)
To find what URL I was gonna query I went to the site, and looked at the form that was submitted when I pressed search (look at the source, or in it's easy to do "inspect element" on for example the searchbox or searchbutton).
I find that the form is:
<form accept-charset="UTF-8" action="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div>
<strong>Search:</strong>
<input id="query" name="query" placeholder="Search DrugBank" size="30" type="search">
<input name="commit" type="submit" value="Search">
Help / Advanced
</form>
Which means that when you press search, exactly what happends is that you will do a GET request, since method="get" and get request means to ask for an url, and if parameters is required, they should be in the URL (http://en.wikipedia.org/wiki/Query_string#Web_forms).
The URL that will be queried is /search since action is action="/search" the rest of the url will then be built using provided parameters here it's just:
<input id="query" name="query" placeholder="Search DrugBank" size="30" type="search">
And there you can see that name of the parameter that should be provided to do a search, namely "query"!

Mechanical Turk: Post file to externalSubmit interface?

I have setup my own custom form for mechanical turk and am posting to their external interface.
<form enctype="multipart/form-data" action="https://workersandbox.mturk.com/mturk/externalSubmit" method="post" name="mturk_form" id="mturk_form">
<p>
<label for="turk_task_image_image">Upload an image</label><br>
<input type="file" size="30" name="turk_task_image[image]" id="turk_task_image_image">
</p>
<b>- OR - </b><br><br>
<p>
<label for="turk_task_image_url">Specify an Image URL</label><br>
<input type="text" size="30" name="turk_task_image[url]" id="turk_task_image_url">
</p>
<p>
<label for="turk_task_image_description">Description (optional)</label><br>
<textarea rows="3" name="turk_task_image[description]" id="turk_task_image_description" cols="80"></textarea>
</p>
<input type="hidden" value="ASSIGNMENT_ID_NOT_AVAILABLE" name="assignmentId" id="assignmentId">
<input type="hidden" value="200" name="task[storyboard_location_id]" id="task_storyboard_location_id">
<input type="hidden" value="36" name="task[turk_task_id]" id="task_turk_task_id">
<p>
<input type="submit" value="You must ACCEPT the HIT before you can submit the results." name="commit" id="submitButton" disabled="">
<img border="0" style="display: none;" src="/images/spinner.gif?1274319066" id="spinner" alt="Spinner">
</p>
</form>
When I go to retrieve the responses, all of the text field values are available but the posted file is not. According to the API docs, I should receive another url that should make the uploaded file available for download?
How do I go about getting the url of the file that is posted to the externalSubmit interface?
P.S. On a side note, I am using the rturk gem to build up these HITs. But I see nothing in the code regarding the support for posted uploaded files.
From what I can gather from the developer forums, it doesn't look like the external interface supports file uploads.
I saw one thread where a developer thought that they were going to implement it in the future but that was in 2008.
Another thread where someone states that you must handle the uploading of the file to your server and the submission of the externalSubmit form separately.
http://solutions.amazonwebservices.com/connect/thread.jspa?messageID=125657&#125657
http://solutions.amazonwebservices.com/connect/thread.jspa?messageID=92072&#92072
http://solutions.amazonwebservices.com/connect/thread.jspa?messageID=97431&#97431
I'm currently exploring an AJAXy upload interface for the file upload along with a separate externalSubmit form for the image details.

Redirect user to directory based on form input

I know enough about the coding end of web design to be embarrassed by what I don't know. What I want to do is to have various print promotions in newspapers and what not along the lines of: for more information please visit www.mysite.com/2345.
If the visitor doesn't enter the entire url in the nav bar and ends up at the main index, I want to have a text field there so they can enter "2345", hit enter or submit, then be redirected to www.mysite.com/2345 wherein the folder's index page will load.
I usually search and find the coding info I'm looking for, but I can't figure out a concise way to search this particular problem. Can anyone help with this or point me in the right direction for help elsewhere?
Thanks.
Pretty simple with JavaScript, here's a working example:
<form onsubmit="location.href='http://www.mysite.com/' + document.getElementById('myInput').value; return false;">
<input type="text" id="myInput" />
<input type="submit" />
</form>
You can do it using javascript. Here's a terribly ugly example but should give you an idea.
<form>
<input type="text" id="number" name="number" />
<input type="submit" onclick="window.location = window.location + '/' + number.value; return false;"/>
</form>
Ideally you'd also handle it in whatever server side language you're using as well. Here's a PHP example:
<?
if(isset($_POST['number'])){
header('Location: http://www.yourdomain.tld/'.$_POST['number']);
exit;
}
?>
Very simple example with PHP, so that you can understand how it works. Very simple.
<?php
if (isset($_POST['bt']))
{
header("Location: http://localhost/" . $_POST['folder']);
}
?>
<html>
<form id="form1" name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="folder" id="folder" />
<input type="submit" name="bt" id="bt" value="Go To" />
</form>
</html>
This is you index.php File, in your htdocs/www folder.
The PHP notices when you click the button and it will redirect you to
http://www.yourdomain.com/what-you-have-writen-in-the-textfield
You can also do it with JavaScript, but with PHP it will work even if your visitor browser has JavaScript disabled.

Resources