2013-08-05 130 views
2

我想用Sencha Touch登錄外部網站(不是我自己的)。在Sencha Touch登錄表格

下面是我的一些代碼:

登錄控制器

Ext.define('Myapp.controller.Login', { 
extend: 'Ext.app.Controller', 

config: { 
    refs: { 
     loginForm: '#login-form' 
    }, 
    control: { 
     '#login-button': { 
      tap: 'onLoginHandler' 
     } 
    } 
}, 

onLoginHandler: function() { 
    var form = this.getLoginForm(); 
    Ext.Ajax.request({ 
     url: 'https://www.site.com/login.html', 
     headers: { 'Content-Type': 'application/x-www-form-urlencoded'}, 
     method: 'POST', 
     params: form.getValues(), 
     callback: function(options, success, response){ 
     console.log(options); 
     console.log(response); 
     } 
    }); 
} 
}); 

登錄查看

Ext.define('Myapp.view.Login', { 
    extend: 'Ext.form.Panel', 
    alias: 'widget.loginview', 
    xtype: 'loginform', 
    id: 'login-form', 
    requires: [ 
     'Ext.form.FieldSet' 
    ], 

    config: { 
     title: 'Log in', 
     iconCls: 'user', 
     html: 'Login View', 
     method: 'POST', 
     items: [ 
      { 
       xtype: 'fieldset', 
       title: 'Log in', 
       items: [ 
        bunch of fields 
       ] 
      }, 
     { 
      xtype: 'button', 
      text: 'Login', 
      ui: 'action', 
      id: 'login-button' 

     } 
    ] 
} 
}); 

結果我在我的瀏覽器的調試器,看看是不是我有什麼期待:

Request URL:https://www.site.com/login.html?_dc=1375705385394 
Request Headers 
    Access-Control-Request-Headers:origin, x-requested-with, content-type 
    Access-Control-Request-Method:POST 
    Origin:http://localhost 
    Referer:http://localhost/~me/non/ 
    User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36 
Query String Parameters URL encoded 
    _dc:1375705385394 

表格數據甚至不存在。但它顯示了從的console.log「的console.log(響應)」(見控制器),所以它應該被髮送

節點的請求模塊似乎作品我想它..

var request = require('request'); 
var form = require('form-data'); 
var r = request.post('https://www.site.com/login.html', function(err, resp, body){ 

}); 

var frm = r.form(); 
frm.append(...// same fields as in my View, values are hardcoded for testing 

這兩者之間的區別在於表單是在請求之後追加的?

這裏的頭時,我手動登錄:

Request URL:https://www.site.com/login.html 
Request Method:POST 
Status Code:302 Found 
Request Headers 
    Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/ *;q=0.8 
    Accept-Encoding:gzip,deflate,sdch 
    Accept-Language:en-US,en;q=0.8,sv;q=0.6 
    Cache-Control:max-age=0 
    Connection:keep-alive 
    Content-Length:53 
    Content-Type:application/x-www-form-urlencoded 
    Cookie:NOW=4b21bf97818dd91f28732aec2b12344e28ac4aef; TUX-COOKIE=R2414511234; /=; /firsttimeload=0; s_cc=true; s_sq=%5B%5BB%5D%5D 
    Host:www.site.com 
    Origin:https://www.site.com 
    Referer:https://www.site.com/ 
    User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36 
Form Data URL encoded 
    ...my secret form data shows up here 
Response Headersview source 
    Connection:Keep-Alive 
    Content-Encoding:gzip 
    Content-Length:184 
    Content-Type:text/html; charset=iso-8859-1 
    Date:Mon, 05 Aug 2013 12:57:09 GMT 
    Keep-Alive:timeout=5, max=100 
    Location:../redirect/location 
    Server:Apache 
    Set-Cookie:TUX-COOKIE=R2414511234; path=/ 
    Set-Cookie:NOW=none; path=/; expires=Fri, 08-Aug-2003 12:57:09 GMT; secure 
    Set-Cookie:NOW=e555573f3e21a1f008f4be34c7c61234b1014b6; path=/; secure 
    Vary:Accept-Encoding,User-Agent 

任何想法或意見,歡迎!謝謝!

+0

由於同源策略,POST不會失敗到外部網站嗎?如果您在Chrome中進行測試,則必須啓用file:///網址才能從AJAX訪問遠程主機。 –

+0

這是否意味着爲了做到這一點,我需要使用某種類型的iframe hack,或者可能通過節點或其他方式發出請求(是否是possbile)? 該計劃是製作一個超級簡單的智能手機應用程序,它只是解析並呈現我經常用於智能手機的一個網站,並且可能是更好的智能手機版本 – jnes

回答

0

通常我會如何照顧這個問題是使用NodeJS或PHP在我的本地服務器上創建代理服務。這個過程允許我將我的ajax請求提交給同一個源,然後我使用後端post/fetch來與第三方服務進行交互。

除了通過遵守同源策略提供的附加安全性之外,這有幾個額外的好處。您的Ext應用程序可以減少很多手動操作,並且您可以在代理中支持多個服務端點。如果服務發生變化,您將擁有無需使用UI即可測試的服務器代碼,這可以簡化調試。

可能使用JSONP提交您的請求,但如果您要傳輸登錄憑據,那將是非常不明智的。