英文:
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
> router.GET("/login", getLoginPage)
> router.POST("/login", authentication.Login)
> router.GET("/dashboard", showMainPage)
>
If user press the button in html
> login.html
>
> html
> <input a href="javascript:void(0);" class="btn btn-primary btn-user btn-block" id="loginButton" value="Login"></input>
>
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
> document.getElementById("loginButton").addEventListener("click", tryLogin, false);
> // Get user inputs like ID and PW
> var request = new XMLHttpRequest();
> request.open("POST", "/login");
> request.send(formData);
>
And now, router.POST("/login", authentication.Login)
will work.
> auth.go
>
> go
> func Login(c *gin.Context) {
> id := c.PostForm("id")
> pw := c.PostForm("pw")
>
> // Hash password again, Check Validation and Find user in database
>
> // If all inputs are correct, Logged in.
> c.Header("Content-Type", "text/html")
> c.HTML(http.StatusOK, "dashboard.html", gin.H{
> "title": "title of my page",
> "username": "I want to send some data like this",
> "usernickname": "TyeolRik",
> }) // But the thing is c.HTML not directing as I want. but it returns well checked in Postman.
> }
>
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
> func Login(c *gin.Context) {
> id := c.PostForm("id")
> pw := c.PostForm("pw")
> // Hash password again, Check Validation and Find user in database
> c.Redirect(http.StatusMovedPermanently, "/dashboard")
> }
>
How can I redirect HTML easily? I temporarily used window.location.href = '/dashboard';
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("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();
}
When server validate POST-ed login, then
auth.go
// Some validation
// If ID and PW is right,
c.Redirect(http.StatusMovedPermanently, "/dashboard")
This works.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论