Get started with building native mobile apps interacting with SharePoint

START BUILDING NATIVE MOBILE APPS
FOR SHAREPOINT
March 12, 2016
Yaroslav Pentsarskyy
sharemuch.com

2
• SharePoint Architect
• Microsoft MVP
• Blogger
• Writer
Who is this guy?

Why are we here?
What’s wrong
with this picture?

Why are we here?
Does your meeting
ever look like this?

Why are we here?
Or is it more like …

Why are we here?
Our goal today:
• Explore SharePoint integration with
mobile platforms
• Get some samples
• Look at mobile use cases in your
business

What are we building today
SharePoi
nt excites
me!

 Office 365 Developer Site
 That’s where files will be stored so that’s obvious
 Set up a development environment for SharePoint Add-ins on
Office 365: https://msdn.microsoft.com/en-
us/library/office/fp179924.aspx#o365_signup
 Windows Azure
 This is going to be used for authentication to Office
365
 Azure trial: https://azure.microsoft.com/en-us/pricing/free-trial/
 Visual Studio and Xamarin
 This is what we’re going to be using to build Android
app with C# and .NET
Tools

 Xamarin
 Build for Android and iOS using one tool
 Use your existing knowledge of Visual Studio
 Use .NET framework and C#
 Has been recently acquired by MS, so more support and
integration is coming, hopefully
 More MS integration samples:
https://developer.xamarin.com/samples-all/
 Native tool
 Learn new toolset (for example Android Studio)
 Learn language: objective C or Java
 Less dependency on a middle man
 More platform specific community support
Xamarin vs. platform specific tool

 CameraAppDemo
 https://github.com/xamarin/monodroid-
samples/tree/master/CameraAppDemo
Sample Xamarin App

Step 1.1 – Adding O365 to our
Sample Project
• Right click on the Project
name in Visual Studio ->
• Add ->
• Connected Service …

Step 1.2 – What’s our SPO tenant
URL?
• Don’t have one?
• Spin up a test one,
search for “Set up a
development
environment for
SharePoint Add-ins
on Office 365”

Step 1.3 – Create new azure
“application”
• SharePoint Online uses
Azure to handle
authentication.
• Azure takes care of
authentication and creates
a token.
• SPO consumes that token
and hopefully authorizes
the user if they have
access to the site

Step 1.4 – We’ll need to ask users
for these permissions
• Not only the user must
consent to giving these
permissions to our app,
they obviously need to be
granted those in
SharePoint Online ….
otherwise we’re gonna
have a case of “writing
checks we can’t cash”

Step 1.5 – wait while Visual Studio
adds required libraries to our project
• Curious fact!
• This inflates our
project from few KB
to … oh well, ~80
MB

Get started with building native mobile apps interacting with SharePoint

Adding Code to Create List Items
in SPO
private static async Task<string> GetFormDigest(string siteURL, string accessToken)
{
//Get the form digest value in order to write data
HttpClient client = new HttpClient();
HttpRequestMessage request = new HttpRequestMessage(
HttpMethod.Post, siteURL + "/_api/contextinfo");
request.Headers.Accept.Add(new
MediaTypeWithQualityHeaderValue("application/xml"));
request.Headers.Authorization = new AuthenticationHeaderValue("Bearer",
accessToken);
HttpResponseMessage response = await client.SendAsync(request);
string responseString = await response.Content.ReadAsStringAsync();
XNamespace d = "http://schemas.microsoft.com/ado/2007/08/dataservices";
var root = XElement.Parse(responseString);
var formDigestValue = root.Element(d + "FormDigestValue").Value;

Adding Code to Create List Items
in SPO … cont.
public static async Task<string> AddListItem(string title, string siteURL, string accessToken, string filePath)
{
string requestUrl = siteURL + "/_api/Web/Lists/GetByTitle('TestList')/Items";
var formDigest = await GetFormDigest(siteURL, accessToken);
HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Add("Accept", "application/json;odata=verbose");
HttpRequestMessage request =
new HttpRequestMessage(HttpMethod.Post, requestUrl);
request.Headers.Authorization =
new AuthenticationHeaderValue("Bearer", accessToken);
// Note that the form digest is not needed for bearer authentication. This can
//safely be removed, but left here for posterity.
request.Headers.Add("X-RequestDigest", formDigest);
var requestContent = new StringContent(
"{ '__metadata': { 'type': 'SP.Data.TestListListItem' }, 'Title': '" + title + "'}");
requestContent.Headers.ContentType =
System.Net.Http.Headers.MediaTypeHeaderValue.Parse("application/json;odata=verbose");
request.Content = requestContent;
HttpResponseMessage response = await client.SendAsync(request);
if (response.IsSuccessStatusCode)
{
string responseString = await response.Content.ReadAsStringAsync();
JsonObject d = (JsonObject)JsonValue.Parse(responseString);
JsonObject results = (JsonObject)d["d"];
JsonValue newItemId = (JsonValue)results["ID"];
var endpointUrl = string.Format("{0}({1})/AttachmentFiles/add(FileName='{2}')", requestUrl, newItemId.ToString(), App._file.Name);
using (var stream = System.IO.File.OpenRead(filePath))
{
HttpContent file = new StreamContent(stream);
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);
var resp = await client.PostAsync(endpointUrl, file);
}
return responseString;
}
return (null);
}

References
using System.Threading.Tasks;
using System.Net.Http; //Reference System.Net.Http.dll
using System.Net.Http.Headers;
using System.Xml.Linq; //Reference System.Xml.Linq.dll
using Microsoft.IdentityModel.Clients.ActiveDirectory;
using System.Json;

References
using Microsoft.IdentityModel.Clients.ActiveDirectory; //Reference NuGet
package

References
Install-Package Microsoft.IdentityModel.Clients.ActiveDirectory
-Version 3.0.110281957-alpha -Pre

Adding Authentication Helper
using System.Linq;
using Android.App;
using Microsoft.IdentityModel.Clients.ActiveDirectory;
using System.Threading.Tasks;
namespace CameraAppDemo
{
public class AuthenticationHelper
{
public const string Authority = "https://login.windows.net/common";
public static System.Uri returnUri = new System.Uri("http://cameraappdemo.cameraappdemo/");
public static string clientId = "0f0ff4eb-b28a-48ec-88c0-1bcd50ae381b";
public static AuthenticationContext authContext = null;
public static async Task<AuthenticationResult> GetAccessToken
(string serviceResourceId, Activity activity)
{
authContext = new AuthenticationContext(Authority);
if (authContext.TokenCache.ReadItems().Count() > 0)
authContext = new AuthenticationContext(authContext.TokenCache.ReadItems().First().Authority);
var authResult = await authContext.AcquireTokenAsync(serviceResourceId, clientId, returnUri, new
AuthorizationParameters(activity));
return authResult;
}
}

Referencing Authentication Helper
internal async void Login(object sender, EventArgs eventArgs)
{
App.authResult = await
AuthenticationHelper.GetAccessToken("https://sharemuch.sharepoint.com/",
this);
}

Adding a login button
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
if (IsThereAnAppToTakePictures())
{
CreateDirectoryForPictures();
Button login = FindViewById<Button>(Resource.Id.myButton1);
login.Click += Login;
Button button = FindViewById<Button>(Resource.Id.myButton);
_imageView =
FindViewById<ImageView>(Resource.Id.imageView1);
button.Click += TakeAPicture;
}

Final touches - kindof
protected override async void OnActivityResult(int requestCode, Result resultCode, Intent data)
{
base.OnActivityResult(requestCode, resultCode, data);
if (App.authResult == null)
{
AuthenticationAgentContinuationHelper.
SetAuthenticationAgentContinuationEventArgs(requestCode, resultCode, data);
}
// Make it available in the gallery
Intent mediaScanIntent = new Intent(Intent.ActionMediaScannerScanFile);
if (App._file != null)
{
…..
// Dispose of the Java side bitmap.
GC.Collect();
if (App.authResult != null)
{
await AddListItem("TestItem", "https://sharemuch.sharepoint.com/sites/demo", App.authResult.AccessToken,
App._file.AbsolutePath);
}
}
}

• Wait, what?
Running our app

Azure config – create new dir

Azure config – add an application

What happens Between Azure
and O365 – 1 & 2
Register your app in the
Azure Management
Portal and configure the
app's code with the client
Id and redirect URI.
Then, in the Azure
Management Portal,
configure the
permissions for the app.
Your app gets the user's
email address. It
contacts Discovery
Service with email
address and the set of
scopes the app wants to

and O365 - 3
The app goes to the
Azure AD authorization
endpoint and the user
authenticates and grants
consent (if consent has
not been granted
before). Azure AD issues
an authorization code.

and O365 - 4
Your app redeems the
authorization code.
Azure returns an access
token and a refresh
token.

and O365 - 5
Your app calls Discovery
Service using the access
token. Discovery Service
returns Http Response
with resource IDs and
endpoint URIs for Office
365 services.

and O365 - 6
Your app redeems the
refresh token with Azure
AD token endpoint, to
get the access token for
the desired Office 365
resource. The Azure AD
token endpoint returns
an access token for the
specified resource and a
refresh token.

and O365 - 7
Your app can now call
Office 365 APIs using the
URI from Discovery
Service and the access
token. Office 365 returns
Http Response.
* Office 365 APIs: How to use Discovery Service
https://code.msdn.microsoft.com/Office-365-APIs-How-to-
use-609102ea

Get started with building native mobile apps interacting with SharePoint

Recommended

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to Get started with building native mobile apps interacting with SharePoint (20)

Recently uploaded (20)

Get started with building native mobile apps interacting with SharePoint

Editor's Notes