I have implemented desktop browser based U2F using the firefox-built-in and chrome-with-javascript U2F API. I've followed the basic recipe here:
https://github.com/castle/ruby-u2f
For each physical device, I have 4 attributes:
certificate
key_handle
public_key
counter
I believe, but I am not certain, that having harvested this information about this physical device, I can now repurpose it when rendering the exact same web page on a mobile device to implement WebAuthn, which, instead of rendering a web page for the user to authenticate, will render a mobile-os-native interface to request NFC authentication (if the device has NFC).
I am trying to use the 4 attributes above to render javascript with nav.credentials.get, but I am stuck.
It's not clear to me which of the following is true
A) You CAN use the credentials / information collected and validated during the U2F device registration process on desktop web for authentication on mobile with web authn
B) If you wish to you use web authn on mobile so it can trigger a native mobile NFC authentication process, you must, in addition to the regular U2F flow, also secretly process webauthn registration (by "secret" i don't mean you're intentionally not telling the user that they're doing this, but rather, the user is unaware of the distinction between A and B).
Following the example linked above, their javascript is something like:
var appId = <%= #app_id.to_json.html_safe %>
var registerRequests = <%= #registration_requests.to_json.html_safe %>;
var signRequests = <%= #sign_requests.as_json.to_json.html_safe %>;
u2f.register(appId, registerRequests, signRequests, function(registerResponse) {
var form, reg;
if (registerResponse.errorCode) {
return alert("Registration error: " + registerResponse.errorCode);
}
form = document.forms[0];
response = document.querySelector('[name=response]');
response.value = JSON.stringify(registerResponse);
form.submit();
});
Using the mozilla example here:
https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredentialRequestOptions
I am attempting to adapt that into something like:
var appId = <%= #app_id.to_json.html_safe %>
var registerRequests = <%= #registration_requests.to_json.html_safe %>;
var signRequests = <%= #sign_requests.as_json.to_json.html_safe %>;
var options = {
challenge: new Uint8Array([/* bytes sent from the server */]),
rpId: "example.com" /* will only work if the current domain
is something like foo.example.com */
userVerification: "preferred",
timeout: 60000, // Wait for a minute
allowCredentials: [
{
transports: "usb",
type: "public-key",
id: new Uint8Array(26) // actually provided by the server
},
{
transports: "internal",
type: "public-key",
id: new Uint8Array(26) // actually provided by the server
}
],
extensions: {
uvm: true, // RP wants to know how the user was verified
loc: false,
txAuthSimple: "Could you please verify yourself?"
}
};
navigator.credentials.get({ "publicKey": options })
.then(function (credentialInfoAssertion) {
// send assertion response back to the server
// to proceed with the control of the credential
// update the hidden form input then
form.submit();
}).catch(function (err) {
console.error(err);
});
But it's not clear how I map the U2F attributes to the webauthn attributes. I can't seem to find a concrete example of this working, but I am certain it does work because GitHub and DropBox both have this exact flow - you register the U2F device on desktop web, and then the NFC device is usable on native mobile.
The reason, by the way, that I want to implement this is that the user, on native mobile, never has to leave your web app, the native NFC interface is rendered and they are magically taken back to your web app. What I currently have is, if mobile is detected, render the OTP interface, which requires the user to switch over to an authenticator app like Authy, and then copy the OTP and go back to mobile web. It's much nicer to just pull our your key and buzz it.
Thanks for any help,
Kevin
When using the navigator.credentials.get(), make sure to set the extensions: {appid: u2f_appid}, i.e. the U2F appId parameter during u2f.register call. In my case I used the origins.json trustedfacet list URL.
https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredentialRequestOptions/extensions
The reason you need to set extensions.appid parameter is if WebAuthn rpId fails, it will fallback to older U2F using the extensions.appid parameter
I am working on a project which provides video calling from web to phone (iOS or Android). I am using QuickBlox + WebRTC to implement video calling. From web I want to pass some additional info along with call request like caller name, etc. I looked into the JavaScript documentation of QuickBlox + WebRTC which suggest to use the following code (JavaScript):
var array = {
me: "Hari Gangadharan",
}
QB.webrtc.call(callee.id, 'video', array);
I have implemented the same code but unable to get the info attached with session request on the receiver side (getting nil reference in iOS method).
- (void)didReceiveNewSession:(QBRTCSession *)session userInfo:(NSDictionary *)userInfo {
//Here userInfo is always nil
}
Please use the following structure
var array = {
"userInfo": {
"me":"Hari Gangadharan",
}
}
because our iOS SDK uses "userInfo" as a key for parsing custom user info
Check Signaling v1.0
I'm new to Cordova, any help would be appreciated.
I created a new Cordova Project in VS2015 and added the Cordova SMS plugin to my project (https://www.npmjs.com/package/cordova-sms-plugin).
I added this code to /www/scripts/index.js function onDeviceReady (as per documentiation for plugin):
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );
var numberString = "aoeuaeu";
var bypassAppChooser = true;
//CONFIGURATION
var options = {
replaceLineBreaks: false,
android: {
intent: 'INTENT' // send SMS with the native android SMS messaging
}
};
var successSMS = function () { alert('Message sent successfully'); };
var errorSMS = function (e) { alert('Message Failed:' + e); };
sms.send("0811231234", "Testing123", options, successSMS, errorSMS);
I debug the project using Debug, Android, Ripple - Nexus (Galaxy) selected options. When I place a breakpoint on the sms.send line of code and I add a watch for 'sms.send', I can see the object exists.
When I single step, this line in sms.js seems to be the last line that executes:
// fire
exec(
success,
failure,
'Sms',
'send', [phone, message, androidIntent, replaceLineBreaks]
);
I then get the following error message in Ripple:
'Sms.send We seem to be missing some stuff :( What is kinda cool though you can fill in the textarea to pass a json object to the callback you want to execute).'
I can see that all of the objects in that line is defined (success, failure, phone, message, androidIntent, replaceLineBreaks). When I 'step into' this line, it continues to execute code in ripple.js, but it becomes hard to follow for a person, since there are no line breaks in this file.
What am I doing wrong? I've read through all the documentation I can find & searched stackoverflow questions and can't seem to find any solutions to the problem.
I've uploaded this entire project (zipped), which can be downloaded at:
https://drive.google.com/file/d/0BwWgTMh-JLbfNHV0MlE5Yk5IZ3M/view?usp=sharing
Thanks in advance
Thank you Cordova team at Microsoft for helping me with an answer:
"Ripple has the ability to emulate some but not all plugins. SMS is not one of the plugins that it can fully emulate. However, in the message that pops up, you do have the ability to hit the Success or Fail buttons which will report back to the app that it was successful or not in sending the SMS. While that doesn’t actually send a message, it does let you test your app to see how it behaves for different results.
I tried the bit of sample code you included in the first email. In Ripple, I was able to change the alert by hitting the different buttons.
Trying other deployment methods, in both the VS Android Emulator and the Google Emulator they showed failure alert messages that they don’t support SMS messages. I then launched it on an Android phone device and it said it was successful.
So I believe your options are mainly using Ripple to fake sending of messages or using a device for testing."
I'm developing a titanium app that needs to display a Banner Message under iOS when a push notification comes in. Therefore I used the following code to register on incoming push notifications:
var callbacks = {
types: [
Titanium.Network.NOTIFICATION_TYPE_BADGE,
Titanium.Network.NOTIFICATION_TYPE_SOUND,
Titanium.Network.NOTIFICATION_TYPE_ALERT
],
success:function(e){
console.log("success");
},
error:function(e){
console.log("error");
},
callback: function(e){
console.log("new push notification")
//code for displaying banner message would go here!
}
};
if(Ti.App.iOS.registerUserNotificationSettings){ //iOS 8 +
function onUserNotificationSettings(){
delete callbacks.types;
Ti.Network.registerForPushNotifications(callbacks);
Ti.App.iOS.removeEventListener("usernotificationsettings",onUserNotificationSettings);
}
Ti.App.iOS.addEventListener("usernotificationsettings",onUserNotificationSettings)
Ti.App.iOS.registerUserNotificationSettings(callbacks)
}else{ //up to iOS 7
Ti.Network.registerForPushNotifications(callbacks)
}
But the callback function does not get called when the app is in background. So, I also can't display the banner message there, since the code won't get executed.
What could be the reason why the callback does not get called when the app is in background? When it is in foreground, it works perfectly. Is it normal? If yes, where else would I put my code to display the banner message?
I'm using SDK version 3.4.0 on an iPhone 5 with iOS 8.1.1
Please note that sending the banner text through the apn-payload is not the solution. There are other usecases. For example, when the server needs to tell the client that there is new content to sync, where the user does not even need to get notified for. The client should just download the new content in background just when the notification arrives.
You need to register for the remote-notification background mode. This will wake up your app and give you execution time when you send the notifications.
For the record this is in the Appcelerator docs here
I've found out how to do it!
The callback will get called when the app is in background. All I had to do for it was to add the following to my tiapp.xml in ti:app/ios/plist/dict:
<key>UIBackgroundModes</key>
<array>
<string>remote-notification</string>
</array>
After that, everything works fine!
Is it possible to detect if the user is accessing through the browser or application using JavaScript?
I'm developing a hybrid application to several mobile OS through a web page and a PhoneGap application and the goal would be to:
Use the same code independently of the deployment target
Add PhoneGap.js file only when the user agent is an application
You could check if the current URL contains http protocol.
var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;
if ( app ) {
// PhoneGap application
} else {
// Web page
}
Quick solution comes to mind is,
onDeviceReady
shall help you. As this JS call is invoked only by the Native bridge (objC or Java), the safari mobile browser will fail to detect this. So your on device app(phone gap) source base will initiate from onDeviceReady.
And if any of the Phonegap's JS calls like Device.platform or Device.name is NaN or null then its obviously a mobile web call.
Please check and let me know the results.
I figured out a way to do this and not rely on deviceready events thus, keeping the web codebase intact...
The current problem with using the built in deviceready event, is that when the page is loaded, you have no way of telling the app: "Hey this is NOT running on an mobile device, there's no need to wait for the device to be ready to start".
1.- In the native portion of the code, for example for iOS, in MainViewController.m there's a method viewDidLoad, I am sending a javascript variable that I later check for in the web code, if that variable is around, I will wait to start the code for my page until everything is ready (for example, navigator geolocation)
Under MainViewController.m:
- (void) viewDidLoad
{
[super viewDidLoad];
NSString* jsString = [NSString stringWithFormat:#"isAppNative = true;"];
[self.webView stringByEvaluatingJavaScriptFromString:jsString];
}
2.- index.html the code goes like this:
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){;
myApp.run();
}
try{
if(isAppNative!=undefined);
}catch(err){
$(document).ready(function(){
myApp.run();
});
}
PhoneGap has window.PhoneGap (or in Cordova, it's window.cordova or window.Cordova) object set. Check whether that object exists and do the magic.
Inside the native call where the url for the phonegap app is loaded you add a parameter target with value phonegap. So the call for android becomes something like this.
super.loadUrl("file:///android_asset/www/index.html?target=phonegap");
Your website using this code won't be called with the extra parameter, so we now have something different between the two deploying platforms.
Inside the javascript we check if the parameter exists and if so we add the script tag for phonegap/cordova.
var urlVars = window.location.href.split('?');
if(urlVars.length > 1 && urlVars[1].search('target=phonegap') != -1){
//phonegap was used for the call
$('head').append('<script src="cordova.js"></script>');
}
A small caveat: this method requires to change the call to index.html in phonegap for each different targeted mobile platform. I am unfamiliar where to do this for most platforms.
what if you try following :
if(window._cordovaNative) {
alert("loading cordova");
requirejs(["...path/to/cordova.js"], function () {
alert("Finished loading cordova");
});
}
I am using the same code for both phonegap app and our web client. Here is the code that I use to detect if phonegap is available:
window.phonegap = false;
$.getScript("cordova-1.7.0.js", function(){
window.phonegap = true;
});
Keep in mind that phonegap js file is loaded asynchronously. You can load it synchronously by setting the correct option of a nifty jquery $.getScript function.
Note that approach does make an extra GET request to grab phonegap js file even in your webclient. In my case, it did not affect the performance of my webclient; so it ended up being a nice/clean way to do this.Well at least until someone else finds a quick one-line solution :)
It sounds like you are loading another webpage once the webview starts in the Phonegap app, is that correct? If that's true then you could add a param to the request url based on configuration.
For example, assuming PHP,
App.Config = {
target: "phonegap"
};
<body onload="onbodyload()">
var onbodyload = function () {
var target = App.Config.target;
document.location = "/home?target=" + target;
};
Then on the server side, include the phonegap js if the target is phonegap.
There is no way to detect the difference using the user agent.
The way I'm doing it with is using a global variable that is overwritten by a browser-only version of cordova.js. In your main html file (usually index.html) I have the following scripts that are order-dependent:
<script>
var __cordovaRunningOnBrowser__ = false
</script>
<script src="cordova.js"></script> <!-- must be included after __cordovaRunningOnBrowser__ is initialized -->
<script src="index.js"></script> <!-- must be included after cordova.js so that __cordovaRunningOnBrowser__ is set correctly -->
And inside cordova.js I have simply:
__cordovaRunningOnBrowser__ = true
When building for a mobile device, the cordova.js will not be used (and instead the platform-specific cordova.js file will be used), so this method has the benefit of being 100% correct regardless of protocols, userAgents, or library variables (which may change). There may be other things I should include in cordova.js, but I don't know what they are yet.
Ive ben struggling with this aswell, and i know this is an old thread, but i havent seen my approach anywhere, so thought id share incase itll help someone.
i set a custom useragent after the actual useragent :
String useragent = settings.getUserAgentString();
settings.setUserAgentString(useragent + ";phonegap");
that just adds the phonegap string so other sites relying on detecting your mobile useragent still works.
Then you can load phonegap like this:
if( /phonegap/i.test(navigator.userAgent) )
{
//you are on a phonegap app, $getScript etc
} else {
alert("not phonegap");
}
To my mind you try to make issue for self. You didn't mentioned your development platform but most of them have different deployment configuration. You can define two configurations. And set variable that indicates in which way code was deployed.
In this case you don't need to care about devices where you deployed your app.
Short and effective:
if (document.location.protocol == 'file:') { //Phonegap is present }
Similar to B T's solution, but simpler:
I have an empty cordova.js in my www folder, which gets overwritten by Cordova when building. Don't forget to include cordova.js before your app script file (it took my one hour to find out that I had them in wrong order...).
You can then check for the Cordova object:
document.addEventListener('DOMContentLoaded', function(){
if (window.Cordova) {
document.addEventListener('DeviceReady', bootstrap);
} else {
bootstrap();
}
});
function bootstrap() {
do_something()
}
New solution:
var isPhoneGapWebView = location.href.match(/^file:/); // returns true for PhoneGap app
Old solution:
Use jQuery, run like this
$(document).ready(function(){
alert(window.innerHeight);
});
Take iPhone as example for your mobile application,
When using PhoneGap or Cordova, you'll get 460px of WebView, but in safari, you'll lose some height because of browser's default header and footer.
If window.innerHeight is equal to 460, you can load phonegap.js, and call onDeviceReady function
Nobody mentioned this yet, but it seems Cordova now supports adding the browser as a platform:
cordova platforms add browser
This will automatically add cordova.js during run-time, which features the onDeviceReady event, so that you do not need to fake it. Also, many plugins have browser support, so no more browser hacks in your code.
To use your app in the browser, you should use cordova run browser. If you want to deploy it, you can do so using the same commands as the other platforms.
EDIT: forgot to mention my source.
Solution: Patch index.html in Cordova and add cordova-platform="android" to <html> tag, so that cordova-platform attribute will be only present in Cordova build and missing from original index.html used for web outside of Cordova.
Pros: Not rely on user agent, url schema or cordova API. Does not need to wait for deviceready event. Can be extended in various ways, for example cordova-platform="browser" may be included or not, in order to distinguish between web app outside of Cordova with Cordova's browser platform build.
Merge with config.xml
<platform name="android">
<hook src="scripts/patch-android-index.js" type="after_prepare" />
</platform>
Add file scripts/patch-android-index.js
module.exports = function(ctx) {
var fs = ctx.requireCordovaModule('fs');
var path = ctx.requireCordovaModule('path');
var platformRoot = path.join(ctx.opts.projectRoot, 'platforms/android');
var indexPath = platformRoot + '/app/src/main/assets/www/index.html';
var indexSource = fs.readFileSync(indexPath, 'utf-8');
indexSource = indexSource.replace('<html', '<html cordova-platform="android"');
fs.writeFileSync(indexPath, indexSource, 'utf-8');
}
Notes: For other than android, the paths platforms/android and /app/src/main/assets/www/index.html should be adjusted.
App can check for cordova-platform with
if (! document.documentElement.getAttribute('cordova-platform')) {
// Not in Cordova
}
or
if (document.documentElement.getAttribute('cordova-platform') === 'android') {
// Cordova, Android
}