iT邦幫忙

DAY 6
11

東之宿_網站開發系列 第 6

東之宿_開發日誌-7(Facebook 登入)

太陽為了要讓使用者能用Facebook做為登入網站的會員帳號,在測試許久之後,這個功能完成了。
太陽為了要讓使用者能用Facebook做為登入網站的會員帳號,在測試許久之後,這個功能完成了。使用Facebook帳號做為登入帳號的流程,大概就像太陽在筆記本畫的這兩張圖一樣。

如果要使用Facebook做為會員帳號認證機制,那必需先到Facebook Developers成立一個應用程式,並且拿到兩組不同的key,分別是APP_ID和APP_SECRET_KEY。

申請的建立新網頁程式和取得Key的畫面如下:

在取得這個Key之後,就要開始準備資料庫的部份了,資料庫的資料表,有幾個重要的欄位。

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,  ---會員流水號ID
  `oauth_uid` varchar(200) DEFAULT NULL,   ---從Facebook 取回的uid
  `username` varchar(100) DEFAULT NULL,   ---從Facebook 取回的使用者名稱
  PRIMARY KEY (`id`)
);

此外,在SDK方面,需要準備的檔案有Facebook PHP SDK,下載的位置在[ Facebook for Web Developer](s https://developers.facebook.com/docs/web/),目前提供出來的SDK有Java Script, PHP, Ruby, Node.js和C#,如下圖的所示。至於,太陽為什麼要用PHP SDK? 因為...他還看的懂一些些PHP。

接下來要準備的,就是如何取得Facebook的uid和使用名稱了,這種寫法有很多種,太陽最常用的是下面這一種。

<?php
require 'facebook/facebook.php';
require 'config/fbconfig.php';
require 'config/functions.php';
$facebook = new Facebook(array(
            'appId' => APP_ID,
            'secret' => APP_SECRET,
            ));
$user = $facebook->getUser();
if ($user) {
  try {
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
    if (!empty($user_profile )) {
      $username = $user_profile['name'];
       $uid = $user_profile['id'];
      $user = new User();
     $userdata = $user->checkUser($uid, $username);
        if(!empty($userdata)){
            session_start();
            $_SESSION['uid'] = $uid;
            $_SESSION['userame'] = $userdata['username'];
            //header("Location: ../desktop.php");
            echo "<script>history.back()</script>";
              }
    } else {
           die("There was an error.");
    }
} else {
      $login_url = $facebook->getLoginUrl(array( 'scope' => 'email'));
    header("Location: " . $login_url);
}
?>

整個設計的重點程序如下:

1.需在Facebook Developers建立一個WEB APP,做網站登入用。
2.準備對應的資料表和欄位。
3.準備PHP SDK。
4.將相關程式準備完畢。
5.測試。

太陽在準備這個功能時,女王問了他一個問題。

「你為什麼沒有經過臉書同意,就可以取得別人的什麼ID?」

太陽想了想,沒多說話,打開電腦裏的瀏覽器,進入到這一頁 https://www.facebook.com/settings?tab=applications ,臉書的應用程式設定,太陽將上面的文字,唸給女王聽...

『只要,妳有用Facebook或使用Facebook裏面的各種應用程式,妳的大頭貼、朋友、暱稱、用戶ID(uid),都是可以被公開取得的。』

女王聽完後,楞了一下「原來如此。」

下回預告:

Bootstrap 是太陽在網站 Desktop版的主角,它幫助了像太陽這樣不會設計Layout,卻又想做網頁開發的人。太陽並不是想學Bootstrap,而是想在使用Bootstrap的過程,了解及學習網頁設計時的觀念、常用術語和該注意的地方。

今天的太陽下山了,明天一起來看看太陽的Bootstrap報告。

2013/10/07 SunAllen

鐵人賽_開發技術組_文章導覽

上一篇
下一篇

2013鐵人賽_文章總覽
個人全系列連結


上一篇
東之宿_開發日誌-6(Jquery Moile & PhoneGAP 下)
下一篇
東之宿_開發日誌-8(Bootstrap 初試)
系列文
東之宿_網站開發16
0
0
魯大
iT邦高手 1 級 ‧ 2013-10-07 08:43:41

原本是這樣做的,先收下了
未來有需要再拿出來用
感謝太陽大的分享
謝謝愛你

0
woodycheung0313_chb
iT邦見習生 0 級 ‧ 2017-04-25 13:10:44

太陽大大 可以指教一下有關使用opencart2.3.0.2版本實作facebook登入的動物該如何做?
因為目前一直卡住 也看不太懂facebook的教學 感謝

您好,因為我不確定,您使用opencart FB登入後的流程及要抓取的資料為何,以下兩篇供您參考。

http://support.shoplineapp.com/hc/zh-tw/articles/205394969-%E8%A8%AD%E5%AE%9A%E9%A1%A7%E5%AE%A2%E4%BB%A5Facebook%E7%99%BB%E5%85%A5%E5%95%86%E5%BA%97%E9%81%B8%E9%A0%85

下面這一篇,是我去年自己寫的
http://ithelp.ithome.com.tw/articles/10186881

用FB登入,有幾個重點,在我自已寫的文章中有介紹,

您目前,

  1. 在Facebook那邊的設定,設定好了嗎?
  2. 您寫的登入程式,可以連到fb並做登入嗎?
  3. 您可取回user的uid嗎?
  4. 取回uid的同時,可取得user的nickname,這個目前可抓到嗎?

上述四點,是fb的部份,下面是自己程式端的部份。
1.取回uid和nickname可寫到您自己的資料庫嗎?
2.可確定uid是否已存在嗎?

0
woodycheung0313_chb
iT邦見習生 0 級 ‧ 2017-04-25 19:00:44

抱歉太陽大 他不給我進行回應
太陽大你好 目前我是可以把facebook login的button放在我想要的地方 按下去了後雖然是可以輸入fb account登入 可是就沒有後續了 我卡住的地方是之後應該做什麼 另外求指教一下 database是否需要一個新的table去儲存facebook user呢?

這個,您先上網查一下,關鍵字是 facebook login db, 需要一個存Facebook uid的欄位,

卡住的地方,可能是 facebook authorized callback 網頁

抱歉,到4/30都忙,無法詳細回

我要留言

立即登入留言