The session explains how easy it is to extend your Office 365 environment to cross-platform apps using Visual Studio and Xamarin. We will go deeper into what is needed to develop cross-platform applications, using ADAL as an authentication mechanism and create a search driven app to retrieve profile data from users in Office 365.
Unleash Your Potential - Namagunga Girls Coding Club
Spsbe2016 extend your office 365 environement to cross-platform apps
1. SharePoint Saturday Belgium 2016 • October 15 • Brussels Track: IT DEV | Level: 200
Extend your Office 365
environment to cross-platform
apps
Alexander Meijers
5. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
7. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
8. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
9. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
10. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
11. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
12. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
13. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
14. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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.
17. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
18. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
19. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
20. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
21. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
22. SharePoint Saturday Belgium 2016 • October 15 • Brussels
Implement authentication with ADAL
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
23. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
24. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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>();
26. SharePoint Saturday Belgium 2016 • October 15 • Brussels
Query User Profile data via
SharePoint Online search REST API
27. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
29. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
30. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
33. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
34. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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]}”
35. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
36. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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}}" />
39. SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
The goal is to support an architecture shown in this diagram, where a single codebase can be utilized by multiple platforms
Two types of strategy
Shared Asset Project (SAP)
Portable Class Library (PCL)
https://blogs.technet.microsoft.com/enterprisemobility/2016/03/31/microsoft-identity-at-build-2016/
ADAL will be updated when .NET core reaches GA
Windows Store apps (Windows 8 and above)
The app starts the flow and redirects to Azure AD authorization endpoint
Azure AD authorization endpoint redirects to app with authorization code
App requests access token from the issuance endpoint
Issuance endpoint returns access and refresh token
App uses access token tot authenticate against web API
Request data from web API is returned to App
Explained by Waldek in following article
SourceId: This parameter holds the result source id that we want to use for executing the search query. In the above screen if you have a look, we are making use of “B09A7990-05EA-4AF9-81EF-EDFAB16C4E31” as the sourceid. This is the id of “Local People Results” result source