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

.

.

.

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

 

SharePoint 2013 and Office 2013 . . . .

 

Finally, Microsoft has announced the latest release of SharePoint 2013 (a.k.a SharePoint 15) along with Office 2013 (a.k.a Office 15).

There are some significant changes in the new App Model and would require a lot of unlearning and learning to get in pace. Personally, I like the overall direction in which MS is heading. I am a JavaScript fan and have been heavily using libraries like KnockoutJS and jQuery for a more end-to-end experience in SharePoint. So for me it feels like home .
I have been working on this new App Model since over a month now and below are some tips for all the SharePoint Dev’s out there:

• Embrace & Learn JavaScript  (As a real language)
• SharePoint is not hammer and Lists are not nails
• Separate the Concerns (Logic, Presentation, Persistence)
• Understand the Mechanics of how things are working  (Fundamentally, SharePoint is just an Abstraction on top of an ASP.net Web Application)
• Good Architecture is possible even with SharePoint involved

I will be sharing my experiences on this new journey as I move along…

Enjoy !!