Dismiss Notice

Register now to be one of the first members of this SharePoint Community! Click here it just takes seconds!

Dismiss Notice
Welcome Guest from Country Flag

【Node JS】Node js 實作課程:文字雲

Discussion in 'Official Microsoft News' started by Microsoft Student, Apr 6, 2017.

Thread Status:
Not open for further replies.
  1. Microsoft Student

    Microsoft Student Guest

    Blog Posts:
    0
    Node js 文字雲課程討論


    這是 MSP NodeJs 技術小聚的課後文件,有任何問題,歡迎前往課程社團詢問。

    簡介


    在這個專案中,我們會使用 NodeJS 讀取 Facebook 用戶的貼文,製作出文字雲的效果,開始之前,您必須裝好 NodeJs (6.9.1) 以及相關IDE,我們會以 VS Code 來示範,沒有實際參與實體課程的朋友,我們會建議有初步的 Javascript 基礎。

    這次的預計成果

    [​IMG]

    這篇文章目標在於讓各位了解 Facebook Graph API 認證程序,所以沒有使用 JS 的 SDK,若您對內容有任何建議,歡迎在下方留言或進入社團與我們交流。

    若您對 Facebook Graph API 運作方式已經有初步了解,您可以直接前往實作部分

    Facebook Graph API

    測試工具


    官網介紹,建議讀者在開始之前,可以先看看官方的書名文件,大部分都有中文支援而且寫得很清楚。

    這個API是我們讀、寫用戶 Facebook 資料的主要方法,我們可以使用 測試工具 來探索我們取得的資料,例如 me 可以取得使用者的基本資訊,這個資料不需要相關權限,如下圖所示,回傳的資料為 JSON 格式。

    [​IMG]

    在取得相關資料之前,我們必須得到使用者許可,對於程式來說,我們必須使用 存取權杖(token) 來向 Facebook 要求資料。測試工具中最上方一長串文字就是了,在你拿到權杖後,可以把它貼到測試工具中來先看看資料格式,我們會很常使用到他。

    存取權杖 Token


    在上一段,我們提到了存取權杖,這裡我們就來解釋他到底是什麼。

    你不會希望你的個人資料隨隨便便的讓任何開發者使用,所以 Facebook 有個授權機制,要存取個人 Facebook 資料不是那麼容易,我們必須要有存取權杖(以下會使用 token 來代表他)。

    你可以想像 Token 為古時候的令牌,我們要到文件庫取得資料(使用者隱私資訊)時,我們必須向管理員 (facebook 伺服器) 出示,每個 token 能存取到到資料不一樣,取決於使用者的授權。

    Token 和斯斯一樣有分好幾種,讀者可以到官方文件中看看,這裡就不再多解釋了,這篇範例會使用的是用戶存取權杖,用來取得用戶資料。

    另外, token 是會過期的,有分成短期和長期,前者大概只有幾個小時的有效期間,長期的則可能有一個月的期限,但我們可以更新 token 來增加使用時間,直到用戶取消授權。在本篇範例中,我們只需要幾秒鐘的時間就好,因為我們不儲存使用者資料,所以不會做到換取 token 的步驟。

    如何取得 Token


    講了那麼多,這個令牌要怎麼取得呢?

    其實我們可以很方便的使用FB JavaScript SDK在前端之取得資料,這樣就不需要管 Token 的事情了。但在本篇,為了讓大家了解認證流程,我們會使用 nodejs 手動 進行認證,讓我們開始吧。

    官方文件:手動建立登入流程

    [​IMG]

    首先來看看流程圖,看起來很簡單吧,我們一步一步解釋,在這篇例子中,我們實作的是中間的伺服器,用戶端指的是網頁前端程式,很多服務的認證架構都是長這個樣子,這也是我們為什麼要手動實作而不使用 SDK 的原因。

    使用 NodeJs 實作授權及取得資料


    這篇主要在教學 NodeJS 部分,所以前端 javascript 部分我們不會解釋,但會說明運作流程。

    在開始之前,請讀者前往下載課程檔案,裡面包還含了 npm 設定、VS code 設定、git 設定 及前端資源。

    申請應用程式


    我們必須有一組 Facebook 的 ID 和 金鑰 才能開始,請到開發人員介面申請,並在設定中加入網站平台,網址設定為本機伺服器的網址

    http://localhost:1337


    關於申請開發人員網路上有許多說明,這邊就不多做解釋,若有問題歡迎再詢問。

    1. 導向授權頁面


    要取得別人的資料之前,我們得先問問他願不願意,我們得將用戶引導到授權頁面,這篇我們會由前端直接處理,導向

    https://www.facebook.com/v2.8/dialog/oauth?
    client_id={app-id}
    &redirect_uri={redirect-uri}
    &scope={scope}


    有三個參數要帶入

    名稱 說明
    app-id 應用程式編號
    redirect-urid 回呼網址,也就是 Facebook 該把 code 傳給誰。
    scope 需要的權限,沒有要求的權限你是沒有辦法使用的喔,這個範例我們要user_posts這個權限,其他權限可以參考權限列表

    這邊要注意的是回呼網址必須在應用程式網域下喔,不然把使用者導向其他網頁就糟糕了。

    例如,我們的應用程式授權頁面網址為

    https://www.facebook.com/v2.8/dialo...c.azurewebsites.net/api/code&scope=user_posts

    [​IMG]

    接著使用者會看到這個頁面,她可以選擇同意或拒絕授權(但通常大家看都沒看就按下去了,對吧?),不論結果如何,Facebook 都會將網頁導回給回呼網址,但拒絕的話就沒有 Code 帶入了。

    上面的訊息使用使用該應用程式的開發人員登入才看的到,因為大部分的權限必須要申請批准,還沒批准前只有開發人員、測試人員才可以使用。

    若使用者拒絕給予資料,你可以再次詢問,但絕對不可以直接導回授權頁面喔,不斷要求授權是會被檢舉的。

    像這樣 … Facebook 會將使用者導向這個頁面。

    [​IMG]

    Session


    這邊插入一點點其他東西,剛剛一直提到我們必須要有 token 才有資格取得資料,但使用者登入後我們就馬上需要資料嗎,在這裡範例中,我們先讓使用者登入,再按下「開始製作」按鈕,才向伺服器發送要求。

    那麼我們該把 token 存在哪裡呢? 一個方法是存在瀏覽器的 Cookie 中,Cookie 的運作方法很簡單,在網頁通訊中,沒一次的要求都是獨立的,我們必不知道你就是剛剛來的那個人,這時候我們可以和使用者(也就是各位的瀏覽器)達成協議,造訪我們的網站時,我們除了回應給你網站內容外,還另外給你一塊餅乾,你下次來的時候,再帶個這塊餅乾,我們幫你打八折就會記得你了!

    但是,我們不能把 token 直接給你,Cookie 是存在客戶端的,所以很容易被竊取,於是我們給了你一組辨識碼,看到這組辨識碼後,我們在伺服器中找到對應的資料,這就是 Session 的運作原理。

    好了,講了這邊麼多,我們先把程式趕上進度吧。

    var express = require('express');
    var http = require('http');
    var session = require('express-session');
    var request = require('request');
    var app = express();

    // session 用來儲存登入資料 Facebook username token 等
    app.use(session({
    secret: process.env.sessionKEY,
    cookie: { maxAge: 10 * 60 * 1000 },
    resave: true,
    saveUninitialized: true
    }));
    // 通訊埠,放在 Azure 上會開啟預設 80 號,我們在 local server 先使用 1337
    var port = process.env.port || 1337;
    // 放靜態資源,也就是我們主要 html js 等等前端的東西
    app.use('/', express.static('static'));
    http.createServer(app).listen(port);
    console.log('server started');


    這些內容在上次課程中都有介紹囉,這邊就不多做解釋了,唯一增加的地方在8到13行,裡面定義了 session 的加密字串,以及 cookie 的過期時間(餅乾過期的就不能吃了),詳細設定可以到作者的 GitHub 上看。

    secret 是 session 的加密字串,我們不直接寫在 app.js 中(因為這會公開給大家看),而是寫在環境變數中,打開 .vscode 下的launch.json檔案,在13行的地方可以看到下面的設定:

    "env": {
    "appID": "", // Facebook 應用程式 ID
    "appKEY": "", // Facebook 應用程式 密鑰
    "sessionKEY": "", // 加密字串
    "redirect": "http://localhost:1337"
    }


    其中 sessionKEY 對應到的就是 session 的 secret , 您可以前往這個網頁產生256長度的密碼。

    appID 和 appKEY 請各位自行輸入。

    在開啟伺服器之前,讀者應該在專案目錄執行 npm install 來安裝套件,使用 VS Code 的讀者可以按下偵錯頁面的「啟動程式」。

    按下 VScode debug 中的開始偵錯按鈕,前往任何瀏覽器輸入 http://localhost:1337/,就可以看到網頁頁面囉,只不過會按鈕卡在「連線中」的狀態。

    [​IMG]

    在 VSCode 中,你可以看到這個小框框,按下綠色圓圈箭頭就可以重新啟動測試伺服器囉。

    [​IMG]

    api/user


    這個專案我們總共有三個 API 端點要做,第一個就是檢查登入狀態啦,前端會在網頁載入完成之後,發送 GET 要求到這個網址,我們得回應用戶名稱(如果有的話)或授權網址(沒有資料的話)。

    聽起來很複雜嗎? 來看看 Code 吧

    app.get('/api/user', (req, res) => {
    var re;
    if (req.session.name)
    re = { statu: 'ok', name: req.session.name };
    else
    re = { statu: 'not login', url: 'https://www.facebook.com/v2.8/dialog/oauth?client_id=' + process.env.appID + '&redirect_uri=' + process.env.redirect + '/api/code&scope=user_posts' };
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify(re));
    });


    利用 express 建立 get route,接著我們檢查 session 中有沒有 name 資料,有的話就回傳,沒有的話就傳回授權網址。

    2. 3. 4.code 處理


    若使用者同意授權,Facebook 會給我們 code,恭喜你能使用資料了!但這裡的 code 和 token 是不同的喔,他只有一個功用:拿去換 token ,隨然聽起來有點可憐但事實就是如此,這個 code 只有伺服器端可以使用,必須由客戶端(前端)傳送給伺服器,再由伺服器向 facebook 換取 token。在換取的時候,必須要提供 secret key 密鑰來證明身分。千萬千萬千萬不可以把金鑰傳給前端由瀏覽器直接發送要求,有了 secret key ,盜用者可以代表你的應用程式做任何事情。

    app.get('/api/code', (req, res) => {
    request('https://graph.facebook.com/v2.8/oauth/access_token?client_id=' + process.env.appID + '&redirect_uri=' + process.env.redirect + '/api/code' + '&client_secret=' + process.env.appKEY + '&code=' + req.query.code, (error, response, body) => {
    var userdata = JSON.parse(body);
    req.session.key = userdata.access_token;
    });
    });


    我們裡用 request 套件來發送要求,正確的話 Facebook 就會回傳 acces_token ,這就是我們要的囉。

    5. 取得使用者基本資料


    拿到 token 後,我們得先做一件事情:取得使用者基本資料,取得方法很簡單,直接發送要求到 me 端點就可以了,這裡我們寫成 Promise 型式讓程式碼比較好看。

    // 向 FB 要求使用者名稱和 ID
    function getUser(key) {
    return new Promise((resolve, reject) => {
    request('https://graph.facebook.com/v2.8/me?fields=id%2Cname&access_token=' + key, (error, response, body) => {
    resolve(JSON.parse(body));
    });
    });
    }


    接著我們把 ID 和 姓名 存到 session 中,在導回到首頁,這樣這個端點就完成了。

    // GET Facebook 登入後會帶入 code 參數回傳到這裡,我們要把 code 拿去換 token,並取得使用者名稱,登入完成後導向至首頁
    app.get('/api/code', (req, res) => {
    request('https://graph.facebook.com/v2.8/oauth/access_token?client_id=' + process.env.appID + '&redirect_uri=' + process.env.redirect + '/api/code' + '&client_secret=' + process.env.appKEY + '&code=' + req.query.code, (error, response, body) => {
    var userdata = JSON.parse(body);
    req.session.key = userdata.access_token;
    getUser(userdata.access_token).then((data) => {
    req.session.name = data.name;
    req.session.fbid = data.id;
    res.redirect('../');
    });
    });
    });
    function getUser(key) {
    return new Promise((resolve, reject) => {
    request('https://graph.facebook.com/v2.8/me?fields=id%2Cname&access_token=' + key, (error, response, body) => {
    resolve(JSON.parse(body));
    });
    });
    }


    做到這裡,你應該可以登入囉! 剩下最後抓取文章的部分了。


    Code 只能使用一次,而且很快就過期囉,建議每次測試的時候都前往首頁重新要求 code 來使用。
    使用者貼文資料


    還記得我們可愛的測試工具嗎?

    請按下取得權杖 > 取得用戶存取權杖,勾選 user_posts。

    [​IMG]

    我們偷懶,所以把全部權限都勾了

    接著試試看me/posts端點

    [​IMG]

    應該就可以看到你的文章囉,這邊有幾點需要注意:

    1. 有些文章是沒有文字的,我們會在程式中略過這些文章
    2. 這裡沒辦法顯示你的所有文章,但在最下方會有 paging.next 的網址,提示我們前往下一個分頁。
    3. 這個權限能拿到的文章是所有的貼文,不論是否公開

    // GET 取得 500 篇或全部文章
    app.get('/api/post', (req, res) => {
    var url = 'https://graph.facebook.com/v2.8/me/posts?limit=25&access_token=' + req.session.key;
    getPost(url, []).then((data) => {
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify(data.posts));
    });
    });
    // 向 FB 要求文章,每次要求只有 25 篇
    function getPost(url, posts) {
    return new Promise((resolve, reject) => {
    request(url, (error, response, body) => {

    var posts_data = JSON.parse(body);
    for (var d in posts_data.data) {
    if (posts_data.data[d].message)
    posts.push(posts_data.data[d].message);
    }
    if (posts.length < 500 && posts_data.paging && posts_data.paging.next)
    resolve(getPost(posts_data.paging.next, posts));
    else
    resolve({ posts: posts });
    });
    });
    }


    做到這邊,我們就可以產出文字雲了,我們的工作只是把文章傳送給前端,剩下的事就由他幫我們處理囉。

    驗證 token 必要性


    我們其實略過了一個步驟,驗證 token,為什麼需要呢?

    token 冒用:假設我們 Android 上實做一個登入 facebook 帳戶的應用程式,我們可以藉由 token 查看使用者 id 來判別登入者。這有一個很大的問題,攻擊者可以使用其他的應用程式生成 token,來偽造登入行為。

    我們可以藉由查看 token 屬性,檢查 app id 是否相符

    GET /debug_token?
    input_token={input-token}&amp;
    access_token={access-token}


    這裡的 access_token 為應用程式存取權杖。

    但在這個範例中,我們的 token 是直接由 Facebook API 取得的,所以比較沒有這個問題。

    總結


    看過這篇文章後,你應該對 Facebook Graph API 有更進一步的瞭解了,讀者可以前往 範例 Github 看看完整程式,我們還有其他課程,若您有興趣,可以前往報名,或加入課程社團 一起討論!

    第十一屆微軟學生大使 技術組 蔡臻平、詹鈞婷 撰寫

    Continue reading...
     
Thread Status:
Not open for further replies.

Share This Page

LiveZilla Live Chat Software