FotoVision Web Application
Vertigo Software, Inc.
Microsoft® Visual Studio .NET® 2003
Summary: The FotoVision sample allows you to easily share photos on the web and demonstrates a variety of .NET technologies including Windows Forms, ASP.NET, Web services, and the .NET Compact Framework. It consists of a desktop, web, and Pocket PC sample applications. This paper provides information so you can get the most from the FotoVision web application. The sample is written in VB.NET and the installation application installs pre-built binaries and source code for the web application. (7 printed pages)
The figure below shows the main parts of the FotoVision application. There are two users: owner and viewers. The owner uses the desktop application to modify and manage photos on their local system. When the photos are ready to be published, the desktop application uses a Web service to synchronize files on the website; credentials are passed in a SOAP header to prevent unauthorized users from modifying photos on the site. Viewers view photos on the site through a web browser. The Pocket PC application uses another Web service to download and store photos on the device so they can be viewed offline.
Figure 1. Overview of the FotoVision application
The web application contains three parts: a website that displays albums and photos, Web services that perform photo management and offline viewing, and a tool that updates the encrypted password in the config file. The figure below shows the web application parts.
Figure 2. Overview of the FotoVision web application
Photos folder permissions
FotoVision uses the file system and XML files as a simple database. Each folder in the file system represents an album and each image file in a folder represents a photo. Optional album and photo metadata information (description for example) is stored in corresponding XML files. The files are stored under the photos folder.
The website auto-generates thumbnail images and the Web service adds and deletes files. This means that the ASP.NET user account requires read, write, and change permissions to the photos folder. The ASP.NET account is ASPNET on IIS 5.x and NETWORK SERVICE on IIS 6 (Windows Server 2003). The MSI installation application grants these permissions by executing the cacls.exe command-line tool during installation. You do not need to set these permissions again, but they do need to be set if you install the website on another system.
The website is an ASP.NET application and displays albums, thumbnails, and full size photos. The Default.aspx page provides an overview of the albums on the site; each album contains a name, description, date, photo count, and sample thumbnail. The Album.aspx page displays thumbnails for the selected album and the Photo.aspx page displays the full size photo with the date and description. The album and photo pages use the AlbumListControl.ascx user control to display the album selection list. The web pages are shown in the following figure.
Figure 3. Different pages on the website
Caching is not enabled in the sample website so changes (new albums for example) are immediately apparent, but caching can be easily enabled. The web pages are loosely coupled to the underlying data so it is easy to replace the interface with your own pages.
The web application contains two Web services: PhotoService.asmx that exposes offline-browsing methods, and PhotoAdmin.asmx that exposes photo-management methods.
The photo service contains read-only methods that are used by the Pocket PC application and returns a list of albums, thumbnails, and individual photos. The service contains logic to scale and rotate photos so they occupy the largest space available on the Pocket PC device.
Photo admin service
The photo admin service is used by the desktop application and contains management and synchronization methods so files on the site can be synchronized with files on the user's local system. The management methods allow the owner to delete, add, and update albums, photos, and metadata XML files. The synchronization methods return an array of hash codes that uniquely identify files on the site so the caller can determine which files need to be updated.
The service requires the caller to be authenticated before the methods are executed. It uses a custom SOAP header that contains the user credentials. The user credentials is a hashed password that must match the value stored in the web.config file (the hashed password is stored as an encrypted value in the config file). An exception is thrown if the custom SOAP header does not exist or if the user credentials do not match.
The service can be extended by using the Microsoft Web Services Enhancements (WSE) for authentication and file attachments using WS-Security and WS-Attachments respectively. You can find more information at http://msdn.microsoft.com/webservices/building/wse.
The Login Manager allows the site owner to update the password, which is stored in the web.config file as an encrypted hash value, for the FotoVision application. This tool hashes the password using the SHA1 algorithm and then encrypts the value using the Data Protection API (DPAPI). The result can be copied to the clipboard or the web.config file can be updated automatically. The Login Manager tool is shown below.
Figure 4. The Login Manager tool that updates the config file
Data encryption and decryption must be done on the same computer when using the Data Protection API. The site owner might not have executable access to the web server (they can copy files but cannot run the Login Manager tool on the site). If this is the case, check the option Only hash the password, which stores the hashed password in the config file instead of an encrypted hash value (the password is never stored in clear text). The following snippet shows the different values that are stored in the config file.
<!-- storing hashed password in config file --> <add key="Encrypted" value="False" /> <add key="Password" value="qUqP5cyxm6YcTAhz05Hph5gvu9M=" /> <!-- storing encrypted hashed password in config file --> <add key="Encrypted" value="True" /> <add key="Password" value="AQAAANCMnd8BFdERjHoAwE/Cl+sBAAAA/T/hAL4ro0eFrHpEcn3cCAQAAAACAAAAAAADZgAAqAAAABAAAABSGWk+YXmaYnyIpjZn5k+yAAAAAASAAACgAAAAEAAAAM7BOa9ByxADQGS2dndRqPAgAAAAs2Fr7i/CH4LVXIiefIaD1TGFKJ5wYzFsbCNEV4LsEvMUAAAAHbNUaVPOYl7HO6wEIVFOG+24+N0=" />
The web application is one of three parts of the FotoVision sample application. You can also install the desktop and Pocket PC applications.