We Keep Coding

webauthn authentication javascript formatting assistance

I have been trying to figure out how to do 2fa with webauthn and I have the registration part working. The details are really poorly documented, especially all of the encoding payloads in javascript. I am able to register a device to a user, but I am not able to authenticate with that device. For reference, I'm using these resources:
https://github.com/cedarcode/webauthn-ruby
https://www.passwordless.dev/js/mfa.register.js
And specifically, for authentication, I'm trying to mimic this js functionality:
https://www.passwordless.dev/js/mfa.register.js
In my user model, I have a webauthn_id, and several u2f devices, each of which has a public_key and a webauthn_id.
In my Rails app, I do:
options = WebAuthn::Credential.options_for_get(allow: :webauthn_id)
session[:webauthn_options] = options
In my javascript, I try to mimic the js file above and I do (this is embedded ruby):
options = <%= raw #options.as_json.to_json %>
options.challenge = WebAuthnHelpers.coerceToArrayBuffer(options.challenge);
options.allowCredentials = options.allowCredentials.map((c) => {
c.id = WebAuthnHelpers.coerceToArrayBuffer(c.id);
return c;
});
navigator.credentials.get({ "publicKey": options }).then(function (credentialInfoAssertion)
{
// send assertion response back to the server
// to proceed with the control of the credential
alert('here');
}).catch(function (err)
{
debugger
console.error(err); /* THIS IS WHERE THE ERROR IS THROWN */
});
The problem is, I cannot get past navigator.credentials.get, I get this error in the javascript console:
TypeError: CredentialsContainer.get: Element of 'allowCredentials' member of PublicKeyCredentialRequestOptions can't be converted to a dictionary
options at the time navigator.credentials.get is called looks like this:
I've tried every which way to convert my db-stored user and device variables into javascript properly encoded and parsed variables but cannot seem to get it to work. Anything obvious about what I'm doing wrong?
Thanks for any help,
Kevin
UPDATE -
Adding options json generated by the server:
"{\"challenge\":\"SSDYi4I7kRWt5wc5KjuAvgJ3dsQhjy7IPOJ0hvR5tMg\",\"timeout\":120000,\"allowCredentials\":[{\"type\":\"public-key\",\"id\":\"OUckfxGNLGGASUfGiX-1_8FzehlXh3fKvJ98tm59mVukJkKb_CGk1avnorL4sQQASVO9aGqmgn01jf629Jt0Z0SmBpDKd9sL1T5Z9loDrkLTTCIzrIRqhwPC6yrkfBFi\"},{\"type\":\"public-key\",\"id\":\"Fj5T-WPmEMTz139mY-Vo0DTfsNmjwy_mUx6jn5rUEPx-LsY51mxNYidprJ39_cHeAOieg-W12X47iJm42K0Tsixj4_Fl6KjdgYoxQtEYsNF-LPhwtoKwYsy1hZgVojp3\"}]}"

This is an example of the serialised JSON data returned by our implementation:
{
"challenge": "MQ1S8MBSU0M2kiJqJD8wnQ",
"timeout": 60000,
"rpId": "identity.acme.com",
"allowCredentials": [
{
"type": "public-key",
"id": "k5Ti8dLdko1GANsBT-_NZ5L_-8j_8TnoNOYe8mUcs4o",
"transports": [
"internal"
]
},
{
"type": "public-key",
"id": "LAqkKEO99XPCQ7fsUa3stz7K76A_mE5dQwX4S3QS6jdbI9ttSn9Hu37BA31JUGXqgyhTtskL5obe6uZxitbIfA",
"transports": [
"usb"
]
},
{
"type": "public-key",
"id": "nbN3S08Wv2GElRsW9AmK70J1INEpwIywQcOl6rp_DWLm4mcQiH96TmAXSrZRHciZBENVB9rJdE94HPHbeVjtZg",
"transports": [
"usb"
]
}
],
"userVerification": "discouraged",
"extensions": {
"txAuthSimple": "Sign in to your ACME account",
"exts": true,
"uvi": true,
"loc": true,
"uvm": true
}
}
This is parsed to an object and the code used to coerce those base64url encoded values is:
credentialRequestOptions.challenge = WebAuthnHelpers.coerceToArrayBuffer(credentialRequestOptions.challenge);
credentialRequestOptions.allowCredentials = credentialRequestOptions.allowCredentials.map((c) => {
c.id = WebAuthnHelpers.coerceToArrayBuffer(c.id);
return c;
});
Hope that helps. The JSON data is retreived via a fetch() call and the byte[] fields are encoded as base64url on the serverside.

How to set recipients with Gmail's Node.js API

As simple as it may seem, I cannot seem to figure out how to set recipients of a draft with Google's Gmail API. The documentation says that a users.messages Resource object contains a payload object that contains a headers object, and that headers object contains name-value pairs.
// example from google's gmail API documentation
"payload": {
"partId": string,
"mimeType": string,
"filename": string,
"headers": [
{
"name": string,
"value": string
}
],
"body": users.messages.attachments Resource,
"parts": [
(MessagePart)
]
},
It is within these headers I presume you set the "To" part of a draft, since the documentation says
List of headers on this message part. For the top-level message part, representing the entire message payload, it will contain the standard RFC 2822 email headers such as To, From, and Subject.
however, when I make a request that looks something like this
"payload" : {
"headers" : [
{
"name" : "To",
"value" : "me"
// "me" should direct the draft to myself
}
]
}
the To part of the draft is still left empty. Any solution or advice?

In your request you have this:
"headers" : [ "name" : "To", "value" : "me" ]
"headers" is supposed to be an array of objects but your array contains none.
Instead, it should look like this:
"headers": [ { "name": "To", "value": "me" } ]
Just like their example:
"payload": {
"partId": string,
"mimeType": string,
"filename": string,
"headers": [
{
"name": "To",
"value": "me"
}
],
"body": users.messages.attachments Resource,
"parts": [
(MessagePart)
]
},

So, it appears that I was misinterpreting documentation on the Gmail API. When you send a request to drafts.create, you do need to supply is a users.messages Resource, however, not all of it is writable. Only threadId, labelIds, and raw are writable objects. As it turns out, you aren't supposed to use the payload at all to set the To, From, etc. You are supposed to include them in your raw.
My new code looks something like this
let create = (toAddress, subject, content, callback) => {
gmail.users.drafts.create(
{
'userId' : 'me',
'resource' : {
'message' : {
'raw' : base64.encodeURI(
`To:${toAddress}\r\n` + // Who were are sending to
`Subject:${subject}\r\n` + // Subject
`Date:\r\n` + // Removing timestamp
`Message-Id:\r\n` + // Removing message id
`From:\r\n` + // Removing from
`${content}` // Adding our actual message
)
}
}
},
(err, response) => {
// Do stuff with response
callback(err, response);
}
)
}

AngularJs Multipart $http Request Issue

For some reason I can't get [object Object] out of the form. I'm using hte method found here:
http://badwing.com/multipart-form-data-ajax-uploads-with-angularjs/#comment-431
The JSON i'm sending is pretty complicated (sample):
{
"challenge_id": 262,
"priority": "0",
"cause_id": "29",
"timestamp": "2013-11-29 12:06:01",
"translations": {
"en": {
"name": "asdfgsfd",
"description": "sdfghfs"
}
},
"actions": {
"1": {
"type": "chek",
"step": "1",
"translations": {
"en": {
"description": "adsfas"
}
}
},
"2": {
"type": "chek",
"step": "2",
"translations": {
"en": {
"description": "fsdgsd"
}
}
}
}
}
My response looks like this:
Content-Disposition: form-data; name="challenge_json"
[object Object]
My request looks like this:
return $http.post( REQUEST_URL + '/ENDPOINT', {challenge_json:data}, {
transformRequest: function(data) {
console.log(data);
var fd = new FormData();
angular.forEach(data, function(value, key) {
fd.append(key, value);
});
console.log(fd);
return fd;
}
Im modifying the headers with a httpProvider configuration change. But have tried doing it in line and am getting the same result.
any help would be appreciated.

It seems you were close to the solution, but needed to unset the 'content-type' header in the options passed to $http, so that the xmlhttprequest object can add it automatically when it gets a formdata on its send method.
https://groups.google.com/d/topic/angular/MBf8qvBpuVE/discussion
see a playground here http://jsfiddle.net/Lv1n55db/1/
(providing FormData object directly and a no-op transform, or your way of providing a normal data object and transforming it to FormData in transformRequest is no significant difference, the key is in the headers option)
headers:{'Content-Type':undefined},
It may vary with differnt browsers and different angularjs versions too.
A more certain and stable approach, at least if you do not need file fields and such, could be to not use native FormData but implement the serialization to string yourself, as FormData polyfills do it.

The confuse about use jquery $.ajax to read javascript file

suppose I have a config javascript file:
window.Config = {};
Config.UI = {
"Area": {},
"Layer": {},
"Sprites": {},
"Audio": {}
};
Config.UI.Area = {
"prop": {
"uuid": {
"_type": "string",
},
"frame": {
"_type": "rect",
"_value": {
"x": "0",
},
"_aka": "frame"
},
"zIndex": {
"_type": "string",
}
},
then I want use $.ajax to read this file:
$.ajax({
url:'js/config.js',
success:function (data, textStatus) {
console.log(data);
}
})
the question is how can I get some key's value in the config,by use the data $.ajax return?
like the "Config.UI" or the 'uuid' in ui.area.prop?Or can I convert them to json?

Rather than use AJAX, why not just insert a script?
var script = $('<script>');
script.attr('type', 'text/javascript');
script.attr('src', 'js/config.js');
script.bind('load', function() {
// use window.Config
});
script.appendTo('head');

icktoofay has a good suggestion, and the issue with the jQuery.ajax call looks to be a missing dataType: 'script' option which will evaluate the response and should give you object access. You might want to look into jQuery.getscript() as well.

I find it very useful and powerful to store data on the server as javascript objects and read them using Ajax. And it is very easy to do. Let me give you an example from an educational application I have written.
This is an example table of contents file (l1contents.js) that I would store on the server:
{
title : "Lesson 1",
topics : [
{name : "Topic 1", file : "l1t1data.js" },
{name : "Topic 2", file : "l1t2data.js" },
]
}
This is the javascript code I use to process the file:
$.ajax({
url : contentsFileName, // would be set to 'l1contents.js'
dataType : 'text', // yes this is correct, I want jquery to think this is text
cache : false,
success: function(data) {
var contentsObj = eval('(' + data + ')');
var lessonTitle = contentsObj.title;
for (var i = 0; i < contentsObj.topics.length; i++) {
var topic = contentsObj.topics [i];
// process topic.name and topic.file here
}
}
});
Obviously, this is simplified, but hopefully you get the idea. I simply use eval to set the object. And note that I don't even need any javascript code defining the structure of contentsObj. (I, of course, do have extensive comments defining the structure of my objects, but they are simply comments, not code.)

if your json file contains json data than you can use parseJSON() , toJSON() method.
and another solution is use eval(), this conver json data to javascript object so you can easly get a value by giving key.

ExtJS - SyntaxError: missing ) in parenthetical

I am writing some code to educate myself in the ways of ExtJS. I am also new to JSON so hopefully this question will be easy for you to answer. I am trying to retrieve some data from a basic web service that I have written which should be returning its results as JSON (seeing as I am new to JSON - it could be that that is broken).
The error I am getting is
SyntaxError: missing ) in
parenthetical
The JSON that I am returning from my web service is
{
"rows": [
{
"id": "100000",
"genre_name": "Action",
"sort_order": "100000"
}, {
"id": "100002",
"genre_name": "Comedy",
"sort_order": "100002"
}, {
"id": "100001",
"genre_name": "Drama",
"sort_order": "100001"
}]
}
My ExtJS code is as below. The loadexception callback is where I have retrieved the JSON and error above from
var genres = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method: 'POST',
url: 'http://localhost/extjs_training/Demo_WebService/Utility.asmx/GetGenres',
failure: function(response, options){
Ext.get('my_id').dom.innerHTML = 'Load failed: ' + response.status;
}
}),
reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],
root: 'rows'
}),
listeners: {
loadexception: function (proxy, options, response, e) {
var result = response.responseText;
Ext.MessageBox.alert('Load failure', e + " ..... " + result);
}
}
});
var loadSuccess = genres.load({
callback: function(r, options, success){
Ext.get('my_id').dom.innerHTML = 'Load status: success=' + success;
}
});

Is the JSON you included above what is actually being returned from the call, or what you are anticipating it should look like? The string you included looks clean, but it looks like you formatted it as well. I'm not sure if the space after "id": is allowed, either. It might not be a big deal, though.
The missing parenthetical typically indicates that something in the JSON is wrong. It could be an extra character before/after the string. Use Firebug to examine what you are getting back, and make sure it is clear of any extra characters.

http://www.sencha.com/forum/showthread.php?10117-Solved-missing-%29-in-parenthetical.
Echoeing two statements was the reason in my case. So check your echoes again.