Edited at

SwiftでFacebook SDKを使用したログイン機能(Xcode6 beta6)

More than 3 years have passed since last update.

fblogin_swift.gif


概要


  • FacebookログインをSwiftで書く

  • ユーザーの画像も表示してみる

  • 表示する画像はトリミング後、円形で表示する


Facebook SDKの準備


  • まず、こちらからFacebook SDKをインストールしてきます。

  • インストールしてきたFacebookSDK.frameworkをプロジェクトに取り込みます。

  • Xcodeの左メニューから、プロジェクトをクリックし、Generalタブの下の方にある"Linked Frameworks and Libraries"から、"+"ボタンを押して、先ほどインストールしたSDKを取り込みましょう。


SKDのインポート


  • cmd+Nで新しいファイルを作成します。

  • Header Fileを選択し、適当な名前をつけましょう(ここではBridge-Header.hとしました。)

  • 作成したHeader Fileに下記を追加します。


Bridge-Header.h

#import <FacebookSDK/FacebookSDK.h>



FB DeveloperでiOS Appsを作成



  • https://developers.facebook.com/ から、Create New AppでiOS用のアプリを作ります

  • App IDを控えます。

  • 控えたApp IDをinfo.plistの"Information Property List"に追加します。(info.plistはSupporting Filesに入っています)


    • Keyは"FacebookAppID"、Typeは"String"、Valueは先ほど控えたApp IDを入力します。



以上で基本的な設定は終了となり、あとはコードを書いていきます。


FBログイン機能の土台作成


  • VCを下記のように書き換えます。(ログインやログアウトの処理)


VC.swift

    @IBOutlet var fbLoginView : FBLoginView!

override func viewDidLoad() {
super.viewDidLoad()

self.fbLoginView.delegate = self
self.fbLoginView.readPermissions = ["public_profile", "email", "user_friends"]

}

// Facebook Delegate Methods
func loginViewShowingLoggedInUser(loginView: FBLoginView!) {

println("User Logged In")

}

func loginViewFetchedUserInfo(loginView: FBLoginView!, user: FBGraphUser!) {

println(user.name)

}

func loginViewShowingLoggedOutUser(loginView: FBLoginView!) {

println("User Logged Out")

}

func loginView(loginView: FBLoginView!, handleError error: NSError!) {

}



  • 次にStoryboardでUIViewを追加し、上記のIBOutlet var fbLoginViewと紐付けます。


  • AppDelegate.swiftも変更します。



AppDelegate.swift

func application(application: UIApplication!, didFinishLaunchingWithOptions launchOptions: NSDictionary!) -> Bool {

FBLoginView.self
FBProfilePictureView.self

return true
}


この状態でシミュレーターを起動すると、FBログインボタンが表示され、実際にログイン、ログアウトが可能です。

コンソールでユーザー名等が表示されているのが確認できます。


ユーザー画像の取得(Facebookユーザープロフィール画像)


  • プロフィール画像を取得して、若干装飾を加えます。

  • また、ユーザーのメールアドレスも取得します。


VC.swift


@IBOutlet var currentUserName : UILabel!
@IBOutlet var currentUserEmail : UILabel!
@IBOutlet var userImage : UIImageView!

func loginViewFetchedUserInfo(loginView: FBLoginView!, user: FBGraphUser!) {

var profileImage = UIImage(data: NSData(contentsOfURL: NSURL(string: "https://graph.facebook.com/\(user.objectID)/picture?type=large"))) // プロフィール画像の取得
userImage.clipsToBounds = true // 画像にレイヤーをつけて、
userImage.layer.cornerRadius = 60 // 円形にする

userImage.image = trimPicture(profileImage) // 画像をトリミング
currentUserName.text = user.name
currentUserEmail.text = user.objectForKey("email") as String

}

.
.
.

// プロフィール画像のトリミングするための関数
func trimPicture(rawPic:UIImage) -> UIImage {
var rawImageW = rawPic.size.width
var rawImageH = rawPic.size.height

var posX = (rawImageW - 200) / 2
var posY = (rawImageH - 200) / 2
var trimArea : CGRect = CGRectMake(posX, posY, 200, 200)

var rawImageRef:CGImageRef = rawPic.CGImage
var trimmedImageRef = CGImageCreateWithImageInRect(rawImageRef, trimArea)
var trimmedImage : UIImage = UIImage(CGImage : trimmedImageRef)
return trimmedImage
}


これで下記のような状態になるかと思います。

スクリーンショット 2014-08-26 05.47.38.png


次にやってみること


  • ログアウト後の処理

  • parse.comとの連携