Full support of HOTP

app/Classes/OTP.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Classes;
+
+use OTPHP\TOTP;
+use OTPHP\Factory;
+use Assert\AssertionFailedException;
+
+class OTP
+{
+
+    /**
+     * Generate a TOTP
+     *
+     * @param  \App\TwoFAccount  $twofaccount
+     * @return an array that represent the totp code
+     */
+    public static function get($uri)
+    {
+        
+        try {
+            $otp = Factory::loadFromProvisioningUri($uri);
+        }
+        catch (AssertionFailedException $exception) {
+            return false;
+        }
+
+        if( get_class($otp) === 'OTPHP\TOTP' ) {
+
+            $currentPosition = time();
+            $PeriodCount = floor($currentPosition / $otp->getPeriod()); //nombre de période de x s depuis T0 (x=30 par défaut)
+            $currentPeriodStartAt = $PeriodCount * $otp->getPeriod();
+            $positionInCurrentPeriod = $currentPosition - $currentPeriodStartAt;
+
+            // For memo :
+            // $nextOtpAt = ($PeriodCount+1)*$period
+            // $remainingTime = $nextOtpAt - time()
+
+            return $totp = [
+                'otp' => $otp->now(),
+                'position' => $positionInCurrentPeriod
+            ];
+        }
+        else {
+            // It's a HOTP
+            $hotp = [
+                'otp' => $otp->at($otp->getCounter()),
+                'counter' => $otp->getCounter(),
+            ];
+
+            // now we update the counter for next code
+            $otp->setParameter( 'counter', $otp->getcounter() + 1 );
+
+            $twofaccount = \App\TwoFAccount::where('uri', $uri)->first();
+            $twofaccount->uri = $otp->getProvisioningUri();
+            $twofaccount->save();
+
+            return $hotp;
+        }
+
+        
+
+    }
+
+
+}

app/Classes/TimedTOTP.php

@@ -1,47 +0,0 @@
-<?php
-
-namespace App\Classes;
-
-use OTPHP\TOTP;
-use OTPHP\Factory;
-use Assert\AssertionFailedException;
-
-class TimedTOTP
-{
-
-    /**
-     * Generate a TOTP
-     *
-     * @param  \App\TwoFAccount  $twofaccount
-     * @return an array that represent the totp code
-     */
-    public static function get($uri)
-    {
-        
-        try {
-            $otp = Factory::loadFromProvisioningUri($uri);
-        }
-        catch (AssertionFailedException $exception) {
-            return false;
-        }
-
-        $currentPosition = time();
-        $PeriodCount = floor($currentPosition / $otp->getPeriod()); //nombre de période de x s depuis T0 (x=30 par défaut)
-        $currentPeriodStartAt = $PeriodCount * $otp->getPeriod();
-        $positionInCurrentPeriod = $currentPosition - $currentPeriodStartAt;
-
-        // for memo :
-        // $nextOtpAt = ($PeriodCount+1)*$period
-        // $remainingTime = $nextOtpAt - time()
-
-        $totp = [
-            'totp' => $otp->now(),
-            'position' => $positionInCurrentPeriod
-        ];
-
-        return $totp;
-
-    }
-
-
-}

app/Http/Controllers/TwoFAccountController.php

@@ -3,7 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\TwoFAccount;
-use App\Classes\TimedTOTP;
+use App\Classes\OTP;
 use Illuminate\Http\Request;
 use ParagonIE\ConstantTime\Base32;
 use Illuminate\Support\Facades\Storage;
@@ -71,10 +71,10 @@ public function show($id)
      * @param  \App\TwoFAccount  $twofaccount
      * @return \Illuminate\Http\Response
      */
-    public function generateTOTP(TwoFAccount $twofaccount)
+    public function generateOTP(TwoFAccount $twofaccount)
     {
 
-        return response()->json(TimedTOTP::get($twofaccount->uri), 200);
+        return response()->json(OTP::get($twofaccount->uri), 200);
 
     }
 

resources/js/components/TwofaccountShow.vue

@@ -5,10 +5,13 @@
         </figure>
         <p class="is-size-4 has-text-grey-light">{{ service }}</p>
         <p class="is-size-6 has-text-grey">{{ account }}</p>
-        <p id="otp" class="is-size-1 has-text-white" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => totp.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ totp }}</p>
-        <ul class="dots">
+        <p id="otp" class="is-size-1 has-text-white" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => otp.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ otp }}</p>
+        <ul class="dots" v-if="type === 'totp'">
             <li v-for="n in 30"></li>
         </ul>
+        <ul v-else-if="type === 'hotp'">
+            <li>(counter = {{ counter }})</li>
+        </ul>
     </div>
 </template>
 
@@ -20,9 +23,11 @@
                 service: '',
                 account: '',
                 icon: '',
-                totp : '',
+                type : '',
+                otp : '',
                 timerID: null,
                 position: null,
+                counter: null,
             }
         },
 
@@ -38,8 +43,9 @@
                         this.service = response.data.service
                         this.account = response.data.account
                         this.icon = response.data.icon
+                        this.type = response.data.type
 
-                        await this.getOTP()
+                        this.type === 'totp' ? await this.getTOTP() : await this.getHOTP()
                         this.$parent.isActive = true
                     })
                     .catch(error => {
@@ -47,12 +53,12 @@
                     });
             },
 
-            getOTP: function() {
+            getTOTP: function() {
 
-                axios.get('api/twofaccounts/' + this.id + '/totp').then(response => {
-                    let spacePosition = Math.ceil(response.data.totp.length / 2);
+                axios.get('api/twofaccounts/' + this.id + '/otp').then(response => {
+                    let spacePosition = Math.ceil(response.data.otp.length / 2);
                     
-                    this.totp = response.data.totp.substr(0, spacePosition) + " " + response.data.totp.substr(spacePosition);
+                    this.otp = response.data.otp.substr(0, spacePosition) + " " + response.data.otp.substr(spacePosition);
                     this.position = response.data.position;
 
                     let dots = this.$el.querySelector('.dots');
@@ -73,9 +79,9 @@
                         let sibling = active.nextSibling;
 
                             if(active.nextSibling === null) {
-                                console.log('no more sibling to activate, we refresh the TOTP')
+                                console.log('no more sibling to activate, we refresh the OTP')
                                 self.stopLoop()
-                                self.getOTP();
+                                self.getTOTP();
                             }
                             else
                             {
@@ -88,10 +94,21 @@
                 })
             },
 
+            getHOTP: function() {
+
+                axios.get('api/twofaccounts/' + this.id + '/otp').then(response => {
+                    let spacePosition = Math.ceil(response.data.otp.length / 2);
+                    
+                    this.otp = response.data.otp.substr(0, spacePosition) + " " + response.data.otp.substr(spacePosition);
+                    this.counter = response.data.counter;
+                })
+            },
+
             clearOTP: function() {
                 this.stopLoop()
-                this.timerID = null
-                this.totp = '... ...'
+                this.id = this.timerID = this.position = this.counter = null
+                this.service = this.account = this.icon = this.type = ''
+                this.otp = '... ...'
                 this.$el.querySelector('[data-is-active]').removeAttribute('data-is-active');
                 this.$el.querySelector('.dots li:first-child').setAttribute('data-is-active', true);
             },

routes/api.php

@@ -32,7 +32,7 @@
     Route::get('user', 'UserController@getDetails');
 
     Route::apiResource('twofaccounts', 'TwoFAccountController');
-    Route::get('twofaccounts/{twofaccount}/totp', 'TwoFAccountController@generateTOTP')->name('twofaccounts.generateTOTP');
+    Route::get('twofaccounts/{twofaccount}/otp', 'TwoFAccountController@generateOTP')->name('twofaccounts.generateOTP');
     Route::post('qrcode/decode', 'QrCodeController@decode');
     Route::post('icon/upload', 'IconController@upload');
     Route::delete('icon/delete/{icon}', 'IconController@delete');