2016-06-08 1 views
0

Ich implementierte einen Authentifizierungsprozess mit Google-Skripts aber mit fest codierten Daten für username und password Werte von payload Option und ich kann keinen Weg finden, diese Werte von der HTML-Seite zu bekommen, wenn Benutzer drückt die Login Taste ...Google Skript: Werte von Eingabeformularen

Gibt es eine Möglichkeit, diese Werte von den Eingabefeldern zu payload Option zu bekommen?

Hier ist mein Code:

HTML:

<body> 
    <form> 
     <fieldset class='login'> 

      <div class="required"> 
       <label for="email">Email:</label> 
       <input type="text" name="email" id="email" class="input-text" /> 
      </div> 

      <div class="required"> 
       <label for="pass">Password:</label> 
       <input type="password" name="pass" id="pass" class="input-password" /> 
      </div> 
     </fieldset> 

     <input type="submit" id="submit-btn" value="Login" name='Submit' class='btn'/> 
    </form> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script> 
     $('#submit-btn').click(function() { 
      google.script.run.login(); 
     }); 
    </script> 
    </body> 

Google Script:

function onOpen() { 
    SpreadsheetApp.getUi() 
     .createMenu('Menu') 
     .addItem('Show sidebar', 'showSidebar') 
     .addToUi(); 
} 

function showSidebar() { 
    var html = HtmlService.createHtmlOutputFromFile('login') 
     .setSandboxMode(HtmlService.SandboxMode.IFRAME) 
     .setTitle('SDR Tag Governance') 
     .setWidth(300); 
    SpreadsheetApp.getUi() 
     .showSidebar(html); 
} 

function login(){ 
    var endpoint = 'login'; 
    var url = 'https://example.com/api/'+endpoint; 
    var payload = { 
    'username' : 'email', //Add here the value from #email input 
    'password' : 'pass' //Add here the value from #pass input 
    } 
    var headers = { 
    'Connection':'keep-alive', 
    'Content-Type':'application/json;charset=utf-8', 
    'Accept':'application/json, text/plain, */*', 
    } 
    var options = { 
    'method' : 'post', 
    'headers' : headers, 
    'payload': JSON.stringify(payload), 
    }; 
    var urlResponse = UrlFetchApp.fetch(url, options); 
    Logger.log(urlResponse); 
} 

ich diesen Code auf der HTML-Seite hinzuzufügen versucht:

<script> 
    $('#submit-btn').click(function() { 
     google.script.run 
     .withSuccessHandler(function(response) { 
      return urlResponse; 
     }) 
     .login({ 
      email: $('#email').val(), 
      pass: $('#pass').val() 
     }); 
    }); 
</script> 

Mit GS-Funktion:

function login(email,pass){ 
    var endpoint = 'login'; 
    var url = 'https://example.com/api/'+endpoint; 
    var payload = { 
    'username' : email, 
    'password' : pass 
    } 
    var headers = { 
    'Connection':'keep-alive', 
    'Content-Type':'application/json;charset=utf-8', 
    'Accept':'application/json, text/plain, */*', 
    'Cookie':'...', 
    } 
    var options = { 
    'method' : 'post', 
    'headers' : headers, 
    'payload': JSON.stringify(payload), 
    }; 
    var urlResponse = UrlFetchApp.fetch(url, options); 
    Logger.log(urlResponse); 
} 

Aber es funktioniert nicht ...

+0

Datei nicht mit Gewalt-Tags in Titel. Siehe http://StackOverflow.com/Help/Tagging –

Antwort

1

In Ihrer ursprünglichen HTML-Datei, die Sie vorbei, nichts zu dem Login() Funktion in Ihnen .gs Datei. Sie können jquery verwenden, um diese Werte zu erfassen.

<script> 
    $('#submit-btn').click(function() { 
     google.script.run 
     .withSuccessHandler(function(response) { 
      // this is where you handle the response from your Code.gs 
     }) 
     .withFailureHandler(function(error) { 
      console.log(error); 
     }) 
     .login({ 
      email: $('#email').val(), 
      pass: $('#pass').val() 
     }); 
    }); 
</script> 

EDIT: Login-Funktion in gs

function login(data){ 
    // i dont think you need this endpoint variable 
    var endpoint = 'login'; 
    var url = 'https://example.com/api/'+endpoint; 

    // since you are passing in an object in the html, you can 
    // access the properties of data 
    var payload = { 
    'username': data.email, 
    'password': data.pass 
    } 

    // this is the same as your original 
    var headers = { 
    'Connection':'keep-alive', 
    'Content-Type':'application/json;charset=utf-8', 
    'Accept':'application/json, text/plain, */*', 
    'Cookie':'...', 
    } 

    // are you sure you need to JSON.stringify the payload? 
    // try just passing the payload object as is 
    var options = { 
    'method' : 'post', 
    'headers' : headers, 
    'payload': JSON.stringify(payload), 
    }; 
    var urlResponse = UrlFetchApp.fetch(url, options); 

    // Logger.log shows you what comes back 
    // when that is fine change it to return urlResponse; 
    // this will then get sent to the withSuccessHandler that is 
    // in your HTML file. 
    Logger.log(urlResponse); 
} 
+0

Was sollte diese Funktion '.withSuccessHandler (Funktion (Antwort)' enthalten? – Valip

+0

In Ihrer ursprünglichen Login-Funktion ist Ihre letzte Zeile Logger.log (urlResponse). Wenn Sie das zurückgeben urlResponse dann wird es von der .withSuccessHandler() behandelt. Es wird die Antwortvariable in meinem Beispiel. –

+0

Wenn ich diesen Code auf .gs-Datei debuggen bekomme ich undefinierte Werte auf 'email' und' password' Werte von der ' Payload Option – Valip