Passwordless ด้วย auth0

ไปสมัครลองใช้ได้ที่

https://auth0.com/

จากนั้น สร้าง app ขึ้นมา ส่วน code แล้วแต่ความถนัด สามารถเลือกได้เกือบที่มีอยู่ในโลกนี้ ตัวอย่างนี้ใช้เขียนด้วย php ซึ่งสามารถดูตัวอย่างได้ผ่าน console หลังจากสร้าง app กรณีใช้ php ต้องลง library เพิ่มด้วยคำสั่ง

composer require auth0/auth0-php:"~4.0"

คำสั่ง composer ไปเอาที่นี่ https://getcomposer.org/doc/00-intro.md

สร้างหน้า Login

login.html

<html>
<body>

https://cdn.auth0.com/js/lock-passwordless-2.2.min.js

  var lock = new Auth0LockPasswordless('Client ID', 'kaebmoo.auth0.com
');
    lock.emailcode({
      callbackURL: 'http://auth.ogonan.com/callback.php',
      authParams: {
        scope: 'openid email'  // Learn about scopes: https://auth0.com/docs/scopes
      }
    });


</html>

Client ID = Client ID ของ App ที่สร้างขึ้นใน auth0 ส่วน

kaebmoo.auth0.com

kaebmoo ก็เป็น user ที่สร้างขึ้นใน auth0

กรณีนี้เป็นการใช้ passwordless แบบส่ง email ผ่าน mail server (SMTP) ของ SendGrid ซึ่งต้องไปเอา API Key มาใส่ไว้ใน Config (ผ่าน web console) ของ auth0 ด้วย ในกรณีที่ใช้ smtp อื่น ก็ขึ้นอยู่กับ smtp แต่ละเจ้า (ลองของ google app gmail แล้ว แต่ส่งไม่ได้ ไม่แน่ใจว่าติดปัญหาอะไร error ฟ้องมาว่า Invalid …) ซึ่งทั้งการส่งผ่าน sms และ email ทาง auth0 ไม่มีการให้บริการตรงนี้ให้ ไม่เหมือน Account Kit ของ Facebook ที่มีบริการส่งทั้ง SMS และ email ให้

สำหรับการส่ง sms ลองใช้ของ Twilio ก็สามารถใช้งานได้ แต่จะต้องมีการระบุหมายเลขผู้ใช้งานที่ Twilio ด้วยจึงจะสามารถใช้งานได้ (แบบทดลองใช้) สิ่งที่ต้องใช้จาก Twilio ได้แก่

  • Account SID
  • Auth Token

เพื่อเอามาระบุให้กับ auth0 สามารถส่ง SMS มายัง มือถือ ตอนที่ทำงาน Login สรุปก็คือ auth0 ไม่มี SMS Gateway, Mail Gateway ให้ auth0 ทำหน้าที่ Authen อย่างเดียว การส่ง SMS, email ต้องไปอาศัย gateway ที่อื่นส่ง

สร้าง Callback เพื่อทำการรับค่าจาก auth0 ก็คือเมื่อมีการ Login ใส่ Password หรือ Pin Code แล้ว auth0 จะมีการเรียกกลับมายัง server ที่ร้องขอการ authen เราจำเป็นต้องระบุ url หรือ code ที่เราจะต้องเขียนขึ้นเพื่อรับค่า code (key, token) ซึ่งจะนำเอาไปใช้งาน (ถ้า login สำเร็จ)

callback.php

<?php

// code ตัวอย่างใน dashboard ไม่มีบรรทัดนี้ ทำเอาปวดหัว ให้เพิ่มเข้าไปด้วย 
// แต่ตัวอย่างใน github เหมือนจะมี ถ้าไม่ใส่บรรทัด ถัดไปจะ error 
// /vendor จะได้มาตอนที่ใช้ composer ลง library ที่เกี่ยวข้องเพิ่ม 
require __DIR__ . '/vendor/autoload.php';

use Auth0\SDK\Auth0;

$auth0 = new Auth0(array(
    'domain'        => 'kaebmoo.auth0.com',
    'client_id'     => 'Client ID',
    'client_secret' => 'Client Secret',
    'redirect_uri'  => 'http://auth.ogonan.com/callback.php'
));

        $userInfo = $auth0->getUser();
        if (!$userInfo) {
    // We have no user info
    // redirect to Login
                echo "Login";
        } else {
    // User is authenticated
    // Say hello to $userInfo['name']
    // print logout button
                echo "Hello " . $userInfo['name'];
        }

?>

<html>
  <body class="home">
    
</body> </html>

Client ID, Client Secret เอามาจากค่าที่ได้จากการสร้าง App ใน auth0

ใน Callback นี้ จะมีการเรียก user information ขึ้นมาแสดง ถ้า Login สำเร็จ พร้อม พิมพ์ Hello ทักทาย ใน callback ก็เป็นหน้าที่ของผู้พัฒนา app จะเขียนเพิ่มเติมให้ไปทำงานในส่วนต่าง ๆ ที่เกี่ยวข้องต่อไป

อยากลอง? เชิญ  http://auth.ogonan.com/login.html

 

 

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/