() translation by (you can also view the original English article)
Dalam artikel ini, Anda akan belajar bagaimana mengatur passwordless otentikasi menggunakan layanan Auth0. Auth0 memungkinkan Anda untuk melakukan outsourcing otentikasi fitur untuk aplikasi Anda.
Apakah itu Auth0?
Auth0 adalah alat otentikasi sebagai layanan yang membuat pelaksanaan fitur yang terkait otentikasi untuk app anda. Jika Anda membangun sebuah aplikasi dan Anda ingin hanya outsourcing fitur otentikasi dan otorisasi, Layanan seperti Auth0 adalah sesuatu yang harus anda mempertimbangkan.
Biarkan aku cepat meringkas apa Auth0 yang ditawarkan:
- single sign-on
- multi-factor authentikasi
- passwordless login
- manajemen pengguna
- dan banyak lagi!
Konfigurasi awal
Dalam bagian ini, kita akan pergi melalui konfigurasi awal dalam persiapan untuk menyiapkan otentikasi passwordless.
Sebelum melanjutkan, pastikan untuk menginstal komposer seperti yang akan digunakan untuk menginstal SDK Auth0 sebenarnya menggunakan composer.json file. Juga, jika Anda ingin untuk mengikuti bersama dengan contoh-contoh dalam artikel ini, pergi ke depan dan mendapatkan diri Anda akun gratis dengan Auth0.
Mari kita mulai dengan cloning dari contoh proyek.
1 |
git clone https://github.com/auth0-samples/auth0-php-web-app.git . |
Install dependensi
Terus maju menjalankan komposer menginstal perintah untuk menginstal dependensi.
1 |
cd 00-Starter-Seed
|
2 |
composer install
|
Menurut composer.json file, Anda harus sudah terinstall package vlucas/phpdotenv dan auth0/auth0-php.
1 |
{
|
2 |
"name": "auth0/basic-webapp-sample", |
3 |
"description": "Basic sample for securing a WebApp with Auth0", |
4 |
"require": { |
5 |
"vlucas/phpdotenv": "2.4.0", |
6 |
"auth0/auth0-php": "~5.0" |
7 |
},
|
8 |
"license": "MIT", |
9 |
"authors": [ |
10 |
{
|
11 |
"name": "Martin Gontovnikas", |
12 |
"email": "martin@gon.to" |
13 |
},
|
14 |
{
|
15 |
"name": "Germán Lena", |
16 |
"email": "german.lena@gmail.com" |
17 |
}
|
18 |
]
|
19 |
}
|
Perpustakaan vlucas/phpdotenv digunakan untuk menginisialisasi variabel lingkungan dari .env file. Dengan demikian, hal ini memungkinkan Anda untuk memisahkan konfigurasi dari kode yang berubah antara lingkungan.
Di sisi lain, paket auth0/auth0-php adalah salah satu yang akan membantu kami mendirikan otorisasi pada aplikasi kami.
Mengkonfigurasi lingkungan variabel
Selanjutnya, mari kita mengatur konfigurasi untuk aplikasi kami dalam .env file. Pergi ke depan dan membuat .env file dengan menyalin dari .env.example file.
1 |
cp .env.example .env
|
Ini berisi nilai-nilai konfigurasi yang akan digunakan oleh Perpustakaan Auth0.
1 |
AUTH0_CLIENT_ID={CLIENT_ID}
|
2 |
AUTH0_DOMAIN={DOMAIN_NAME}
|
3 |
AUTH0_CLIENT_SECRET={CLIENT_SECRET}
|
4 |
AUTH0_CALLBACK_URL={CALLBACK_URL}
|
5 |
AUTH0_AUDIENCE= |
Anda harus dapat menemukan sebagian besar pengaturan di bawah Applications > Default App > Settings pada dasbor Auth0. Harap dicatat bahwa saya menggunakan aplikasi default yang dibuat oleh sistem. Tentu saja, Anda bisa pergi ke depan dan menciptakan sebuah aplikasi baru jika Anda ingin melakukannya.
AUTH0_CALLBACK_URL adalah URL dari aplikasi Anda di mana Auth0 akan mengarahkan pengguna setelah login, dan logout. Nilai yang Anda tetapkan dalam bidang ini harus dikonfigurasi di bawah URL Callback yang diperbolehkan dalam aplikasi pengaturan di dasbor Auth0.
Passwordless Login menggunakan Email
Untuk mengaktifkan passwordless login menggunakan email, pergi ke Connections > Passwordless pada Auth0 dasbor dan Aktifkan opsi Email.
Dalam kebanyakan kasus, pengaturan konfigurasi default di bawah Email hanya bekerja out of the box. Tentu saja, jika Anda ingin mengubah pengaturan sesuai keinginan silahkan saja. Jangan lupa untuk mengaktifkan aplikasi yang Anda inginkan passwordless otentikasi pada Connections > Passwordless > Email > Applications.
Dengan setup awal di tempat, kita dapat pergi ke depan dan membuat file yang mengimplementasikan passwordless login menggunakan email.
Menerapkan Passwordless Login
Silahkan dan buat email_auth_example.php file dengan isi sebagai berikut.
1 |
<?php
|
2 |
// Require composer autoloader
|
3 |
require __DIR__ . '/vendor/autoload.php'; |
4 |
|
5 |
require __DIR__ . '/dotenv-loader.php'; |
6 |
|
7 |
use Auth0\SDK\Auth0; |
8 |
|
9 |
$domain = getenv('AUTH0_DOMAIN'); |
10 |
$client_id = getenv('AUTH0_CLIENT_ID'); |
11 |
$client_secret = getenv('AUTH0_CLIENT_SECRET'); |
12 |
$redirect_uri = getenv('AUTH0_CALLBACK_URL'); |
13 |
$audience = getenv('AUTH0_AUDIENCE'); |
14 |
|
15 |
if($audience == ''){ |
16 |
$audience = 'https://' . $domain . '/userinfo'; |
17 |
}
|
18 |
|
19 |
$auth0 = new Auth0([ |
20 |
'domain' => $domain, |
21 |
'client_id' => $client_id, |
22 |
'client_secret' => $client_secret, |
23 |
'redirect_uri' => $redirect_uri, |
24 |
'audience' => $audience, |
25 |
'scope' => 'openid profile', |
26 |
'persist_id_token' => true, |
27 |
'persist_access_token' => true, |
28 |
'persist_refresh_token' => true, |
29 |
]);
|
30 |
|
31 |
$userInfo = $auth0->getUser(); |
32 |
?>
|
33 |
<html>
|
34 |
<head>
|
35 |
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script> |
36 |
|
37 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
38 |
|
39 |
<!-- font awesome from BootstrapCDN -->
|
40 |
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> |
41 |
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> |
42 |
|
43 |
<link href="public/app.css" rel="stylesheet"> |
44 |
</head>
|
45 |
<body class="home"> |
46 |
<div class="container"> |
47 |
<div class="login-page clearfix"> |
48 |
<?php if(!$userInfo): ?> |
49 |
<script src="https://cdn.auth0.com/js/lock/11.6.1/lock.min.js"></script> |
50 |
<script type="text/javascript"> |
51 |
function login() { |
52 |
var lock = new Auth0LockPasswordless('<?php echo $client_id; ?>', '<?php echo $domain; ?>', { |
53 |
allowedConnections: ['email'], // Should match the Email connection name, it defaults to 'email' |
54 |
passwordlessMethod: 'code', // If not specified, defaults to 'code' |
55 |
auth: { |
56 |
redirectUrl: '<?php echo $redirect_uri; ?>', |
57 |
responseType: 'code' |
58 |
}
|
59 |
});
|
60 |
|
61 |
lock.show(); |
62 |
}
|
63 |
</script>
|
64 |
|
65 |
<a href="javascript:login()">Passwordless Login Using Email</a> |
66 |
<?php else: ?> |
67 |
<div class="logged-in-box auth0-box logged-in"> |
68 |
<h1 id="logo"><img src="//cdn.auth0.com/samples/auth0_logo_final_blue_RGB.png" /></h1> |
69 |
<img class="avatar" src="<?php echo $userInfo['picture'] ?>"/> |
70 |
<h2>Welcome <span class="nickname"><?php echo $userInfo['nickname'] ?></span></h2> |
71 |
<a class="btn btn-warning btn-logout" href="/logout.php">Logout</a> |
72 |
</div>
|
73 |
<?php endif ?> |
74 |
</div>
|
75 |
</div>
|
76 |
</body>
|
77 |
</html>
|
Pada awal, kami telah menyertakan auto loader yang bertanggung jawab untuk memuat Auth0 dan lingkungan variabel kelas terkait.
Setelah itu, kita menginisialisasi variabel konfigurasi dari file .env yang menggunakan fungsi getenv.
Selanjutnya, kita sebut metode getUser pada objek Auth0 untuk memeriksa apakah setiap sesi aktif hadir. Berdasarkan itu, kami menampilkan SignIn link jika tidak ada sesi aktif. Jika tidak, username dari pengguna masuk log dengan Logout link ditampilkan.
Silahkan dan jalankan file email_auth_example.php untuk menguji aplikasi Anda!
Passwordless Login menggunakan SMS
Untuk mengaktifkan passwordless login menggunakan SMS, pergi ke Connections > Passwordless pada Auth0 dasbor dan Aktifkan opsi SMS. Secara default, Auth0 menggunakan layanan Twilio untuk mengirim pesan. Jadi buatlan sebuah akun Twilio.
Dari Twilio dashboard, mendapatkan ACCOUNT SID dan TOKEN TUPOKSI dan masukkan nilai-nilai di bidang Twilio SID dan Twilio AuthToken di koneksi > Passwordless > SMS > pengaturan pada dasbor Auth0.
Juga, Anda perlu membuat layanan pesan baru di SMS > Messaging Services pada dashboard Anda Twilio. Setelah sukses penciptaan layanan, Anda akan mendapatkan Service ID, dan itulah apa yang Anda akan perlu untuk memasukkan di bidang Copilot SID di Connections > Passwordless > SMS > Settings.
Akhirnya, mari kita mengintip di bagaimana passwordless login menggunakan SMS bekerja. Buatlah sms_auth_example.php file. Isinya sama dengan email_auth_example.php, kecuali fungsi login(), yang adalah sebagai berikut.
1 |
function login() {
|
2 |
var lock = new Auth0LockPasswordless('<?php echo $client_id; ?>', '<?php echo $domain; ?>', {
|
3 |
allowedConnections: ['sms'], // Should match the SMS connection name |
4 |
auth: {
|
5 |
redirectUrl: '<?php echo $redirect_uri; ?>', |
6 |
responseType: 'code' |
7 |
} |
8 |
}); |
9 |
lock.show(); |
10 |
}; |
Semuanya adalah hampir sama, kecuali bahwa kami telah menyediakan sms daripada email di allowedConnections properti.
Pergi ke depan dan menjalankan file sms_auth_example.php untuk menguji aplikasi Anda!
Kesimpulan
Hari ini, kami melihat passwordless login dengan layanan Auth0. Di antara metode mungkin tersedia, kami menerapkan email dan SMS metode dengan contoh kode.
Silahkan sesuka hati untuk meninggalkan saran atau pertanyaan menggunakan feed di bawah!
