Problem
I want to display a website in my AIR application, but this website requires a login/password authentification. I don't want my users to see this form.
Solution
I'll use the HTML component to display the website. When the page is fully loaded, I use javascript to force values in the authentification fields (login and password), then trigger the click on the submit button.
Detailed explanation
First, I have a page (login.php) with a simple form :
<?php
$errors = array();
if($_SERVER['REQUEST_METHOD']==='POST') {
if(trim($_POST['login'])!=='' && trim($_POST['password'])!=='') {
die(header('location: ./index.php'));
exit();
} else {
$errors[] = 'Wrong login / password !';
}
}
?>
<!-- HTML page header -->
<h1>Authentification required !</h1>
<?php
if(sizeof($errors)) {
echo '<ul>';
foreach($errors as $error) {
echo '<li>', $error, '</li>';
}
echo '</ul>';
}
?>
<form method="post" action="<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>">
<fieldset>
<div>
<label for="login">Login :</label>
<input type="text" name="login" id="login" />
</div>
<div>
<label for="password">Password :</label>
<input type="password" id="password" name="password" />
</div>
<div>
<input type="submit" name="Go !" id="mySubmitButton" />
</div>
</fieldset>
</form>
<!-- HTML page footer -->
When the user puts values in the fields, he's redirected to an even cheaper html page :
<!-- HTML page header -->
<h1>My wonderful website</h1>
<p>Yeah welcome !</p>
<!-- HTML page footer -->
And here is a component which extends the Flex HTML component :
package com.palleas.components {
import flash.events.Event;
import mx.controls.HTML;
import mx.core.Application;
import mx.events.FlexEvent;
public class Browser extends HTML {
public function Browser() {
addEventListener(FlexEvent.CREATION_COMPLETE,creationCompleteHandle);
}
// called when the component is ready
protected function creationCompleteHandle(e:FlexEvent):void {
removeEventListener(FlexEvent.CREATION_COMPLETE,creationCompleteHandle);
addEventListener(Event.COMPLETE,onHTMLRender);
}
// called each time HTML is rendered
protected function onHTMLRender(e:Event):void {
var location:String = htmlLoader.window.location.toString().split("/").pop();
Application.application.title = htmlLoader.window.document.title as String;
if(location=="login.php") {
getElement("login").value = "MyLogin";
getElement("password").value = "MyPassword";
getElement("mySubmitButton").click();
}
}
// returns true if there is a component with a specific id
public function hasElement(id:String):Boolean {
return null!=getElement(id);
}
// returns the components identified by the specified id
public function getElement(id:String):Object {
return htmlLoader.window.document.getElementById(id);
}
}
}
I finally display it in my application :
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="com.palleas.components.*">
<components:Browser id="browser" location="http://localhost/testwebsite/login.php" width="100%" height="100%" />
</mx:WindowedApplication>
