Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 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との連携
kiiita
Software Engineer / UI Desiner
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away