Day35 待辦清單 (FB登入)

11th鐵人賽

mikewang

團隊G社三劍客

2019-10-21 00:39:34

1796 瀏覽

分享至

20191021

前言

今天的內容一樣是代辦清單App，在前面的文章中已經介紹過FB登入，今天，我們就要將前面文章的內容，整合到專案內。

Day28 第三方登入－臉書
https://ithelp.ithome.com.tw/articles/10227913

現在，我們馬上開始！

練習紀錄

前置作業

這邊列出幾個需要先實作的步驟，詳細的內容請參考Day28的文章(ref10)

FB開發人員註冊與相關設定
安裝相關cocoapod套件

pod 'FBSDKCoreKit'
pod 'FBSDKLoginKit'
pod 'FBSDKShareKit'
pod 'Alamofire'

確定FB開發人員頁面，應用程式為『開啟』
修改info.plist

專案部分

首先我們加入一個UIViewController，並從首頁的選單按鈕連結過去，動作設定為『Present Modally』

因為是登入頁面，所以我們設定為『Modally』
原本此menu按鈕還有考慮設定頁面，不過還沒研究slide menu，所以先跳過

新增一個『LoginViewController』並指定給此UIViewController

加入一個UIImageView，用來確認我們確實下載FB的圖片，並與程式碼做連結

在LoginViewController.swift加入以下程式碼

viewDidLoad()事件

override func viewDidLoad() {
    super.viewDidLoad()
    
    let loginButton = FBLoginButton()
    loginButton.center = self.view.center
    self.view.addSubview(loginButton)
    
    GetFBUserInfo()
}

其他方法

private func GetFBUserInfo() {
    let params = ["fields":"name, email , picture.type(large), gender"]
    let request = GraphRequest(graphPath: "/me", parameters: params)
    let connection = GraphRequestConnection()
    
    connection.add(request, batchParameters: params) { (conn, result, error) in
        guard let fbResult = result as? Dictionary<String, Any>,
            let picture = fbResult["picture"] as? Dictionary<String, Any>,
            let pictureData = picture["data"] as? Dictionary<String, Any>,
            let url = pictureData["url"] as? String
            else { return }
        print(url)
        self.setUserImage(url)
    }
    connection.start()
}

private func setUserImage(_ url: String) {
    
    Alamofire.request(url).response { (response) in
        guard let data = response.data, let image = UIImage(data: data)
            else { return }
        
        self.fbImageView.image = image
        self.fbImageView.clipsToBounds = true
        self.fbImageView.layer.cornerRadius = (self.fbImageView.frame.size.width) / 2
        
    }
}

確認FB的照片已顯示在照片上

由於我們的目的是更改首頁的圖片，將照片傳遞到首頁上。
因此，我們透過protocol的方式來傳遞。(ref11)

加一個新的protocol在LoginViewController，並新增一個delegate屬性

protocol LoginViewControllerDelegate: class {
   func PassImageData(image: UIImage)
}

class LoginViewController: UIViewController {
    
    @IBOutlet weak var fbImageView: UIImageView!
    
    var delegate: LoginViewControllerDelegate?
    // ..以下略
}

在原本的setUserImage方法中，加入self.delegate的呼叫

private func setUserImage(_ url: String) {
    
    Alamofire.request(url).response { (response) in
        guard let data = response.data, let image = UIImage(data: data)
            else { return }
        
        self.fbImageView.image = image
        self.fbImageView.clipsToBounds = true
        self.fbImageView.layer.cornerRadius = (self.fbImageView.frame.size.width) / 2
        
        self.delegate?.PassImageData(image: image)
        
        self.dismiss(animated: true) {
            print("return OK")
        }
        
    }
}

接者我們回到首頁ListViewController內，加入以下程式碼

class ListViewController: UIViewController, LoginViewControllerDelegate {
    
    func PassImageData(image: UIImage) {
        userImageView.image = image
        userImageView.clipsToBounds = true
        userImageView.layer.cornerRadius = (userImageView.frame.size.width) / 2
    }
    // ... 以下略
}

讓ListViewController實作LoginViewControllerDelegate方法
並在方法內設定照片，並去邊成為圓角圖

接者一樣在ListViewController內，複寫prepare方法

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    let destinationViewController = segue.destination as? LoginViewController
    destinationViewController?.delegate = self
}