{"id":83,"date":"2014-12-08T09:00:00","date_gmt":"2014-12-08T09:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2014\/12\/08\/office-365-client-apis-for-hybrid-mobile-apps\/"},"modified":"2022-09-30T09:19:04","modified_gmt":"2022-09-30T16:19:04","slug":"office-365-client-apis-for-hybrid-mobile-apps","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/office-365-client-apis-for-hybrid-mobile-apps\/","title":{"rendered":"Office 365 Client APIs for Hybrid Mobile Apps"},"content":{"rendered":"<p>The Visual Studio Tools for Apache Cordova enable developers to <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=398477\">build mobile apps for iOS, Android, and Windows<\/a> using web standards technologies. When used with the <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/a15b85e6-69a7-4fdf-adda-a38066bb5155\">Office 365 API Tools for Visual Studio<\/a>, developers can access Office 365 APIs from their hybrid mobile applications to access to the user\u2019s calendar, contacts, mail, and files from their Office 365 account to easily create a richer, more connected experience.<\/p>\n<p>Both the Tools for Apache Cordova and the <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/a15b85e6-69a7-4fdf-adda-a38066bb5155\">Office 365 API Tools<\/a> are extensions for Visual Studio 2013. Building a <a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/mobile-apps-for-web-developers\/\">hybrid mobile app<\/a> that queries data from a REST service can be hard: you\u2019ll need to manage authentication tokens, construct REST URIs dynamically, and handle errors and retries. This code is boilerplate but is often error prone, the Office 365 APIs handle this complexity for you so you can focus on building your app. In addition to handling the complexity of REST calls, the library also provides APIs for authentication and discovery, OneDrive My Files usage, and accessing user and group information.<\/p>\n<p>For example, a hybrid mobile app could easily add calendar appointments directly into a user&#8217;s Exchange calendar, send mail on behalf of the user, or directly access their files stored in OneDrive. With few lines of code, users can authenticate and access their Office 365 account.<\/p>\n<p>Below, you can see how to authenticate a user and create a client object that serves as the base for accessing all the APIs from Exchange. The getIdToken method prompts for a username and password to authenticate against outlook.office365.com.<\/p>\n<blockquote>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: blue;\">var<\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\"> authContext = <\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: blue;\">new<\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">O365Auth.Context();<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">authContext.getIdToken(<\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: #a31515;\">&#8216;https:\/\/outlook.office365.com\/&#8217;<\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">)<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">.then(function(token) {<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0 <\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: green;\">\/\/ Promise callback: Authentication succeeded<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0 client = <\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: blue;\">new<\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">Exchange.Client(<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: #a31515;\">&#8216;https:\/\/outlook.office365.com\/ews\/odata&#8217;<\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">,<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 token.getAccessTokenFn(<\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: #a31515;\">&#8216;https:\/\/outlook.office365.com&#8217;<\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">)<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0 );<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black; line-height: 107%;\">});<\/span><\/p>\n<\/blockquote>\n<p>Using the constructed client object, you can then access all messages from the Inbox:<\/p>\n<blockquote>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: green;\">\/\/ Use getFolder to access Inbox folder<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">client.me.folders.getFolder(<\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: #a31515;\">&#8220;Inbox&#8221;<\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">).fetch()<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">.then(function(folder) {<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0 <\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: green;\">\/\/ Retrieve all the messages<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0 folder.messages.getMessages().fetch()<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0 .then(function(mails) {<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: green;\">\/\/ mails.currentPage contains all the mails in Inbox<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0 });<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black; line-height: 107%;\">});<\/span><\/p>\n<\/blockquote>\n<p>To get contacts, simply call getContacts:<\/p>\n<blockquote>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">client.me.contacts.getContacts().fetch()<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">.then(function(contacts) {<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt; line-height: normal;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black;\">\u00a0\u00a0\u00a0 <\/span><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: green;\">\/\/ contacts.currentPage contains the contacts information<\/span><\/p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0pt;\"><span style=\"font-size: 9.5pt; font-family: consolas; background: white; color: black; line-height: 107%;\">});<\/span><\/p>\n<\/blockquote>\n<p>Similarly, use the getEvents method to retrieve calendar events. Here are few screenshots of our <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=398519\">Woodgrove Demo<\/a> app that uses Office 365 APIs to authenticate, fetch user\u2019s calendar appointments and displays them in the app.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2014\/12\/4478.Fetchuserscalendarinformation_10D93B1D.png\"><img decoding=\"async\" style=\"float: none; margin-left: auto; margin-right: auto; border: 0px;\" title=\"Fetch user's calendar information\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2014\/12\/4478.Fetchuserscalendarinformation_10D93B1D.png\" alt=\"Fetch user's calendar information\" width=\"640\" height=\"362\" border=\"0\" \/><\/a><\/p>\n<p>To get started building a hybrid mobile app using Office 365 APIs in Visual Studio 2013, install the <a href=\"http:\/\/www.visualstudio.com\/en-US\/explore\/cordova-vs\">Tools<\/a> for Apache Cordova Preview and the <a href=\"https:\/\/visualstudiogallery.msdn.microsoft.com\/a15b85e6-69a7-4fdf-adda-a38066bb5155\">Office 365 API Tools for Visual Studio 2013<\/a>. You can find a <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/dn771546.aspx#Office\">walkthrough on adding the Office 365 service to your app on MSDN<\/a>. You can also follow a <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=517837\">tutorial on using the SharePoint APIs to access OneDrive files.<\/a><\/p>\n<p>Try out the APIs and let us know your feedback. If you run into any issues or have questions, you can connect directly with the product team via <a href=\"http:\/\/visualstudio.uservoice.com\/forums\/121579-visual-studio\/category\/82642-multi-device-hybrid-apps\">UserVoice<\/a>, <a href=\"https:\/\/twitter.com\/VSCordovaTools\">Twitter<\/a>, <a href=\"http:\/\/stackoverflow.com\/questions\/tagged\/visual-studio-cordova\">StackOverflow<\/a>, or <a href=\"mailto:vscordovatools@microsoft.com\">email<\/a>.<\/p>\n<table style=\"width: 692px;\" border=\"0\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"141\"><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2014\/12\/8321.image_thumb_181915C8.png\"><img decoding=\"async\" style=\"border-width: 0px;\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2014\/12\/8321.image_thumb_181915C8.png\" alt=\"image\" width=\"125\" height=\"125\" border=\"0\" \/><\/a><\/td>\n<td valign=\"top\" width=\"549\"><strong>Suresh Jayabalan<\/strong>, Senior Program Manager, Visual Studio Client Platform Tools Team<\/p>\n<p>Suresh Jayabalan is a Program Manager on the Visual Studio team, focusing on mobile app development technologies and Apache Cordova.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The Visual Studio Tools for Apache Cordova enable developers to build mobile apps for iOS, Android, and Windows using web standards technologies. When used with the Office 365 API Tools for Visual Studio, developers can access Office 365 APIs from their hybrid mobile applications to access to the user\u2019s calendar, contacts, mail, and files from [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1028,155],"tags":[124,553,206,126],"class_list":["post-83","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-visual-studio","tag-javascript","tag-mobile","tag-office-365-api","tag-visual-studio-2013"],"acf":[],"blog_post_summary":"<p>The Visual Studio Tools for Apache Cordova enable developers to build mobile apps for iOS, Android, and Windows using web standards technologies. When used with the Office 365 API Tools for Visual Studio, developers can access Office 365 APIs from their hybrid mobile applications to access to the user\u2019s calendar, contacts, mail, and files from [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/83","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}