LoginSignup
100

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-08-25

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との連携

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
100