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

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

3. 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

4. Outlook Add-Ins

5. APIs Internal : Accessing inbuilt internal properties of outlook e-mail like subject line, attachments, email body etc.

6. 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.

7. 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. https://www.outlook.office365.com/ http://www.outlook.office365.com/ http://www.facebook.com/ http://www.twitter.com/ Target Service

8. 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 : https://dev.office.com/docs/add-ins/develop/addressing-same-origin-policy-limitationshttps://dev.office.com/docs/add-ins/develop/addressing-same-origin-policy-limitations

9. 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

10. Scenarios

11. 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: https://github.com/OneDrive/onedrive-explorer-jshttps://github.com/OneDrive/onedrive-explorer-js

12. Step 1 : Register App (One time) Register your application to get a client_id and a client secret.Register Redirect URL : https://tarun-devtest.com:44300/AppCompose/Home/callback.htmlhttps://tarun-devtest.com:44300/AppCompose/Home/callback.html Documentation : https://dev.onedrive.com/auth/msa_oauth.htmhttps://dev.onedrive.com/auth/msa_oauth.htm

13. Step 2 : Sign-in Accessing Onedrive Sign-in API GET https://login.live.com/oauth20_authorize.srf?client_id={client _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 ; https://tarun- devtest.com:44300/AppCompose/Home/callback.html ; with Auth. Token https://tarun- devtest.com:44300/AppCompose/Home/callback.html

14. 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 "@content.downloadUrl": "https://vck5tg-bn1305.files.1drv.com/y3m2L9Q- 3r0sszy5PLVFX6Y6apa0XWMGXavXvZfIrC-FcuKAo- 55bb8ZbtWzk9k51oZvEA41ZNzEE6OJsCyGmJZFzDHRnxI_FAzpAeqHKjFU4DF8hTDTfjc6oK1fy SiWrQfT9DtY4wF_YTmElmZiGSiEsUIXzQ1wbFCWS4ty130pR8", Documentation : https://dev.onedrive.com/items/download.htmhttps://dev.onedrive.com/items/download.htm

15. Sign-Out Sign out API GET https://login.live.com/oauth20_logout.srf?client_id={client_id}&redirect_uri={redirect_uri} Refer step1 for client_id and redirect_uri Invalidate internal cookie document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC"

16. OneDrive App Screenshot

17. 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: http://github.com/trackpackage CORS

18. 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

19. Step 2: Adding a package {"tracking": { "slug": "dhl", "tracking_number": "123456789", "title": "Title Name", "smses": [ "+18555072509", "+18555072501“ … API end point POST https://api.aftership.com/v4/trackingshttps://api.aftership.com/v4 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 = 'https://api.aftership.com/v4/trackings'; 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": "24cc6cb2-6486-4b26-a12e-7ef254c9c5a0" }, CORS Access-Control-Allow-Origin != * Access-Control-Allow-Method != POST

20. 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 = 'https://.com /trackshipment2/' + key; $.get(url).done(function (obj) {… Back in the add-in, call the proxy: See: https://nodejs.org/ and https://www.heroku.com/https://nodejs.org/https://www.heroku.com/

21. Proxy data is simple pass-through https://outlook.office.com/OWANode.js on Azure, Heroku, etc… Aftership.com POST /mytrackings Data POST /trackings/id

22. Trackpackage App Screenshots Read pane add-in

23. Demo TrackPackage Add-In Demo

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

25. Q&A Thank you!