iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 24
2
Cloud

Xamarin.Forms, ASP.NET Core WEB API搭配AZURE服務與資料庫服務整合應用實例系列 第 24

Day24 - 業務人員行程管理系統開發IOS篇

  • 分享至 

  • xImage
  •  

離鐵人賽到期還有7天, 一開始地圖開太大, 所以不知寫不寫得完?, 所以接下來就先專攻IOS, 若有剩餘天數, 再補齊Android與Windows, 經過前面幾篇的測試, Azure的相關設定均已完成, 該Xamarin.Forms上場, 來畫下完美句點了.

首先新增一個Xamarin.Forms Portable的專案如下
http://ithelp.ithome.com.tw/upload/images/20170106/201033332BrYz6pOo0.png

一開始要製作的是用Microsoft帳號登入的功能, 所以必須安裝Microsoft.Identity.Client這個套件, 安裝指令如下
Install-Package Microsoft.Identity.Client –Pre
結果沒想到報錯了/images/emoticon/emoticon04.gif
http://ithelp.ithome.com.tw/upload/images/20170106/20103333F0SwNarVQ6.png

搜尋到解決方式, 可以參照這一篇
https://github.com/microsoftgraph/xamarin-csharp-connect-sample/wiki/Set-up-a-Xamarin-Forms-project-to-use-the-MSAL-.NET-SDK

看了以後發現一個噩耗, 就是Microsoft.Identity.Client不支援Windows 8.1 Phone, 這個果然是孤兒啊/images/emoticon/emoticon67.gif, 加上要專攻IOS, 先把其他專案先移除只留下Portable跟IOS專案, 並且在NuGet裡移除所有安裝套件如下所示
http://ithelp.ithome.com.tw/upload/images/20170106/20103333ybp7I8NeeO.png

接著下Portable專案屬性Library頁籤, 點選Change, 將Windows Phone的勾選取消如下紅框所示
http://ithelp.ithome.com.tw/upload/images/20170106/20103333Sxl4WHhzQc.png

接著在Solution的 NuGet裡搜尋Microsoft.Identity.Client, 安裝在Portable跟IOS專案如下所示, 完成之後記得再把剛移除的Xamarin.Forms套件裝回去
http://ithelp.ithome.com.tw/upload/images/20170106/20103333Oa95L7z2hH.png

在Portable專案新增一個config.cs用來放所有設定值, 讓其他專案也能取用, 如下
http://ithelp.ithome.com.tw/upload/images/20170106/20103333ndBtVahhMD.png

接著新增一個LoginPage用來做登入之用, 其xaml設定如下
http://ithelp.ithome.com.tw/upload/images/20170106/20103333plevlnZ9Lw.png

然後打開App.xaml.cs將程式碼修改如下
http://ithelp.ithome.com.tw/upload/images/20170106/20103333w8juF4yso6.png

打開LoginPage.xaml.cs敲入底下程式碼
http://ithelp.ithome.com.tw/upload/images/20170106/20103333fWm3wIi8DG.png
http://ithelp.ithome.com.tw/upload/images/20170106/201033337VW5KvsT0w.png

打開MainPage.xaml, 新增一個Lable用來顯示登入後的User Name
http://ithelp.ithome.com.tw/upload/images/20170106/201033333OlTFPwtlv.png

打開MainPage.xaml.cs, 敲入底下程式碼
http://ithelp.ithome.com.tw/upload/images/20170106/2010333362Lp8UvPqF.png

打開IOS專案下的AppDelegate.cs, 將程式碼修改如下
http://ithelp.ithome.com.tw/upload/images/20170106/20103333yCk5W6sQrB.png

接著就可以把模擬器跑起來
http://ithelp.ithome.com.tw/upload/images/20170106/20103333fzSalanKbX.png

按下Login後, 看到了熟悉的畫面, 有沒有很感動?/images/emoticon/emoticon07.gif, 之前測試那麼多, 就是為了它
http://ithelp.ithome.com.tw/upload/images/20170106/20103333rzriMarTV4.png

選擇Microsoft帳號, 出現帳號輸入畫面如下
http://ithelp.ithome.com.tw/upload/images/20170106/20103333GXW0hSHDkU.png

登入成功後, MainPage的Label會顯示User Name如下
http://ithelp.ithome.com.tw/upload/images/20170106/20103333Cp2HC97SXS.png

本文參考底下兩篇
https://azure.microsoft.com/zh-tw/resources/samples/active-directory-b2c-xamarin-native/
https://developer.xamarin.com/guides/xamarin-forms/web-services/authentication/azure-ad-b2c/

後記: 其實本文留下一個殘壘/images/emoticon/emoticon10.gif, 就是取不到User Email, 找了一下說是Microsoft Graph API可以做到, 這個只好等有時間再試了


上一篇
Day23 - Azure App Service & Azure SQL Database Part2 ASP.NET CORE WEB API雲端部署篇
下一篇
Day25 – Xamarin.Forms 與 ASP.NET CORE WEB API的資料傳遞
系列文
Xamarin.Forms, ASP.NET Core WEB API搭配AZURE服務與資料庫服務整合應用實例32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言