iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
Software Development

iOS App 實作開發新手村系列 第 29

Day29 第三方登入-臉書 (取得登入資訊)

  • 分享至 

  • xImage
  •  

20191015

前言

今天的內容是延續Day28的臉書登入,加入取得照片網址的功能。

現在,我們馬上開始!

練習過程

  1. 因為今天加入新功能,首先更新Podfile
target 'Day28FBLogin' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for Day28FBLogin
  pod 'FBSDKCoreKit'
  pod 'FBSDKLoginKit'
  pod 'FBSDKShareKit'
  pod 'Alamofire'
end
  • 由於之前已安裝過,這次直接更新即可
pod update

  1. 一樣開啟Day28專案(Day28FBLogin.xcworkspace),可以看到套件已安裝完成

  1. 以Source Code方式修改info.plist,加入以下內容
<key>FacebookAdvertiserIDCollectionEnabled</key>
<true/>
<key>FacebookAdvertiserIDCollectionEnabled</key>
<true/>
<key>FacebookAutoLogAppEventsEnabled</key>
<true/>
  1. 在viewDidLoad事件中,加入以下程式碼
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
     print(result!)
     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")
     print(url)
     
     self.setUserImage(url)     
 }
 
 connection.start()
  • params用來設定我們要從FB登入資訊中,取出的欄位

  • 建立request物件,並設定參數

  • 建立connection物件以及方法

  • #7 ~ #11行,用來取得使用者照片的url,這邊直接採用Dictionary實作,讀者也可以自訂model,並用反序列化的方法完成

由於網路上的資料還滿片段的,而新版本的方法與文件又有一點差異,因此一開始透過print()方法,把所有取得資訊都列印出來,之後才慢慢完成

  1. 由於等等要顯示照片,我們先在storyboard加入UIImage,並與程式碼做連結

@IBOutlet weak var fbImageView: UIImageView!
  1. self.setUserImage(url)方法

前面取得照片的url後,我們新增一個自訂方法,用來設定使用者的照片,由於是在closure內呼叫,因此我們加上『self』

private func setUserImage(_ url: String) -> DataRequest {
    return 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
        
    }
}
  • 使用Alamofire套件來取得照片

  • 並將取得的image設定給『fbImageView.image』用來顯示使用者照片

  • #8~#9行,用來將我們的照片切成圓形(ref9)

完成圖

總結

今天我們練習了FB取得登入資訊的功能(id, name, url),並將照片下載後,設定到畫面上的UIImageView。也練習了將UIImageView做圓角的切割。

可能是因為選擇了iOS13.1,版本比較新,因此很多文件上的方法與現有的SDK不太一樣,因此花了不少時間搜尋資料,拼拼湊湊才完成了今天的練習。

這邊在補充說明一下,在Github上的專案,有將info.plist上的Facebook應用程式編號隱藏,請讀者自行替換為自己的ID。

今天的內容就到這邊,感謝讀者們的閱讀。


Github:

https://github.com/chiron-wang/IT30_11

參考資料與延伸閱讀

  1. 彼得潘的 Swift iOS App 開發問題解答集
    https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86

  2. 深入淺出 iPhone 開發 (使用 Swift4) - WeiWei
    https://www.udemy.com/course/iphone-swift4/

  3. iOS 12 App 開發快速入門與實戰(繁體中文)
    https://www.udemy.com/course/ios-12-app/

  4. 心智圖軟體Xmind
    https://www.xmind.net/

  5. FBLogin 官方說明文件
    https://developers.facebook.com/docs/facebook-login/ios/

  6. FBLogin 官方說明文件 (swift)
    https://developers.facebook.com/docs/swift/login

  7. FBLogin 官方說明文件 (swift) 中文版
    https://developers.facebook.com/docs/facebook-login/ios?locale=zh_TW

  8. privacypolicies
    https://privacypolicies.com

  9. 產生 App 上架需要的隱私權政策 URL
    https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E7%94%A2%E7%94%9F-app-%E4%B8%8A%E6%9E%B6%E9%9C%80%E8%A6%81%E7%9A%84%E9%9A%B1%E7%A7%81%E6%AC%8A%E6%94%BF%E7%AD%96-url-7bc4746cf75d

  10. 讓圖片同時有圓角和陰影
    https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/%E5%90%8C%E6%99%82%E5%AF%A6%E7%8F%BE%E5%9C%93%E8%A7%92%E5%92%8C%E9%99%B0%E5%BD%B1-bee263a41c7


上一篇
Day28 第三方登入-臉書
下一篇
Day30 學習資源匯總整理篇
系列文
iOS App 實作開發新手村36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言