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

 

 

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