Question

I’m having a little bit of trouble making OpenID work from within an iframe.

basically I have some heavy handed content loaded on the main page and I want to build a log in system where the page doesn’t need to be reloaded (and thus reload all of that content again). I fell in love with OpenID from using stack exchange websites, and have intergrated it relatively well into other projects.

I feel to do what I want to do I would like to try and use an iframe (because new windows make me cry), however I have stumbled at some form of hurdle somewhere near the middle and for the life of me can’t work out whats going on…

basically I have a form in a jQuery generated DIV and openID form that seems to work to dynamically load an iframe. something along these lines:

<script type="text/javascript">
contentboxs = 0;
function contentbox() {
      if (contentboxs == 0){
        $('#mainpage').append("<div id='contentbox'><div style='clear:both;' id='oritext'></div><div id='f_content'><iframe src ='' name='framedcontent' width='580' height='600' scrolling='false'></iframe></div></div>");
        $('#f_content').hide();
        contentboxs++;
      } else {
        $('#contentbox-wipe').remove();
        $('#contentbox').remove();
        contentboxs--;
      }
    }

function loginpanel(){
      contentbox();
      if (contentboxs == 1){
          $('#oritext').append("<form method='post' action='login.php' name='oidform' target='framedcontent'>Please Select your OpenID Provider: <br/><input type='text' name=\"id\" id='openidbox' /><br /><input type='submit' name='submit' value='Log In' onclick='loginsubmit();' ></form>");
      } 
    }
function loginsubmit() {
    $('#oritext').html('');
    $('#contentbox').animate({'height':'600px', 'width':'700px', 'margin-top' : '-300px', 'margin-left' : '-350px'},500, 'linear', function() { $('#f_content').show(); });

}
</script>
<a href='javascript:loginpanel();'>login</a>

and as far as I can tell this all works fine.

my problem comes in my re-direction to the openID remote sites (again doing it with JS along these lines:)

echo("<div><p><center>Redirecting...</center></div>");

  echo "<script type='text/javascript'>

  function delayer() {

this.location = '".$url."'

}

setTimeout('delayer()', 3000)

</script>";

sorry this is a bit long winded, but here is my problem (finally): this works fine for some of the OID sites that I have tried, but some are giving me problems: Google won’t load at all, Yahoo and mySpace open fine in the iframe then instantly redirect the full window to the home page and the OID page respectively, and wordpress returns an error.

I’m assuming that this is a counter measure put in place to stop me stealing login details (thats not what i’m trying to achieve btw, hence the preamble), and thats fair enough, but still bloody aggravating.

is there any thing here that i’m doing retardedly, is there some way round this, and if neither of the above, is my only other options to create new windows or build my own login/registration.

If you have got this far thank you very much for your time, and I hope you didn’t mind too much the spelling mistakes.

Answer 1

Try running your login in a pop-up window (window.open or <a href=”” target=”login”>). This way window.top==window such that the sites won’t be iframed. Then when you comeback to your own side, you can send an auth cookie and a <script>self.close()</script>