XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2017/04/17

Xamarin.Forms 與 Azure Mobile App Lab 10

在 Azure 中,加入 Facebook / Google 身分驗證設定

申請 Facebook 身分驗證的ID與密鑰

  • 請開啟 Facebook for Developers https://developers.facebook.com/ 網頁
  • 將游標移動到右上方的 我的應用程式,在彈出視窗中,點選 新增應用程式 選項
  • 當出現了 新建立的應用程式編號 對話窗,請依序輸入
    顯示名稱 : 在此輸入 多奇數位創意有限公司
    聯絡電子郵件 : 在此輸入您的電子郵件信箱
    類別 : 在此選擇符合您的 Facebook 應用的類別,此處選擇的是 教育
  • 最後,點選 建立應用程式編號 按鈕
  • 在出現 安全驗證 對話窗出現後,請輸入畫面中的驗證碼文字,並且點選 送出 按鈕
  • 此時,會顯示 Facebook 產品設定 網頁,請點選 Facebook 登入 選項右方的 開始使用 按鈕
  • 當網頁顯示如下畫面,請依據底下畫面,設定 用戶端 OAuth 設定
    在此,您需要啟用 嵌入的瀏覽器 OAuth 登入
  • 點選 儲存變更 按鈕,完成這個 Facebook 應用程式建立工作。
  • 請點選左方功能表的 設定 > 基本資料 選項
  • 當網頁顯示如下畫面,請將 應用程式編號 與 應用程式密鑰 請妥善保存這兩個值,等下在專案內會使用到。
    應用程式編號 : 1144209035696864
    應用程式密鑰 : 5cb5c9154fd9d86ca2c4ff6d003849e5
  • 在這個頁面下方,請點選 + 新增平台 按鈕
    在彈出畫面中,請點選 網站
  • 請在下方的 網站網址 欄位中,輸入 xamarinazureday.azurewebsites.net
  • 點選右下方的 儲存變更
  • 請點選左方功能表的 應用程式審查
    請啟用 是否發佈多奇數位創意有限公司 這個應用程式
    在出現 公開發佈應用程式? 對話窗,請點選 確認 按鈕
  • 請點選左方功能表的 主控版,要能夠顯示如下圖的綠色燈號。

申請 Google 身分驗證的ID與密鑰

  • 請開啟 Google API Console https://console.developers.google.com/?hl=zh-tw 網頁
  • 在左方的 API 管理員 的下方,點選 憑證 >
  • 在 憑證 頁面,點選 建立憑證
  • 從下拉選單選擇 OAuth 用戶端ID
  • 選擇 網路應用程式 選項
  • 請在 名稱 欄位輸入這個 OAuth 認證要顯示的名稱,在這裡輸入: 多奇數位創意有限公司
    請在 已授權的重新導向 URI 欄位,輸入這個網址 https://mylabtw.blogspot.tw/oauth2callback
  • 最後,點選 建立 按鈕
  • 當 OAuth 用戶端憑證建立完成之後,將會得到 用戶端ID 與 用戶端密鑰,請妥善保存這兩個值,等下在專案內會使用到。
    用戶端 ID : 213736323010-o1gpeumve03vkbgkqshcuijg7nleqf63.apps.googleusercontent.com
    用戶端密鑰 : RLqD4AFvKAvhxXPYAgGM82DV

Azure Mobile 驗證/授權 設定

  • 請從 Azure 儀表板中開啟 xamarinazuremobile 行動 app
  • 點選 設定 > 驗證/授權
  • 從 XamarinAzureDay 驗證/授權 刀鋒視窗中,啟用 App Service 驗證

Facebook

  • 點選 Facebook 項目
  • 在 Facebook 驗證設定 刀鋒視窗中,輸入
    App 識別碼 : 1144209035696864
    App 密碼 : 5cb5c9154fd9d86ca2c4ff6d003849e5
    勾選這些範圍項目 : public_profile / email
  • 點選下方的 確定 按鈕

Google

  • 點選 Google 項目
  • 在 Google 驗證設定 刀鋒視窗中,輸入
    用戶端識別碼 : 213736323010-o1gpeumve03vkbgkqshcuijg7nleqf63.apps.googleusercontent.com
    用戶端密碼 : RLqD4AFvKAvhxXPYAgGM82DV
  • 點選下方的 確定 按鈕

完成設定

  • 最後,請在 XamarinAzureDay - 驗證/授權 刀鋒視窗上方,點選 儲存 按鈕

Xamarin.Forms 與 Azure Mobile App Lab 9

在 Azure 行動應用後端專案,新增需要身分認證的才能夠存取的資料表

請接續進行 Azure行動應用服務的後端專案

建立資料傳輸物件 (DTO) 類別

接下來,我們需要修改這個後端 API 專案,讓這個專案可以提供更多的功能。
  • 為了要開始產生一個我們自訂的資料表,我們需要定義資料表控制器, 設定資料表控制器需要三個步驟︰
這裡,我們需要定義一個請假紀錄的申請紀錄表單,用來定義 SQL Database 內的資料表。
  • 請滑鼠右擊 DataObjects 資料夾,選擇 加入 > 類別
  • 在對話窗下方的 名稱 輸入 WorkLog
  • 點選 新增 按鈕
  • 請將剛剛產生的類別 WorkLog,修改成為如下程式碼:
    public class WorkLog : EntityData
    {
        public string 專案名稱 { get; set; }
        public DateTime 日期 { get; set; }
        public double 處理時間 { get; set; }
        public string 工作內容 { get; set; }
    }
若有找不到的類別或者命名空間,請點選燈泡來修正

建立資料表控制器。

如果已安裝 Azure SDK,您現在可以建立範本資料表控制器,請進行底下操作

使用 Azure 行動應用程式資料表控制器

  • 滑鼠右擊 Controller 資料夾,選擇 加入 > 控制器
  • 在對話窗中,選擇 Azure 行動應用程式資料表控制器
  • 點選新增按鈕
  • 在出現 新增控制器 對話窗,請輸入或者選擇如下圖結果
    模型類別:您剛剛定義的 SQL 資料表型別,可用下拉選單來選擇
    資料內容類別:,也就是這個專案內繼承 DbContext 的類別,可用下拉選單來選擇
    控制器名稱:可以使用自動產生的名稱,注意,最後面一定要有 Controller
  • 點選 新增 按鈕,完成這個資料表控制器產生動作。
  • 底下為產生後的 WorkLogController 資料控制器程式碼
    您可以看到,對於工作日報資料表的基本 CRUD API 程式碼,都已經幫您自動產生好了
    這裡請特別注意,在使用 Azure Mobile App 的資料表控制項類別中,必須要繼承 TableController 這個類別,而不是要使用 ApiController 類別
  • 請注意,在這裡我們需要在類別前,加入 [Authorize] 宣告,表示要使用這個資料表,必須要通過使用這身分驗證,也就是不允許匿名存取。
    [Authorize]
    public class WorkLogController : TableController<WorkLog>
    {
        protected override void Initialize(HttpControllerContext controllerContext)
        {
            base.Initialize(controllerContext);
            XamarinAzureDayContext context = new XamarinAzureDayContext();
            DomainManager = new EntityDomainManager<WorkLog>(context, Request);
        }

        // GET tables/WorkLog
        public IQueryable<WorkLog> GetAllWorkLog()
        {
            return Query(); 
        }

        // GET tables/WorkLog/48D68C86-6EA6-4C25-AA33-223FC9A27959
        public SingleResult<WorkLog> GetWorkLog(string id)
        {
            return Lookup(id);
        }

        // PATCH tables/WorkLog/48D68C86-6EA6-4C25-AA33-223FC9A27959
        public Task<WorkLog> PatchWorkLog(string id, Delta<WorkLog> patch)
        {
             return UpdateAsync(id, patch);
        }

        // POST tables/WorkLog
        public async Task<IHttpActionResult> PostWorkLog(WorkLog item)
        {
            WorkLog current = await InsertAsync(item);
            return CreatedAtRoute("Tables", new { id = current.Id }, current);
        }

        // DELETE tables/WorkLog/48D68C86-6EA6-4C25-AA33-223FC9A27959
        public Task DeleteWorkLog(string id)
        {
             return DeleteAsync(id);
        }
    }

加入 Migration

  • 點選功能表 工具 > NuGet封裝管理員 > 套件管理員主控台
  • 在 套件管理員主控台 中輸入底下指令
Add-Migration WorkLog
  • 按下 F5 ,在本地端執行這個專案
    您可以使用 PostMan 來檢查本地端執行與運作結果是否正常
  • 中斷除錯執行
    由於這組資料表的存取行為,需要使用者先成功登入到系統上,因此,您在 PostMan 上會得到底下訊息
{
  "message": "Authorization has been denied for this request."
}

發佈到 Azure 雲端上

PostMan 測試資料

本地端

Azure

Header 資訊

Key : ZUMO-API-VERSION
+

Value : 2.0.0

這個練習範例專案,請參考

XamarinAzureService_Custom