http://www.perlmonks.org?node_id=985251


in reply to javascript login

You can use WWW::Mechanize::Firefox (as its engine do run javascript; your program will depend on the browser) or read javascript manually and write some Perl logic which does the same by parsing values from the page source.

You can also try WWW::Scripter (and WWW::Scripter::Plugin::JavaScript) or WWW::Mechanize::Plugin::Ajax.

Myself, I prefer reading JS manually and writing same logic in Perl. It leaves my scripts simple whan I'm working with small and simple sites.

Sorry if my advice was wrong.

Replies are listed 'Best First'.
Re^2: javascript login
by robertw (Sexton) on Aug 04, 2012 at 18:20 UTC
    Thank you all so much for the help, I have an applescript that logged in on the site, but I have no idea how to do that in perl 
    do shell script "open -a safari 'https://login.binck.nl/klanten/Login.
+aspx?ReturnUrl=%2fklanten%2fdefault.aspx'"
tell application "Safari"
    activate
    tell document 1
        repeat until ((do JavaScript "location.host") is "login.binck.
+nl")
            delay 1
        end repeat
        do JavaScript "document.getElementById('ctl00_Content_Gebruike
+rsnaam').value='username';document.ge tElementById('ctl00_Content_Wac
+htwoord').value='password';window.open(document.g etElementById('ctl0
+0_Content_LoginButton').href, '_self', 'true');"
    end tell
end tell

    [download]
[reply]
[d/l]

      After reading WWW::Mechanize::Cookbook, I can suggest the following:

      1. Install WWW::Mechanize::Firefox
      2. Install the MozRepl plugin in your Firefox
      3. use WWW::Mechanize::Firefox;
my $mech = WWW::Mechanize::Firefox->new(
    launch => '/path/to/firefox',
);
$mech->get('https://login.binck.nl/klanten/Login.aspx?ReturnUrl=%2fkla
+nten%2fdefault.aspx');

$mech->eval(q{document.getElementById('ctl00_Content_Gebruikersnaam').
+value='username';document.getElementById('ctl00_Content_Wachtwoord').
+value='password';
window.open(document.getElementById('ctl00_Content_LoginButton').href,
+ '_self', 'true');});

        [download]

      This is just an untested rewrite of your AppleScript in Perl. It's possible that even Firefox is not needed (and only WWW::Mechanize is required), but I was not able to find the form ID on the login page because the page doesn't work for me.

      Sorry if my advice was wrong.
[reply]
[d/l]
        I am sorry for replying so late but I got this so far, I also have firebug and web developer app on firefox,is this script coming close to what I need? I have both apps to check but I am not quite sure how to use them, wireshark unfortunately never worked for me:( the page html is underneath 
         my $mech = WWW::Mechanize->new();
$mech->agent_alias( 'Firefox' );
$mech->get( "https://login.binck.nl/klanten/Login.aspx?ReturnUrl=%2fkl
+anten%2fdefault.aspx" );
$mech->submit_form(
    form_number => 2,
    fields => {
        userid => "$userid",
        password => "$password"
    },
    button => "btnSignon"
);

        [download]
        <!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 id="ctl00_Header"><title>
    Binck - Login
</title><link rel="stylesheet" type="text/css" href="styles/binck_prin
+t.css?v=2" media="print" /><link rel="shortcut icon" href="images/ico
+ns/binck.ico" /><meta http-equiv="Page-Exit" content="blendTrans(Dura
+tion=0.01)" />
    
    <script type="text/javascript">
        document.domain = document.domain;
        var documentProtocol = document.location.protocol.toString();
        var documentLocation = document.location.toString();
        var documentHref = document.location.href.toString();
    </script>
<link href="App_Themes/Binck_NL/01-general.css?v=3" type="text/css" re
+l="stylesheet" /><link href="App_Themes/Binck_NL/02-masthead.css?v=3"
+ type="text/css" rel="stylesheet" /><link href="App_Themes/Binck_NL/0
+3-content.css?v=3" type="text/css" rel="stylesheet" /><link href="App
+_Themes/Binck_NL/04-pages.css?v=3" type="text/css" rel="stylesheet" /
+><link href="App_Themes/Binck_NL/05-Binck.css?v=3" type="text/css" re
+l="stylesheet" /><script type="text/javascript" src="/klanten/Scripts
+/multilanguage.js"></script><script type="text/javascript" src="/klan
+ten/Scripts/Translations.ashx"></script><script type="text/javascript
+" src="/klanten/Scripts/jquery.js"></script><script type="text/javasc
+ript" src="/klanten/Scripts/bui.js"></script><script type="text/javas
+cript" src="/klanten/Scripts/binck.utils.js"></script><script type="t
+ext/javascript" src="/klanten/Scripts/binck.global.js"></script><inpu
+t name="ctl00$xpath" type="hidden" id="ctl00_xpath" value="/klanten/"
+ /></head>
<body>
    <form name="aspnetForm" method="post" action="Login.aspx?ReturnUrl
+=%2fklanten%2fdefault.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" 
+/>
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value
+="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDw
+UJLTgwNjcxOTAxD2QWAmYPZBYEAgEPZBYKAgYPFgIeBGhyZWYFKH4vQXBwX1RoZW1lcy9
+CaW5ja19OTC8wMS1nZW5lcmFsLmNzcz92PTNkAgcPFgIfAAUpfi9BcHBfVGhlbWVzL0Jp
+bmNrX05MLzAyLW1hc3RoZWFkLmNzcz92PTNkAggPFgIfAAUofi9BcHBfVGhlbWVzL0Jpb
+mNrX05MLzAzLWNvbnRlbnQuY3NzP3Y9M2QCCQ8WAh8ABSZ+L0FwcF9UaGVtZXMvQmluY2
+tfTkwvMDQtcGFnZXMuY3NzP3Y9M2QCCg8WAh8ABSZ+L0FwcF9UaGVtZXMvQmluY2tfTkw
+vMDUtQmluY2suY3NzP3Y9M2QCAw9kFgICAg9kFgICCw8PFgIeBFRleHQFBUxvZ2luZGRk
+x/ZnNK2OxilkaMqhMSoAtMoQKAM=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/klanten/WebResource.axd?d=mnJJ4vhIO_ydKA2m8pVeNBtwvAIYBk
+QV76BAuMHjo3bjDmkcWug_D5nSi2uFfIMifgpWn0eDwkPXJv1ZVSamcZrWR0c1&amp;t=
+634605271982615616" type="text/javascript"></script>


<script type="text/javascript">
//<![CDATA[
var __cultureInfo = '{"name":"nl-NL","numberFormat":{"CurrencyDecimalD
+igits":2,"CurrencyDecimalSeparator":",","IsReadOnly":false,"CurrencyG
+roupSizes":[3],"NumberGroupSizes":[3],"PercentGroupSizes":[3],"Curren
+cyGroupSeparator":".","CurrencySymbol":"€","NaNSymbol":"NaN","Currenc
+yNegativePattern":12,"NumberNegativePattern":1,"PercentPositivePatter
+n":0,"PercentNegativePattern":0,"NegativeInfinitySymbol":"-Infinity",
+"NegativeSign":"-","NumberDecimalDigits":2,"NumberDecimalSeparator":"
+,","NumberGroupSeparator":".","CurrencyPositivePattern":2,"PositiveIn
+finitySymbol":"Infinity","PositiveSign":"+","PercentDecimalDigits":2,
+"PercentDecimalSeparator":",","PercentGroupSeparator":".","PercentSym
+bol":"%","PerMilleSymbol":"‰","NativeDigits":["0","1","2","3","4","5"
+,"6","7","8","9"],"DigitSubstitution":1},"dateTimeFormat":{"AMDesigna
+tor":"","Calendar":{"MinSupportedDateTime":"\/Date(-62135596800000)\/
+","MaxSupportedDateTime":"\/Date(253402297199999)\/","AlgorithmType":
+1,"CalendarType":1,"Eras":[1],"TwoDigitYearMax":2029,"IsReadOnly":fal
+se},"DateSeparator":"-","FirstDayOfWeek":1,"CalendarWeekRule":2,"Full
+DateTimePattern":"dddd d MMMM yyyy H:mm:ss","LongDatePattern":"dddd d
+ MMMM yyyy","LongTimePattern":"H:mm:ss","MonthDayPattern":"dd MMMM","
+PMDesignator":"","RFC1123Pattern":"ddd, dd MMM yyyy HH\u0027:\u0027mm
+\u0027:\u0027ss \u0027GMT\u0027","ShortDatePattern":"d-M-yyyy","Short
+TimePattern":"H:mm","SortableDateTimePattern":"yyyy\u0027-\u0027MM\u0
+027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss","TimeSepar
+ator":":","UniversalSortableDateTimePattern":"yyyy\u0027-\u0027MM\u00
+27-\u0027dd HH\u0027:\u0027mm\u0027:\u0027ss\u0027Z\u0027","YearMonth
+Pattern":"MMMM yyyy","AbbreviatedDayNames":["zo","ma","di","wo","do",
+"vr","za"],"ShortestDayNames":["zo","ma","di","wo","do","vr","za"],"D
+ayNames":["zondag","maandag","dinsdag","woensdag","donderdag","vrijda
+g","zaterdag"],"AbbreviatedMonthNames":["jan","feb","mrt","apr","mei"
+,"jun","jul","aug","sep","okt","nov","dec",""],"MonthNames":["januari
+","februari","maart","april","mei","juni","juli","augustus","septembe
+r","oktober","november","december",""],"IsReadOnly":false,"NativeCale
+ndarName":"Gregoriaanse kalender","AbbreviatedMonthGenitiveNames":["j
+an","feb","mrt","apr","mei","jun","jul","aug","sep","okt","nov","dec"
+,""],"MonthGenitiveNames":["januari","februari","maart","april","mei"
+,"juni","juli","augustus","september","oktober","november","december"
+,""]}}';//]]>
</script>

<script src="/klanten/ScriptResource.axd?d=1oi1WFW10TMQXedO3brneS61B4D
+hSVqua_PnXLnjQLdK6Yvyw9n5UvhTFTGUwlYszHFM7o-ADeDlSFD2X-ZndnSkjvqfVYxL
+hoqmS_Q0UIVK_VdUHAupnXArmIzCtQ3MMgiCz2Jh5SweIfa-DT-Xa9alIPBjAb6NwgKRL
+M2_BSOY9umQ2cvGNVh0gCXsAOqO-_zNuglUWWq-MuPuuEdwc0GjqPNOdct-7U341KAvle
+4v5E2wuvWd4ZB_r8uxka2PNIx3P6mivdZXIQLOgRnAUN7DDv1aZcGWP0e9wsfow93w1vJ
+Yq0A0TthfLUAR8WEnqiX4LnCL4SA3A4aB1FaIAs1yichiNMpqWzI-shx_mXnsC-b6I2ju
+YuPJZaE65u-MwqrswmE2gB6XIsrN1MAe3mkTAwOexxnruhVssCZfKmSAtNcdhbs-RZm8U
+HWlLZPXKzEIgSaVFDXTptsAxvtLzOU0cTDHRYVNNT4B7nADv5X4zZJaASUbTIj7yz8IBs
+qhUsRwyIdXm6_CdLOKG62m5XfNZVM1" type="text/javascript"></script>
<script src="ProgressiveSearch/WebService.asmx/js" type="text/javascri
+pt"></script>
<script src="Order/OrderHotlistKoersInfo.asmx/js" type="text/javascrip
+t"></script>
<script src="Portefeuille/TogglerWebservice.asmx/js" type="text/javasc
+ript"></script>
<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATIO
+N" value="/wEWBgK3iNfUBwKfkt2gAgKOiZq5DwLbtvDGDgLtsqC3AwKby5G7BEb7K34
+W9Qh4YRhXI5pfYhsh4BKq" />
</div>
    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MasterScriptManager
+', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tctl00
+$StreamTicketRequest'], [], [], 90);
//]]>
</script>

    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(a
+fterAjaxCall);
    </script>
    <div style="display: none">
        <div id="ctl00_StreamTicketRequest">

</div>
    </div>
    
    <input type="hidden" name="ctl00$Content$Protocol" id="ctl00_Conte
+nt_Protocol" />
    <script type="text/javascript">$('#ctl00_Content_Protocol').val(do
+cumentProtocol);</script>

    <!--[if lt IE 8]>

    <div id="iewarning">
        <div class="large invisible">
            <img src="images/icons/driehoek-groot.png" />
            <span class="warning_text">
                <h6>Beste klant,</h6><p>Volgens onze informatie bezoek
+t u onze website met Microsoft Internet Explorer 6 of 7. Onze website
+ werkt echter niet optimaal met deze verouderde browsers. We raden u 
+dan ook dringend aan om uw browser te updaten naar een nieuwere versi
+e zodat u optimaal gebruik kunt maken van de website van Binck. Downl
+oad en installeer hier de meest recente versie van <a href='http://wi
+ndows.microsoft.com/nl-NL/internet-explorer/products/ie/home' target=
+'blank'>Internet Explorer</a>.</p>
            </span>
        </div>
        <div class="small">
            <img src="images/icons/driehoek-klein.png" />
            <span class="warning_text">
                <h6>U gebruikt een verouderde browser. Klik <a href='h
+ttp://windows.microsoft.com/nl-NL/internet-explorer/products/ie/home'
+ target='blank'>hier</a> om te updaten</h6>
            </span>
        </div>
        <a class="warning_button shrunk"></a>
    </div>

    <![endif]-->
    <div id="login">
        <div class="head">
            <h6>
                Welkom bij Binck</h6>
            <p>
                <a href="#" onclick="showHelpAlert(); return false;">U
+itleg</a></p>
        </div>
        <!-- END HEAD -->
        <div class="body">
            <div id="ctl00_Content_divPadding" style="padding-top: 30p
+x; vertical-align:top">
            </div>
            
            <p>
                <label>
                    Gebruikersnaam</label>
                <span class="textInput">
                    <input name="ctl00$Content$Gebruikersnaam" type="p
+assword" id="ctl00_Content_Gebruikersnaam" />
                </span>
            </p>
            <div class="clearLeft">
            </div>
            <p>
                <label>
                    Wachtwoord</label>
                <span class="textInput">
                    <input name="ctl00$Content$Wachtwoord" type="passw
+ord" id="ctl00_Content_Wachtwoord" />
                </span>
            </p>
            <a id="ctl00_Content_LoginButton" class="btn deactivate" h
+ref="javascript:__doPostBack('ctl00$Content$LoginButton','')"><span>L
+ogin</span></a>
            <div class="clearLeft"></div>
            <div id="wachtwoordVergeten"><a href="#">Wachtwoord verget
+en?</a></div>
            <div class="clearLeft">
            </div>
        </div>
        <!-- END  BODY -->
        <div class="foot">
            <h6>
            Nog g&eacute;&eacute;n klant?
               </h6>
            <p>
                Vraag vrijblijvend <a href="http://www.binck.com/nl/we
+lkom/meer_informatie.asp">meer informatie</a> aan of open een <a href
+="http://www.binck.com/nl/welkom/open_een_rekening.asp">gratis rekeni
+ng</a>.
                
                
            </p>
        </div>
        <!-- END FOOT -->
        <p class="url">
         <a href="http://www.binck.nl/">www.binck.nl</a></p>
    </div>

     <div id="passwordFailed" class="hidden">
        <div class="container noBorder" style="width: 425px">
            <p>
                                      De door u ingevulde gegevens zij
+n helaas niet bij ons bekend. Controleer de gegevens                 
+     of neem contact op met Binck via telefoonnummer 020 606 2666. De
+ Klantenservice                      & Orderdesk is bereikbaar op wer
+kdagen van 08:00 tot 22:00 uur en op zaterdag van                    
+  10:00 tot 17:00 uur.                  
            </p>
        </div>
    </div>
    <div id="passwordSuccess" class="hidden">
        <div class="container noBorder" style="width: 440px">
            <p>
                                  We hebben een nieuw wachtwoord verst
+uurd naar het bij ons bekende e-mailadres.                  
            </p>
            <p>
                                  Heeft u nog vragen? neemt u dan cont
+act op met Binck via telefoonnummer 020 606                  2666. De
+ Klantenservice & Orderdesk is bereikbaar op werkdagen van 08:00 tot 
+22:00                  uur en op zaterdag van 10:00 tot 17:00 uur. U 
+kunt ook een e-mail sturen naar <a                      href="mailto:
+klantenservice@binck.nl">klantenservice@binck.nl</a>.                
+      
            </p>
        </div>
    </div>

    <script type="text/javascript">

        window.onload = function () { document.getElementById("ctl00_C
+ontent_Gebruikersnaam").focus(); }; 

        var postOnEnter = function (e) {
            if (e.which == 13) {
                var href = $get("ctl00_Content_LoginButton").href;
                href = href.replace("javascript:", "");
                eval(href);
            }
        };

        $(window).keypress(postOnEnter);
        $(document).keypress(postOnEnter);

        function showHelpAlert() {
            showAlert(Topline.UI.Alert.Title.Information, Topline.UI.L
+ogin.Help);
        }

        $('#wachtwoordVergeten a').click(function () {
            showPopup(Topline.UI.Login.Password.Forgotten, 'Wachtwoord
+Vergeten.aspx', '580', '300', 'no', 'iframe', false, sluitPopup); //W
+achtwoord of gebruikersnaam vergeten 
            return false;
        });

        function wachtwoordAangevraagd(gelukt) {
            var element;
            var titel;
            if (gelukt) {
                titel = Topline.UI.Login.Password.NewSent; //'Nieuw wa
+chtwoord verstuurd'
                element = $('#passwordSuccess');
            } else {
                titel = Topline.UI.Login.User.Unknown; //'Inloggegeven
+s onbekend'
                element = $('#passwordFailed');
            }
            sluitPopup();
            showPopup(titel, null, '500', '300', 'auto', 'alert', fals
+e, sluitPopup, element.html());
        }

        function setCenterLogin() {
            var left = ($(window).width() - $('#login').width()) / 2;
            var top = ($(window).height() - $('#login').height()) / 2;

            $('#login').css('top', top);
            $('#login').css('left', left);
        }

        $(document).ready(function () {
            setCenterLogin();
        });

        $(window).resize(function () {
            setCenterLogin();
        });
    </script>

    <script language='JavaScript1.1' type='text/javascript'>
    <!--
        function sitestat() {
            var ns_l = teller;
            ns_l += '&amp;ns__t=' + (new Date()).getTime(); ns_pixelUr
+l = ns_l;
            ns_0 = top.document.referrer;
            ns_0 = (ns_0.lastIndexOf('/') == ns_0.length - 1) ? ns_0.s
+ubstring(ns_0.lastIndexOf('/'), 0) : ns_0;
            if (ns_0.length > 0) ns_l += '&amp;ns_referrer=' + escape(
+ns_0);
            if (document.images) { ns_1 = new Image(); ns_1.src = ns_l
+; } else
                document.write('<img src="' + ns_l + '" width="1" heig
+ht="1" alt="">');
        }
        teller = documentProtocol + "//nl.sitestat.com/binckbank/binck
+/s?login"
        $(window).load(sitestat);
    //-->
    </script>
    <noscript>
        <img src="https://nl.sitestat.com/binckbank/binck/s?login" wid
+th="1" height="1" />
    </noscript>
    

<script type="text/javascript">
//<![CDATA[
setTranslation('Topline.UI.Login.ForgotUsernameOrPassword', 'Wachtwoor
+d of gebruikersnaam vergeten');Sys.Application.initialize();
//]]>
</script>
</form>
</body>
</html>

        [download]
[reply]
[d/l]
[select]

In Section Seekers of Perl Wisdom