Environment specifics:
MVC4 app
Kendo UI File Upload
IE 11 (or 10)
Windows Authentication
When I load the view for the application that has the file upload kendo tool in IE the file upload returns a 401 unauthorized error (traced from server). If I refresh the page (ctrl-F5) then the tool works fine. This tool works fine with Chrome.
any idea why or how to fix?
you will not believe the insanity I had to go through to get a solution to this:
I dropped a document ready jquery snippit at the end of the document to force it to authenticate an action on my controller.
<div id="checkauth" style="display: none;"></div>
<script type="text/javascript">
$(function () {
$.ajax({
url: '\AcceptanceFileValidator\CheckAuth'
}).done(function (d) {
$('#checkauth').html(d.uid)
});
});
</script>
and on the controller:
public JsonResult CheckAuth()
{
return Json(new { uid = Guid.NewGuid().ToString() }, JsonRequestBehavior.AllowGet);
}
Related
I have created a Tab App in Teams. Now I want to make a dialog from one tab accessible via a Message Extension App. This works partially now through embedding the contentUrl of the specific tab as an iFrame in the Task Module of the Message Extension like here: https://learn.microsoft.com/en-us/microsoftteams/platform/messaging-extensions/how-to/action-commands/create-task-module?tabs=dotnet#create-a-task-module-with-an-embedded-web-view
. The issue is the authentication. Api Calls won't work and the dialog is not able to retreive or send data.
In the manifest.json of the Tab App are the contentUrls of the tabs in the "staticTabs" section:
"staticTabs": [
{
"entityId": "dashboard",
"name": "Dashboard",
"contentUrl": "https://cdne-stcsfeedbackuidev.azureedge.net/tabs/dashboard.html?app.locale={locale}&page.subPageId={subEntityId}&app.theme={theme}",
"scopes": [
"personal"
]
}
],
I gave the dialog a specific Route via React Router so that you can access the dialog via subPageId. This works fine.
The Problem is, if you access the contentUrl, you won't be authenticated and API calls to the Graph API and own API won't work. This issue does not go away if I embed the tab via contentUrl in a Task Module for the Message Extension to give it a Teams Context:
public async handleTeamsMessagingExtensionFetchTask(
context: any,
action: any
): Promise<any> {
return {
task: {
type: 'continue',
value: {
width: 925,
height: 925,
title: 'Feedback Dialog',
url: "https://2e70-37-201-241-91.ngrok.io/feedbackDialog.html",
fallbackUrl: "https://cdne-stcsfeedbackuidev.azureedge.net/tabs/dashboard.html?page.subPageId=feedbackDialog"
}
}
};
}
Directly embedding the url like in "fallbackUrl" will result in an empty Task Module so I embedded the Url in a like this in feedbackDialog.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World Feedback!</title>
</head>
<body>
<script src="https://statics.teams.microsoft.com/sdk/v1.7.0/js/MicrosoftTeams.min.js"></script>
<script>
microsoftTeams.initialize();
microsoftTeams.getContext((context) => {
console.log(context);
microsoftTeams.authentication.getAuthToken({
successCallback: (token) => {
console.log(token);
},
failureCallback: (reason) => {
console.error(reason);
}
});
});
</script>
<div style="padding:50px;">
<iframe id="feedbackDialog" width="800" height="800", frameBorder="0"
src="https://cdne-stcsfeedbackuidev.azureedge.net/tabs/dashboard.html?page.subPageId=feedbackDialog"></iframe>
</div>
</body>
</html>
The dialog gets displayed in the Task Module this way like if I open the contentUrl in the browser directly. But the Authentication does not work. The Teams context can be retreived but all API calls return with the Error: "Error: SDK initialization timed out".
Is there a simple way for me to authenticate the user here because this runs in Teams as a MessageExtension App and the embedded content in the Task Module comes from a Teams Tab App. Or do I need to manually implement something using MSAL?
The OneDriver Picker does not load after the authentication process but instead shows a spinner.
Steps to Reproduce
OneDrive Scripts Tested:
https://js.live.net/v7.2/OneDrive.debug.js
https://js.live.net/v7.2/OneDrive.js
Code used to Initiate the OneDriver Picker:
function launchOneDriverPicker() {
debugger;
var odOptions = {
clientId: "${clientId}",
action: "share",
multiSelect: true,
openInNewWindow: true,
advanced: {
redirectUri: "${redirectUri}"
},
success: function(r) {
},
cancel: function() {
},
error: function(error) {
}
};
OneDrive.open(odOptions);
}
Environments Tested:
- Chrome (Normal/Incognito)
- Firefox (Normal/Incognito)
Steps
The page hosting the OneDrive Picker and redirect URLs are served from the same domain
The redirect occurs to a redirect page with the following content hosted under the same domain (domain/redirect):
<html>
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.debug.js"></script>
</head>
</html>
Additional Notes
The above setup works correctly with the OneDriver Picker 7.0 as noted in an earlier issue:
https://github.com/OneDrive/onedrive-api-docs/issues/824
While debugging the issue I noticed that the OneDriver Picker makes a cross document call to the parent window which opened the Picker. There are no errors up to this point but the parent page does not receive this message.
The domain specified in the cross document call is correct
Reference
[1] https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/open-file?view=odsp-graph-online#using-a-custom-redirect-uri
I've seen that when you add an Attachment in Outlook, you can automaticly add an attachment from a cloud service.
Is there a possible way to add a custom entry to this list?
I offer to you to use OneDrive file picker , with this you can simply add button to your add-in html and then it's open the log-in page and after user is log-in he could choose the files from one drive.
The steps wrote in the link but I write the main steps here:
1.register your app in Microsoft Application Registration Portal .
2.Add the js refrence in your js file of your add-in:
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js">
</script>
3.Add button to your add-in html page:
<button class="oneDriveButton" id="btnOneDrive" ><img src="https://js.live.net/v5.0/images/SkyDrivePicker/SkyDriveIcon_white.png" style="margin-right: 10px; height: 20px;">Open from OneDrive</button>
4.In your js file of add-in open the picker:
$('#btnOneDrive').click(function () {
var odOptions = {
clientId: "your client id from your app registration ",
action: "download",
multiSelect: true,
openInNewWindow: true,
linkType: "query",
advanced: { redirectUri: "your redirect uri from app registration" },
success: function (files) {
},
cancel: function () { /* cancel handler */
},
error: function (e) { /* error handler */
}
};
OneDrive.open(odOptions); });
Put attention:
Your clientId and your redirectUri must be equal to this you
set when you register your app in the first step.
You could change the option by what you want ,look here under
picker options .
Thats all , you get the files in sucess handler function and you could do whatever you want with them.
Good luck!
I am developing new site in .net mvc 4. I have searched in the internet about my problem, but i didn't find a proper soluation. I am using form in my code - #using(Html.BeginForm()). Every time that i click enter(in a textbox) or i click on a button(regular button), the form is submitted. How can i disable it?
You could use javascript to disable it. For example with jquery:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
// returning false from the submit handler of a form will simply
// disable it from being submitted to the server
return false;
});
});
</script>
Alternatively you could directly disable it in the form when rendering it:
#using (Html.BeginForm(null, null, FormMethod.Post, new { onsubmit = "return false;" }))
{
...
}
I am using wicked_pdf plug-in for generating pdf. I am showing message and spinner when user click on pdf link and i want to hide that when pdf is generated and pushed to browser for download/show. I have added jquery code on body onload which will not execute. Is there any other way to trigger jquery function when pdf file pushed to browser?
This is a rather complicated issue, but can be solved nicely if you are willing to use jQuery plugins. http://jqueryfiledownload.apphb.com/ is a plugin that can do exactly what you need if I understood you correctly.
My frontend code looks like this
$.fileDownload('/Content/Print', {
successCallback: function (url) {
$("#PrintingMessage").dialog('close');
},
failCallback: function (responseHtml, url) {
$("#PrintingMessage").dialog('close');
if (responseHtml.indexOf('Error403') != -1) {
$("#PrintingFailedMessage").html("Error 403.");
} else if (responseHtml.indexOf('Error500') != -1) {
$("#PrintingFailedMessage").html("Error 500.");
}
$("#PrintingFailedMessage").dialog({ modal: true });
},
httpMethod: "POST",
data: $('#PublishForm').serialize()
});
And my backend does this at the end of the process. You'll have to translate that yourself :)
Response.SetCookie(new System.Web.HttpCookie("fileDownload", "true") { Path = "/" });
return File(file, System.Net.Mime.MediaTypeNames.Application.Octet, filename);