SSO take 2

commentsNo comments    userJonathan Chauncey

February 3rd, 2010 

Ok so we purchased a new template from Theme Forest this week for our “ASM” system. So while I was reskinning the login box I started having issues outputting the html dynamically using jquery (the old box as you can see was rather simple). So I decided to iframe the entire modal window of the login box. The reason I ended up not doing this last time was because redirecting once authenticated was a bit of pain for some reason. But alas I have conquered that beast.

So what you end up with is something like this:

This is the page which needs to display a login box

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--
 To change this template, choose Tools | Templates
 and open the template in the editor.
-->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>FDLE:AppHub</title>
    <script src="/AppHub/login/script"></script>
    <script type="text/javascript" src="/AppHub/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="/AppHub/js/jquery-ui-1.7.2.custom.min.js"></script>
    <script>
        loadIFrameModal('local', window.location.protocol+"//"+window.location.host+"/AppHub/login/show/");
    </script>
</head>
<body>

</body>
</html>

The javascript (which is a GSP page)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function loadIFrameModal(env, targetUrl) {
    $(window).load(function() {
        var flag = ${flag};
        if(flag == false) {
            if(env == 'dev' || env == 'development') {
                $("body").append("<div id=\"modal\"></div>");
                $("#modal").append("<iframe src=\"http://162.143.99.200:8080/AppHub/login/?targetUrl="+targetUrl+"\" height=\"500\" width=\"400\" frameborder=\"0\" />");
            }
   
            if(env == 'local') {
                $("body").append("<div id=\"modal\"></div>");
                $("#modal").append("<iframe src=\"http://66869-irm:8080/AppHub/login/?targetUrl="+targetUrl+"\" height=\"475\" width=\"400\" frameborder=\"0\" />");
            }
   
            //open dialog
            $("#modal").dialog({
                autoOpen: true,
                height: 525,
                width: 475,
                modal: false,
                resizable: false,
                position: 'center',
                draggable: false,
                closeOnEscape: false
            });
            //hide the title bar
            $(".ui-dialog-titlebar").hide();
            $("#modal > iframe").attr("style", "overflow:hidden;");
        } else {
          $("body").append("<form id=\"form\" method=\"POST\" action=\""+targetUrl+"\"></form>");
          $("#form").append("<input type=\"hidden\" name=\"id\" value=\"${id}\" />");
          $("#form").append("<input type=\"hidden\" name=\"ip\" value=\"${request.getRemoteAddr()}\" />");
          $("#form").submit();
        }
    });
}

The iframe content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<body>
    <!-- Start Wrap -->
    <div id="wrap" class="login">
        <div id="content">
            <div class="inner">
       
                <noscript>
                    <!-- Show message when javascript is not enabled -->
                    <div class="message error">
                            <p>Javascript is needed for this template to work properly. <br />Please <a href="http://browsehappy.com/" title="Upgrade to a better browser">upgrade</a> your browser or <a href="http://www.google.com/support/bin/answer.py?answer=23852" title="Enable Javascript in your browser">enable</a> Javascript to navigate the interface properly.</p>
                        </div> 
                </noscript>
                <!-- Start Content Box #1 -->
                <div class="title">
           
                    <h3>fdle:Connect</h3>
           
                    <div class="selector" title="content_box">
                        <a class="tab active" href="tab-login">Login</a>
                        <a class="tab" href="tab-password">Forgotten Password</a>
                    </div>
                </div>
                <div class="box">
                    <div class="txt">
                   
                        <div id="content_box">
                            <div class="tab-login">

                                <!-- Start Message -->
                                <g:eachError bean="${loginCmd}">
                                    <div class="message error">
                                        <p><g:message error="${it}" /></p>
                                    </div>
                                </g:eachError> 
                                <!-- End Message -->
                           
                                <!-- Start Login Form -->
                                <g:form action="signIn">
                                    <fieldset>
                                        <p><label>Username</label>
                                        <input type="text" class="txt-input large" name="username" />
                                        </p>
                                        <p><label>Password</label>
                                        <input type="password" class="txt-input large" name="password" />
                                        </p>
                                        <p style="float:left;"><input type="submit" class="button" name="submit" value="Login" />
                                        <input type="reset" class="reset" name="reset" value="Reset" /></p>
                                        <input type="hidden" name="targetUrl" value="${targetUrl}" />
                                        <input type="hidden" name="ip" value="${request.getRemoteAddr()}" />
                                    </fieldset>
                                </g:form>
                                <!-- End Login Form -->
                           
                            </div>
                            <div class="tab-password">
                                <!-- Start Password Form -->
                                <form method="post" action="index.html">
                                    <fieldset>
                                        <p><label>Email</label>
                                        <input type="text" class="txt-input large" />
                                        <small>Please enter the email address of your account</small></p>

                                        <input type="submit" class="button" name="submit" value="Request Password" />
                                    </fieldset>
                               
                                </form>
                                <!-- End Password Form -->
                            </div>
                        </div>
                   
                    </div>
                </div>
                <!-- End Content Box #1 -->
           
            </div>
        </div>         
    </div>
    <!-- End Wrap -->
</body>

And the page that redirects once authenticated:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--
 To change this template, choose Tools | Templates
 and open the template in the editor.
-->

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>FDLE:Connect</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      // Load jQuery
      google.load("jquery", "1.3.2");
      google.load("jqueryui", "1.7.2");
      google.setOnLoadCallback(function() {
            $(document).ready(function() {
                self.parent.location = '${targetUrl}';         
            });
      });
    </script>
  </head>
  <body>
    <span style="color:#000; font-size:14px; font-family:verdana;">If this page does not redirect please click the following <a href="${targetUrl}" target="_top">link</a>.</span
 </body>
</html>

Posted in: grails, javascript



This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

addLeave a comment

You must be logged in to post a comment.