• View
• Edit
• History
• Attach
• Print
• Backlinks

IFrameLogin

Questions answered by this recipe

• How can I pass messages between my pmwiki page and another page on the same domain, especially a page embedded with an <iframe>?
• The idea is to embed a working, non-PmWiki page with, for example, login credentials and procedures, by using includeSite and then sharing messages between the pages.

All sections are optional, you can remove those that do not apply to your recipe, and add new ones.

Description

This is a learning demo, made to prove the concept of using a set of embedded pages with IncludeSite to manage my User-Based password login method, MyDBLogin. This kit provides a working demo of how to communicate between a pmwiki page and a page from outside the wiki (same domain) that is embedded using an iframe. The kit includes working code to login a user (but none of the user verification tools) to the default password based pmwiki installation. This also includes several tricks using Javascript and how to add html to a page.

The main points here are

• iframe communication
  • using postMessage(), $_GET() and $_POST()
  • embedding javascript in a Group or Page, with Markup - here I use (:authhost:)
  • Markup for adding html (from the EnableHTML-Talk page )
  • Passing data between PHP and JS and back.
• a crude Login, demonstration, as a proof-of-concept (see the MyDBLogin for the full version.)
  • The Login demo, runs the login function and forces a reload of the page to show the Logout menu.
  • The demo assumes you have set your Edit permission in /local/config.php to

$DefaultPasswords['edit'] = 'id:*';
or with the Page?action=attr command set Edit to id:*

Installation

The demo code is based on my practice installation which is loaded into .../pmwiki/pmwiki.php?n=Portcullis.Login
(or as I see it: pmwiki/pmwiki.php/Portcullis/Login)
Adjust your code according to your installation.

Read the files with their comments first.
Make sure you change all of the files to match your Domain and paths.

Download from the pmwiki cookbook pages the
includeSite.php and httpvariables.php copy them into your /cookbook folder
Here are links to their Cookbook pages: IncludeSite and HttpVariables.
(you will edit your /local/config.php as well, but see the instructions below for that.)

Download the IFrameLogin.zipΔ, unzip to your computer, edit the files and load to your server Thus:

framehost.js and frameguest.js simply need to have your Domain inserted. (stripped down to just mydomain.org)
The postMessageTarget.php file includes demo login information, you will need to edit that before using it.

The wiki.d.Portcullis file has demo code for your pmwiki page, the address of the includeSite code
needs to be changed to match your installation. If you don't want to use the (:html:) markup I included then
you will need to edit your skin's template file e.g. /pub/skins/Skin.tmpl to include the needed elements.

Copy framehost.js, frameguest.js and postMessageTarget.php into a folder OUTSIDE of your pmwiki folder.

for example:

pmwiki is in https://www.mydomain.org/pmwiki and

iframe files are in https://www.mydomain.org/iframe/demo

In your pmwiki site make a new Group and Page to host your Demo, for example:

create: [[Portcullis.Login]]

Copy the code from wiki.d.Portcullis and paste it into the new page

Be sure to edit the URL to match where you put the framehost.js file

Copy the Portcullis.Login.php file to your /local folder
while you are there, edit your config.php file to include the sample code in
my ~config.php file. As a learning demo, this should include all that you need
to get it working, including the includeSite and httpVariables recipes.

Again, edit to match your URL.

"Cleaner" Options

• Edit your Skin.tmpl file to include then needed html instead of using the (:html:) tags
• To be really cool, look into Group customization and add:
  <!--IncludeTemplate: Cookbook.tmpl-->
  to your skin.tmpl file and then add the corresponding Group.tmpl
  file to your /pub/Skins/YourSkin directory.
• Eliminate the httpvariables.php code after you prove your install works.
• I get odd blank-space around my includeSite-iframe due to how the includeSite.php is written. I have edited the code in includeSite.php to get a tighter install:

	  $Output .= "<!-- X-include -->" ;

	  if ($id=="") {  
	      $Output .= "<iframe class=\"ISframe\" src=\"" . Keep($m[1]). "\"></iframe>" ;   
	      #  [modified for PHP5.5 and younger]
	  }else{
	      $Output .= "<iframe class=\"ISframe\" id=\"$id\" src=\"" . Keep($m[1]). "\"></iframe>" ;   
	      #  [modified for PHP5.5 and younger]
	  }

	  $Output .= "<!-- /X-include -->" ;

	  return $Output ;

Mostly here, I have removed the <pre> tags and the "\n" new-lines. I have also edited my Skin.css file
to display the ISframe how I want. You will want to play with that for your version.

  .ISframe  {
      width:          99% ; 
      height:        100% ;
      min-height:   840px ;
      overflow:      auto ;
      margin:         4px ; 
  }  

Configuration

This is a working, demo kit to learn how to do several things, I assume you will learn from, and borrow the code
or you will need to customize heavily for your specific application.

Internationalization

The following strings can be translated in an XLPage:

Usage

Notes

To do / some day / maybe

If you have future plans or wishes for this recipe.

Change log / Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See also

Contributors

Comments

See discussion at IFrameLogin-Talk?