Build 2015–Day 1 Keynote (takeaways)

 

Azure

• Docker for Windows (docker client for windows)
• Mix and Match linux and windows containers and run it on any server.
• Debugging apps within containers in linux on windows server using Visual Studio.
• .Net Core RC (for linux, windows and mac)
  
• App Service
  
• Visual Studio (download)
• A free code editor for MAC, Linux and Windows
  
• SQL DB Elastic Pool
• For managing lots of databases in SaaS type scenarios
  
• SQL Data Warehouse
• Directly competes with AWS Redshift and its better.
  
• Data Lake
• Store and process infinite data.

Office

• Office Apps
• New Unified Graph API to access all the data from 1 place
• ‘Delve’ App
• ‘Sway’ App

Windows

• Windows 10 Universal apps
  
• Windows Store Apps now support  (this is freaking awesome !!!!!)
• Web Sites/Web Apps
• .Net and Win32 Apps (using app virtualization)
• Android Java/ C++ Apps
• Object C Apps
  
• Compile Object C code using Visual Studio on Windows
  
• Hololens
  
• Microsoft Edge  (final name for ‘'Project Spartan’ the new Browser on Windows 10)

New App type, CORS support and Office 365 API's with vanilla-js

Few months back Microsoft introduced several new API’s for Office 365 for which spun across SharePoint, Exchange, Lync, and rather than having the developers learn each of the platform they simplified the general concepts and also introduced a new type of app - “Office 365 external Apps”

These apps look similar to “Provider Hosted Apps” but the have some key difference in the way you register them and launch them. For more details visit: http://www.sharepointnutsandbolts.com/2014/12/office-365-apps-and-sharepoint-apps-comparison.html

Along with this new type of Apps, Microsoft has also enabled cross-origin resource sharing (CORS) support for Office 365 API’s.
Which means we do not need any special client libraries to authenticate or access these API’s.

Let’s see how we can register this new type of app and then integrate it using vanilla-js.

Step 1 – Register your App

• Sign in to Azure Management Portal
  
• From Active Directory node select the Active Directory linked to your Office 365 subscription
  
  
  
• Click “Applications” tab from the top navigation
  
  
  
• Click “Add” from the bottom of the screen and select “Add an application my organization is developing”
  
  
  
• Provide the app name and select Web application and/or web API as Type
  
  
  
• Provide the Sign On URL of your web app in which you are integrating the API’s
• Provide any unique ID of your App in App ID URI
  
  
  

Step 2 – Configure permissions for App

• Open the application and click “Configure” tab from the navigation
  
  
  
• Scroll down and click “Add Application” under “permissions to other applications”
  
  
  
• Click “+” next to Office 365 SharePoint Online and save.
  
  
  
• For Office 365 SharePoint Online, open delegated permissions dropdown, select appropriate permissions
  and save the application
  
  
  

Step 3 – Configure the App to allow OAuth implicit grant flow

• On the configure tab, click on “Manage Manifest” button from the bottom and download the manifest
  
  
  
  
  
• Set the value of "oauth2AllowImplicitFlow" to true and upload the manifest file.
  
  
  
  
  
• The application registration is complete now…
  

Step 4 – Integrate it with a Web Page

• Authenticate
  
  
  
  
  
• Call the REST API with Authorization Token
  
  
  
  
  
• Fetch document list from SharePoint
  
  
  
  
  

See complete code on github..

Other Resources:

• Setup Office 365 dev environment
• ADAL JS & CORS with Office 365 API’s
• Key skills for SharePoint/Office 365 developer
• .Net and JavaScript client libraries for Office 365 API’s
• Office 2013 modern authentication public preview

.

.

.

Build 2014 – Day 1 (Notes)

Keynote:

• Mobile First / Cloud First vision and strategy
• Microsoft announced Windows Phone 8.1 and Windows 8.1 Update
• New personal assistant “Cortana” – Microsoft’s answer to ‘Siri’ comes on Windows Phone 8.1
  • Remind me to ask about puppy when I talk to “blah” next. (reminds when the call arrives)
• Many new features and optimizations on Windows Phone 8.1
  • Weekly calendar views
  • Swipe keyboard (World records of fastest phone keyboard)
• New Universal App development approach
  • Share code between ALL Win 8 platforms (Phone, Desktops, Tablets, XBox One) easily with special Visual studio templates
• WinJS is now Open Source
• Visual Studio 2013 Update 2 RC available now
• Windows 8.1 Update available now on MSDN
• New Nokia 930 and other lumia devices announced

Single Page Application with ASP.net and Angular.js

• Sample to get started
  • include angular.min.js
  • create a controller js file and include it
  • add the ng-app attribute on the html tag
  • bind the controller to body
    <body ng-controller=”testController”>
  • Sample repeater control
    <div ng-repeat=”card in cards”>
    Card {{card.id}}
    </div>
  • testController is just a function
    var testController = function ($scope) {
       $scope.cards = [ { id:1 }, { id:2 } ];
    }
• Bundling and minification may not work as angular needs the name $scope
• Use either nuget or cdn to get the angular js files
• keep you app controller js files separate
• Angular Items
  • Modules
    var mainApp = angular.module(‘mainApp’,[‘testController’]);
    var testController = angular.module(‘testController’,[]);
    angular.controller
    ng-app=”mainApp”
  • Controllers
  • Dependency Injection
  • $http
    Lightweight API for AJAX requests
  • $resources
  • Filters
  • routing

What’s new in WinJS

• WinJS 2.1 for Phone
• WinJS vision is to create a cross platform library for all devices
• WinJS is now Open Source and accepts contributions from community
• WinJS can now be used in cross platform Web sites and apps
• New Pivot Control for Phone
• Improvements and Support of WinJS controls on Phone
  • Appbar on Phone
  • ListView on Phone
  • Semantic Zoom on Phone  (e.g. grouped listview by alphabets. contacts list)
  • New Animations on Phone
  • User Themes on Phone
• App bar code automatically adjusts between Phone and PC
• WinJS Ratecontrol works with Angular and Knockout via 2 way binding
• http://try.buildwinjs.com/

Large Scale JavaScript with TypeScript

• Project “Monaco” – full code editor in browser for azurewebsites.
• JS Code base roadmap for “Monaco”
  • Small – 50 KLOC  (Modules, classes, promises) – 10% typescript
  • Medium – 100 KLOC (AMD, lazy loaded, contributions) – 50% typescript
  • Large – 200 KLOC  (components, API, dependency injection) – 100% typescript
• Concerns with Javascript
  • organizing a large and growing code base
  • refatoring javascript code is difficult
  • describing API’s
• TypeScript to rescue
  • Optional and Structural typing
  • Classes, Modules
  • Interfaces (very powerful)
    • interfaces named object types of describing the shape of JavaScript objects
• Typescript has Generics
• Typescript Type Definitions project on github (‘DefinitelyTyped’ respository’)
• Code Organization Pains
  • Modules are open
    • undisciplined name space contributions
  • You can have a cyclic dependencies
    • without noticing
  • Name spaces have no relationship to the code organization on disk
    • renaming files/name spaces is no fun
  • Growing code pains
    • requires ordering of js files
    • dependencies between files
    • eager loading (may load lots of stuff which is not needed)
• TypeScript External modules for rescue
  • Separately loaded code referenced using external module names
    • implemented in separate source files
    • entities are private unless exported
  • Module Pattern
    • CommonJS
    • Asynchronous Module Definition (AMD) e.g. requireJS
• Monaco
  • Server uses node.js
  • Client
  • Common module syntax enables code sharing between client and server
• AMD migration was very good. Self contained modules.
• AMD Applied
  • Lazy Loading
• Componentization
  • reuse typescript code as ‘binary’ JS components with a declarations file
  • e.g. 
    • tsc – declarations –out typescriptservices.js typesript.ts
    • generates typescriptservices.d.ts

Cross Domain AJAX Calls and SharePoint Apps on Office 365

To give a bit of background, I have been exploring architectures and various components needed to create a multi-tenant SharePoint App. So far I have settled on using SharePoint only, as a frontend layer and using external services to drive the entire backend, including storage.
Given this high level design the first interesting item that I came across was while posting data to the backend Service from a SharePoint Hosted App. The classic client side Cross-domain security issue. Here are some of the solutions out there for this issue:

• Using the JSONP hack
  • Due to its nature, this only works for ‘GET’ requests and I wanted to do a ‘POST.
• Using the default SharePoint 2013 Web Proxy
  • I was able to make the ‘GET’ requests work with this approach but not the ‘POST’ requests.
• Creating a Custom Proxy
  • Worked but involved quite a few hoops and a remote web page, which I did not want to create.
• Enabling Cross Origin Resource Sharing (CORS) in WCF Services
  • Worked perfectly !!!

For simple requests we can enable CORS by setting some response headers like Access-Control-Allow-Origin, Access-Control-Allow-Methods and Access-Control-Allow-Headers with the value ‘*’. 
But all requests from Office 365 contain special headers and hence they are ‘Preflighted’, which means they would first send an http request with “OPTIONS” method to check the domain and then send the actual request. (More details on Preflighted requests here) For Preflighted requests we need to write some extra code along with adding the response headers. Here is a good article with sample code that explains this and below is the snap shot of the code:



And here is the snap shot of the sample app working on Office 365:


Additional Resources on CORS and Multitenant Applications with Azure:

• Enabling CORS
• Developing Multi-tenant Applications for the Cloud, 3rd Edition
• Designing Multitenant Applications on Windows Azure
• Building Big: Lessons learned from Windows Azure customers - Part I

SharePoint Apps vs. SharePoint Solutions

Last few weeks I have been working on a project which required some research on whether a developer should create an App or a traditional WSP Solution for the SharePoint 2013. The research will soon be transformed into a web app and I will post that when its ready but meanwhile here are few links which I found very helpful for this topic.

• Deciding between apps for SharePoint and SharePoint Solutions
  
• Apps for SharePoint compared with SharePoint solutions
  
• SharePoint 2013 Development (Apps versus Solutions)
  
• SharePoint Apps Playbook Series: Part 1 – SharePoint Apps vs SharePoint Solutions

New Office 365 Code Samples

Last month I worked on few Office 365 code samples which are published now on the new Office 365 developer content site on MSDN.
Here is the list :

Social Apps

• Post a Yammer message using an app for SharePoint
• Integrate Twitter with SharePoint Online
• Outlook Online: Integrate YouTube with Outlook Online

On-Premise Integration Apps

• Create a task in Exchange Online
• Create a Windows 8 app to display videos from SharePoint Online
• Search for people on Lync and start conversations 

General Management Apps

• Handle common errors in Office 365
• Manage users by calling Windows PowerShell cmdlets from C#
• Manage licenses and subscriptions for Office 365
• Manage single sign-on with Office 365

Authentication and Authorization with remote apps in Office 365 and SharePoint Online (Part 1)

This post is detailing about how you perform authentication and authorization from a remote app in SharePoint Online.
Especially, when the remote apps are running on a Non .Net technology platforms. Which means we can’t use the OOTB ‘TokenHelper’ class.
The entire flow needs to only use simple HttpRequests.
I am going to break this into 3 parts:

1. Register a Remote App in SharePoint
2. Get the 'AccessToken’ via the Azure ACS and SharePoint dance
3. Call SharePoint REST Service with the AccessToken

Right now I am using the .Net HttpRequest class to perform this entire example and understand the entire flow. I am going to convert this into a JavaScript library soon so that it can be easily consumed by any external platforms. Ok, so lets get started.

Register a Remote App in SharePoint

There is some good guidance around registering an app for SharePoint but in our case we just want to register an app to perform the OAuth from a remote application so the only good option is to register it via ‘/_layouts/15/appregnew.aspx’.


There are 3 pieces of information that we need from the app registration:

• client_id          = App Id
• client_secret   = App Secret
• redirect_uri     = Redirect URI

Get the 'AccessToken’ via the Azure ACS and SharePoint dance

There are 3 steps to this dance:
Step 1: Get the Request token
Getting the request token just requires a well formed Url with all the 3 pieces of information that we collected during the app registration.


(See this app permissions section for all the Scope and Rights available in SharePoint Online.)
This Url would redirect to the msonline login screen and after you enter the credentials if you prompt you with the trust screen:




Once you trust the app, it would redirect back to the ‘redirect_uri’ configured during the app registration along with the request token in the querystring



Step 2: Get the Realm

(This method is taken directly from TokenHelper class. The targetApplicationUri is the SharePoint Online url)
Step 3: And finally, Get the Access Token
Now that we have the requestToken and realm, we need to create a POST request to ACS to get back the access token

Call SharePoint REST Service with the AccessToken

The only thing to remember before calling the SharePoint REST API’s is to make sure that we requested the correct Scope and Rights while generating the access token. In the code above I request ‘AllProfile.Manage’ as my scope so I can call the User Profile REST API’s.

That’s it. Once we have the access token we can call all the SharePoint REST API’s that fetches the data. For creating, updating and deleting we need to get 1 more piece of data which is RequestDigest. I will cover this in my next post on uploading documents to SkyDrive Pro using REST API.

Reference Links: 

Tips and FAQs: OAuth and remote apps for SharePoint 2013
OAuth authentication and authorization flow for apps that ask for access permissions on the fly in SharePoint 2013 (advanced topic)
Get started with the SharePoint 2013 REST service
Using the SharePoint 2013 REST service


Download the Code from https://github.com/jomit/OAuthO365

 

Authentication with Office 365 from an On-Premise Application

Recently I had a problem wherein I needed to connect to an Office 365 SharePoint site from an on Premise Windows App.
Now at first it seemed simple but as I drilled deeper I came across some challenges and while overcoming them I learned a lot more about how O365 Authentication works.
Before I go further I would like to point out 2 resources which helped me a lot in solving this challenge:

• Wictor Wilén’s blog on ‘How to do active authentication to Office 365 and SharePoint Online’
• Codeplex project on using SharePoint with WinRT Client

Here is that diagram which explains the AuthN basics for SharePoint Online in Office 365:
 
(So the key here is to understand that SharePoint Online uses the binary token returned from the STS service located at login.microsoftonline.com to validate all requests.)
At first I tried using the “MsOnlineClaimsHelper” but I couldn’t get it to work as it kept on throwing errors while fetching the response using ‘WSTrustFeb2005ContractClient’. Then I looked at the WinRT code and it was doing the exact same thing but with much less dependencies. Just plain HttPWebRequests + XML.

But the WinRT code was specifically for REST API’s and not Client Object Model. So I modified the code a little bit to make it work with CSOM.

Here is the link to Helper class code that I created and used for one of the code samples on MSDN.