In this tutorial I will show you a practical example of web development: how to import hotmail, outlook, live contacts to your web project, using a client-side method (javascript).
The response data will come in javascript, but you can easily pass it to php with an ajax function.
Note: If you don’t have a live.com account (oulook, hotmail, live), you can create it here : https://www.live.com
Step 1
Create a Live.com application in “Microsoft account Developer Center” for obtaining your Client ID and Client Secret.
- Go to Microsoft account Developer Center and create a new application, clicking on “Create application“
- Complete your basic information: application name, application logo, urls, etc
- Go to “API Settings” from the left menu.
- – For “Mobile and desktop client app” select NO
– “Target domain” – leave blank
– “Restrict JWT issuing” select NO
– for “Root domain” enter your application url: http://www.example.com
– for “Redirect URLs” enter the url that live.com API will use to redirect your response data. For example, after a user will accept giving credentials to your application, he will receive an automatically a response to http://www.example.com
- go to “App settings” from the left menu, to view your API credentials, Client ID and Client Secret
Step 2
Code example
- Reference the API, using a web-based version of the wl.js in your code
<script src="//js.live.net/v5.0/wl.js"></script>
More details here: https://msdn.microsoft.com/en-us/library/hh826538.aspx
- Initialize the Live SDK JavaScript library.
<script type="text/javascript">
WL.init({
client_id: APP_CLIENT_ID,
redirect_uri: REDIRECT_URL,
scope: ["wl.basic", "wl.contacts_emails"],
response_type: "token"
});
</script>
More details here: https://msdn.microsoft.com/en-us/library/office/hh550844.aspx
- Create a button to fire the import contacts
<a href="#" id="import">Import contacts</a>
- Create a click function to the button, to import contacts using WL.Login
jQuery( document ).ready(function() {
//live.com api
jQuery('#import').click(function(e) {
e.preventDefault();
WL.login({
scope: ["wl.basic", "wl.contacts_emails"]
}).then(function (response)
{
WL.api({
path: "me/contacts",
method: "GET"
}).then(
function (response) {
//your response data with contacts
console.log(response.data);
},
function (responseFailed) {
//console.log(responseFailed);
}
);
},
function (responseFailed)
{
//console.log("Error signing in: " + responseFailed.error_description);
});
});
});
- when the user will click on that link he will be asked to allow permissions that you import outlook or hotmail contacts for your application
Any question about Windows Live Contact API ?
If you still have problems importing your hotmail or outlook contact to your web application don’t hesitate to post your question below.
How to import Hotmail, Outlook contacts with Javascript using Windows Live Contact API http://bit.ly/1FvJeeg
Posted by Design19 on Thursday, June 4, 2015
1-href of button # is not valid to fire the button to the path
2-following error is coming:
We're unable to complete your request
Microsoft account is experiencing technical problems. Please try again later.