Chapter3: 3rd Party API

This section contain the following items:

  1) Use Facebook's OAuth

1.Use Facebook's OAuth API to login

2016-09-11

  1)Register yor APP to Facebook from : 
    http://developers.facebook.com/setup/, you can get APP_ID
  2)Get secret from : 
    https://developers.facebook.com/apps/656891331154404/dashboard/取得client id及secret
  3)Estalish a new Node Express project
  4)Edit app.js :
    //var routes = require('./routes/index');
    //var users = require('./routes/users'); 
    //app.use(express.static(path.join(__dirname, 'public')));
    app.use('/public', express.static(path.join(__dirname, 'public')));
    app.use('/bower_components', express.static(path.join(__dirname + '/bower_components')));
    routes(app);
    console.log("start listening");
    app.listen(8080);

  5)Edit routes/index :
    /*
      router.get('/', function(req, res, next) {
      res.render('index', { title: 'Express' });
      });
    */
    //module.exports = router;

    module.exports = function(app) {
      //provide main page
      app.get('/', function(req, res, next) {
        res.sendfile('./public/main.html'); // load the single view file 
        //res.render('candidate', { title: 'Express' });
      });    
    };
  6)Copy example code from: https://developers.facebook.com/docs/facebook-login/web/
  7)Create/public/main.html and paste example code
  8)Start Node Http server
  9)Open broswer and paste the following URL:
    https://www.facebook.com/dialog/oauth?
    client_id={your APPID}&
    scope=email,user_birthday&
    redirect_uri=http://localhost:8080

    then broswer will ask user to athourize this app to get user's Fb information
    And you can get user's code
  10)Open broswer and paste the following URL to get user's access token:
    https://graph.facebook.com/oauth/access_token?
    client_id={your APPID}&
    redirect_uri=http://localhost:8080&
    client_secret={your secret}&
    code={code}

reference:

  1.網站利用 Facebook 帳號登入 (使用 OAuth):http://sweeteason.pixnet.net/blog/post/40581580-%E7%B6%B2%E7%AB%99%E5%88%A9%E7%94%A8-facebook-%E5%B8%B3%E8%99%9F%E7%99%BB%E5%85%A5-(%E4%BD%BF%E7%94%A8-oauth)
  2.網站利用 Facebook 帳號登入 (Javascript SDK):http://sweeteason.pixnet.net/blog/post/37284400
  3.facebook: https://developers.facebook.com/docs/facebook-login/web/
  4.facebook api quick start:https://developers.facebook.com/quickstarts/656891331154404/?platform=web