2016-06-08 75 views
0

我使用谷歌腳本實現了一個身份驗證過程,但使用硬編碼數據usernamepassword值從​​選項,我無法找到一種方法從html頁面獲取這些值用戶按下Login按鈕...谷歌腳本:從輸入表格獲取值

有沒有辦法從輸入字段中獲取這個值到​​選項?

這裏是我的代碼:

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> 

谷歌腳本:

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); 
} 

我試圖將此代碼添加到HTML頁面:

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

GS功能:

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); 
} 

但它不工作...

+0

不要強行進入的標籤標題。請參閱http://stackoverflow.com/help/tagging –

回答

1

在原來的HTML文件中你是不是在你.GS文件遞東西給login()函數。你可以使用jquery來獲取這些值。

<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> 

編輯:在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

函數'.withSuccessHandler(function(response)'包含什麼? – Valip

+0

在您的原始登錄函數中,最後一行是Logger.log(urlResponse)。如果返回urlResponse然後它將由.withSuccessHandler()處理。它成爲我的示例中的響應變量。 –

+0

當我在.gs文件上調試此代碼時,我在'email'和'password'值上得到了未定義的值,有效載荷「選項 – Valip