顯示具有 facebook 標籤的文章。 顯示所有文章
顯示具有 facebook 標籤的文章。 顯示所有文章

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, 那就不需要理會了~
****************





2016年2月29日 星期一

【iOS/Facebook】Facebook SDK 在 iOS 上的設定及事前準備

現在很多應用程式都會加入 Facebook 的功能
而使用 Facebook 功能前
我們需要先下載 Facebook SDK 及在 iOS 上設定

(1) Facebook SDK 按這裡下載

     (版本選哪個也可以, 夜雪是用最新的 4.10 版本的)

(2) 在下載期間, 可以先到 App Dashboard 那邊建立申請 Facebook App 喔~

      詳情請參考 【Facebook App】申請建立 Facebook App 並取得 App ID

下載完成後的 Facebook SDK 內容如下圖:

下載 Facebook SDK 及申請建立 Facebook App 後, 可以打開 xcode project 了!

(3) 先把需要用到的 Framework 拖到 xcode project 裡(FBSDKCoreKit.framework是必要的)
     拖進 xcode 後, 在小視窗選擇 "copy items if needed" 和 "create groups", 然後按 "finish" 


(4) 右鍵 "Info.plist" -> "Open As" -> "Source Code", 拉到最底, 在 </dict> 上加入


<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fb{your-app-id}</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{your-app-id}</string>
<key>FacebookDisplayName</key>
<string>{your-app-name}</string>

記得把你的 Facebook App ID 和 name 取代 "{your-app-id}" 和 "{your-app-name}"
Facebook App ID 可在 App Dashboard 頁面查看



(5) 打開 AppDelegate.m
      現在我們要把 AppDelegate 和 FBSDKApplicationDelegate 進行連接了啊
      首先需要 import FBSDKCoreKit.h


#import <FBSDKCoreKit/FBSDKCoreKit.h>

      然後加入


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [[FBSDKApplicationDelegate sharedInstance] application:application
    didFinishLaunchingWithOptions:launchOptions];
  return YES;
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
    openURL:url
    sourceApplication:sourceApplication
    annotation:annotation
  ];
}
      
      然後需要加入 AppEvent
      AppEvent 可以紀錄有多少人有開過你的應用程式
      然後可以在 Analytics for App Dashboard 查看


- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}



2016年2月25日 星期四

【iOS/Facebook】針對 iOS 9 的 Facebook 設定

如果 App 的對象是包含iOS 9的用家, 就要留意一下了!
這是 Facebook 針對 iOS 9 版本的設定
是用來白名單 Facebook 網域(Domain)的

(1) 在Project 的 Info.plist -> Open As -> Source Code, 在</dict>前加入



<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>facebook.com</key>
    <dict>
      <key>NSIncludesSubdomains</key> <true/>        
      <key>NSThirdPartyExceptionRequiresForwardSecrecy</key> <false/>
    </dict>
    <key>fbcdn.net</key>
    <dict>
      <key>NSIncludesSubdomains</key> <true/>
      <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>  <false/>
    </dict>
    <key>akamaihd.net</key>
    <dict>
      <key>NSIncludesSubdomains</key> <true/>
      <key>NSThirdPartyExceptionRequiresForwardSecrecy</key> <false/>
    </dict>
  </dict>

</dict>

(2) 如果使用的 Facebook SDK 版本是 4.5 或之前, 加入


<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fbapi20130214</string>
    <string>fbapi20130410</string>
    <string>fbapi20130702</string>
    <string>fbapi20131010</string>
    <string>fbapi20131219</string>    
    <string>fbapi20140410</string>
    <string>fbapi20140116</string>
    <string>fbapi20150313</string>
    <string>fbapi20150629</string>
    <string>fbauth</string>
    <string>fbauth2</string>
    <string>fb-messenger-api20140430</string>
</array>

(3) 如果版本是 4.6 之前, 要額外加入


<string>fb-messenger-platform-20150128</string>
<string>fb-messenger-platform-20150218</string>
<string>fb-messenger-platform-20150305</string>

(4) 如果版本是 4.6 或之後, 只需要加入


<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>

這幾段原始碼的作用是, 准許我們的 App 可以辨認用家手機上有沒有安裝 Facebook 應用程式, 而且在使用 Facebook 功能時可以順利的從 App 切換到 Facebook 應用程式 或 開啟瀏覽器進入 Facebook 頁面




【Facebook App】申請建立 Facebook App 並取得 App ID

Facebook SDK 提供很多不同的功能,讓程式開發者使用,使開發的程式更完善
功能有很多種類,例如 登入,分享,邀請等等
而使用Facebook SDK前,我們需要先申請建立 Facebook App
以使用更深入更完善的功能

申請建立 Facebook App是很簡單的喔~


(1) 按此 進入申請建立 Facebook App 的頁面


(2) "Display Name" 可以跟你的專案名字不同, 這是在登入, 分享等等時顯示出來的




(3) "Category" 就看看你的 App 是什麼類型嚕~(上面的只是例子, 夜雪隨便選擇的~呵)

(4) 然後我們要到 App Dashboard 設定我們的 Facebook App

(5) 選擇想設定的 Facebook App -> Settings -> add platform -> iOS


(6) 輸入 bundle id(在Xcode project可以找到), 選擇Single Sign On, 然後Save



(7) 最後在 App Review -> Status -> Make Public 選擇 Yes



(8) 在同一頁面的下方, 我們可以得知這隻 Facebook App 的權限有哪幾個
email
public_profile
user_friends
        這3個是預設的, 如果想再開其他權限就要向 Facebook 申請嚕~

(9) 在 Dashboard 頁面, 就可以找到 App ID 了!!