Select to view content in your preferred language

Login Screen for the Flexviewer

46402
121
03-15-2011 10:52 AM
andrewj_ca
Frequent Contributor
Just posted some code for a Flexviewer login screen.  I hope somebody can get some use from this.

http://www.arcgis.com/home/item.html?id=baebcaf317994d63902bc9735c0657e0
Tags (2)
0 Kudos
121 Replies
SteveLavey
New Contributor
I must be doing something wrong, as I've not compiled a mxml before:  When I go to compile with mxmlc in Flex SDK 4.5.1, I get an error indicating it cannot resolve <viewer:ViewerContainer> to a component implementation.  I'm figuring this must mean the reference to com.esri.viewer.*  I'm not finding anything related to this in my AGS installation.

Am I making this too difficult?  How can I get this to work?

My goal is to use this login page with the standard Flex Viewer so I can allow only certain people to use it for editing and adding records to a layer.
thanks
0 Kudos
GregSpiridonov
Occasional Contributor
Now I'm not sure how to ask these questions without coming across as skeptical.. but I'm really asking if i'm missing something...

but am I wrong in seeing that it's not extremely secure? The problem with doing any login work inside flash is that flash swf files can easily be decompiled and their code read... this means that anyone who is willing could open the swf file and see that it would just take a currentState change to bypass the login...

That being said, unless they could serve their own app pointing to your services they can't do much about it... which is good.. except, why are you going to the trouble of creating an ASP service or anything that complex? wouldn't simply loading an xml from a secure location with username/passwords (hashed) be the same thing in the end?

(I am truely curious about this, I do not pretend to know all about web security by any means... but I have created a simple login screen by using just an xml file in a private directory... and I'm not sure how this is any different... except that it requires the setup of an asp service... )

At the moment I am searching for a more secure way then my own to secure a FLEX site, most likely using an ASP front end linking to the flexviewer... i'm not sure.. This just seems to be the same concept, using ASP instead of an XML lookup...
0 Kudos
GregSpiridonov
Occasional Contributor
I must be doing something wrong, as I've not compiled a mxml before:  When I go to compile with mxmlc in Flex SDK 4.5.1, I get an error indicating it cannot resolve <viewer:ViewerContainer> to a component implementation.  I'm figuring this must mean the reference to com.esri.viewer.*  I'm not finding anything related to this in my AGS installation.

Am I making this too difficult?  How can I get this to work?

My goal is to use this login page with the standard Flex Viewer so I can allow only certain people to use it for editing and adding records to a layer.
thanks


ViewerContainer is part of the ArcGIS FLEX API, which must be included in the project... make sure you have downloaded the API and include it before you build the project. I'm not sure how you do that in mxmlc, but the link to the API is here... http://resources.arcgis.com/content/arcgis-flex-api-download
0 Kudos
MagalyC_
Deactivated User
All,

   I think I found a workaround for the map scale and other issues when using the Login screen code in Flex Viewer 2.4. Ultimately it is a time issue. I did not actually find the exact issue but this code change to the ViewerContainer.mxml seem to work as a workaround for me (so far). Below are the portions of code in the ViewerContainer.mxml that need to be updated I comment my work


Hi Robert!

I have modify the code and.... apparently, It works!!!!! No bugs!! A lot of thanks for you!!

🙂
0 Kudos
GregSpiridonov
Occasional Contributor
Can't test this cause i don't have access to create an ASP.NET Service... but as far as your issues with loading the config... have you tried changing the code to be exactly like the 2.4 api? since it differs slightly (from what i see, just that the managers all have ID's) which could easily cause the problem...

here's the 2.4 flexviewer index.mxml with the security code attached to it... anyone able to test it? (If the difference is actually at fault, this should allow you to simply replace the index.mxml instead of having to change the ViewContainer code)

<?xml version="1.0" encoding="utf-8"?>
<!--
     ////////////////////////////////////////////////////////////////////////////////
     //
     // Copyright (c) 2010-2011 Esri
     //
     // All rights reserved under the copyright laws of the United States.
     // You may freely redistribute and use this software, with or
     // without modification, provided you include the original copyright
     // and use restrictions.  See use restrictions in the file:
     // <install location>/License.txt
     //
     ////////////////////////////////////////////////////////////////////////////////
-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:viewer="com.esri.viewer.*"
               xmlns:managers="com.esri.viewer.managers.*"
               pageTitle="ArcGIS Viewer for Flex" 
      currentState="Login">

    <fx:Style source="defaults.css"/>

    <fx:Metadata>
        [ResourceBundle("ViewerStrings")]
    </fx:Metadata>
 <fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";         
  @namespace mx "library://ns.adobe.com/flex/mx";      
  .loginPanelStyle
  {
   corner-radius: 10;
   chrome-color: #004151; 
   color: #FFFFFF;
   background-color: #FFFFFF;
   border-visible: true;
   border-color: #004151;
   border-alpha: 0.8;
   drop-shadow-visible: true;
  }
  .loginLabelStyle 
  {             
   color: #004151;             
   fontSize: 11;
   font-weight: bold;
  }
  .loginText{
   color: #004151;
  }
  .loginButtonStyle 
  {             
   chrome-color: #FFFFFF;
   color: #004151;
  }
  .boilerLabelStyle 
  {             
   color: #004151;             
   fontSize: 12;
   font-weight: normal;
  }
 </fx:Style>
 <fx:Script>         
  <![CDATA[ 
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.soap.WebService;
   
   import spark.skins.spark.PanelSkin;

   protected function submit_clickHandler(event:MouseEvent):void         
   {               
    validate_user_proxy(); //use this to call service
   }
   protected function password_keydown(event:KeyboardEvent):void
   {
    if (event.keyCode==Keyboard.ENTER)
    {
     validate_user_proxy();
    }
   }
   protected function validate_user_proxy():void
   {
    var proxyService:String= "validateUser";
    var ws:WebService = new WebService;
    ws.wsdl ="http://localhost/ArcGIS_Security/Service.asmx?WSDL";
    ws.loadWSDL();
    ws[proxyService].addEventListener(mx.rpc.events.FaultEvent.FAULT,validationFaultHandler);
    ws[proxyService].addEventListener(mx.rpc.events.ResultEvent.RESULT,vsResultHandler);
    ws.getOperation(proxyService).send("sampleSite",userName.text,passWord.text,"username","password");
    }
   public function validationFaultHandler(event:mx.rpc.events.FaultEvent):void 
   {
    this.currentState = "Login";
    lblStatus.text="Internal database error.";
   }
   public function vsResultHandler(event:mx.rpc.events.ResultEvent):void 
   {
    var b:Boolean = event.result as Boolean;
    if (b==true)
    {
     this.currentState = "Viewer";
    }else{
     this.currentState = "Login";
     lblStatus.text="Invalid login.";
    }
   }
   
  ]]>   
 </fx:Script>  
 <s:states>     
  <s:State name="Viewer"/>     
  <s:State name="Login"/>
 </s:states>
 <s:Panel id="loginPanel" title="Sample Login Screen" styleName="loginPanelStyle" includeIn="Login" verticalCenter="0" horizontalCenter="0" width="50%" height="40%">        
  <s:VGroup verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
   <mx:Text width="50%" text="[Enter disclaimer text here]" styleName="boilerLabelStyle" />
   <mx:Form includeIn="Login" >           
    <mx:FormItem label="Username" labelStyleName="loginLabelStyle">                   
     <s:TextInput styleName="loginText" id="userName" />               
    </mx:FormItem>            
    <mx:FormItem label="Password" labelStyleName="loginLabelStyle">
     <s:VGroup>
      <s:TextInput  styleName="loginText" displayAsPassword="true" keyDown="password_keydown(event)" id="passWord" />
      <s:Label id="lblStatus" styleName="loginLabelStyle"/>
     </s:VGroup>
     
    </mx:FormItem>   
    <mx:FormItem>         
     <s:Button label="Login"  styleName="loginButtonStyle" click="submit_clickHandler(event)"/>         
    </mx:FormItem>    
   </mx:Form> 
  </s:VGroup>
 </s:Panel>
 
    <viewer:ViewerContainer id="viewerContainer" includeIn="Viewer">
        <viewer:configManager>
            <managers:ConfigManager id="configManager"/>
        </viewer:configManager>
        <viewer:dataManager>
            <managers:DataManager id="dataManager"/>
        </viewer:dataManager>
        <viewer:mapManager>
            <managers:MapManager id="mapManager"/>
        </viewer:mapManager>
        <viewer:uiManager>
            <managers:UIManager id="uiManager"/>
        </viewer:uiManager>
        <viewer:widgetManager>
            <managers:WidgetManager id="widgetManager"/>
        </viewer:widgetManager>
    </viewer:ViewerContainer>

</s:Application>


Anyone able to test this out?
0 Kudos
GregSpiridonov
Occasional Contributor
Seems to work for me (i disabled the login code so that pressing login is what changed the currentState) but let me know if the new index.mxml code still causes the scale extent and other bugs.
0 Kudos
GregSpiridonov
Occasional Contributor
also, i would suggest adding changing the ViewContainer code to this.. (this ensures that if for some reason the login screen does not display correctly that the map will not appear while it is in the "Login" state)

<viewer:ViewerContainer id="viewerContainer" visible.Login="false">
  <viewer:configManager>
   <managers:ConfigManager id="configManager"/>
  </viewer:configManager>
  <viewer:dataManager>
   <managers:DataManager id="dataManager"/>
  </viewer:dataManager>
  <viewer:mapManager>
   <managers:MapManager id="mapManager"/>
  </viewer:mapManager>
  <viewer:uiManager>
   <managers:UIManager id="uiManager"/>
  </viewer:uiManager>
  <viewer:widgetManager>
   <managers:WidgetManager id="widgetManager"/>
  </viewer:widgetManager>
 </viewer:ViewerContainer>


The main part of this code being the <viewer:ViewerContainer id="viewerContainer" visible.Login="false"> (Sets the map control's visibility to false while in the login state).
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Greg,

   Nope the id is not the solution... I have the id's in my index.mxml and it is still a timing issue that so will not see unless there is a delay of the viewContainer being loaded that is caused by the ASP.net service.

Also the original index.mxml from Andrew already had

<viewer:ViewerContainer id="viewerContainer" includeIn="Viewer">
which you must have missed.
0 Kudos
GregSpiridonov
Occasional Contributor
found the issue 😛
it seems to be using "includeIn" itself as the way to hide the map... I've run into this error before.. it seems that to interact with the map at start, it has to be declared... try this if you can... change

includeIn="Viewer"

to

visible.Login="false"
0 Kudos
GregSpiridonov
Occasional Contributor
that change solves the issue of the config file... but causes another slight error (it loads the map style, which may interfere with your login window style...)

it's not a huge game changer, just make sure the login style css covers all the bases (textbox backgrounds and text seems to be the big one)
0 Kudos