#20 註冊、登入、Facebook登入功能｜使用 okta API、Facebook SDK、UISheetPresentationController(ios 15 新功能)

使用功能

Facebook SDK
UISheetPresentationController
串接 otka API
Result Type

功能介紹

Facebook SDK

利用 SPM 安裝 Facebook iOS SDK，詳細步驟參考下方網址

實作 iOS App 的 Facebook 登入功能

安裝完成後，Xcode 畫面左下方將出現套件的檔案

在 AppDelegate 中加入以下相關程式，為了處理 Fb 功能觸發時 APP 的畫面切換、回傳資料…等

import FacebookCore

加入後才能使用 Facebook 相關功能，當APP 啟動時即完成 FB 的相關設定，因此把相關設定放在 didFinishLaunchingWithOptions

在 SceneDelegate 加入以下程式

相關設定完成後就可以在程式中套用此功能

在 Controller 中套用 FacebookLogin

import FacebookLogin

宣告一個參數產生 LoginManager 物件，接者使用 function login 登入，當 function 內closure 的 result 等於 LoginResult.success 代表登入成功，登入成功後利用 performSegue 跳至下一頁

在下一頁透過 GraphRequest 取得登入資訊

UISheetPresentationController

此為 ios15 才有的新功能，首先設定要顯示的 Controller 的 Storyboard ID

從程式生成 storyboard 中的 controller

guard let controller = storyboard?.instantiateViewController(withIdentifier: "GetStartedViewController") else { return }

宣告參數 sheet 生成 controller.presentationController 並轉型成 UISheetPresentationController

let sheet = controller.presentationController as? UISheetPresentationController

設定 detents 可以設定要顯示半螢幕還是全螢幕，半螢幕顯示如下

sheet.detents = [.medium()]

全螢幕顯示如下

sheet.detents = [.large()]

sheet.prefersGrabberVisible = true

此為顯示出灰色橫桿

點擊 Get Started 按鍵後跳出選擇視窗，可選擇使用 FB 登入或輸入詳細資料來註冊

參考：

Customize and resize sheets in UIKit - WWDC21 - Videos - Apple Developer

串接 otka API、搭配 Result Type 定義讀取 API 後的動作

使用 okta 提供的帳號管理 API，可實現帳號註冊、登入、修改、登出等

註冊的程式如下

可參考 otka 官網中 Create User 說明

Users | Okta Developer

Request Example 如下

curl -v -X POST \
-H "Accept: application/json" \
-H "Content-Type: application/json" \
-H "Authorization: SSWS ${api_token}" \
-d '{
  "profile": {
    "firstName": "Isaac",
    "lastName": "Brock",
    "email": "isaac.brock@example.com",
    "login": "isaac.brock@example.com",
    "mobilePhone": "555-415-1337"
  },
  "credentials": {
    "password" : { "value": "tlpWENT2m" }
  }
}' "https://${yourOktaDomain}/api/v1/users?activate=true"

宣告相對應的變數與型別

填入詳細資料後按下 Register 鍵，讀取註冊的 function，使用 Result Type 決定註冊成功與否後要做的動作，如註冊成功即跳出成功訊息視窗，並返回首頁，如註冊失敗跳出視窗並顯示錯誤訊息

登入的 function 如下，可參考官網中的 Authentication Operations

Request example 如下

curl -v -X POST \
-H "Accept: application/json" \
-H "Content-Type: application/json" \
-d '{
  "username": "dade.murphy@example.com",
  "password": "correcthorsebatterystaple",
  "options": {
    "multiOptionalFactorEnroll": false,
    "warnBeforePasswordExpired": false
  }
}' "https://${yourOktaDomain}/api/v1/authn"

Response example 如下

{
  "expiresAt": "2015-11-03T10:15:57.000Z",
  "status": "SUCCESS",
  "sessionToken": "00Fpzf4en68pCXTsMjcX8JPMctzN2Wiw4LDOBL_9pe",
  "_embedded": {
    "user": {
      "id": "00ub0oNGTSWTBKOLGLNR",
      "passwordChanged": "2015-09-08T20:14:45.000Z",
      "profile": {
        "login": "dade.murphy@example.com",
        "firstName": "Dade",
        "lastName": "Murphy",
        "locale": "en_US",
        "timeZone": "America/Los_Angeles"
      }
    }
  }
}

一樣宣告相對應的變數與型別

登入時輸入註冊的使用者名稱與密碼，登入成功後，資料存在自定義的 loginResponse，在此 controller 宣告變數來儲存 loginResponse 中需要用到的資料，利用 perfomeSegue 跳至下一頁顯示使用者資料，並使用 prepare 將變數的資料傳至下一頁顯示

不論是 FB 登入或帳號密碼登入，最後都會跳到使用者資料畫面，返回鍵使用 unwindSegue 返回首頁

參考：

#109 登入註冊，個人資訊(profile)頁面 & Result type

成功和失敗二擇一的 Result type

BillyHuang1027/LogInDemo