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

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 Library
Shared code with
C# projects
Xamarin API
layer
Native Platform
APIs

Xamarin.Forms 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 Library
Xamarin.Forms.Core / Xamarin.Forms.Xaml
Xamarin +
Xamarin.Forms
API layer
Native Platform
APIs
Shared code with
C# 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 requires
Mac 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 app•Emulator
•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
Device
•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
XamarinTestCloud
•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

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 LibraryPlatformavailability
• .NET 4.5
• JavaScript
• OSX
• iOS
• Android
• node.js
Canbeusedin
• .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 ADAL
AuthenticationContext 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

AuthenticationResult 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

PlatformParameters
Platform Parameter(s) Value
iOS Reference to a
UIViewController
UIApplication.SharedApplication.KeyWindow.Root
ViewController
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/A
Windows 10
(Universal)
PromptBehavior,
OrganizationOnly
PromptBehavior.Auto, false

• 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>();

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 call
https://[domain]/_api/search/query
?querytext='*'
&sourceid='b09a7990-05ea-4af9-81ef-edfab16c4e31'
&selectproperties='AccountName,UserName,AboutMe,
Department,Interest,JobTitle,PastProjects,Respon
sibilities,Schools,Skills,WorkEmail,PictureURL,P
referredName'

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
&accountname=alexander@appzinside.com
&url=https://[my-domain]/User Photos/Profielafbeeldingen/
alexander_appzinside_com_MThumb.jpg

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}}" />

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!

Spsbe2016 extend your office 365 environement to cross-platform apps

More Related Content

What's hot

Viewers also liked

Similar to Spsbe2016 extend your office 365 environement to cross-platform apps

More from Alexander Meijers

Recently uploaded

Spsbe2016 extend your office 365 environement to cross-platform apps

Editor's Notes