Redmond Protocols Plugfest 2016 Tarun Chopra Accessing APIs through Add-Ins Sr. Escalation Engineer

Agenda Overview APIs Internal External Scenarios One Drive login/logoff Accessing Non-Microsoft service Q&A

Overview Office Add-ins are hosted in an iframe that runs using the HTML5 sandbox attribute Modal interactions aren't allowed - for example, calls to JavaScript alert, confirm, and prompt functions aren't allowed because they're modal. Office Add-Ins use only Async Programming. Requires only HTTPS access from Add-In, No HTTP allowed. Available Add-ins : Outlook, Word, Excel, PowerPoint, Project, Access

Outlook Add-Ins

APIs Internal : Accessing inbuilt internal properties of outlook like subject line, attachments, body etc.

APIs….. Web service locationWay to call the web service Option 1: The Exchange server that hosts the client mailbox Use the mailbox.makeEwsRequestAsync method to call EWS operations that add-ins support. The Exchange server that hosts the mailbox also exposes EWS.mailbox.makeEwsRequestAsync Option 2: The web server that provides the source location for the add-in UI (SOP) Call the web service by using standard JavaScript techniques. The JavaScript code in the UI frame runs in the context of the web server that provides the UI. Therefore, it can call web services on that server without causing a cross-site scripting error. Option 3: All other locations Create a proxy for the web service on the web server that provides the source location for the UI. If you do not provide a proxy, cross-site scripting errors will prevent your add-in from running.* External: Accessing/Interacting with existing web services available on the internet.

Option 2 (Same-origin Policy) Same-origin policy (SOP) permits scripts running in a browser to only make requests to pages on the same domain. Requests must have the same URI scheme, hostname, and port number Target Service

Option 2 (SOP) cont… Overcome SOP limitation: Use JSON/P for anonymous access. Implement server-side script using a token-based authentication scheme. Using cross-origin resource sharing (CORS). Build your own proxy using IFRAME and POST MESSAGE window.postMessage Refer :

Option variation : Access through Proxy One variation of the ASP option from the last slide is to use a proxy. The concept is simple: You insert your own server in-between your app and the third-party server. There is no browser enforced same-origin limitation on server-to-server communication, and you do have the administrative control necessary to configure your proxy server to allow requests from your app’s domain Web BrowserWeb ServerTarget Service GET /yourWA.html Data GET / Web services data

Scenarios

Accessing Personal Onedrive Goal : Access Personal Onedrive from outlook add-in in Compose mode using Onedrive APIs. Sign-In Fetch details Sign-Off Register App One drive explorer sample:

Step 1 : Register App (One time) Register your application to get a client_id and a client secret.Register Redirect URL : Documentation :

Step 2 : Sign-in Accessing Onedrive Sign-in API GET _id}&scope={scope}&response_type=token&redirect_uri={re direct_uri} Refer step1 for client_id and redirect_uri OneDrive service will transfer control to configured redirect URL ; devtest.com:44300/AppCompose/Home/callback.html ; with Auth. Token devtest.com:44300/AppCompose/Home/callback.html

Step 3 : Fetch details Fetch thumbnails GET /v1.0/drive/root::?expand=thumbnails,children(expand=thumbnails(select=large,c200x1 50_Crop))&access_token=Token Token : Provided to callback.html in Step 2. Download files " 3r0sszy5PLVFX6Y6apa0XWMGXavXvZfIrC-FcuKAo- 55bb8ZbtWzk9k51oZvEA41ZNzEE6OJsCyGmJZFzDHRnxI_FAzpAeqHKjFU4DF8hTDTfjc6oK1fy SiWrQfT9DtY4wF_YTmElmZiGSiEsUIXzQ1wbFCWS4ty130pR8", Documentation :

Sign-Out Sign out API GET Refer step1 for client_id and redirect_uri Invalidate internal cookie document.cookie = "username=; expires=Thu, 01 Jan :00:00 UTC"

OneDrive App Screenshot

Accessing Aftership APIs Goal: Access the REST APIs from the AfterShip.com service to retrieve tracking information from a shipped package. Generate a key for your app. Call API to add a package; get an id. Call API to retrieve tracking info based on id. TrackPackage example: CORS

Step 1: Getting the API key Registration for app using Aftership is fairly simple. Login to your AfterShip account (Sign up free)(Sign up free) Visit Apps > API and click addApps > API Click Generate API Key

Step 2: Adding a package {"tracking": { "slug": "dhl", "tracking_number": " ", "title": "Title Name", "smses": [ " ", " “ … API end point POST Header aftership-api-key: YOUR_API_KEY Content-Type: application/json Body All the request and response are in JSON string. Example code: var method = "GET"; api_url = ' method = "POST" trackingobject.ASObject = null; $.ajax({ url: api_url, type: method, crossDomain: true, dataType: "json", data: { "tracking": { "tracking_number": key } }, contentType: "application/json", headers: { "aftership-api-key": "24cc6cb b26-a12e-7ef254c9c5a0" }, CORS Access-Control-Allow-Origin != * Access-Control-Allow-Method != POST

Step 3: Set up proxy router.get('/trackshipment2/:trackingNumber', function (req, res) { var reqBody = { 'tracking': { 'tracking_number': req.params.trackingNumber, 'slug': '' } }; var theTrackingNumber = req.params.trackingNumber; aftership.call('post', '/trackings', { body: reqBody }, function (err, result) {... if (!err) { res.setHeader('Access-Control-Allow-Origin', '*'); res.json(result).status(202); } Simple node.js server can be used but is not the only option. In the node.js server, using routes is convenient: var url = ' /trackshipment2/' + key; $.get(url).done(function (obj) {… Back in the add-in, call the proxy: See: and

Proxy data is simple pass-through on Azure, Heroku, etc… Aftership.com POST /mytrackings Data POST /trackings/id

Trackpackage App Screenshots Read pane add-in

Demo TrackPackage Add-In Demo

Summary Calling APIs internal vs external Calling external issues SOP Solutions include: JSONP, server side scripting, CORS headers postMessage

Q&A Thank you!