FREE LOOK

UES Dashboard with WebSockets enable Gadgets

With the use of Websockets capability of Jaggery, you can create Websockets enabled gadgets within UES.

1. Create new directory for our gadget, name it dummy-chat.
2. Create your gadget XML file with the following content,

    <?xml version="1.0" encoding="UTF-8" ?>
    <Module>
        <ModulePrefs title="WS Dummy chat application"
                    height="350"
                    description="This is a dummy sample gadget to showcase Web socket capability"
                    tags="chat">
           <Require feature="dynamic-height"/>
        </ModulePrefs>
        <Content type="html">
           <![CDATA[
           <script src="/portal/gadgets/dummy-chat/js/dummy-chat.js" type="text/javascript"></script>
           <div id="gadget-wrapper">
                   <div id="msg-content"></div>
                   <div id="gadget-area-div">
                   <textarea rows="4" cols="50" id="msg"></textarea><br/>
                   <button type="button" onclick="send()">Send Me!</button>
                   </div>
           </div>
           ]]>
        </Content>
    </Module>

Name this XML file dummy-chat.xml and save the content inside our gadget directory.

3. Create directory to store JavaScript files of our gadget, name it js.
4. Create dummy-chat.js file with following content inside js directory.

    var url,ws;
    window.onload = function WindowLoad(event) {
       url = wss://localhost:9443/ws-chat/server.jag;
       ws = new WebSocket(url);
       //event handler for the message event in the case of text frames
       ws.onopen = function() {
       console.log("web Socket onopen. ");
       };

       ws.onmessage = function(event) {
       console.log("web Socket Onmessage from Server. " + event.data);
       var reply = document.getElementById(msg-content);
       reply.innerHTML = reply.innerHTML + <br/> + event.data;
       };

       ws.onclose = function() {
       console.log("web Socket onclose. ");

       };
    }

    //send msg to the server
    function send(){
       var msg = document.getElementById(msg);
       ws.send(msg.value);
       console.log("Client message "+msg.value);
       msg.value = ;
    }

5. If you wish to have eye-catching thumbnail and banner for your gadget, you can store them inside dummy-chat directory.Find our directory structure here,

.
??? banner.jpg
??? dummy-chat.xml
??? js
?   ??? dummy-chat.js
??? thumbnail.jpg

We are done with the Websocket client implementation. Client application here provides a text field and button to send messages, and provides a place where messages from the server printed.

Lets move to the server implementation, This dummy server acknowledges all messages and will print the same message with some dummy text.

I�m using the same server implementation from jaggey Websocket doc[1] with a small modification.

1. Create a new jaggery app and name it ws-chat.

2. Create server.jag with following content inside ws-chat directory.

    <%
    var log = new Log();
    webSocket.ontext = function (data) {
        log.info(Client Sent : + data);
        var ws = this;
        setTimeout(function () {
           var currentDate = new Date();
           ws.send("message received !!");
           ws.send(currentDate+" : "+data);
        }, 1000);
    };
    
    webSocket.onbinary = function (stream) {
        log.info(Client Streamed : + stream.toString());

    };
    %>

Server will send �message received !!�  and the received message with timestamp to the client.

Lets move to the deployment of this gadget client and the server,

1. Copy ws-chat jaggery application and host it inside <UES_HOME>/repository/deployment/server/jaggeryapps/
2. Move dummy-chat gadget to <UES_HOME>/repository/deployment/server/jaggeryapps/portal/gadgets/
3. Start UES instance by running ./wso2server.sh from <UES_HOME>/bin directory.

You can verify availability of the new gadget by browsing, http://localhost:9763/store/assets/gadget/
Lets bookmark this gadget and create our dashboard from dummy-chat gadget.Sign-in to the portal from http://localhost:9763/portal and follow creating a dashboard guide from here[2].
Browse https://localhost:9443/<DASHBOARD_NAME>/ while logged into the UES and you can use dummy-chat gadget within the dashboard.

[1] http://jaggeryjs.org/apidocs/websocket.jag
[2] http://docs.wso2.org/display/UES100/Creating+a+Dashboard

download file now

UES 357 Using IP address or domain name to access UES gadgets

You may get the following error and your gadgets wont work as expected if you try to use an IP address/domain name instead of the default URL with https.

Eg :-

Default :
https://localhost:9443/portal/gadgets/intro-gadget-2/intro-gadget-2.xml

Updated :
https://10.100.0.128:9443/portal/gadgets/intro-gadget-2/intro-gadget-2.xml
or
https://ues.udara.me/portal/gadgets/intro-gadget-2/intro-gadget-2.xml

Detailed error: 500 javax.net.ssl.SSLException: hostname in certificate didnt match: <10.100.1.128> != <localhost> shindig.js:9

By default all WSO2 products shipped with a self signed certificate for the domain localhost, to overcome this issue you have to create and add a certificate for your IP/Domain name.
 1. Lets assume you need to add a self signed certificate for your IP address(10.100.0.128), run following command and provide information when required, here Im using wso2carbon as my keystore password so I dont have to do any configuration changes.

keytool -genkey -alias ues -keyalg RSA -keystore  ues.jks -keysize 2048

Note :- I have created ues.jks within /home/udara/key/ directory and you have to provide your IP or domain name as your first and last name (CN).

udara@thinkPad:~/key$ keytool -genkey -alias ues -keyalg RSA -keystore  ues.jks -keysize 2048
Enter keystore password: wso2carbon
Re-enter new password: wso2carbon
What is your first and last name?
  [Unknown]:  10.100.0.128
What is the name of your organizational unit?
  [Unknown]: 
What is the name of your organization?
  [Unknown]:  WSO2
What is the name of your City or Locality?
  [Unknown]:  Mountain View
What is the name of your State or Province?
  [Unknown]:  CA
What is the two-letter country code for this unit?
  [Unknown]:  US
Is CN=10.100.0.128, OU=Unknown, O=WSO2, L=Mountain View, ST=CA, C=US correct?
  [no]:  yes

Enter key password for <wso2carbon>
    (RETURN if same as keystore password):  wso2carbon
Re-enter new password: wso2carbon

2.Take a back-up of the current <UES_HOME>/repository/resources/security/ directory.

3.Run following command within <UES_HOME>/repository/resources/security/ directory to import your certificate into wso2carbon.jks.

Since I have created my ues.jks inside /home/udara/key/ directory in step-1,

udara@thinkPad:/wso2/support/workspace/wso2ues-1.0.0/repository/resources/security$ keytool -importkeystore -srckeystore /home/udara/key/ues.jks -destkeystore wso2carbon.jks -srcstoretype jks -deststoretype jks -srcstorepass wso2carbon -deststorepass wso2carbon
Entry for alias ues successfully imported.
Import command completed:  1 entries successfully imported, 0 entries failed or cancelled

4. Since we cant have two different private keys, lets delete the previous one.

udara@thinkPad:/wso2/support/workspace/wso2ues-1.0.0/repository/resources/security$ keytool -delete -alias wso2carbon -keystore wso2carbon.jks -storepass wso2carbon

5.  Lets export our public key from wso2carbon.jks and import it in to the client-truststore.jks.

I) Export public key from wso2carbon.jks as test.cer.

udara@thinkPad:/wso2/support/workspace/wso2ues-1.0.0/repository/resources/security$ keytool -export -keystore ues.jks -alias ues -file test.cer
Enter keystore password: 
Certificate stored in file <test.cer>

II) Import public certificate test.cer into client-truststore.jks.

udara@thinkPad:/wso2/support/workspace/wso2ues-1.0.0/repository/resources/security$ keytool -import -alias ues -file test.cer -keystore client-truststore.jks
Enter keystore password: 
Owner: CN=10.100.0.128, OU=Unknown, O=WSO2, L=Mountain View, ST=CA, C=US
Issuer: CN=10.100.0.128, OU=Unknown, O=WSO2, L=Mountain View, ST=CA, C=US
Serial number: 4a460fad
Valid from: Tue Apr 08 11:49:26 IST 2014 until: Mon Jul 07 11:49:26 IST 2014
Certificate fingerprints:
     MD5:  54:CD:B8:CD:7D:3D:B5:29:2B:A4:45:61:18:C9:5A:59
     SHA1: 53:03:B5:6D:32:D2:07:33:0D:49:7A:37:32:C7:13:DA:4E:29:60:28
     SHA256: C5:23:6D:09:F3:97:45:3A:F8:19:A1:F9:14:18:DE:BC:F3:C7:C9:C1:FF:0E:D9:E6:94:EF:DA:A3:6D:79:36:B9
     Signature algorithm name: SHA256withRSA
     Version: 3

Extensions:

#1: ObjectId: 2.5.29.14 Criticality=false
SubjectKeyIdentifier [
KeyIdentifier [
0000: 92 70 EA 1B 80 6B F8 07   84 0A D9 B0 FE 52 A3 41  .p...k.......R.A
0010: C0 DA B0 17                                        ....
]
]

Trust this certificate? [no]:  yes
Certificate was added to keystore

6. Since we have updated the key store alias from wso2carbon to ues, we have to modify this in few configs to make SSO works.

Update <UES_HOME>repository/conf/carbon.xml,

<KeyStore>
            <!-- Keystore file location-->
            <Location>${carbon.home}/repository/resources/security/wso2carbon.jks</Location>
            <!-- Keystore type (JKS/PKCS12 etc.)-->
            <Type>JKS</Type>
            <!-- Keystore password-->
            <Password>wso2carbon</Password>
            <!-- Private Key alias-->
            <KeyAlias>ues</KeyAlias>
            <!-- Private Key password-->
            <KeyPassword>wso2carbon</KeyPassword>
 </KeyStore>

If we take portal jaggery app(<UES_HOME>/repository/deployment/server/jaggeryapps/portal),

Update ssoConfiguration section in portal.json as follows,

    "ssoConfiguration" : {
        "enabled" : true,
        "issuer" : "portal",
        "identityProviderURL" : "%https.host%/sso/samlsso.jag",
        "keyStorePassword" : "wso2carbon",
        "identityAlias" : "ues",
        "responseSigningEnabled" : "true",
        "keyStoreName" : "/repository/resources/security/wso2carbon.jks",
        "storeAcs" : "%https.host%/store/sso.jag",
        "portalAcs" : "%https.host%/portal/sso.jag",
        "appAcsHost" : "%https.host%"
    }

You have to made the above update in all other jaggery apps within the  <UES_HOME>/repository/deployment/server/jaggeryapps/ directory.

Update ssoConfiguration section in portal/dashboard-template/files/login.jag.hbs, but in the lastest UES distribution you have to make this change within portal/dashboard-template/files/config.json.hbs.

        ssoConfiguration = {
            "enabled": true,
            "issuer": "{{appName}}",
            "identityProviderURL": config.ssoConfiguration.identityProviderURL,
            "keyStorePassword": "wso2carbon",
            "identityAlias": "ues",
            "responseSigningEnabled": "true",
            "keyStoreName": "/repository/resources/security/wso2carbon.jks"
        }

7. Restart WSO2 UES server.

If you browse Home>Configure>Key Stores>View Key Store, you can see the certificate of the private key section as follows.


By providing your IP address or domain name as the first and last name in step 1, you can overcome this host-name mismatch issue while loading UES gadgets.

You can refer this article[1] which explains how to create and add CA signed certificate to any Carbon product.

[1] . http://wso2.com/library/knowledge-base/2011/08/adding-ca-certificate-authority-signed-certificate-wso2-products/

download file now