gin-gonic Redirecting HTML following of POST, from Javascript XMLHttpRequest

huangapple go评论91阅读模式
英文:

gin-gonic Redirecting HTML following of POST, from Javascript XMLHttpRequest

问题

我正在尝试使用Gin-gonic构建登录页面,但在重定向浏览器方面遇到了问题。

如果用户在HTML中按下按钮:

login.html

<input a href="javascript:void(0);" class="btn btn-primary btn-user btn-block" id="loginButton" value="Login"></input>

然后,JavaScript函数将起作用。我之所以这样编码是因为我了解到,在将用户ID和密码发送到服务器之前,应对其进行哈希处理(据我所知,这是为了解决某些安全问题,如窃听)。

login.js

document.getElementById("loginButton").addEventListener("click", tryLogin, false);
// 获取用户输入,如ID和密码
var request = new XMLHttpRequest();
request.open("POST", "/login");
request.send(formData);

现在,router.POST("/login", authentication.Login)将起作用。

auth.go

func Login(c *gin.Context) {
  id := c.PostForm("id")
  pw := c.PostForm("pw")

  // 再次哈希密码,检查验证并在数据库中查找用户

  // 如果所有输入都正确,则登录成功
  c.Header("Content-Type", "text/html")
  c.HTML(http.StatusOK, "dashboard.html", gin.H{
		"title":        "我的页面标题",
		"username":     "我想像这样发送一些数据",
        "usernickname": "TyeolRik",
	})  // 但问题是c.HTML没有按照我想要的方式进行重定向,但在Postman中返回正常。
}

但是,c.HTML不会在浏览器中显示渲染后的HTML页面(已在Chrome和Edge中检查),而且c.Redirect()也不起作用。

auth.go

func Login(c *gin.Context) {
  id := c.PostForm("id")
  pw := c.PostForm("pw")
  // 再次哈希密码,检查验证并在数据库中查找用户
  c.Redirect(http.StatusMovedPermanently, "/dashboard")
}

如何轻松重定向HTML?我暂时在JavaScript中使用了window.location.href = '/dashboard';。但它无法像使用gin.H{something}那样进行渲染。

对我有什么建议吗?

英文:

I am trying to build login pages with Gin-gonic, but I got trouble in redirecting browser.

> main.go
>
>go
&gt; router.GET(&quot;/login&quot;, getLoginPage)
&gt; router.POST(&quot;/login&quot;, authentication.Login)
&gt; router.GET(&quot;/dashboard&quot;, showMainPage)
&gt;

If user press the button in html

> login.html
>
> html
&gt; &lt;input a href=&quot;javascript:void(0);&quot; class=&quot;btn btn-primary btn-user btn-block&quot; id=&quot;loginButton&quot; value=&quot;Login&quot;&gt;&lt;/input&gt;
&gt;

Then, Javascript function will be working. The reason why I coded like this is that, I learned that UserID and Password should be hashed before sending to server. (Due to some sort of security problems like tapping, as far as I know)

> login.js
>
> js
&gt; document.getElementById(&quot;loginButton&quot;).addEventListener(&quot;click&quot;, tryLogin, false);
&gt; // Get user inputs like ID and PW
&gt; var request = new XMLHttpRequest();
&gt; request.open(&quot;POST&quot;, &quot;/login&quot;);
&gt; request.send(formData);
&gt;

And now, router.POST(&quot;/login&quot;, authentication.Login) will work.

> auth.go
>
> go
&gt; func Login(c *gin.Context) {
&gt; id := c.PostForm(&quot;id&quot;)
&gt; pw := c.PostForm(&quot;pw&quot;)
&gt;
&gt; // Hash password again, Check Validation and Find user in database
&gt;
&gt; // If all inputs are correct, Logged in.
&gt; c.Header(&quot;Content-Type&quot;, &quot;text/html&quot;)
&gt; c.HTML(http.StatusOK, &quot;dashboard.html&quot;, gin.H{
&gt; &quot;title&quot;: &quot;title of my page&quot;,
&gt; &quot;username&quot;: &quot;I want to send some data like this&quot;,
&gt; &quot;usernickname&quot;: &quot;TyeolRik&quot;,
&gt; }) // But the thing is c.HTML not directing as I want. but it returns well checked in Postman.
&gt; }
&gt;

But c.HTML doesn't showing rendered HTML screen in browser (Chrome and Edge checked) and also, c.Redirect() doesn't work neither.

> auth.go
>
> go
&gt; func Login(c *gin.Context) {
&gt; id := c.PostForm(&quot;id&quot;)
&gt; pw := c.PostForm(&quot;pw&quot;)
&gt; // Hash password again, Check Validation and Find user in database
&gt; c.Redirect(http.StatusMovedPermanently, &quot;/dashboard&quot;)
&gt; }
&gt;

How can I redirect HTML easily? I temporarily used window.location.href = &#39;/dashboard&#39;; in Javascript. But It cannot be rendered like using gin.H{something}

Is there any tips for me?

答案1

得分: 1

感谢@mkopriva的帮助,我发现JavaScript中的XMLHttpRequest()与gin.gonic的*gin.Context.HTML()不兼容。

由于服务器返回,XMLHttpRequest()无法重定向浏览器。

最终代码(运行良好)

login.js

function tryLogin() {
    const email = document.getElementById("loginFormEmail").value;
    const pw = document.getElementById("loginFormPassword").value;
    var hashedPW = sha3_512(pw);

    var hashedForm = document.createElement("form");
    hashedForm.setAttribute("charset", "UTF-8");
    hashedForm.setAttribute("Content-Type", "multipart/form-data");
    hashedForm.setAttribute("method", "POST");  // Post
    hashedForm.setAttribute("action", "/login"); // URL destination

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "email");
    hiddenField.setAttribute("value", email);
    hashedForm.appendChild(hiddenField);

    hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "password");
    hiddenField.setAttribute("value", hashedPW);
    hashedForm.appendChild(hiddenField);

    document.body.appendChild(hashedForm);
    hashedForm.submit();
}

当服务器验证POST的登录信息后,

auth.go

// Some validation
// If ID and PW is right,
c.Redirect(http.StatusMovedPermanently, "/dashboard")

这段代码可以正常工作。

英文:

Thanks to @mkopriva, I found out that XMLHttpRequest() in javascript doesn't work with *gin.Context.HTML() of gin.gonic

Browser doesn't redirect with XMLHttpRequest() as server returns.

Final code (works well)

login.js

function tryLogin() {
    const email = document.getElementById(&quot;loginFormEmail&quot;).value;
    const pw = document.getElementById(&quot;loginFormPassword&quot;).value;
    var hashedPW = sha3_512(pw);

    var hashedForm = document.createElement(&quot;form&quot;);
    hashedForm.setAttribute(&quot;charset&quot;, &quot;UTF-8&quot;);
    hashedForm.setAttribute(&quot;Content-Type&quot;, &quot;multipart/form-data&quot;);
    hashedForm.setAttribute(&quot;method&quot;, &quot;POST&quot;);  // Post
    hashedForm.setAttribute(&quot;action&quot;, &quot;/login&quot;); // URL destination

    var hiddenField = document.createElement(&quot;input&quot;);
    hiddenField.setAttribute(&quot;type&quot;, &quot;hidden&quot;);
    hiddenField.setAttribute(&quot;name&quot;, &quot;email&quot;);
    hiddenField.setAttribute(&quot;value&quot;, email);
    hashedForm.appendChild(hiddenField);

    hiddenField = document.createElement(&quot;input&quot;);
    hiddenField.setAttribute(&quot;type&quot;, &quot;hidden&quot;);
    hiddenField.setAttribute(&quot;name&quot;, &quot;password&quot;);
    hiddenField.setAttribute(&quot;value&quot;, hashedPW);
    hashedForm.appendChild(hiddenField);

    document.body.appendChild(hashedForm);
    hashedForm.submit();
}

When server validate POST-ed login, then

auth.go

// Some validation
// If ID and PW is right,
c.Redirect(http.StatusMovedPermanently, &quot;/dashboard&quot;)

This works.

huangapple
  • 本文由 发表于 2021年6月24日 02:39:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/68105470.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定