spsbe2016 extend your office 365 environement to cross-platform apps
TRANSCRIPT
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
What are we going to build?
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Cross-platform with Xamarin for Visual Studio
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
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
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 LibraryShared code withC# projects
Xamarin API layer
Native Platform APIs
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
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 requiresMac with Mac OS X
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
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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.
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Demo
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Implementing ADAL for each device
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
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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
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>();
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Demo
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Query User Profile data via SharePoint Online search REST API
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
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'
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
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
&url=https://[my-domain]/User Photos/Profielafbeeldingen/alexander_appzinside_com_MThumb.jpg
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Demo
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Represent the data through XAML forms
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
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]}”
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
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}}" />
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Demo
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Wrap-up
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
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Questions?
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Thank You!
Feedbackhttp://spsbe.be