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.

Skip Chromecast selection when sending from Google Chrome

I'm trying to send data to a chromecast, but I would like to send the data to a certain Chromecast directly, without selecting it in the Google Chrome.
I would like to skip the Chromecast selection before sending data.
This is want to avoid.
I dont want to select the cast but directly cast the data to it.
I've been checking the session object that we get from chrome.cast.initialize and it return something like this:
{
"sessionId": "b59f1754-fd13-48cd-b237-4952a69cade4",
"appId": "5B797F56",
"displayName": "url-cast-sender",
"statusText": "URL Cast ready...",
"receiver": {
"label": "rTflOUigItAIYPwoZZ87Uv5oK8yI.",
"friendlyName": "Sala de Juntas",
"capabilities": [
"video_out",
"audio_out"
],
"volume": {
"controlType": "attenuation",
"level": 1,
"muted": false,
"stepInterval": 0.05000000074505806
},
"receiverType": "cast",
"isActiveInput": null,
"displayStatus": null
},
"senderApps": [],
"namespaces": [
{
"name": "urn:x-cast:com.google.cast.debugoverlay"
},
{
"name": "urn:x-cast:com.url.cast"
}
],
"media": [],
"status": "connected",
"transportId": "b59f1754-fd13-48cd-b237-4952a69cade4"
};
As you can see there is label there, I've been trying to work with it but nothing.
The way the page request the connection to a chromecast is the following:
// click handlers
document.getElementById('requestSession').onclick = function () {
chrome.cast.requestSession(sessionListener, onErr);
};
Which seems to be the part that opens the selection alert in Google Chrome.
My work is a fork from url-cast-receiver and you can check a demo here.

Turns out it is not possible from the frontend part.
So I ended up using a library called SharpCaster created by Tapanila, in which there is a controller that allows you to do this kind of stuff, here you can find an example of it.
Had some trouble to make it work and also opened an issue in the repository, but ended up fixing it myself, issue #141.
WebPageCastingTester.cs
using System.Linq;
using System.Threading.Tasks;
using SharpCaster.Controllers;
using SharpCaster.Services;
using Xunit;
namespace SharpCaster.Test
{
public class WebPageCastingTester
{
private ChromecastService _chromecastService;
public WebPageCastingTester()
{
_chromecastService = ChromecastService.Current;
var device = _chromecastService.StartLocatingDevices().Result;
_chromecastService.ConnectToChromecast(device.First()).Wait(2000);
}
[Fact]
public async void TestingLaunchingSharpCasterDemo()
{
var controller = await _chromecastService.ChromeCastClient.LaunchWeb();
await Task.Delay(4000);
Assert.NotNull(_chromecastService.ChromeCastClient.ChromecastStatus.Applications.First(x => x.AppId == WebController.WebAppId));
await controller.LoadUrl("https://www.windytv.com/");
await Task.Delay(4000);
Assert.Equal(_chromecastService.ChromeCastClient.ChromecastStatus.Applications.First(x => x.AppId == WebController.WebAppId).StatusText,
"Now Playing: https://www.windytv.com/");
}
}
}

Sending email notifications for Events via Google Calendar API

I'm using the calendar.events.insert API to add an Event to my Calendar via the PHP client.
The event is being inserted correctly along with appropriate values as set by the API.
The same however is not able to trigger an email invite to the attendees. I looked around to find that the request needs to set the param sendNotifications as true.
The same doesn't seem to help either.
Here is a sample code:
var request = gapi.client.calendar.events.insert({
"calendarId" : calendarData.id,
"sendNotifications": true,
"end": {
"dateTime": eventData.endTime
},
"start": {
"dateTime": eventData.startTime
},
"summary": eventData.eventName,
"attendees": jQuery.map(eventData.attendees, function(a) {
return {'email' : a};
}),
"reminders": {
"useDefault": false,
"overrides": [
{
"method": "email",
"minutes": 15
},
{
"method": "popup",
"minutes": 15
}
]
}
});
Where eventData and calendarData are appropriate objects.
Although my main problem is with email invites being sent the first time, I also tried (as can be seen above) to set a reminder (using overrides). While the popup works as expected, I didn't receive an email update in this case either.
This makes me wonder whether this may be a permission issue - something which I need to enable for my app perhaps (the user would understandably need to know if my app is sending emails on their behalf)?

In the Google API Documentation for inserting events, the "sendNotifications" option is actually a parameter. You might want to put it in the request parameters instead of the body.
In Meteor
Note: In my Meteor application, I did did the request by hand, and I'm still new to JavaScript. I'm not sure how you would do that in plain JavaScript or with the calendar API, so I'll just put the Meteor code, hope it helps although it's a bit off-topic.
var reqUrl = "https://www.googleapis.com/calendar/v3/calendars/primary/events";
var payload = {
'headers' : {
'Authorization': "Bearer " + token,
'Content-Type': 'application/json'
},
'params': {
'sendNotifications': true
},
'data': {
"summary": summary,
"location": "",
"start": {
"dateTime": start
},
"end": {
"dateTime": end
},
"attendees": [
{
"email": "*********#gmail.com"
}
]
}
};
Meteor.http.post(reqUrl, reqParams, function () {});

#linaa is correct. Just ran into this issue myself.
In JS, this would look like:
var request = gapi.client.calendar.events.insert(
sendNotifications: true,
{
// request body goes here
}
);

For this you should set the "remindOnRespondedEventsOnly" value to "true".
which means, Whether event reminders should be sent only for events with the user’s response status “Yes” and “Maybe”.
You can find this information here.
Hope that helps!

event = service.events().insert(calendarId='primary', body=event, sendUpdates='all').execute()
this will work

Sencha Touch : How to get the simple json file as response using JSONP?

I am trying to make a simple JSONP call to get a json file which is loaded on the remote server.
Here is my simple json file loaded on the server.
{
"login": [
{
"themename": "NO",
"themeId": "1"
}
],
"homePage": [
{
"themename": "NO",
"themeId": "1"
}
],
"transactionDetails": [
{
"themename": "NO",
"themeId": "1"
}
]
}
My Controller code which calls this file to get the data
Ext.data.JsonP.request(
{
url : 'http://xx.xx:8080/ThemeSelector.json',
callback : 'someCallback' ,
someCallback: function(success, result) {
var text = result.responseText;
var object = Ext.decode(text);
themeName = object['homePage'][0].themename;
}
});
I am getting the error "Uncaught SyntaxError: Unexpected token : "
I know that the response should be wrapped in the object but not able to make the exact correction in json file and my code. Any help please?
Thanks

JSONP requires that the response be in the form of a JavaScript function call, passing the actual JSON object as the parameter. Plain JSON won't (can't) work.
The exact details of how the function call should look (in particular, the function name) can vary, but usually it's a parameter added to the HTTP request. The server should construct the response based on that parameter's value.

To work with JsonP, your json response should contain the callback parameter you've sent. Without that, callback function will not get called and produces error since it does require that. In your case, you just have plain JSON file on server to serve. So you cant use JsonP directly with this file.
If you've some control over server, then you can write a script that can do this for you like -
<?php
header('Content-Type: text/javascript');
$response = file_get_contents('ThemeSelector.json');
echo $_GET['someCallback'] . '(' . $response .' );';
?>
Then received json response will look something like -
Ext.data.JsonP.callback2 (
{
"login": [
{
"themename": "NO",
"themeId": "1"
}
],
"homePage": [
{
"themename": "NO",
"themeId": "1"
}
],
"transactionDetails": [
{
"themename": "NO",
"themeId": "1"
}
]
}
)

jQuery getJSON Undefined Error

Alright, so I've done a bit of searching and trying with no luck. I'm hoping that someone here can point me in the right direction. I have a JSON feed that I'm working with, which is supposed to output a variety of data. Currently, it just sends back and "UNDEFINED" response for all variables. Here is the JS I'm using:
$("#loaduserdata").click(function(){
$("#userdata tbody").html("");
$.getJSON("trendFetch", function(data){
$.each(data.list, function(i, data){
var jsondata = data.action;
console.log (jsondata);
});
}
);
I'm not sure where the problem exists, because console isn't giving me any kind of errors or any reason to think that the JSON isn't formatted correctly: http://i.imgur.com/ySpdR.png
For whatever it's worth, here is the code I'm using to generate the JSON - maybe there is an issue on that end?
$curl = curl_init();
$url = 'http://api.site.com';
curl_setopt_array($curl, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => $url
));
$resp = curl_exec($curl);
if($resp){
echo $resp;
header("Content-Type: application/json", true);
}
else {
echo 'Error - no response!';
}
curl_close($curl);
EDIT - including JSON output:
{
"status": "ok",
"list": {
"list_id": "2gz",
"title": "Test List",
"description": "description text...",
"image": [
"http://t2.gstatic.com/images?q=tbn:ANd9GcTz6_4aV6oHsI2kgJRRoSFCTWbew5ChTeBrAmXYh4Gez2J7usm8nwMOsA",
"http://cdn.list.ly/logos/default-list-image.png"
],
"views": 0,
"item_count": 1,
"curator_count": 1,
"follower_count": 1,
"listly_url": "http://api.list.ly/list/2gz-test-list",
"items": [
{
"item": {
"name": "Link 1",
"image": "http://t2.gstatic.com/images?q=tbn:ANd9GcTz6_4aV6oHsI2kgJRRoSFCTWbew5ChTeBrAmXYh4Gez2J7usm8nwMOsA",
"note": null,
"url": null,
"likes": 0,
"dislikes": 0
}
}
],
"suggested_items": []
}
}

echo $resp;
header("Content-Type: application/json", true);
should be:
header("Content-Type: application/json", true);
echo $resp;
You need to send HTTP headers before you output any content.

Set the header before any output
header("Content-Type: application/json", true);
echo $resp;

Musa was able to solve this for me, so in case someone Googles, the problem was that I was trying to use $.each when I didn't need to. Here is the correct code in case anyone is interested:
$.getJSON("trendFetch",function(data){
var tblRow =
"<tr>"
+"<td>"+data.list.list_id+"</td>"
+"<td>"+data.list.title+"</td>"
+"<td>"+data.list.description+"</td>"
+"</tr>"
$(tblRow).appendTo("#userdata tbody");
}
);

It'd help if you provided the JSON response.
When I'm having these types of issues, I typically take a step back (in the code) and console.log() earlier. For example, console.log(data) within the function(data) {}.
I think -- from looking at the output -- that your problem is that list isn't actually a list. data.list is, in fact, an object. Therefore .each() will iterate over the individual items (like list_id, title, etc). None of these have a .action property.
I can't see any action property, so I can't make a solution suggestion. It's possible that it's within the list object -- but you're still treating it like an array (as if it's list: [{}, {}] rather than list: {}). In this case, you either need to fix the returned JSON or get rid of the $.each(), and just console.log(data.list.action).