Passwordless ด้วย Account Kit by Facebook

สิ่งที่ท่านต้องมีในเบื้องต้น

  1. Facebook Account https://www.facebook.com
  2. Developer Account https://developers.facebook.com/async/onboarding/dialog/
  3. Facebook App ID https://developers.facebook.com/quickstarts/?platform=web

เมื่อสร้าง App แล้ว ให้เพิ่ม Products เข้าไปใน App ที่สร้างขึ้น โดยเลือก Account Kit

สิ่งที่ต้องใช้ใน example code

  • App ID
  • Account Kit app secret

รหัสพวกนี้เปิดดูได้ใน Dashboard ของ App ที่สร้างขึ้น

ระบุ Server URLs ใน Web Login setttings เป็น URL และ port ที่ code เราทำงานอยู่บน server ที่จะใช้งาน Account Kit เช่น code ทำงานบน server http://auth.ogonan.com ก็ใช้ชื่อนี้ลงดังกล่าวลงไป

clone source code จาก https://github.com/auth0-blog/blog-passwordless-authentication

sudo git clone https://github.com/auth0-blog/blog-passwordless-authentication

  1. ใน account-kit-passwordless
  2. Run npm install
  3. แก้ไข file server.js แทนค่า YOUR_FACEBOOK_APP_ID and YOUR_ACCOUNT_KIT_SECRET ด้วยค่า App ID และ ค่า Account Kit app secret
  4. แก้ไข file login.html ที่อยู่ใน /dist directory
  5. แทนค่า YOUR_FACEBOOK_APP_ID ด้วย App ID
  6. Run app ด้วยคำสั่ง node server
  7. เปิด browser ไปยัง url ของ server ผ่าน port 3000 เช่น http://auth.ogonan.com:3000 หรือ localhost:3000

package.json

{
  "name": "FacebookAccountKitPasswordless",
  "version": "0.0.1",
  "dependencies": {
    "body-parser": "^1.15.0",
    "express": "3.x",
    "guid": "0.0.12",
    "mustache": "^2.2.1",
    "querystring": "^0.2.0",
    "request": "^2.69.0"
  }
}

server.js

const fs = require('fs');
const Guid = require('guid');
const express = require('express');
const bodyParser = require("body-parser");
const Mustache  = require('mustache');
const Request  = require('request');
const Querystring  = require('querystring');
const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
  
var csrf_guid = Guid.raw();
const api_version = "v1.0";
const app_id = "YOUR_FACEBOOK_APP_ID";
const app_secret = 'YOUR_ACCOUNT_KIT_SECRET';
const me_endpoint_base_url = 'https://graph.accountkit.com/v1.0/me';
const token_exchange_base_url = 'https://graph.accountkit.com/v1.0/access_token'; 

function loadLogin() {
  return fs.readFileSync('dist/login.html').toString();
}

app.get('/', function(request, response){
  var view = {
    appId: app_id,
    csrf: csrf_guid,
    version: api_version,
  };

  var html = Mustache.to_html(loadLogin(), view);
  response.send(html);
});

function loadLoginSuccess() {
  return fs.readFileSync('dist/login_success.html').toString();
}

app.post('/sendcode', function(request, response){
  // CSRF check
  if (request.body.csrf_nonce === csrf_guid) {
    var app_access_token = ['AA', app_id, app_secret].join('|');
    var params = {
      grant_type: 'authorization_code',
      code: request.body.code,
      access_token: app_access_token
      //appsecret_proof: app_secret
    };
  
    // exchange tokens
    var token_exchange_url = token_exchange_base_url + '?' + Querystring.stringify(params);
    Request.get({url: token_exchange_url, json: true}, function(err, resp, respBody) {
      console.log(respBody);
      var view = {
        user_access_token: respBody.access_token,
        expires_at: respBody.expires_at,
        user_id: respBody.id,	
      };
      // get account details at /me endpoint
      var me_endpoint_url = me_endpoint_base_url + '?access_token=' + respBody.access_token;
      Request.get({url: me_endpoint_url, json:true }, function(err, resp, respBody) {
        // send login_success.html
        console.log(respBody);
        if (respBody.phone) {
          view.method = "SMS"
          view.identity = respBody.phone.number;
        } else if (respBody.email) {
          view.method = "Email"
          view.identity = respBody.email.address;
        }
        var html = Mustache.to_html(loadLoginSuccess(), view);
        response.send(html);
      });
    });
  } 
  else {
    // login failed
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end("Something went wrong. :( ");
  }
});

app.listen(3000);

ใน /dist มีอีกสองไฟล์ login.html login_success.html เอามาด้วย

https://github.com/auth0-blog/blog-passwordless-authentication/blob/master/account-kit-passwordless/dist/login.html

ตอนจะใช้งานก็ Run ด้วยคำสั่ง node server ซึ่ง server.js กำหนดให้ทำงานที่ port 3000 ถ้าจะเปลี่ยนเป็น port อื่น เช่น 80, 8080 ก็เปลี่ยนที่ บรรทัด app.listen(3000); เปลี่ยนจาก 3000 เป็น 80

ลองดู http://auth.ogonan.com:3000/

Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s