2016年3月2日 星期三

【iOS/Facebook】在 iOS 上加入 Facebook 登入功能

現在很多應用程式都會使用 Facebook SDK 來加入 Facebook 功能
這有幾大主要原因
其一是基本上有用智能手機的用家都有至少一個 Facebook 帳號, 因此不用特意再去註冊普通帳號, 直接拿 Facebook 的 fbid 來當帳號, 就可以省去了用家在註冊上的麻煩了
其二是使用分享邀請等功能, 在社交平台上作宣傳, 省去了一筆費用

要使用 Facebook  登入, 首先要下載 Facebook SDK 及建立申請 Facebook App
詳情請看【iOS/Facebook】Facebook SDK 在 iOS 上的設定及事前準備

然後把 FBSDKLoginKit.framework 拖入xcode project 裡

設定完成後, 就可以開始嵌入 Facebook Login 了!

在需要加入 Login Button 的 Class 裡, 都需要 import FBSDKCoreKit.h 及 FBSDKLoginKit.h
夜雪在這篇文章裡使用的 class 是 viewController 

在 viewController.h 裡
Import FBSDKCoreKit.h 及 FBSDKLoginKit.h
#import <FBSDKCoreKit/FBSDKCoreKit.h>

#import <FBSDKLoginKit/FBSDKLoginKit.h>

宣告Button
@property (weak, nonatomic) IBOutlet FBSDKLoginButton *loginButton;

加入後 viewController.h 應該是這樣子的~

然後在 viewController.m 裡
加入@synthesize
@synthesize loginButton; 

--------------------------------------
【預設 Facebook Login Button】

打開 viewController.m

在 viewDidLoad 裡加入 Facebook Login Button
  loginButton = [[FBSDKLoginButton alloc] init];
  // Optional: Place the button in the center of your view.
  loginButton.center = self.view.center;

  [self.view addSubview:loginButton];

然後要問取權限 (要用家確認了權限才能拿到用家的資料喔)
loginButton.readPermissions = 
  @[@"public_profile", @"email", @"user_friends"];

加入後 viewController.m 應該是這樣子的~

預設的 Facebook Login Button 就完成了!
我們來看看樣子~~

--------------------------------------
【自定義 Login Button (不使用Storyboard)】

很多開發者都不會用預設的 Facebook Login Button, 我想可能是因為設計或是美觀上的問題吧? 因為夜雪都不太喜歡使用預設的東東啊...呵呵~
接下來介紹一下自定義 Login Button , 先說說不使用 Storyboard 的做法吧~

打開 viewController.m
在 viewDidLoad 裡建立及自定義一個 Button , 然後把他設定成按下後會跳去 loginButtonClicked 這個 function
UIButton *myLoginButton=[UIButton buttonWithType:UIButtonTypeCustom];
  myLoginButton.backgroundColor=[UIColor darkGrayColor];
  myLoginButton.frame=CGRectMake(0,0,180,40);
  myLoginButton.center = self.view.center;
  [myLoginButton setTitle: @"My Login Button" forState: UIControlStateNormal];

  // Handle clicks on the button
  [myLoginButton 
    addTarget:self 
    action:@selector(loginButtonClicked) forControlEvents:UIControlEventTouchUpInside];

  // Add the button to the view

  [self.view addSubview:myLoginButton];

然後可以建立 loginButtonClicked function
我們在這個 function 裡使用 FBSDKLoginManager 處理 Facebook Login
-(void)loginButtonClicked
{
  FBSDKLoginManager *login = [[FBSDKLoginManager alloc] init];
  [login
    logInWithReadPermissions: @[@"public_profile", @"email", @"user_friends"]
          fromViewController:self
                     handler:^(FBSDKLoginManagerLoginResult *result, NSError *error) {
    if (error) { 
      NSLog(@"Process error");
    } else if (result.isCancelled) {
      NSLog(@"Cancelled");
    } else {
      NSLog(@"Logged in");
    }
  }];

}

這就完成了!

--------------------------------------
【自定義 Login Button (使用Storyboard)】

使用 Storyboard 是更簡單, 方便, 快捷的!
我們只需要在 Storyboard 裡拖出一個 Button, 然後 Ctrl + drag  到空白地方再放手


之後在 Connection 選擇 Action, name 打 自定義的 function 名稱


facebookLogin 是 夜雪自定義的 function 名稱啊~
然後這個 function 的內容啊..就跟 【自定義 Login Button (不使用 Storyboard)】裡的 loginButtonClicked 內容相同的啊~很簡單對吧~呵呵~

--------------------------------------
【Access Token】

當用家成功登入後, Facebook 會回傳一個 Access Token 回來的~
沒有 Access Token, 就拿不到用家的資料, 什麼也做不了~

拿取 Access Token 的方法是:
Facebook SDK 版本是 4.1 之前
NSString *fbAccessToken = [[[FBSession activeSession] accessTokenData] accessToken];
4.1 或之後
NSString *fbAccessToken = [FBSDKAccessToken currentAccessToken].tokenString;

--------------------------------------
【登入後拿取用家基本資料】

拿取玩家資料, 剛剛也說過了, 首先要有 Access Token ~
找個 function 裝著而下一段, 又或是放在剛剛我們建立的 loginButtonClicked 的 NSLog(@"Logged in"); 下面

[[[FBSDKGraphRequest alloc] initWithGraphPath:@"me" parameters:@{@"fields": @"id, name, email"}] startWithCompletionHandler:^(FBSDKGraphRequestConnection *connection, id result, NSError *error1) {
        if(!error1){
            NSLog(@"user fbid:%@", [result objectForKey:@"id"]);
            NSLog(@"user name:%@", [result objectForKey:@"name"]);
            NSLog(@"accessToken:%@", [[FBSDKAccessToken currentAccessToken] tokenString]);
        }else{
            NSLog(@"error");
        }

    }];

這裡其實是使用了 Facebook 的 Graph API, 基本上要拿取資料就會用到 Graph API 的
至於拿取什麼資料, 就在 parameters:@{@"fields"@"id, name, email"} 這裡輸入, 現在這裡請求的就是用家的 fbid, name 及 email 了~

--------------------------------------
【Logout】

使用預設 Login Button 的朋友可以不用理會~因為預設的已經弄了 Logout 功能啊~
首先要先檢查用家有沒有登入~

有的使用 FBSDKMAnager 的 logOut function 就可以了
把 loginButtonClicked 改成

FBSDKLoginManager *login = [[FBSDKLoginManager alloc] init];
    if([FBSDKAccessToken currentAccessToken]){
        [login logOut];
        NSLog(@"Logout");
    }else{
        
        [login
         logInWithReadPermissions: @[@"public_profile", @"email", @"user_friends"]
         fromViewController:self
         handler:^(FBSDKLoginManagerLoginResult *result, NSError *error) {
             if (error) {
                 NSLog(@"Process error");
             } else if (result.isCancelled) {
                 NSLog(@"Cancelled");
             } else {
                 NSLog(@"Logged in");
             }
         }];

    }

就能成功登出了!
****************
注意:logOut function只是把 Access Token 清掉而已, 所以再按登入時是沒有地方讓你輸入帳號和密碼的
原因嘛...那是因為現在的 Facebook 是跟 Safari 用同一個 cookie 的, 所以如果要真正的 Logout 讓別的用家登入啊, 是需要去 Safari 那邊 Logout 的喔
****************
有時候可能會出現  canOpenURL: failed for URL: "fbauth2:/" - error: "(null)" 這個錯誤訊息的
但如果已經在 plist 設定了 LSApplicationQueriesSchemes, 那就不需要理會了~
****************





沒有留言:

張貼留言