Merge branch 'master' into dependabot/composer/symfony/security-http-…

…4.2.12
darookee · May 4, 2020 · d40e0a1 · d40e0a1
2 parents 9721413 + 1304dc2
commit d40e0a1
Show file tree

Hide file tree

Showing 6 changed files with 277 additions and 862 deletions.
diff --git a/README.md b/README.md
@@ -291,6 +291,17 @@ r_u2f:
 The Keys can be registered visiting `/u2f_register`. It needs to be served as
 https!
 
+### Step 4: Include Javascript
+
+First you need to add the dependency [u2f-api](https://www.npmjs.com/package/u2f-api) to your `package.json`.
+
+If you're using Webpack Encore, include this line in your `webpack.config.js` and you're done:
+```
+.addEntry('ru2ftwofactor', './web/bundles/ru2ftwofactor/js/auth.js')
+```
+
+If you're not using Webpack Encore, you need to bundle `web/bundles/ru2ftwofactor/js/auth.js` yourself, overwrite `formTemplate` and `registerTemplate` and add your JavaScript reference there.
+
 ## License
 
 This bundle is available under the [MIT license](LICENSE).
diff --git a/Resources/public/js/auth.js b/Resources/public/js/auth.js
@@ -1,107 +1,134 @@
-'use strict';
+import u2fApi from 'u2f-api'
 
-var u2fauth = u2fauth || {};
+'use strict'
 
-u2fauth.formId = 'u2fForm';
-u2fauth.authCodeId = '_auth_code';
-u2fauth.keynameId = 'u2fkeyname';
-u2fauth.pressButtonId = 'u2fpressbutton';
-u2fauth.errorId = 'u2fError';
+window.u2fauth = window.u2fauth || {}
+
+u2fauth.formId = 'u2fForm'
+u2fauth.authCodeId = '_auth_code'
+u2fauth.keynameId = 'u2fkeyname'
+u2fauth.pressButtonId = 'u2fpressbutton'
+u2fauth.errorId = 'u2fError'
+u2fauth.timeout = 5
 u2fauth.errorTranslation = {
-    1: 'Unknown Error',
-    2: 'Bad Request',
-    3: 'Client configuration not supported',
-    4: 'Device already registered or ineligible',
-    5: 'Timeout. Click to retry',
-};
-
-u2fauth.ready = function(fn) {
-    if ('loading' !== document.readyState){
-        fn();
-    } else if (document.addEventListener) {
-        document.addEventListener('DOMContentLoaded', fn);
-    } else {
-        document.attachEvent('onreadystatechange', function() {
-            if ('loading' !== document.readyState)
-                fn();
-        });
-    }
-};
-
-u2fauth.authenticate = function() {
-    u2fauth.clearError();
-    u2fauth.showPressButton();
-
-    var form = document.getElementById(u2fauth.formId);
-    var request = JSON.parse(form.dataset.request);
-
-    u2f.sign(request[0].appId, request[0].challenge, request, function(data){
-        u2fauth.hidePressButton();
-        if(!data.errorCode) {
-            u2fauth.submit(form, data);
-        } else {
-            u2fauth.showError(data.errorCode, u2fauth.authenticate);
-        }
-    });
-};
-
-u2fauth.register = function() {
-    u2fauth.clearError();
-    u2fauth.hideKeyname();
-    u2fauth.showPressButton();
-
-    var form = document.getElementById(u2fauth.formId);
-    var request = JSON.parse(form.dataset.request);
-
-    u2f.register(request[0].appId, [request[0]], request[1], function(data){
-        u2fauth.hidePressButton();
-        if(!data.errorCode) {
-            u2fauth.submit(form, data);
-        } else {
-            u2fauth.showError(data.errorCode, u2fauth.register);
-        }
-    });
-};
-
-u2fauth.submit = function(form, data) {
-    var codeField = document.getElementById(u2fauth.authCodeId);
-    codeField.value = JSON.stringify(data);
-    form.submit();
+  1: 'Unknown Error',
+  2: 'Bad Request',
+  3: 'Client configuration not supported',
+  4: 'Device already registered or ineligible',
+  5: 'Timeout. Click to retry'
+}
+
+u2fauth.ready = function (fn) {
+  if (document.readyState !== 'loading') {
+    fn()
+  } else if (document.addEventListener) {
+    document.addEventListener('DOMContentLoaded', fn)
+  } else {
+    document.attachEvent('onreadystatechange', function () {
+      if (document.readyState !== 'loading') { fn() }
+    })
+  }
+}
+
+u2fauth.authenticate = function () {
+  u2fauth.clearError()
+  u2fauth.showPressButton()
+
+  var form = document.getElementById(u2fauth.formId)
+  var request = JSON.parse(form.dataset.request)
+
+  u2fApi.isSupported()
+    .then(function (supported) {
+      if (supported) {
+        return u2fApi.sign(request, u2fauth.timeout)
+          .then(response => {
+            u2fauth.hidePressButton()
+            u2fauth.submit(form, response)
+          })
+      } else {
+        alert('Browser not supported')
+      }
+    })
+    .catch(data => {
+      u2fauth.hidePressButton()
+      u2fauth.showError(data.metaData.code, u2fauth.authenticate)
+    })
+}
+
+u2fauth.register = function () {
+  u2fauth.clearError()
+  u2fauth.hideKeyname()
+  u2fauth.showPressButton()
+
+  var form = document.getElementById(u2fauth.formId)
+  var request = JSON.parse(form.dataset.request)
+
+  u2fApi.isSupported()
+    .then(function (supported) {
+      if (supported) {
+        return u2fApi.register(request[0], request[1], u2fauth.timeout)
+          .then(response => {
+            u2fauth.hidePressButton()
+            u2fauth.submit(form, response)
+          })
+      } else {
+        alert('Browser not supported')
+      }
+    })
+    .catch(data => {
+      console.info(data)
+      u2fauth.hidePressButton()
+      u2fauth.showError(data.metaData.code, u2fauth.register)
+    })
+}
+
+u2fauth.submit = function (form, data) {
+  var codeField = document.getElementById(u2fauth.authCodeId)
+  codeField.value = JSON.stringify(data)
+  form.submit()
+}
+
+u2fauth.hideKeyname = function () {
+  var keyname = document.getElementById(u2fauth.keynameId)
+  keyname.style.display = 'none'
 }
 
-u2fauth.hideKeyname = function() {
-    var keyname = document.getElementById(u2fauth.keynameId);
-    keyname.style.display = 'none';
+u2fauth.hidePressButton = function () {
+  var pressButton = document.getElementById(u2fauth.pressButtonId)
+  pressButton.style.display = 'none'
 }
 
-u2fauth.hidePressButton = function() {
-    var pressButton = document.getElementById(u2fauth.pressButtonId);
-    pressButton.style.display = 'none';
+u2fauth.showPressButton = function () {
+  var pressButton = document.getElementById(u2fauth.pressButtonId)
+  pressButton.style.display = 'block'
 }
 
-u2fauth.showPressButton = function() {
-    var pressButton = document.getElementById(u2fauth.pressButtonId);
-    pressButton.style.display = 'block';
+u2fauth.clearError = function () {
+  var errorDisplay = document.getElementById(u2fauth.errorId)
+  errorDisplay.style.display = 'none'
+  errorDisplay.innerText = ''
 }
 
-u2fauth.clearError = function() {
-    var errorDisplay = document.getElementById(u2fauth.errorId);
-    errorDisplay.style.display = 'none';
-    errorDisplay.innerText = '';
+u2fauth.showError = function (error, callback) {
+  var errorDisplay = document.getElementById(u2fauth.errorId)
+  errorDisplay.style.display = 'block'
+  errorDisplay.innerText = u2fauth.errorTranslation[error]
+  errorDisplay.onclick = callback
 }
 
-u2fauth.showError = function(error, callback) {
-    var errorDisplay = document.getElementById(u2fauth.errorId);
-    errorDisplay.style.display = 'block';
-    errorDisplay.innerText = u2fauth.errorTranslation[error];
-    errorDisplay.onclick = callback;
-};
-
-u2fauth.ready(function(){
-    var form = document.getElementById('u2fForm');
-    var type = form.dataset.action;
-
-    if('auth' === type) {
-        u2fauth.authenticate();
-    }
-});
+u2fauth.ready(function () {
+  const form = document.getElementById('u2fForm')
+  if (!form) {
+    return
+  }
+  const type = form.dataset.action
+
+  if (type === 'auth') {
+    u2fauth.authenticate()
+  } else if (type === 'reg' && form.addEventListener) {
+    form.addEventListener('submit', function (event) {
+      event.preventDefault()
+      u2fauth.register()
+    }, false)
+  }
+})