How to authenticate user in SharePoint online using javascript

Question

I have a public site on Office 365 SharePoint Online. By default when user clicks on to sign in, it redirect to Microsoft login page.

I don't want to redirect user to Microsoft login page. But instead when user clicks on sign-in option, a one popup should open where user can enter his credentials. Now I want to to validate these credentials against the Microsoft account using JavaScript only. No server side code. How I can achieve using web services or anything?

Answer 1

to use javascript you need to send a post request to a webservice, the url should look like this:

/_vti_bin/authentication.asmx

to read up on javascript post event read up here:

http://api.jquery.com/jQuery.post/

the syntax is:

$.ajax({  
  type: "POST",  
  url: url,  
  data: data,  
  success: success,  
  dataType: dataType}); 

so from the above we would do the following:

// Call web service
$.ajax({
  url: "http://mywebsitename:2355/_vti_bin/authentication.asmx",
  type: "POST",
  dataType: "xml",
  data: soapDataString,
  success: resultsFeedback,
  contentType: "text/xml; charset=\"utf-8\""
});

function resultsFeedback(xData, status) {
   alert(xData);
   alert(status);
}

its pritty simple! you are calling the ajax post event, setting the url to goto, the type which is a post event, its data type which is xml that i will show you in a min, the soapDataString is the xml string that i will show you below! resultsFeedback is the last method to return the result back to the user and obviously you need the type format that is in which is self explanitory.

so moving onto soapDataString,

soapDataString is a string of xml that is going to contain the username and password that your going to send via post to the given url you have provided:

so the url that your using:

http://mywebsitename:2355/_vti_bin/authentication.asmx

goto that location(obviously change the mywebsitename:2355 to your website address) and you can see somthing on the lines of:

Authentication

The following operations are supported. For a formal definition, please review the Service Description.

Login

Mode

you have two webservices within authentication, for you it would be login, so click on login. Now you can see the soap xml that you will need to imitate:

POST /_vti_bin/authentication.asmx HTTP/1.1
Host: 2010test
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "http://schemas.microsoft.com/sharepoint/soap/Login"
<?xml version="1.0" encoding="utf-8"?>

<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
  <soap:Body>
    <Login xmlns="http://schemas.microsoft.com/sharepoint/soap/">
      <username>string</username>
      <password>string</password>
    </Login>
  </soap:Body>
</soap:Envelope>

so based from the above we would use the following for our string varible:

var soapDataString = "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
  <soap:Body> \
    <Login xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
      <username>username</username> \
      <password>password</password> \
    </Login> \
  </soap:Body> \
</soap:Envelope>"

now we have our string we can wrap it all together like this:

var soapDataString = "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
  <soap:Body> \
    <Login xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
      <username>username</username> \
      <password>password</password> \
    </Login> \
  </soap:Body> \
</soap:Envelope>"

// Call web service
$.ajax({
  url: "http://mywebsitename:2355/_vti_bin/authentication.asmx",
  type: "POST",
  dataType: "xml",
  data: soapDataString,
  success: resultsFeedback,
  contentType: "text/xml; charset=\"utf-8\""
});

function resultsFeedback(xData, status) {
   alert(xData);
   alert(status);
}

you could wrap the xml and ajax soap call code within a document ready function to wait for the dom to be ready before it executes the code. there is no need to wrap the resultsFeedback function as its only called if the soap call is sucessfull! your username and password would obviously need to be changed to add in the input how ever you decied to do it, be it in html or c#

EDIT

ahh missed your tag! sharepoint online! with sharepoint oline 365 using the webservice or any objects require authentication first! now the error your getting is todo with the cookie not being set or is set wrongly!

how javascript and online work you can get a better understanding here:

http://msdn.microsoft.com/en-us/library/gg454741(v=office.14).aspx

for a solution check this out:

https://github.com/lstak/node-sharepoint

the solution to logging in is in sharepoint.js file.

using c# client object model is easir to understand and can be followed here:

http://www.wictorwilen.se/Post/How-to-do-active-authentication-to-Office-365-and-SharePoint-Online.aspx

unfortunatly online 365 is a bit more tricky as there is more handshaking going on so more validation between the client and the server instead of a simple use of sharepoint webservice with any other sharepoint product.