December 22 2006 by
Andrew Powell
Based on some of
Ray's suggestions, I've re-tooled the Click-2-Call-U sample. We're no longer returning datasets, but just the raw data returned from Vonage. And like Peter over at
ColdFusion Weekly asked, no I'm not logging userame/password pairs. To that point, the Coldfusion code is here too, in the interest of full disclosure:
Client-side HTML:
<!DOCTYPE html PUBLIC " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Example 6 - Vonage/CF/Spry Integration</title>
<script type="text/javascript" src="/assets/js/spry/SpryData.js"></script>
<script type="text/javascript">
function makeVonageCall(phoneForm)
{
var numberToCall = phoneForm.phoneNumber.value;
var userName = phoneForm.userName.value;
var password = phoneForm.password.value;
var srcNum = phoneForm.userNumber.value;
var srcURL = "makeCall.cfm?numberToCall=" + escape(numberToCall) + "\&myVonageUserName=" + escape(userName) + "\&myVonagePassword=" + escape(password) + "\&myPhoneNumber=" + escape(srcNum);
Spry.Utils.loadURL("GET",srcURL, true, callHandler);
}
function callHandler(request)
{
var statusCode = "Vonage Status: " + request.xhRequest.responseText;
hideLoader();
alert(statusCode);
}
function showLoader()
{
Spry.Utils.setInnerHTML('callStatus', '<img src="/assets/images/ajax-loader.gif"/>');
}
function hideLoader()
{
Spry.Utils.setInnerHTML('callStatus', '<br/>');
}
</script>
<style>
body
{
font-family:"Microsoft Sans Serif", Arial, Helvetica, sans-serif;
font-size: 11px;
}
.heading
{
font-weight: bold;
}
.description
{
width: 600px;
}
.capMe
{
text-decoration: capitalize;
}
.SpryHiddenRegion
{
visibility: hidden;
}
</style>
</head>
<body>
<p>Use this form to request a callback. The mechanism uses <a href="http://www.vonage.com" target="_blank">Vonage's</a> click-to-call
mechanism to initiate a call between the number supplied and a pre-defined Vonage user.</p>
<form id="phoneForm" name="phoneForm">
Number To Call (US Phone Numbers Only): <input type="text" id="phoneNumber" name="phoneNumber" /><br/>
Vonage User Name: <input type="text" id="userName" name="userName" /><br/>
Vonage Password: <input type="password" id="password" name="password" /><br/>
Your Vonage Phone Number (format: 14045551212): <input type="text" id="userNumber" name="userNumber" /><br/>
<input type="button" id="phoneButton" value="Start Callback" name="phoneButton" onclick="showLoader();makeVonageCall(phoneForm);"/>
</form>
<div id="callStatus">
</div>
</body>
</html>
Server-side CFML:
<cfif isDefined("URL.numberToCall") and URL.numberToCall NEQ "">
<cfset myVonageUserName = URL.myVonageUserName/>
<cfset myVonagePassword = URL.myVonagePassword/>
<cfset myPhoneNumber = URL.myPhoneNumber/>
<cfset numberToCall = URL.numberToCall />
<cfif isValid("telephone",numberToCall)>
<cfset vonageURL = "https://secure.click2callu.com/tpcc/makecall?username=#myVonageUserName#&password=#myVonagePassword#&fromnumber=#myPhoneNumber#&tonumber=#numberToCall#"/>
<!--- Initiate the click-to-call request via CFHTTP --->
<cfhttp url="#vonageURL#" result="callResult">
<cfif mid(callResult.fileContent,1,4) NEQ "000:">
<cfoutput>#callResult.fileContent#</cfoutput>
<cfelse>
<cfoutput>#mid(callResult.fileContent,5,len(callResult.fileContent))#</cfoutput>
</cfif>
</cfif>
</cfif>
I like to try to provide working samples of my work, so here is the sample of this functionality:
Spry-Vonage Sample
Posted in ColdFusion | Spry | AJAX | Vonage | 
0 comments
December 08 2006 by
Andrew Powell
Ok, I was poking around for a way to use
Vonage's Click-To-Call service with Address Book in OS X. I found a
way to do that via AppleScript and was quite pleased with the way it worked. Then I took a look at the code and thought to myself: "I can do that with ColdFusion." I took it a bit further and thought: "I can do that with ColdFusion and Spry!"
I would like to say that this was incredibly difficult to do, but it's not. That's the great thing about ColdFusion and Spry. Developers can leverage these tools to do some pretty cool things.
The CFM page is pretty basic. I do some validation to make sure we're only going to use US numbers because I'm not really into running up a phone bill. This is only going to run on CFMX7 because of the use of the isValid() function. You can modify it to use your own regex validation if you like to make it backwards compatible with older CF versions.
<cfif isDefined("URL.numberToCall") and URL.numberToCall NEQ "">
<cfset myVonageUserName = "yourUserName"/>
<cfset myVonagePassword = "yourPassword"/>
<cfset myPhoneNumber = "14045551212"/>
<cfset numberToCall = url.numberToCall />
<cfif isValid("telephone",numberToCall)>
<cfset vonageURL = "https://secure.click2callu.com/tpcc/makecall?username=#myVonageUserName#&password=#myVonagePassword#&fromnumber=#myPhoneNumber#&tonumber=#numberToCall#"/>
<!--- Initiate the click-to-call request via CFHTTP --->
<cfhttp url="#vonageURL#" result="callResult">
<cfif mid(callResult.fileContent,1,3) NEQ "000:">
<cfsavecontent variable="retXML">
<vonageCall>
<results>
<resultText>Call Initiated To <cfoutput>#numberToCall#</cfoutput></resultText>
<resultCode><cfoutput>#callResult.statusCode#</cfoutput></resultCode>
</results>
</vonageCall>
</cfsavecontent>
<cfelse>
<cfsavecontent variable="retXML">
<vonageCall>
<results>
<resultText>Call Failed To <cfoutput>#numberToCall#</cfoutput> - Vonage Error</resultText>
</results>
</vonageCall>
</cfsavecontent>
</cfif>
<cfelse>
<cfsavecontent variable="retXML">
<vonageCall>
<results>
<resultText>Call Failed To <cfoutput>#numberToCall#</cfoutput> - Invalid Phone Number</resultText>
</results>
</vonageCall>
</cfsavecontent>
</cfif>
<cfelse>
<cfsavecontent variable="retXML">
<vonageCall>
<results>
<resultText>Call Not Yet Placed</resultText>
</results>
</vonageCall>
</cfsavecontent>
</cfif>
<cfcontent type="text/xml">
<cfoutput>#retXML#</cfoutput>
</cfcontent>
The HTML is even more rudimentary. There is some javascript in there to re-load the dataset when the button is clicked, but other than that, it's very straghtforward.
<!DOCTYPE html PUBLIC " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Example 6 - Vonage/CF/Spry Integration</title>
<script type="text/javascript" src="/assets/js/spry/xpath.js"></script>
<script type="text/javascript" src="/assets/js/spry/SpryData.js"></script>
<script type="text/javascript" src="/assets/js/spry/SpryXML.js"></script>
<script type="text/javascript">
var dsCall = new Spry.Data.XMLDataSet("makeCall.cfm", "/vonageCall/results", { useCache: false});
function makeVonageCall(phoneForm)
{
var numberToCall = phoneForm.phoneNumber.value;
dsCall.setURL("makeCall.cfm?numberToCall=" + numberToCall);
dsCall.loadData();
}
</script>
<style>
body
{
font-family:"Microsoft Sans Serif", Arial, Helvetica, sans-serif;
font-size: 11px;
}
.heading
{
font-weight: bold;
}
.description
{
width: 600px;
}
.capMe
{
text-decoration: capitalize;
}
.SpryHiddenRegion
{
visibility: hidden;
}
</style>
</head>
<body>
<p>Use this form to request a callback. The mechanism uses <a href="http://www.vonage.com" target="_blank">Vonage's</a> click-to-call
mechanism to initiate a call between the number supplied and a pre-defined Vonage user.</p>
<form id="phoneForm" name="phoneForm">
Callback Phone Number (US Phone Numbers Only): <input type="text" id="phoneNumber" name="phoneNumber" /><br/>
<input type="button" id="phoneButton" value="Start Callback" name="phoneButton" onclick="makeVonageCall(phoneForm)"/>
</form>
<div spry:region="dsCall" class="SpryHiddenRegion">
<div spry:state="loading"><img src="/assets/images/ajax-loader.gif"/></div>
<div spry:state="error">An error occured loading your dataset.</div>
<div spry:state="ready">
<p>
<span style="font-weight:bold" spry:content="Status: "></span><span spry:content="{dsCall::resultText}"></span>
</p>
</div>
</div>
</body>
</html>
I almost posted a working sample of this, but then I got wise because I was using my own Vonage account to test it. A live, working sample, would have people using my account to have my phone dial any number at any given time. Not good. I'm not going to post a working copy of this sample that uses my account info.
However...
If you have an account with Vonage, you can take a look at
this sample and use your own Vonage account to test the sample.
Posted in ColdFusion | Spry | AJAX | Vonage | 0 comments
November 16 2006 by
Andrew Powell
I decided to switch from
Skype to
Vonage because, well, Skype was pretty much the highest amount of suckatude that I've seen in a VoIP solution.
So I get this nice nifty broadband phone for my Vonage account and hook it up to my network, go through the hoops of setting the account up and what-not. Turn the device on and it lights up green. Green is always a happy colour. We like green lights. It means stuff is working....most of the time. I soon found out that I could make calls out, but not receive them. Slight problem.
I had the device sitting behind my
NetScreen 5XP firewall. I tried all the suggestions to get it working to no avail. So I had to do what I like to call some "creative engineering". I like to think that
I know a few things about designing networks. I've done some wild and crazy setups in my time, but this is one of the most rigged.
I put the Vonage device as the first connection after my DSL modem. It is making the connection to my ISP. Behind it, in it's NAT range is the NetScreen. The NetScreen is doing NAT to my network. Basically, I'm doing double NAT. NAT from the Vonage device to the firewall and NAT from the firewall to my network. The Vonage device is set to send all ports (except the Vonage ports) through to the firewall.
I did this because I have a TON of ACLs set up in my firewall and I really didn't think that the security offered by the Vonage device is all that great. I feel a bit more secure now, but this is sure one hokey setup. We'll see how long it holds.
Posted in General | Vonage | 1 comments