{"id":327,"date":"2020-06-01T14:36:23","date_gmt":"2020-06-01T14:36:23","guid":{"rendered":"http:\/\/149.28.158.41\/?p=327"},"modified":"2023-10-08T04:36:54","modified_gmt":"2023-10-08T04:36:54","slug":"membuat-otp-whatsapp","status":"publish","type":"post","link":"https:\/\/fonnte.com\/tutorial\/membuat-otp-whatsapp\/","title":{"rendered":"Membuat OTP Dengan Whatsapp"},"content":{"rendered":"\n<p>Keamanan data pengguna adalah hal yang sangat penting bagi pengguna website. Salah satu metode dalam meningkatkan keamanan adalah dengan menggunakan OTP. <\/p>\n\n\n\n<p>OTP (One-Time Password) merupakan fitur yang mewajibkan pengguna untuk melakukan verifikasi suatu aksi pada website dengan suatu code yang biasanya berupa beberapa digit angka.<\/p>\n\n\n\n<p>Jika kode OTP yang diinput sesuai dengan kode OTP yang diberikan, maka aksi pada website itu dapat dilanjutkan.<\/p>\n\n\n\n<p>Tutorial membuat OTP ini akan menjelaskan step by step membuat OTP hingga dapat digunakan.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Cara membuat otp dengan whatsapp php\" width=\"1200\" height=\"900\" src=\"https:\/\/www.youtube.com\/embed\/Mz1WUwy4xVI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">1. Membuat Database<\/h2>\n\n\n\n<p>Langkah awal dalam membuat OTP dengan whatsapp adalah membuat database untuk demo login dan OTP.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>CREATE DATABASE demo;\nCREATE TABLE `otp` ( `id` INT NOT NULL , `nomor` VARCHAR(20) NOT NULL , `otp` INT(4) NOT NULL , `waktu` INT(20) NOT NULL ) ENGINE = InnoDB;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. Membuat Koneksi<\/h2>\n\n\n\n<p>Selanjutnya agar nantinya dapat terhubung dengan database, perlu membuat sebuah file koneksi dengan membuat file otp.php dan isi dengan code dibawah ini. isi username &amp; password user database.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php \ndate_default_timezone_set('Asia\/Jakarta');\n\n$hostname \t= 'localhost';\n$username \t= '';\n$password \t= '';\n$dbname \t= 'demo';\n$conn = mysqli_connect( $hostname , $username , $password , $dbname );\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">3. Membuat Struktur HTML dan PHP<\/h2>\n\n\n\n<p>Langkah terakhir adalah dengan membuat form dan skrip php untuk mengeksekusi proses request opt dan login.<\/p>\n\n\n\n<p>Untuk bisa mengirimkan pesan, di kode ini memerlukan token untuk identifikasi device.<\/p>\n\n\n\n<p>Silakan <a rel=\"noreferrer noopener\" href=\"https:\/\/md.fonnte.com\/new\/register.php\" target=\"_blank\">daftar<\/a> terlebih dahulu jika belum memiliki device di fonnte.com.<\/p>\n\n\n\n<p>Kamu bisa menggunakan device ini dengan <strong>gratis<\/strong>.<\/p>\n\n\n\n<p>Setelah daftar, bisa langsung login dan buat device di menu device.<\/p>\n\n\n\n<p>Copy tokennya dan jangan lupa untuk konekkan device dengan fonnte terlebih dahulu agar bisa mengirimkan pesan.<\/p>\n\n\n\n<p>Selanjutnya tinggal copy code berikut lalu paste dibawah kode koneksi dan update tokennya.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (isset($_POST&#91;'submit-otp'])) {\n    $nomor = mysqli_escape_string($conn, $_POST&#91;'nomor']);\n    if ($nomor) {\n        if (!mysqli_query($conn, \"DELETE FROM otp WHERE nomor = $nomor\")) {\n            echo (\"Error description: \" . mysqli_error($con));\n        }\n        $curl = curl_init();\n        $otp = rand(100000, 999999);\n        $waktu = time();\n        mysqli_query($conn, \"INSERT INTO otp (nomor,otp,waktu) VALUES ( $nomor ,$otp , $waktu )\");\n        $data = &#91;\n            'target' =&gt; $nomor,\n            'message' =&gt; \"Your OTP : \" . $otp\n        ];\n\n        curl_setopt(\n            $curl,\n            CURLOPT_HTTPHEADER,\n            array(\n                \"Authorization: TOKEN\",\n            )\n        );\n        curl_setopt($curl, CURLOPT_CUSTOMREQUEST, \"POST\");\n        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);\n        curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($data));\n        curl_setopt($curl, CURLOPT_URL, \"https:\/\/api.fonnte.com\/send\");\n        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);\n        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);\n        $result = curl_exec($curl);\n        curl_close($curl);\n    }\n} elseif (isset($_POST&#91;'submit-login'])) {\n    $otp = mysqli_escape_string($conn, $_POST&#91;'otp']);\n    $nomor = mysqli_escape_string($conn, $_POST&#91;'nomor']);\n    $q = mysqli_query($conn, \"SELECT * FROM otp WHERE nomor = $nomor AND otp = $otp\");\n    $row = mysqli_num_rows($q);\n    $r = mysqli_fetch_array($q);\n    if ($row) {\n        if (time() - $r&#91;'waktu'] &lt;= 300) {\n            echo \"otp benar\";\n        } else {\n            echo \"otp expired\";\n        }\n    } else {\n        echo \"otp salah\";\n    }\n}\n\n?&gt;\n\n&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n\n&lt;head&gt;\n    &lt;title&gt;Form OTP&lt;\/title&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;form method=\"POST\" action=\"\" accept-charset=\"utf-8\" style=\"margin: 100px auto;box-shadow: 0 0 15px -2px lightgray;width:100%;max-width:600px;padding:20px;box-sizing:border-box;\"&gt;\n        &lt;h1 style=\"text-align: center;\"&gt;OTP&lt;\/h1&gt;\n        &lt;center&gt;\n\n            &lt;div style=\"display: &lt;?php echo isset($_POST&#91;'submit-otp']) ? \"none\" : \"flex\" ?&gt;;flex-direction:column;margin-bottom:10px;box-sizing:border-box;\"&gt;&lt;label for=\"nomor\" style=\"text-align: left;margin-bottom:5px;\"&gt;Nomor&lt;\/label&gt; &lt;input placeholder=\"62812xxxx\" name=\"nomor\" type=\"text\" id=\"nomor\" required style=\"padding:8px;border:2px solid lightgray;border-radius:5px;\" &lt;?php if (isset($_POST&#91;'submit-otp'])) {\n                                                                                                                                                                                                                                                                                                                                                                                                echo \"value='$nomor' hidden\";\n                                                                                                                                                                                                                                                                                                                                                                                            } ?&gt; \/&gt;&lt;\/div&gt;\n            &lt;?php\n            if (isset($_POST&#91;'submit-otp'])) { ?&gt;\n                &lt;div style=\"display: flex;flex-direction:column;margin-bottom:10px;\"&gt;&lt;label for=\"otp\" style=\"text-align: left;margin-bottom:5px;box-sizing:border-box;\"&gt;OTP&lt;\/label&gt; &lt;input placeholder=\"xxxxxx\" name=\"otp\" type=\"text\" id=\"otp\" style=\"padding:8px;border:2px solid lightgray;border-radius:5px;\" \/&gt;&lt;\/div&gt;\n            &lt;?php }\n            if (!isset($_POST&#91;'submit-otp'])) { ?&gt;\n                &lt;button type=\"submit\" id=\"btn-otp\" style=\"background-color: orange;border:none;padding:8px 16px;color:white;cursor:pointer;\" name=\"submit-otp\"&gt;Request otp&lt;\/button&gt;\n            &lt;?php }\n            if (isset($_POST&#91;'submit-otp'])) { ?&gt;\n                &lt;button type=\"submit\" id=\"btn-login\" style=\"background-color:darkturquoise;border:none;padding:8px 16px;color:white;cursor:pointer;\" name=\"submit-login\"&gt;Login&lt;\/button&gt;\n            &lt;?php }  ?&gt;\n        &lt;\/center&gt;\n    &lt;\/form&gt;\n\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>OTP akan expired jika waktu sudah melewati 5 menit.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Integrasi dengan WordPress<\/h2>\n\n\n\n<p>Demikian cara membuat OTP dengan whatsapp dari fonnte. <\/p>\n\n\n\n<p>Bagi yang menggunakan CMS wordpress, bisa langsung <a href=\"https:\/\/fonnte.com\/tutorial\/plugin-otp-2fa-forgot-password-ke-whatsapp\/\" data-type=\"post\" data-id=\"415\">download plugin OTP whatsapp<\/a>.<\/p>\n\n\n\n<p>Plugin ini bisa digunakan untuk mengirimkan OTP saat login.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Keamanan data pengguna adalah hal yang sangat penting bagi pengguna website. Salah satu metode dalam meningkatkan keamanan adalah dengan menggunakan OTP. OTP (One-Time Password) merupakan fitur yang mewajibkan pengguna untuk melakukan verifikasi suatu aksi pada website dengan suatu code yang biasanya berupa beberapa digit angka. Jika kode OTP yang diinput sesuai dengan kode OTP yang &#8230; <a title=\"Membuat OTP Dengan Whatsapp\" class=\"read-more\" href=\"https:\/\/fonnte.com\/tutorial\/membuat-otp-whatsapp\/\" aria-label=\"More on Membuat OTP Dengan Whatsapp\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":340,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"slim_seo":{"title":"Cara Membuat OTP dengan Whatsapp","description":"Menggunakan whatsapp sebagai platform untuk mengirimkan OTP untuk keamanan","facebook_image":"https:\/\/fonnte.com\/tutorial\/wp-content\/uploads\/2020\/06\/Membuat-OTP-dengan-Whatsapp.png","twitter_image":"https:\/\/fonnte.com\/tutorial\/wp-content\/uploads\/2020\/06\/Membuat-OTP-dengan-Whatsapp.png"},"footnotes":""},"categories":[2],"tags":[],"class_list":["post-327","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php"],"_links":{"self":[{"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/posts\/327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/comments?post=327"}],"version-history":[{"count":13,"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/posts\/327\/revisions"}],"predecessor-version":[{"id":1083,"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/posts\/327\/revisions\/1083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/media\/340"}],"wp:attachment":[{"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/media?parent=327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/categories?post=327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fonnte.com\/tutorial\/wp-json\/wp\/v2\/tags?post=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}