Search code examples
javascriptauthenticationtumblr

How to detect if a tumblr user is logged in?


I'm writing a theme and wanted to display content only to the admin of the blog, but I don't know how to detect if the admin is logged in.

I did notice that at the bottom of the HTML, right before the closing body tag there is this code:

<iframe src="http://assets.tumblr.com/iframe.html?10&src=http%3A%2F%2Fstaff.tumblr.com%2F&amp;lang=en_US&amp;name=staff" scrolling="no" width="330" height="25" frameborder="0" style="position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;" id="tumblr_controls"></iframe>
<!--[if IE]>
<script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script>
<![endif]-->
<script type="text/javascript">_qoptions={qacct:"p-19UtqE8ngoZbM"};</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>     
<noscript><img src="http://pixel.quantserve.com/pixel/p-19UtqE8ngoZbM.gif" style="display:none; border-width:0px; height:1px; width:1px;" alt=""/></noscript>

The URL in the iframe (http://assets.tumblr.com/iframe.html?10&src=http%3A%2F%2Fstaff.tumblr.com%2F&lang=en_US&name=staff) leads to a page which does its own check if the user is logged in. I just haven't been able to figure out how it works.

Because this check would need to be embedded in the theme's code it must be in JavaScript.

Thanks, Spencer


Solution

  • I think problem cannot be solved because this check must be made on server, and check can't be made due to limitations of Tumblr Theme engine.

    UPDATE: return to JS version

    List of iframes:

    Different block of code from these iframes:

    Tumblr iframe for non-logged users:

    <script type="text/javascript">
            var logged_in = (document.cookie.indexOf('logged_in=1') != -1);
    </script>
    …
    <div style="position:absolute; top:3px; right:3px; white-space:nowrap; height:20px;">
        <span id="logged_out_controls" style="display:none;">
            <a href="https://www.tumblr.com/register" target="_top" id="follow_link">
                    <img id="follow_image" alt="Follow" style="width:58px;"/>
            </a>
            <a href="https://www.tumblr.com/register/join_tumblr" target="_blank"
            id="join_link">
                    <img id="join_image" alt="Join Tumblr" style="width:105px;"/>
            </a>
        </span>
    </div>
    

    Tumblr iframe for logged users [owner]:

    <div style="position:absolute; top:3px; right:3px; white-space:nowrap; height:20px;">
        <a target="_top" href="http://www.tumblr.com/customize?redirect_to=http%3A%2F%2Fexample.com%2F">
            <img src="http://assets.tumblr.com/images/iframe_customize_alpha.png?1016" alt="Customize" style="height:20px;width:80px; border-width:0px; display:block; float:left; cursor:pointer;" />
        </a>
        <a target="_top" href="http://www.tumblr.com/dashboard">
            <img src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?1016" alt="Dashboard" style="height:20px; width:81px; border-width:0px; display:block; float:left; cursor:pointer;" />
        </a>
    </div>
    

    Tumblr iframe for logged users [non-owner]:

    <div style="position:absolute; top:3px; right:3px; white-space:nowrap; height:20px;">
        <form action="/follow" method="post" style="display:block; float:left;"onsubmit="_gaq.push(['_trackEvent', 'Iframe', 'Follow', 'example-com');">
            <input type="hidden" name="form_key" value="83jbGySgEVpQGOoZALqqoSaKfjs"/>
            <input type="hidden" name="id" value="example-com"/>
            <input type="image" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?1016"style="width:58px; height:20px; border-width:0px; display:block;margin-left:3px; cursor:pointer;"alt="Follow"/>
        </form>
        <a target="_top" href="http://www.tumblr.com/dashboard">
            <imgsrc="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?1016" alt="Dashboard" style="height:20px; width:81px; border-width:0px; display:block; float:left; cursor:pointer;"/>
        </a>
    </div>
    

    Diffs which can be detected:

    Iframe for non-logged has strange script line:

    • var logged_in = (document.cookie.indexOf('logged_in=1') != -1);

    • There is NO link with href attribute contains 'customize' pattern (CSS way: a[href*='customize']);

    • There is NO link with href attribute contains 'dashboard' pattern (CSS way: a[href*='dashboard']);

    Iframe for logged users [owner]:

    • There is link with href attribute contains 'dashboard' pattern (CSS way: a[href*='dashboard']);
    • There is link with href attribute contains 'customize' pattern (CSS way: a[href*='customize']);

    • There is NO 'follow' form;

    Iframe for logged users [non-owner]:

    • There is link with href attribute contains 'dashboard' pattern (CSS way: a[href*='dashboard']);
    • There is 'follow' form;

    • There is NO link with href attribute contains 'customize' pattern (CSS way: a[href*='customize']);

    Conclusion

    However I find this solution quite fragile, I think it is possible to detect is user owner of current blog based on diffs listed above.