iOS, Swift 3, Facebook 登入/登出教學 (Sign In/Sign Out)

完整專案 : https://github.com/Jerry0420/SignInExample.git

使用模擬器建立後,選擇第2個tab,即為本篇教學的部分。

Facebook SDK官方學:https://developers.facebook.com/docs/ios/getting-started

目前官方只提供OC版本,許多部分也沒提到,故在這個教學內實作一次登入登出功能,獲取使用者資訊。

  1. 使用xcode建立新專案
  2. 建立專案後,點選以下網站內的“下載iOS SDK,將Bolts.framework, FBSDKCoreKit.framework, FBSDKLoginKit.framework以拖拉的方式拉入建立的專案內。

https://developers.facebook.com/docs/ios/getting-started

也可使用cocoapods安裝ios SDK => pod init後

打開Podfile輸入pod ‘FBSDKCoreKit’, pod ‘FBSDKShareKit’, pod ‘FBSDKLoginKit’,接著輸入pod install即可進行安裝。

3. 至以下網站點選綠色按鈕“新增應用程式”,接著輸入app名稱,注意專案名稱不能含fb, facebook…等相關字。

4. 建立新專案後送出,點選左方設定後,在下方”新增平台”選擇iOS,將xcode新增專案的bundle ID填入“套件組合編號”,單一登入選擇“是”後即可儲存變更。

p.s. 平時可於以下網址點選右上角“我的應用程式,”選擇之前新增的FB專案

5. 接著到以下網址內部的“設定 Xcode 專案”,將內部的程式碼,填入xcode專案的Info.plist:

6. 以上步驟的程式碼皆填入Info.plist後,將{your-app-id}取代為步驟4的“應用程式編號” : 353386318330131(本範例的app-id,會依專案不同而不同)

<string>fb353386318330131</string>
<string>353386318330131</string>

將{your-app-name}取代為建立的xcode專案名稱

<string>SocialMediaLogInExample</string>

7. 到目前為止,完成環境設定。接著撰寫程式碼

首先,在AppDelegate內import FBSDKCoreKit,並輸入以下程式碼:

import FBSDKCoreKit

以下分成兩種登入按鈕的形式來進行說明,(1)使用fb官方制定的按鈕

(2)自訂登入按鈕的形式

8. 首先建立fb官方制定的按鈕形式。將ViewController內import FBSDKLoginKit及使用FBSDKLoginButtonDelegate

10. 接著建立登入按鈕,拉一個button入storyboard內,到想要的位置,將autolayout拉好,右方的class選擇FBSDKLoginButton後,拉進viewController內,使用@IBOutlet

@IBOutlet weak var faceBookLogIn: FBSDKLoginButton!

11. 在ViewDidLoad內輸入以下程式碼,readPermissions放入的是欲取得的使用者資訊,public_profile, email, user_friends為FB官方不需審查,即可取得的資訊。(在此以ViewDidLoad作為範例,可以程式架構放在所欲放置位置)

12. 加入delegate必須實作的函式,其中loginButton函數會在原ViewController跳轉到登入頁面,允許登入完,跳轉回原viewController後呼叫。loginButtonDidLogOut為登出後會呼叫之函式,在此範例並未使用,可自行設計並放入程式碼。

13. 在步驟11內及步驟12內皆會呼叫自定義的fetchProfile函式,處理取得的使用者資訊。

在此函數內得到一個callback Function, 內部包含的result即我們想取得的使用者資訊。此result為Any型別,要先轉型成 [String: Any],之後即可以Dictionary方式取得使用者資訊。

在第4行定義了所欲取得的使用者資訊,輸入之前提到的email, first_name, last_name, picture,即為FB官方不需審查即可得到的部分。

以下只以print簡單印出使用者資訊,可以開發需要將其存入資料庫,或者使用imageView秀出使用者圖片。

14. 到此即完成所有設定,FB登入按鈕,在登入過後會變成登出按鈕,點下去即為登出功能,不需另外撰寫程式碼。

15. 自訂登入的按鈕形式其實類似上面使用官方按鈕的方法。在storyBoard中放入一個button,拉進ViewController,選擇action。

在其內部透過FBSDKLoginManager使用login函數,即可進行登入

自動的登入按鈕樣式

16. 實作登出按鈕,類似上面的步驟,在storyBoard中放入一個button,拉進ViewController,選擇action。

在其內部透過FBSDKLoginManager使用logOut函數,即可進行登出