Spsbe2016 extend your office 365 environement to cross-platform apps

SharePoint Saturday Belgium 2016 • October 15 • Brussels Track: IT DEV | Level: 200

Extend your Office 365 environment to cross-platform apps

Alexander Meijers

Platinum

Gold

Silver

SharePoint Saturday Belgium 2016 • October 15 • Brussels

ALEXANDER MEIJERSArchitect @ ETTU

Email : [email protected] [email protected] : ameijersFacebook : alexander.meijers.5LinkedIn : alexandermeijers

Apps | Azure | SharePoint | Office 365 | Xamarin HoloLens | Logic Apps | Cross-platform

Dev | Functional | Architecture | Love to connect Technology enthousiast | Speaker | Blogger

3 kids | Fitness | Airsoft | Music


What are we going to build?


How are we going to build it?• Cross-platform with Xamarin for Visual Studio• Implementing ADAL for each device using

DependencyService• Query User Profile data via SharePoint Online search REST

API• Represent the data through XAML forms


Cross-platform with Xamarin for Visual Studio


Xamarin [‘zæmərɪn]• Allows developers using Visual Studio and C# shared codebase to create

cross-platform native applications• Uses code-sharing strategies to

write code once for all platforms• Possible to write platform specific code• Support of platforms as iOS, Android,

Windows 8, Windows Universal App

• Acquired by Microsoft in February 2016


Code-sharing strategies• Shared Asset Project (SAP)

• Code becomes part of the platform specific project during compilation• Platform specific code is possible by using compiler directives• Easy implementation but no reuse possible

• Portable Class Library (PCL)• Code becomes class library• No platform specific code is allowed.

You need to use interfaces• Rather difficult approach and supports reuse


Xamarin App development model

iOS App

Xamarin.iOS(MonoTouch/MonoMac)

iOS API

Android App

Xamarin.Android(Mono for Android)

Android API

Windows App

Windows API

Shared Asset Project or Portable Class LibraryShared code withC# projects

Xamarin API layer

Native Platform APIs


Xamarin.Forms App development modeliOS App

Xamarin.iOS(MonoTouch/MonoMac)

iOS API

Android App

Xamarin.Android(Mono for Android)

Android API

Windows App

Windows API

Shared Asset Project or Portable Class Library

Xamarin.Forms.Core / Xamarin.Forms.Xaml Xamarin + Xamarin.Forms API layer

Native Platform APIs

Shared code withC# projects


What is needed?• Windows 8 or higher• Hyper-V enabled

• Needed for emulators

• Visual Studio 2013 with Update 4 or higher• Contains the Windows Phone SDK

• Xamarin for Windows• Xamarin Android Player for Windows

• Only when you want to develop for Android!!• You will need VirtualBox

(not possible with Hyper-V enabled)• Update the Android SDK Manager

• Developing for iOS requiresMac with Mac OS X


Compiling native code for iOS• Compiler and simulator runs on a Mac

with Mac OS X• Xcode IDE needs to be installed• A Xamarin Mac agent on the Mac is used

to connect to your Windows machine


Setup the project• Create a Xamarin project

• Since February 2016 it is possible to create a Universal Windows app

• Use Xamarin.Forms Portable project• Remove any not used projects


Testing your appEm

ulat

or • Easy to test for a variety of devices

• Android simulator is very slow

• Not able tot test touch for iOS since Mac desktops do not have touch

• Other features are not possible to test like compass, gyroscope, etc.

• iOS emulator on Windows available but still needs a Mac to compile

Devi

ce • Easy to test complex touch interaction

• Better feel for startup and responsiveness

• Need of a developer account (Windows Phone, Windows 10, iOS)

• Android needs debugging enabled

• iOS only possible when using ad-hoc testing or through the store Xa

mar

in Te

st C

loud • Test with a large amount of

different devices• Not able tot test touch for

iOS since Mac desktops do not have touch

• Other features are not possible to test like compass, gyroscope, etc.


Demo


Implementing ADAL for each device


Active Directory Authentication Library• Enables developers to easily authenticate users against Azure AD in the cloud or

on-premises AD• It handles mostly all complexity of the authentication• Returns access tokens to execute secure API calls

• ADAL should not be confused with MSAL• Microsoft Identity at //build/2016• ADAL is the main means when working with Azure AD and ADFS

https://blogs.technet.microsoft.com/enterprisemobility/2016/03/31/microsoft-identity-at-build-2016/


ADAL features• Handles the login screen (including your

organization page)• Asynchronous support• Configurable token cache for storing access and

refresh tokens• Also called “in-memory token cache”• Automatic token refresh when access token

expires


Active Directory Authentication Library

Platf

orm

ava

ilabi

lity • .NET 4.5

• JavaScript• OSX• iOS• Android• node.js Can

be u

sed

in • .NET 4.5 and above (desktop and web apps)

• .NET Core • Windows universal apps• Windows Store apps • iOS and Android via

Xamarin


Register your application in Azure AD• Specify name, type of application

and redirect URL(s)• Select the permissions to other

applications• Client ID is generated

• Client ID and Redirect URL combination is used during authentication


Implement authentication with ADALAuthenticationContext ac = new AuthenticationContext(string authority);

• authority URL of the authority• Https://login.microsoftonline.com/common

without the tenant id will allow your app to be multi-tenant

Be aware! Some delegated permissions require admin consent when using multi-tenant apps &prompt=admin_consent


Implement authentication with ADALAuthenticationResult authResult = AcquireTokenAsync(string resource, string clientId, Uri redirectUri, IPlatformParameters parameters));

• resource the URL of the requested resource• clientId and redirectUri Azure AD registration• parameters Platform specific parameters

• Attempts to return a token for the requested resource based on caching or refreshing old tokens

• If necessary an Azure AD sign page is shown to acquire a request token


PlatformParametersPlatform Parameter(s) ValueiOS Reference to a

UIViewControllerUIApplication.SharedApplication.KeyWindow.RootViewController

Android Reference to an Activity

(Activity)Forms.Context

Remark: You will need to override the OnActivityResult method in MainActivity.cs and call the WebAuthenticationBrokerContinuationHelper class.

Windows Phone No parameters N/AWindows 10 (Universal)

PromptBehavior, OrganizationOnly

PromptBehavior.Auto, false


Implement authentication with ADAL• Implement the following in the portable class library project• Authentication class• Define the IAuthenticator interface• Implement per platform the interface and use Authentication class • Use from your page code the DependencyService class to retrieve

the platform specific implementation of the IAuthenticator interface

var auth = DependencyService.Get<IAuthenticator>();


Demo


Query User Profile data via SharePoint Online search REST API


Execute the query and processing the results• HttpClient is used for executing the call to the REST API• HttpRequestMessage(HttpMethod.Get, [URL])

contains the URL• Headers are used

• MediaTypeWirhQualityHeaderValue(“application/json”)• AuthenticationHeaderValue(“Bearer”, accessToken)

• Result from Content.ReadAsStringAsync() as part of HttpResponseMessage

• Response is parsed and enumerated through json objects


SharePoint Search Rest API callhttps://[domain]/_api/search/query

?querytext='*'

&sourceid='b09a7990-05ea-4af9-81ef-edfab16c4e31'

&selectproperties='AccountName,UserName,AboutMe,Department,Interest,JobTitle,PastProjects,Responsibilities,Schools,Skills,WorkEmail,PictureURL,PreferredName'


Search results• Search results back in json

as specified in the header

• Results found in [PrimaryQueryResult][RelevantResults][Table][Rows]• Values depends on selectproperties part of URL


Get the profile picture• Authentication token will not work for the “my-domain”

• Http error 401, Unauthorized

• Use separate call to form page to retrieve the image by account and original URL

https://[domain]/_layouts/15/userphoto.aspx?

size=S

&[email protected]

&url=https://[my-domain]/User Photos/Profielafbeeldingen/alexander_appzinside_com_MThumb.jpg


Demo


Represent the data through XAML forms


Xamarin.Forms• Write user interface code for

all platforms at once• Framework exists of

• Xamarin.Forms.Core• Xamarin.Forms.Xaml

• A single XAML file is used for all platforms• Controls are translated to platform specific

controls


Xamarin.Forms controls• All kind of XAML controls available

• Layouts like StackLayout, AbsoluteLayout, RelativeLayout, Grid, ScrollView

• Display data through ListView and TableView• Controls like Image, Label, Entry, Editor, …

• Property binding in XAML through property=“{Binding [content property name]}”


Master detail model• Contains of three XAML forms

• MasterDetailPage• ProfileListPage• UserProfilePage

• Delegate ProfileSelected used to report item selected to MasterDetailPage • Sets the current profile data on the

UserProfilePage• Changes to model to detail view


Bind thumbnail through XAML• Define a class to convert to Xamarin.Forms.ImageSource• Include the class through ResourceDictionary in XAML

page

<ResourceDictionary> <local:ByteToImageFieldConverter x:Key="btiConverter" /></ResourceDictionary>

<Image WidthRequest="50" HeightRequest="50" Source="{Binding Picture, Converter={StaticResource btiConverter}}" />


Demo


Wrap-up


Wrap-up• Xamarin platform is great for developing cross-platform apps• ADAL makes it really easy to integrate authentication without the

knowledge and difficulty of the process• Office 365 Search REST API allows you easily retrieve data like profiles

from SharePoint Online• You need knowledge of XAML to create pages in your app


Questions?


Thank You!

Feedbackhttp://spsbe.be