Access from web sites

From Complete Cyclos documentation wiki
Jump to: navigation, search

How to inlcude cyclos in website

By default Cyclos has its own login page and runs in its own web environment. It is possible to run Cyclos from within a website (within a frame set or Iframe). If you do this you will have to change the following items in order for Cyclos to remove unnecesary items like the top window and borders used in the default login.

  • Delete the top window by customizing the top (Content management - Static files - Customize new file - select top.jsp) and remove all contents.
  • Customize the style.css file, doing the following:
    • Comment the following declarations: ".topContainer>tr>td, .topContainer>tbody>tr>td" and ".topContainerBorder" (lines 57 - 72 in the original style.css) by adding /* and */ markers
    • Change the vertical margin in the ".topContainer" declaration (line 54 of the original style.css). The default 16px margin may be too large for the iframe. The horizontal margin should be left as auto in order to have the application centered
    • Change the body background color by changing the "body.main" declaration (line 27 of the original style.css). Normally the color will be white, but that depends on the colors used in the web site.

How login to cyclos in external website

It is very easy to add the Cyclos login form on external web sites, for example, with the project web site.

It can be done in some steps:

  1. Include a script from <cyclos root url>/externalLogin.js in your page. For example:
  2. Create an HTML element which will contain the login form iframe. It may be any HTML container tag (table cell, div, paragraph...) with an unique id.
  3. Add a JavaScript event listener to the body load event which invokes a function defined by the externalLogin.js file: includeCyclosLogin(<container id>, [after logout url]).

For example, if you have an HTML element identified by 'loginContainer' and want to return to the same url as your site after logout, use: includeCyclosLogin('loginContainer', location.href). When the second argument is omitted, after logging out, the default Cyclos login page is shown.

The login form is rendered inside an IFrame, which has its dimensions set to the same value as the container element dimensions. This means that the container element should be large enough to display the entire login form. An automatic resize cannot be done because normally Cyclos and the web server will run on distinct domains, and it's illegal in JavaScript that two frames on distinct domains interact with each other.