Login Screen for the Flexviewer

[andrewj_ca]

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

[RobertScheitlin__GISP]

Kevin,

  They must be having an issue... Here is the zip file.

[andrewj_ca]

Sorry guys there are no problems, I took the code down.

[RobertScheitlin__GISP]

Andrew,

   Permanently?

Hmm.. you would think that the resource center would display a "resourse unavailable" message intead of an access denied message.

[andrewj_ca]

Robert,

Not sure about the duration.  I might revamp it, I was just getting to many questions.  I thought it was pretty straight forward although I know it requires a certain level of understanding.  It wasn't posted for the copy/paste ninja.  It was more of a sample of one way to add a level of security, more of a place to start.  I'll see if I can come-up with a simpler implementation with documentation. Cheers

[JosVroegop]

Hello,

I would very much like to implement this code but when i go to http://www.arcgis.com/home/item.html?id=baebcaf317994d63902bc9735c0657e0 the access is denied.
Can someone tell me how to get access or post a .zip file please? Would be greatly appreceated, thanks in advance!

[NateSylvester]

Hi,

I have managed to create an ASP.NET wrapper application for my flex viewer application. Users and user access to different basemaps is built into SQL tables in the GIS database, there is a helpdesk function where 1st line suppport team can edit/create users and manage their access to basemaps without developer intervention. Passwords are encrypted by the .net app before being written to the database. This was designed for intranet use only.

Once a user is verified, they are presented with a choice of basemaps to load for the flexviewer app (they can only choose one, but may be entitled to see several). The map url they choose is then passed from the .net application to the flex viewer by using URL params. The flex viewer is actually embedded in an aspx page that sits within the .NET application project. There are also some code changes you need to make to the flex viewer out-of-the-box code to enable it to read the map url passed from the .net application.

There is plenty of scope to take what I have created and extend it / edit it to do other user specific processing in the flex application (ie load certain config files for particular users).

If anyone is interested I can make  the .NET code available together with the stored procedures for creating the authorisation tables in SQLServer, but I would suggest that non-technical users and people with zero .NET/ SQL experience would maybe find this a little beyond their capability and should consult their development team. There is probably a much neater way to do the user authentication by using the built in .NET API's for user/role authorisation. However in our case we needed to be able to manage users who are outside the company and have no windows domain accounts with us, but are able to access our intranet and this was the path of least resistance.

Also please note, to make the application work properly, there are changes that need to be made at the flex end in order for the URL params passed from .NET wrapper to be read. There is definitely scope for this code to be played with to enable different configs to be loaded for different users or any other user specific actions to be executed in the flex application based on URL parameter info passed through.

Were you able to allow for resizing of your .aspx page with the embedded viewer?

[grahamcooke]

Were you able to allow for resizing of your .aspx page with the embedded viewer?

Hi Nate,

I don't remember where i dug it up from but a little googling around lead me to some clever javascript. Here is the source for our aspx page that hosts the flex viewer:

function pageY(elem) 

{    

    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;

}

 

function resizeObjectContainer() 

{    

    var buffer = 20;  //scroll bar buffer

    var height = document.documentElement.clientHeight;    

    height -= pageY(document.getElementById('swfContainer'))+ buffer ; 

      //height -= pageY(document.getElementById('DisplayFrame'));  

    height = (height < 0) ? 0 : height;    

    document.getElementById('swfContainer').style.height = height + 'px'; 

    //resizeDebug();

}

 

function GetURLParam(name)

{

  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

  var regexS = "[\\?&]"+name+"=([^&#]*)";

  var regex = new RegExp( regexS );

  var results = regex.exec( window.location.href );

  if( results == null )

    return "";

  else

    return results[1];

}

 

</script>

<body onload="resizeObjectContainer();" onresize="resizeObjectContainer();">

    <form id="form1" runat="server">

    <div>

        <object id="swfContainer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width=100%>

            <param name="movie" value="index.swf"/>

            <param name="flashvars" value="<%=Request.QueryString%>" />

        </object>

    </div>

    </form>

</body>

</html>

The GetURLParam function is what allows the flex viewer to retrieve the url from the aspx page. You have to put some code in the flexviewer itself to use this function, but if you are not passing params from ASP.NET to flex you can ignore this and just pay attention to the other 2 javascript functions.

If this helps you, please dont forget to up vote this post using the arrows on the right hand side.

cheers,

Graham

[RaoBase]

Hi everyone,
I have tried to implement the login similar to this. However when refreshing the browser (F5), the page is reloaded and the login form appears again!!

Any ideas??


Thanks

[andrewj_ca]

gisbiz10,

You might want to think about leveraging html5's localstorage element or at minimum setting session variables.  I've used this method with great success.  Let me and the other users know what you've come-up with.

[RaoBase]

Hi, Thanks for the reply.

I had a look at HTML5 localstorage.
It seems similar to SharedObject in Flex. The problem is it will stay on the users machine and user won't need to log on until the file deleted.

I have also tried using browsermanager. But it doesn't fire on browser refresh

Any example of how this can be achieved successfully.