{"_id":"561264c70157131900b45863","__v":11,"project":"55edea207145f717001ac12c","category":{"_id":"55ffceca0e2b090d008633b2","pages":["55ffcedffeaf310d007dd6d6","55ffd0879e7ccf0d000a1e09","55ffddd1feaf310d007dd6e8","55ffdee4feaf310d007dd6ea","55ffe2336932a00d00ba7abf","55ffeb898c0c9d0d00dcacd0","55fff74c6932a00d00ba7b0c","55fff9df0c703d1900952fe1","55fffecb6932a00d00ba7b1b","55ffffd49e7ccf0d000a1e49","560001159e7ccf0d000a1e4d","560004126932a00d00ba7b2a","560006ef0c703d1900952ffc","560009fa8c0c9d0d00dcad0d","5601137f9137690d00335697","560120f34ea1b40d003bf1a4","5601221bf01fb90d00d4bf7e","5601274781a9670d006d1514","5601292881a9670d006d1516","56012ab3f01fb90d00d4bf88","56012c754ea1b40d003bf1b9","56012d824ea1b40d003bf1c0","56053e9df6b86e0d00284ad1","560541907c8e580d0001afe8","56123c063cf4bc0d00554e37","561264c70157131900b45863","561272d60157131900b45870","5612796d09bdc51700696fdf","56138c7a6fd7042b008f0187","5613a63d46c35f3500773c06","5613a79a44d6662b0071f5d9"],"project":"55edea207145f717001ac12c","version":"55edea207145f717001ac12f","__v":31,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-21T09:32:58.200Z","from_sync":false,"order":0,"slug":"sdk","title":"SDK"},"version":{"_id":"55edea207145f717001ac12f","project":"55edea207145f717001ac12c","__v":11,"createdAt":"2015-09-07T19:48:48.670Z","releaseDate":"2015-09-07T19:48:48.670Z","categories":["55edea217145f717001ac130","55ffa8038c0c9d0d00dcac72","55ffbaa48c0c9d0d00dcac88","55ffbd3e8c0c9d0d00dcac8b","55ffbee40e2b090d00863393","55ffc4306932a00d00ba7a85","55ffc66bfeaf310d007dd6c8","55ffc9c2feaf310d007dd6d1","55ffceca0e2b090d008633b2","560111b06811d00d00ceb34e","560262e74f15002100ee4445"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"user":"55ede9ed1452cd0d009e5e6b","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-10-05T11:53:43.817Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":32,"body":"The integrated system's users should be informed about the system's capability of protecting their accounts with Rublon. For web purposes, the `Rublon2FactorGUI` class has been prepared, responsible for generating a HTML code block called the \"Rublon Box\" that should be embedded in the integrated system. The block will contain information about the means to protect one's account.\n\nRublon Box also contains a frame with a list of the user's Trusted Devices, displayed only when the current browser is also a Trusted Device. The frame allows for removal of any Trusted Device.\n[block:html]\n{\n  \"html\": \"<div>\\n\\n  <!-- Nav tabs -->\\n  <ul class=\\\"nav nav-tabs langnav\\\" role=\\\"tablist\\\">\\n    <li role=\\\"presentation\\\" class=\\\"active\\\"><a href=\\\"#php\\\" aria-controls=\\\"php\\\" role=\\\"tab\\\" data-toggle=\\\"tab\\\">PHP</a></li>\\n    <li role=\\\"presentation\\\"><a href=\\\"#net\\\" aria-controls=\\\"net\\\" role=\\\"tab\\\" data-toggle=\\\"tab\\\">.NET</a></li>\\n    <li role=\\\"presentation\\\"><a href=\\\"#java\\\" aria-controls=\\\"java\\\" role=\\\"tab\\\" data-toggle=\\\"tab\\\">Java</a></li>\\n    <li role=\\\"presentation\\\"><a href=\\\"#python\\\" aria-controls=\\\"python\\\" role=\\\"tab\\\" data-toggle=\\\"tab\\\">Python</a></li>\\n  </ul>\\n\\n  <!-- Tab panes -->\\n  <div class=\\\"tab-content\\\">\\n    <div role=\\\"tabpanel\\\" class=\\\"tab-pane active\\\" id=\\\"php\\\">\\n \\n      <h3>Example PHP code</h3>\\n\\n<p>In order to generate the Rublon Box, you must instantiate a <code>Rublon2FactorGUI</code> class object and invoke its <code>userBox()</code> method or cast the object to a string.</p>\\n<!-- ngSwitchWhen: textarea --><!-- TODO: Make this generic using 'default' --><!-- ngSwitchWhen: api-header --><!-- ngSwitchWhen: code --><div class=\\\"ng-scope\\\" ng-switch-when=\\\"code\\\"><div type=\\\"section.type\\\" ng-model=\\\"section.data\\\" class=\\\"block-code block-show-code ng-isolate-scope ng-pristine ng-valid\\\">\\n  <div class=\\\"code-tabs ng-hide\\\" ng-show=\\\"data.codes.length > 1 || (data.codes.length == 1 &amp;&amp; data.codes[0].status)\\\">\\n    <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\\\"ng-scope tab on\\\" ng-class=\\\"{tab: true, on:$index==current, off:$index!=current}\\\" ng-repeat=\\\"tab in data.codes track by $id($index)\\\">\\n      <a href=\\\"\\\" ng-click=\\\"choose($index)\\\">\\n        <!-- ngIf: tab.status -->\\n        <!-- ngIf: !tab.status --><span class=\\\"ng-scope ng-binding\\\" ng-if=\\\"!tab.status\\\">\\n          PHP\\n        </span><!-- end ngIf: !tab.status -->\\n      </a><span class=\\\"ng-hide\\\" ng-hide=\\\"$last\\\">·</span>\\n    </div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\\n  </div>\\n\\n  <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\\\"ng-scope\\\" ng-repeat=\\\"tab in data.codes track by $id($index)\\\" ng-show=\\\"$index==current\\\">\\n  <pre class=\\\"cm-s-neo\\\" data-mode=\\\"php\\\"><span class=\\\"cm-meta\\\">&lt;?</span>\\n<span class=\\\"cm-variable-2\\\">$rublon</span> <span class=\\\"cm-operator\\\">=</span> <span class=\\\"cm-keyword\\\">new</span> <span class=\\\"cm-variable\\\">Rublon2Factor</span>(<span class=\\\"cm-string\\\">\\\"</span><span class=\\\"cm-string\\\">your_system_token\\\"</span>, <span class=\\\"cm-string\\\">\\\"</span><span class=\\\"cm-string\\\">your_access_key\\\"</span>);\\n\\n<span class=\\\"cm-keyword\\\">echo</span> <span class=\\\"cm-keyword\\\">new</span> <span class=\\\"cm-variable\\\">Rublon2FactorGUI</span>(\\n    <span class=\\\"cm-variable-2\\\">$rublon</span>,\\n    <span class=\\\"cm-variable-2\\\">$_SESSION</span>[<span class=\\\"cm-string\\\">\\\"</span><span class=\\\"cm-string\\\">user\\\"</span>][<span class=\\\"cm-string\\\">\\\"</span><span class=\\\"cm-string\\\">id\\\"</span>],\\n    <span class=\\\"cm-variable-2\\\">$_SESSION</span>[<span class=\\\"cm-string\\\">\\\"</span><span class=\\\"cm-string\\\">user\\\"</span>][<span class=\\\"cm-string\\\">\\\"</span><span class=\\\"cm-string\\\">email\\\"</span>]\\n);</pre>\\n</div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\\n</div></div><!-- ngSwitchWhen: image --><!-- ngSwitchWhen: embed --><!-- ngSwitchWhen: callout --><!-- ngSwitchWhen: parameters --><!-- ngSwitchWhen: html -->\\n<h3>Trusted Devices Widget</h3>\\n\\n<p>If the current browser is the user's Trusted Device, a Widget with the user's Trusted Devices will be displayed along with the Rublon Box. The Widget is an iframe containing a list of the user's Trusted Devices with the means to remove them.</p>\\n      \\n<p>The CSS of the iframe can be customized. In order to achieve this, the <code>Rublon2FactorGUI::getDeviceWidgetCSSAttribs()</code> method should be overriden. The result of the method should be an associative array where the keys represent specific CSS attribute names. </p>\\n\\n<table>\\n\\t<caption>Available CSS attributes</caption>\\n\\t<thead><tr>\\n\\t\\t<th>Constant name</th>\\n\\t\\t<th>CSS attribute</th>\\n\\t\\t<th>Description</th>\\n\\t</tr></thead>\\n\\t<tbody>\\n\\t\\t<tr><td><code>Rublon2FactorGUI::DEVICE_WIDGET_CSS_FONT_COLOR</code></td><td><code>color</code></td><td>Font color.</td></tr>\\n\\t\\t<tr><td><code>Rublon2FactorGUI::DEVICE_WIDGET_CSS_FONT_SIZE</code></td><td><code>font-size</code></td><td>Font size.</td></tr>\\n\\t\\t<tr><td><code>Rublon2FactorGUI::DEVICE_WIDGET_CSS_FONT_FAMILY</code></td><td><code>font-family</code></td><td>A set of font names.</td></tr>\\n\\t\\t<tr><td><code>Rublon2FactorGUI::DEVICE_WIDGET_CSS_BACKGROUND_COLOR</code></td><td><code>background-color</code></td><td>Background color of the widget.</td></tr>\\n\\t</tbody>\\n</table>\\n<p>An example of the overriden <code>Rublon2FactorGUI::getDeviceWidgetCSSAttribs()</code> method:</p>\\n<!-- ngSwitchWhen: textarea --><!-- TODO: Make this generic using 'default' --><!-- ngSwitchWhen: api-header --><!-- ngSwitchWhen: code --><div class=\\\"ng-scope\\\" ng-switch-when=\\\"code\\\"><div type=\\\"section.type\\\" ng-model=\\\"section.data\\\" class=\\\"block-code block-show-code ng-isolate-scope ng-pristine ng-valid\\\">\\n  <div class=\\\"code-tabs ng-hide\\\" ng-show=\\\"data.codes.length > 1 || (data.codes.length == 1 &amp;&amp; data.codes[0].status)\\\">\\n    <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\\\"ng-scope tab on\\\" ng-class=\\\"{tab: true, on:$index==current, off:$index!=current}\\\" ng-repeat=\\\"tab in data.codes track by $id($index)\\\">\\n      <a href=\\\"\\\" ng-click=\\\"choose($index)\\\">\\n        <!-- ngIf: tab.status -->\\n        <!-- ngIf: !tab.status --><span class=\\\"ng-scope ng-binding\\\" ng-if=\\\"!tab.status\\\">\\n          PHP\\n        </span><!-- end ngIf: !tab.status -->\\n      </a><span class=\\\"ng-hide\\\" ng-hide=\\\"$last\\\">·</span>\\n    </div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\\n  </div>\\n\\n  <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\\\"ng-scope\\\" ng-repeat=\\\"tab in data.codes track by $id($index)\\\" ng-show=\\\"$index==current\\\">\\n  <pre class=\\\"cm-s-neo\\\" data-mode=\\\"php\\\"><span class=\\\"cm-meta\\\">&lt;?</span>\\n<span class=\\\"cm-keyword\\\">protected</span> <span class=\\\"cm-keyword\\\">function</span> <span class=\\\"cm-def\\\">getDeviceWidgetCSSAttribs</span>() {\\n    <span class=\\\"cm-keyword\\\">return</span> <span class=\\\"cm-keyword\\\">array</span>(\\n        <span class=\\\"cm-variable\\\">Rublon2FactorGUI</span>::<span class=\\\"cm-variable\\\">DEVICE_WIDGET_CSS_FONT_SIZE</span> <span class=\\\"cm-operator\\\">=&gt;</span> <span class=\\\"cm-string\\\">'13px'</span>,\\n        <span class=\\\"cm-variable\\\">Rublon2FactorGUI</span>::<span class=\\\"cm-variable\\\">DEVICE_WIDGET_CSS_FONT_FAMILY</span> <span class=\\\"cm-operator\\\">=&gt;</span> <span class=\\\"cm-string\\\">'Verdana'</span>,\\n    );\\n}</pre>\\n</div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\\n</div></div><!-- ngSwitchWhen: image --><!-- ngSwitchWhen: embed --><!-- ngSwitchWhen: callout --><!-- ngSwitchWhen: parameters --><!-- ngSwitchWhen: html -->    \\n    </div>\\n    <div role=\\\"tabpanel\\\" class=\\\"tab-pane\\\" id=\\\"net\\\">\\n          <h3>Example .NET code</h3>\\n\\n<p>In order to generate the Rublon Box, you must instantiate a <code>Rublon2FactorGUI</code> class object and invoke its <code>ToString()</code> method or cast the object to a string.</p>\\n   <!-- ngSwitchWhen: textarea --><!-- TODO: Make this generic using 'default' --><!-- ngSwitchWhen: api-header --><!-- ngSwitchWhen: code --><div class=\\\"ng-scope\\\" ng-switch-when=\\\"code\\\"><div type=\\\"section.type\\\" ng-model=\\\"section.data\\\" class=\\\"block-code block-show-code ng-isolate-scope ng-pristine ng-valid\\\">\\n  <div class=\\\"code-tabs ng-hide\\\" ng-show=\\\"data.codes.length > 1 || (data.codes.length == 1 &amp;&amp; data.codes[0].status)\\\">\\n    <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\\\"ng-scope tab on\\\" ng-class=\\\"{tab: true, on:$index==current, off:$index!=current}\\\" ng-repeat=\\\"tab in data.codes track by $id($index)\\\">\\n      <a href=\\\"\\\" ng-click=\\\"choose($index)\\\">\\n        <!-- ngIf: tab.status -->\\n        <!-- ngIf: !tab.status --><span class=\\\"ng-scope ng-binding\\\" ng-if=\\\"!tab.status\\\">\\n          C#\\n        </span><!-- end ngIf: !tab.status -->\\n      </a><span class=\\\"ng-hide\\\" ng-hide=\\\"$last\\\">·</span>\\n    </div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\\n  </div>\\n\\n  <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\\\"ng-scope\\\" ng-repeat=\\\"tab in data.codes track by $id($index)\\\" ng-show=\\\"$index==current\\\">\\n  <pre class=\\\"cm-s-neo\\\" data-mode=\\\"csharp\\\"><span class=\\\"cm-variable\\\">User</span> <span class=\\\"cm-variable\\\">user</span> <span class=\\\"cm-operator\\\">=</span> (<span class=\\\"cm-variable\\\">User</span>)<span class=\\\"cm-variable\\\">Session</span>[<span class=\\\"cm-string\\\">\\\"loggedUser\\\"</span>];\\n<span class=\\\"cm-variable\\\">Rublon2Factor</span> <span class=\\\"cm-variable\\\">rublon</span> <span class=\\\"cm-operator\\\">=</span> <span class=\\\"cm-variable\\\">new</span> <span class=\\\"cm-variable\\\">Rublon2Factor</span>(<span class=\\\"cm-string\\\">\\\"your_system_token\\\"</span>,<span class=\\\"cm-string\\\">\\\"your_access_key\\\"</span>);\\n<span class=\\\"cm-variable\\\">Rublon2FactorGUI</span> <span class=\\\"cm-variable\\\">gui</span> <span class=\\\"cm-operator\\\">=</span> <span class=\\\"cm-variable\\\">new</span> <span class=\\\"cm-variable\\\">Rublon2FactorGUI</span>(<span class=\\\"cm-variable\\\">rublon</span>);\\n<span class=\\\"cm-comment\\\">// Set the user's data if user is logged-in:</span>\\n<span class=\\\"cm-variable\\\">gui</span>.<span class=\\\"cm-variable\\\">UserId</span> <span class=\\\"cm-operator\\\">=</span> <span class=\\\"cm-variable\\\">user</span>.<span class=\\\"cm-variable\\\">Id</span>;\\n<span class=\\\"cm-variable\\\">gui</span>.<span class=\\\"cm-variable\\\">UserEmail</span> <span class=\\\"cm-operator\\\">=</span> <span class=\\\"cm-variable\\\">user</span>.<span class=\\\"cm-variable\\\">Email</span>;\\n\\n<span class=\\\"cm-variable\\\">Response</span>.<span class=\\\"cm-variable\\\">Write</span>(<span class=\\\"cm-variable\\\">gui</span>.<span class=\\\"cm-variable\\\">ToString</span>());</pre>\\n</div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\\n</div></div><!-- ngSwitchWhen: image --><!-- ngSwitchWhen: embed --><!-- ngSwitchWhen: callout --><!-- ngSwitchWhen: parameters --><!-- ngSwitchWhen: html -->\\n      \\n      <h3>Trusted Devices Widget</h3>\\n\\n<p>If the current browser is the user's Trusted Device, a Widget with the user's Trusted Devices will be displayed along with the Rublon Box. The Widget is an iframe containing a list of the user's Trusted Devices with the means to remove them.</p>\\n      \\n    </div>\\n    <div role=\\\"tabpanel\\\" class=\\\"tab-pane\\\" id=\\\"java\\\">\\n          <h3>Example JAVA code</h3>\\n\\n<p>In order to generate the Rublon Box, you must instantiate a <code>Rublon2FactorGUI</code> class object and invoke its <code>toString()</code> method or cast the object to a string.</p>      \\n<!-- ngSwitchWhen: textarea --><!-- TODO: Make this generic using 'default' --><!-- ngSwitchWhen: api-header --><!-- ngSwitchWhen: code --><div class=\\\"ng-scope\\\" ng-switch-when=\\\"code\\\"><div type=\\\"section.type\\\" ng-model=\\\"section.data\\\" class=\\\"block-code block-show-code ng-isolate-scope ng-pristine ng-valid\\\">\\n  <div class=\\\"code-tabs ng-hide\\\" ng-show=\\\"data.codes.length > 1 || (data.codes.length == 1 &amp;&amp; data.codes[0].status)\\\">\\n    <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\\\"ng-scope tab on\\\" ng-class=\\\"{tab: true, on:$index==current, off:$index!=current}\\\" ng-repeat=\\\"tab in data.codes track by $id($index)\\\">\\n      <a href=\\\"\\\" ng-click=\\\"choose($index)\\\">\\n        <!-- ngIf: tab.status -->\\n        <!-- ngIf: !tab.status --><span class=\\\"ng-scope ng-binding\\\" ng-if=\\\"!tab.status\\\">\\n          Java\\n        </span><!-- end ngIf: !tab.status -->\\n      </a><span class=\\\"ng-hide\\\" ng-hide=\\\"$last\\\">·</span>\\n    </div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\\n  </div>\\n\\n  <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\\\"ng-scope\\\" ng-repeat=\\\"tab in data.codes track by $id($index)\\\" ng-show=\\\"$index==current\\\">\\n<pre class=\\\"cm-s-neo\\\" data-mode=\\\"java\\\"><span class=\\\"cm-variable\\\">Rublon2Factor</span> <span class=\\\"cm-variable\\\">rublon</span> <span class=\\\"cm-operator\\\">=</span> <span class=\\\"cm-keyword\\\">new</span> <span class=\\\"cm-variable\\\">Rublon2Factor</span>(<span class=\\\"cm-string\\\">\\\"your_system_token\\\"</span>,<span class=\\\"cm-string\\\">\\\"your_access_key\\\"</span>);\\n  \\n<span class=\\\"cm-variable\\\">Rublon2FactorGUI</span> <span class=\\\"cm-variable\\\">gui</span> <span class=\\\"cm-operator\\\">=</span> <span class=\\\"cm-keyword\\\">new</span> <span class=\\\"cm-variable\\\">Rublon2FactorGUI</span>(<span class=\\\"cm-variable\\\">rublon</span>);\\n  \\n<span class=\\\"cm-comment\\\">// Set the user's data if user is logged-in:</span>\\n<span class=\\\"cm-variable\\\">gui</span>.<span class=\\\"cm-variable\\\">setUserId</span>(<span class=\\\"cm-variable\\\">Session</span>.<span class=\\\"cm-variable\\\">getUser</span>().<span class=\\\"cm-variable\\\">getId</span>());\\n<span class=\\\"cm-variable\\\">gui</span>.<span class=\\\"cm-variable\\\">setUserEmail</span>(<span class=\\\"cm-variable\\\">Session</span>.<span class=\\\"cm-variable\\\">getUser</span>().<span class=\\\"cm-variable\\\">getEmail</span>());\\n  \\n<span class=\\\"cm-variable\\\">HttpServer</span>.<span class=\\\"cm-variable\\\">setResponseBody</span>(<span class=\\\"cm-variable\\\">gui</span>.<span class=\\\"cm-variable\\\">toString</span>());</pre>\\n</div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\\n</div></div><!-- ngSwitchWhen: image --><!-- ngSwitchWhen: embed --><!-- ngSwitchWhen: callout --><!-- ngSwitchWhen: parameters --><!-- ngSwitchWhen: html -->      \\n      \\n      <h3>Trusted Devices Widget</h3>\\n\\n<p>If the current browser is the user's Trusted Device, a Widget with the user's Trusted Devices will be displayed along with the Rublon Box. The Widget is an iframe containing a list of the user's Trusted Devices with the means to remove them.</p>\\n      \\n    </div>\\n    <div role=\\\"tabpanel\\\" class=\\\"tab-pane\\\" id=\\\"python\\\">\\n \\n      <h3>Example Python code</h3>\\n\\n<p>In order to generate the Rublon Box, you must instantiate a <code>Rublon2FactorGUI</code> class object and invoke its <code>user_box()</code> method or cast the object to a string.</p>\\n<!-- ngSwitchWhen: textarea --><!-- TODO: Make this generic using 'default' --><!-- ngSwitchWhen: api-header --><!-- ngSwitchWhen: code --><div class=\\\"ng-scope\\\" ng-switch-when=\\\"code\\\"><div type=\\\"section.type\\\" ng-model=\\\"section.data\\\" class=\\\"block-code block-show-code ng-isolate-scope ng-pristine ng-valid\\\">\\n  <div class=\\\"code-tabs ng-hide\\\" ng-show=\\\"data.codes.length > 1 || (data.codes.length == 1 &amp;&amp; data.codes[0].status)\\\">\\n    <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\\\"ng-scope tab on\\\" ng-class=\\\"{tab: true, on:$index==current, off:$index!=current}\\\" ng-repeat=\\\"tab in data.codes track by $id($index)\\\">\\n      <a href=\\\"\\\" ng-click=\\\"choose($index)\\\">\\n        <!-- ngIf: tab.status -->\\n        <!-- ngIf: !tab.status --><span class=\\\"ng-scope ng-binding\\\" ng-if=\\\"!tab.status\\\">\\n          Python\\n        </span><!-- end ngIf: !tab.status -->\\n      </a><span class=\\\"ng-hide\\\" ng-hide=\\\"$last\\\">·</span>\\n    </div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\\n  </div>\\n\\n  <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\\\"ng-scope\\\" ng-repeat=\\\"tab in data.codes track by $id($index)\\\" ng-show=\\\"$index==current\\\">\\n  <pre class=\\\"cm-s-neo\\\" data-mode=\\\"python\\\"><span class=\\\"cm-keyword\\\">if</span> <span class=\\\"cm-string\\\">'user_id'</span> <span class=\\\"cm-keyword\\\">in</span> <span class=\\\"cm-variable\\\">session</span>:\\n    <span class=\\\"cm-variable\\\">rublon</span> = <span class=\\\"cm-variable\\\">Rublon2Factor</span>(<span class=\\\"cm-variable\\\">RUBLON_SYSTEM_TOKEN</span>, <span class=\\\"cm-variable\\\">RUBLON_SECRET_KEY</span>)\\n    <span class=\\\"cm-keyword\\\">return</span> <span class=\\\"cm-string\\\">\\\"\\\"\\\"You are logged in. {0} &lt;a href=\\\"/logout\\\"&gt;Logout&lt;/a&gt;\\\"\\\"\\\"</span>.<span class=\\\"cm-builtin\\\">format</span>(\\n        <span class=\\\"cm-variable\\\">Rublon2FactorGUI</span>(<span class=\\\"cm-variable\\\">rublon</span>, <span class=\\\"cm-variable\\\">user_id</span>=<span class=\\\"cm-variable\\\">session</span>[<span class=\\\"cm-string\\\">'user_id'</span>], <span class=\\\"cm-variable\\\">user_email</span>=<span class=\\\"cm-variable\\\">session</span>[<span class=\\\"cm-string\\\">'user_id'</span>])\\n    )</pre>\\n</div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\\n</div></div><!-- ngSwitchWhen: image --><!-- ngSwitchWhen: embed --><!-- ngSwitchWhen: callout --><!-- ngSwitchWhen: parameters --><!-- ngSwitchWhen: html -->      \\n      \\n<h3>Trusted Devices Widget</h3>\\n\\n<p>If the current browser is the user's Trusted Device, a Widget with the user's Trusted Devices will be displayed along with the Rublon Box. The Widget is an iframe containing a list of the user's Trusted Devices with the means to remove them.</p>\\n      \\n    </div>\\n  </div>\\n\\n</div>\\n<style>\\n.langnav > li > a {\\n    padding: 3px 15px;\\n}\\ncaption{\\nmargin:10px;\\n}\\n.tab-pane h3 {\\n    color: #555;\\n    font-size: 17px;\\n    font-weight: 700;\\n    text-transform: uppercase;\\n}  \\n</style>\"\n}\n[/block]","excerpt":"","slug":"sdk-gui","type":"basic","title":"GUI"}
The integrated system's users should be informed about the system's capability of protecting their accounts with Rublon. For web purposes, the `Rublon2FactorGUI` class has been prepared, responsible for generating a HTML code block called the "Rublon Box" that should be embedded in the integrated system. The block will contain information about the means to protect one's account. Rublon Box also contains a frame with a list of the user's Trusted Devices, displayed only when the current browser is also a Trusted Device. The frame allows for removal of any Trusted Device. [block:html] { "html": "<div>\n\n <!-- Nav tabs -->\n <ul class=\"nav nav-tabs langnav\" role=\"tablist\">\n <li role=\"presentation\" class=\"active\"><a href=\"#php\" aria-controls=\"php\" role=\"tab\" data-toggle=\"tab\">PHP</a></li>\n <li role=\"presentation\"><a href=\"#net\" aria-controls=\"net\" role=\"tab\" data-toggle=\"tab\">.NET</a></li>\n <li role=\"presentation\"><a href=\"#java\" aria-controls=\"java\" role=\"tab\" data-toggle=\"tab\">Java</a></li>\n <li role=\"presentation\"><a href=\"#python\" aria-controls=\"python\" role=\"tab\" data-toggle=\"tab\">Python</a></li>\n </ul>\n\n <!-- Tab panes -->\n <div class=\"tab-content\">\n <div role=\"tabpanel\" class=\"tab-pane active\" id=\"php\">\n \n <h3>Example PHP code</h3>\n\n<p>In order to generate the Rublon Box, you must instantiate a <code>Rublon2FactorGUI</code> class object and invoke its <code>userBox()</code> method or cast the object to a string.</p>\n<!-- ngSwitchWhen: textarea --><!-- TODO: Make this generic using 'default' --><!-- ngSwitchWhen: api-header --><!-- ngSwitchWhen: code --><div class=\"ng-scope\" ng-switch-when=\"code\"><div type=\"section.type\" ng-model=\"section.data\" class=\"block-code block-show-code ng-isolate-scope ng-pristine ng-valid\">\n <div class=\"code-tabs ng-hide\" ng-show=\"data.codes.length > 1 || (data.codes.length == 1 &amp;&amp; data.codes[0].status)\">\n <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\"ng-scope tab on\" ng-class=\"{tab: true, on:$index==current, off:$index!=current}\" ng-repeat=\"tab in data.codes track by $id($index)\">\n <a href=\"\" ng-click=\"choose($index)\">\n <!-- ngIf: tab.status -->\n <!-- ngIf: !tab.status --><span class=\"ng-scope ng-binding\" ng-if=\"!tab.status\">\n PHP\n </span><!-- end ngIf: !tab.status -->\n </a><span class=\"ng-hide\" ng-hide=\"$last\">·</span>\n </div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\n </div>\n\n <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\"ng-scope\" ng-repeat=\"tab in data.codes track by $id($index)\" ng-show=\"$index==current\">\n <pre class=\"cm-s-neo\" data-mode=\"php\"><span class=\"cm-meta\">&lt;?</span>\n<span class=\"cm-variable-2\">$rublon</span> <span class=\"cm-operator\">=</span> <span class=\"cm-keyword\">new</span> <span class=\"cm-variable\">Rublon2Factor</span>(<span class=\"cm-string\">\"</span><span class=\"cm-string\">your_system_token\"</span>, <span class=\"cm-string\">\"</span><span class=\"cm-string\">your_access_key\"</span>);\n\n<span class=\"cm-keyword\">echo</span> <span class=\"cm-keyword\">new</span> <span class=\"cm-variable\">Rublon2FactorGUI</span>(\n <span class=\"cm-variable-2\">$rublon</span>,\n <span class=\"cm-variable-2\">$_SESSION</span>[<span class=\"cm-string\">\"</span><span class=\"cm-string\">user\"</span>][<span class=\"cm-string\">\"</span><span class=\"cm-string\">id\"</span>],\n <span class=\"cm-variable-2\">$_SESSION</span>[<span class=\"cm-string\">\"</span><span class=\"cm-string\">user\"</span>][<span class=\"cm-string\">\"</span><span class=\"cm-string\">email\"</span>]\n);</pre>\n</div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\n</div></div><!-- ngSwitchWhen: image --><!-- ngSwitchWhen: embed --><!-- ngSwitchWhen: callout --><!-- ngSwitchWhen: parameters --><!-- ngSwitchWhen: html -->\n<h3>Trusted Devices Widget</h3>\n\n<p>If the current browser is the user's Trusted Device, a Widget with the user's Trusted Devices will be displayed along with the Rublon Box. The Widget is an iframe containing a list of the user's Trusted Devices with the means to remove them.</p>\n \n<p>The CSS of the iframe can be customized. In order to achieve this, the <code>Rublon2FactorGUI::getDeviceWidgetCSSAttribs()</code> method should be overriden. The result of the method should be an associative array where the keys represent specific CSS attribute names. </p>\n\n<table>\n\t<caption>Available CSS attributes</caption>\n\t<thead><tr>\n\t\t<th>Constant name</th>\n\t\t<th>CSS attribute</th>\n\t\t<th>Description</th>\n\t</tr></thead>\n\t<tbody>\n\t\t<tr><td><code>Rublon2FactorGUI::DEVICE_WIDGET_CSS_FONT_COLOR</code></td><td><code>color</code></td><td>Font color.</td></tr>\n\t\t<tr><td><code>Rublon2FactorGUI::DEVICE_WIDGET_CSS_FONT_SIZE</code></td><td><code>font-size</code></td><td>Font size.</td></tr>\n\t\t<tr><td><code>Rublon2FactorGUI::DEVICE_WIDGET_CSS_FONT_FAMILY</code></td><td><code>font-family</code></td><td>A set of font names.</td></tr>\n\t\t<tr><td><code>Rublon2FactorGUI::DEVICE_WIDGET_CSS_BACKGROUND_COLOR</code></td><td><code>background-color</code></td><td>Background color of the widget.</td></tr>\n\t</tbody>\n</table>\n<p>An example of the overriden <code>Rublon2FactorGUI::getDeviceWidgetCSSAttribs()</code> method:</p>\n<!-- ngSwitchWhen: textarea --><!-- TODO: Make this generic using 'default' --><!-- ngSwitchWhen: api-header --><!-- ngSwitchWhen: code --><div class=\"ng-scope\" ng-switch-when=\"code\"><div type=\"section.type\" ng-model=\"section.data\" class=\"block-code block-show-code ng-isolate-scope ng-pristine ng-valid\">\n <div class=\"code-tabs ng-hide\" ng-show=\"data.codes.length > 1 || (data.codes.length == 1 &amp;&amp; data.codes[0].status)\">\n <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\"ng-scope tab on\" ng-class=\"{tab: true, on:$index==current, off:$index!=current}\" ng-repeat=\"tab in data.codes track by $id($index)\">\n <a href=\"\" ng-click=\"choose($index)\">\n <!-- ngIf: tab.status -->\n <!-- ngIf: !tab.status --><span class=\"ng-scope ng-binding\" ng-if=\"!tab.status\">\n PHP\n </span><!-- end ngIf: !tab.status -->\n </a><span class=\"ng-hide\" ng-hide=\"$last\">·</span>\n </div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\n </div>\n\n <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\"ng-scope\" ng-repeat=\"tab in data.codes track by $id($index)\" ng-show=\"$index==current\">\n <pre class=\"cm-s-neo\" data-mode=\"php\"><span class=\"cm-meta\">&lt;?</span>\n<span class=\"cm-keyword\">protected</span> <span class=\"cm-keyword\">function</span> <span class=\"cm-def\">getDeviceWidgetCSSAttribs</span>() {\n <span class=\"cm-keyword\">return</span> <span class=\"cm-keyword\">array</span>(\n <span class=\"cm-variable\">Rublon2FactorGUI</span>::<span class=\"cm-variable\">DEVICE_WIDGET_CSS_FONT_SIZE</span> <span class=\"cm-operator\">=&gt;</span> <span class=\"cm-string\">'13px'</span>,\n <span class=\"cm-variable\">Rublon2FactorGUI</span>::<span class=\"cm-variable\">DEVICE_WIDGET_CSS_FONT_FAMILY</span> <span class=\"cm-operator\">=&gt;</span> <span class=\"cm-string\">'Verdana'</span>,\n );\n}</pre>\n</div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\n</div></div><!-- ngSwitchWhen: image --><!-- ngSwitchWhen: embed --><!-- ngSwitchWhen: callout --><!-- ngSwitchWhen: parameters --><!-- ngSwitchWhen: html --> \n </div>\n <div role=\"tabpanel\" class=\"tab-pane\" id=\"net\">\n <h3>Example .NET code</h3>\n\n<p>In order to generate the Rublon Box, you must instantiate a <code>Rublon2FactorGUI</code> class object and invoke its <code>ToString()</code> method or cast the object to a string.</p>\n <!-- ngSwitchWhen: textarea --><!-- TODO: Make this generic using 'default' --><!-- ngSwitchWhen: api-header --><!-- ngSwitchWhen: code --><div class=\"ng-scope\" ng-switch-when=\"code\"><div type=\"section.type\" ng-model=\"section.data\" class=\"block-code block-show-code ng-isolate-scope ng-pristine ng-valid\">\n <div class=\"code-tabs ng-hide\" ng-show=\"data.codes.length > 1 || (data.codes.length == 1 &amp;&amp; data.codes[0].status)\">\n <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\"ng-scope tab on\" ng-class=\"{tab: true, on:$index==current, off:$index!=current}\" ng-repeat=\"tab in data.codes track by $id($index)\">\n <a href=\"\" ng-click=\"choose($index)\">\n <!-- ngIf: tab.status -->\n <!-- ngIf: !tab.status --><span class=\"ng-scope ng-binding\" ng-if=\"!tab.status\">\n C#\n </span><!-- end ngIf: !tab.status -->\n </a><span class=\"ng-hide\" ng-hide=\"$last\">·</span>\n </div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\n </div>\n\n <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\"ng-scope\" ng-repeat=\"tab in data.codes track by $id($index)\" ng-show=\"$index==current\">\n <pre class=\"cm-s-neo\" data-mode=\"csharp\"><span class=\"cm-variable\">User</span> <span class=\"cm-variable\">user</span> <span class=\"cm-operator\">=</span> (<span class=\"cm-variable\">User</span>)<span class=\"cm-variable\">Session</span>[<span class=\"cm-string\">\"loggedUser\"</span>];\n<span class=\"cm-variable\">Rublon2Factor</span> <span class=\"cm-variable\">rublon</span> <span class=\"cm-operator\">=</span> <span class=\"cm-variable\">new</span> <span class=\"cm-variable\">Rublon2Factor</span>(<span class=\"cm-string\">\"your_system_token\"</span>,<span class=\"cm-string\">\"your_access_key\"</span>);\n<span class=\"cm-variable\">Rublon2FactorGUI</span> <span class=\"cm-variable\">gui</span> <span class=\"cm-operator\">=</span> <span class=\"cm-variable\">new</span> <span class=\"cm-variable\">Rublon2FactorGUI</span>(<span class=\"cm-variable\">rublon</span>);\n<span class=\"cm-comment\">// Set the user's data if user is logged-in:</span>\n<span class=\"cm-variable\">gui</span>.<span class=\"cm-variable\">UserId</span> <span class=\"cm-operator\">=</span> <span class=\"cm-variable\">user</span>.<span class=\"cm-variable\">Id</span>;\n<span class=\"cm-variable\">gui</span>.<span class=\"cm-variable\">UserEmail</span> <span class=\"cm-operator\">=</span> <span class=\"cm-variable\">user</span>.<span class=\"cm-variable\">Email</span>;\n\n<span class=\"cm-variable\">Response</span>.<span class=\"cm-variable\">Write</span>(<span class=\"cm-variable\">gui</span>.<span class=\"cm-variable\">ToString</span>());</pre>\n</div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\n</div></div><!-- ngSwitchWhen: image --><!-- ngSwitchWhen: embed --><!-- ngSwitchWhen: callout --><!-- ngSwitchWhen: parameters --><!-- ngSwitchWhen: html -->\n \n <h3>Trusted Devices Widget</h3>\n\n<p>If the current browser is the user's Trusted Device, a Widget with the user's Trusted Devices will be displayed along with the Rublon Box. The Widget is an iframe containing a list of the user's Trusted Devices with the means to remove them.</p>\n \n </div>\n <div role=\"tabpanel\" class=\"tab-pane\" id=\"java\">\n <h3>Example JAVA code</h3>\n\n<p>In order to generate the Rublon Box, you must instantiate a <code>Rublon2FactorGUI</code> class object and invoke its <code>toString()</code> method or cast the object to a string.</p> \n<!-- ngSwitchWhen: textarea --><!-- TODO: Make this generic using 'default' --><!-- ngSwitchWhen: api-header --><!-- ngSwitchWhen: code --><div class=\"ng-scope\" ng-switch-when=\"code\"><div type=\"section.type\" ng-model=\"section.data\" class=\"block-code block-show-code ng-isolate-scope ng-pristine ng-valid\">\n <div class=\"code-tabs ng-hide\" ng-show=\"data.codes.length > 1 || (data.codes.length == 1 &amp;&amp; data.codes[0].status)\">\n <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\"ng-scope tab on\" ng-class=\"{tab: true, on:$index==current, off:$index!=current}\" ng-repeat=\"tab in data.codes track by $id($index)\">\n <a href=\"\" ng-click=\"choose($index)\">\n <!-- ngIf: tab.status -->\n <!-- ngIf: !tab.status --><span class=\"ng-scope ng-binding\" ng-if=\"!tab.status\">\n Java\n </span><!-- end ngIf: !tab.status -->\n </a><span class=\"ng-hide\" ng-hide=\"$last\">·</span>\n </div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\n </div>\n\n <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\"ng-scope\" ng-repeat=\"tab in data.codes track by $id($index)\" ng-show=\"$index==current\">\n<pre class=\"cm-s-neo\" data-mode=\"java\"><span class=\"cm-variable\">Rublon2Factor</span> <span class=\"cm-variable\">rublon</span> <span class=\"cm-operator\">=</span> <span class=\"cm-keyword\">new</span> <span class=\"cm-variable\">Rublon2Factor</span>(<span class=\"cm-string\">\"your_system_token\"</span>,<span class=\"cm-string\">\"your_access_key\"</span>);\n \n<span class=\"cm-variable\">Rublon2FactorGUI</span> <span class=\"cm-variable\">gui</span> <span class=\"cm-operator\">=</span> <span class=\"cm-keyword\">new</span> <span class=\"cm-variable\">Rublon2FactorGUI</span>(<span class=\"cm-variable\">rublon</span>);\n \n<span class=\"cm-comment\">// Set the user's data if user is logged-in:</span>\n<span class=\"cm-variable\">gui</span>.<span class=\"cm-variable\">setUserId</span>(<span class=\"cm-variable\">Session</span>.<span class=\"cm-variable\">getUser</span>().<span class=\"cm-variable\">getId</span>());\n<span class=\"cm-variable\">gui</span>.<span class=\"cm-variable\">setUserEmail</span>(<span class=\"cm-variable\">Session</span>.<span class=\"cm-variable\">getUser</span>().<span class=\"cm-variable\">getEmail</span>());\n \n<span class=\"cm-variable\">HttpServer</span>.<span class=\"cm-variable\">setResponseBody</span>(<span class=\"cm-variable\">gui</span>.<span class=\"cm-variable\">toString</span>());</pre>\n</div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\n</div></div><!-- ngSwitchWhen: image --><!-- ngSwitchWhen: embed --><!-- ngSwitchWhen: callout --><!-- ngSwitchWhen: parameters --><!-- ngSwitchWhen: html --> \n \n <h3>Trusted Devices Widget</h3>\n\n<p>If the current browser is the user's Trusted Device, a Widget with the user's Trusted Devices will be displayed along with the Rublon Box. The Widget is an iframe containing a list of the user's Trusted Devices with the means to remove them.</p>\n \n </div>\n <div role=\"tabpanel\" class=\"tab-pane\" id=\"python\">\n \n <h3>Example Python code</h3>\n\n<p>In order to generate the Rublon Box, you must instantiate a <code>Rublon2FactorGUI</code> class object and invoke its <code>user_box()</code> method or cast the object to a string.</p>\n<!-- ngSwitchWhen: textarea --><!-- TODO: Make this generic using 'default' --><!-- ngSwitchWhen: api-header --><!-- ngSwitchWhen: code --><div class=\"ng-scope\" ng-switch-when=\"code\"><div type=\"section.type\" ng-model=\"section.data\" class=\"block-code block-show-code ng-isolate-scope ng-pristine ng-valid\">\n <div class=\"code-tabs ng-hide\" ng-show=\"data.codes.length > 1 || (data.codes.length == 1 &amp;&amp; data.codes[0].status)\">\n <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\"ng-scope tab on\" ng-class=\"{tab: true, on:$index==current, off:$index!=current}\" ng-repeat=\"tab in data.codes track by $id($index)\">\n <a href=\"\" ng-click=\"choose($index)\">\n <!-- ngIf: tab.status -->\n <!-- ngIf: !tab.status --><span class=\"ng-scope ng-binding\" ng-if=\"!tab.status\">\n Python\n </span><!-- end ngIf: !tab.status -->\n </a><span class=\"ng-hide\" ng-hide=\"$last\">·</span>\n </div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\n </div>\n\n <!-- ngRepeat: tab in data.codes track by $id($index) --><div class=\"ng-scope\" ng-repeat=\"tab in data.codes track by $id($index)\" ng-show=\"$index==current\">\n <pre class=\"cm-s-neo\" data-mode=\"python\"><span class=\"cm-keyword\">if</span> <span class=\"cm-string\">'user_id'</span> <span class=\"cm-keyword\">in</span> <span class=\"cm-variable\">session</span>:\n <span class=\"cm-variable\">rublon</span> = <span class=\"cm-variable\">Rublon2Factor</span>(<span class=\"cm-variable\">RUBLON_SYSTEM_TOKEN</span>, <span class=\"cm-variable\">RUBLON_SECRET_KEY</span>)\n <span class=\"cm-keyword\">return</span> <span class=\"cm-string\">\"\"\"You are logged in. {0} &lt;a href=\"/logout\"&gt;Logout&lt;/a&gt;\"\"\"</span>.<span class=\"cm-builtin\">format</span>(\n <span class=\"cm-variable\">Rublon2FactorGUI</span>(<span class=\"cm-variable\">rublon</span>, <span class=\"cm-variable\">user_id</span>=<span class=\"cm-variable\">session</span>[<span class=\"cm-string\">'user_id'</span>], <span class=\"cm-variable\">user_email</span>=<span class=\"cm-variable\">session</span>[<span class=\"cm-string\">'user_id'</span>])\n )</pre>\n</div><!-- end ngRepeat: tab in data.codes track by $id($index) -->\n</div></div><!-- ngSwitchWhen: image --><!-- ngSwitchWhen: embed --><!-- ngSwitchWhen: callout --><!-- ngSwitchWhen: parameters --><!-- ngSwitchWhen: html --> \n \n<h3>Trusted Devices Widget</h3>\n\n<p>If the current browser is the user's Trusted Device, a Widget with the user's Trusted Devices will be displayed along with the Rublon Box. The Widget is an iframe containing a list of the user's Trusted Devices with the means to remove them.</p>\n \n </div>\n </div>\n\n</div>\n<style>\n.langnav > li > a {\n padding: 3px 15px;\n}\ncaption{\nmargin:10px;\n}\n.tab-pane h3 {\n color: #555;\n font-size: 17px;\n font-weight: 700;\n text-transform: uppercase;\n} \n</style>" } [/block]