【发布时间】：2019-04-11 21:27:50
【问题描述】：
我遇到了一个错误，我的端点适用于 thymeleaf 和 javascript，但不适用于 reactJs。
我尝试了几个小时将此解决方案转换为 reactJS
我在 thymeleaf 和函数 javascript 中的初始化测试工作正常
<script src="/js/sms-login.js"></script>
<script src="https://sdk.accountkit.com/en_US/sdk.js"></script>
</head>
<body>
<h1>Login with Phone Number</h1>
<h2 th:if="${param.logout}">You have been logged out</h2>
<div>
<select id="country_code">
<option value="+49">+49 Germany</option>
</select>
<input id="phone_number" type="text" placeholder="Phone Number" />
<br/><br/>
<button class="fb" onclick="smsLogin()">Verify and Login</button>
</div>
<form id="login_success" action="/login/redirect_success" th:object="${accKitReq}" method="POST">
<input id="csrf" type="hidden" name="csrf" th:field="*{csrf}"/>
<input id="code" type="hidden" name="code" th:field="*{code}"/>
<input type="submit" value="Send" />
</form>
</body>
</html>
我的 Javascript 函数
function loginCallback(response) {
if (response.status === "PARTIALLY_AUTHENTICATED") {
// Send code to server to exchange for access token
document.getElementById("code").value = response.code;
document.getElementById("csrf").value = response.state;
// document.getElementById("login_success").submit();
console.log(""Auth ok")
} else if (response.status === "NOT_AUTHENTICATED") {
// handle authentication failure
console.log("NOT_AUTHENTICATED")
} else if (response.status === "BAD_PARAMS") {
// handle bad parameters
console.log("BAD_PARAMS")
}
console.log(loginCallback)
}
function smsLogin() {
var countryCode = document.getElementById("country_code").value;
var phoneNumber = document.getElementById("phone_number").value;
AccountKit.login(
'PHONE',
{countryCode: countryCode, phoneNumber: phoneNumber}, // will use default values if not specified
loginCallback
);
}
这是我的端点连接帐户工具包和我的后端 java spring boot
@GetMapping("/login")
public String login(ModelMap m) {
m.addAttribute("accKitReq", new AccountKitPostRequest());
return null;
}
@PostMapping("/login/redirect_success")
public String loginSuccess(@ModelAttribute AccountKitPostRequest accKitReq) {
String uri = TOKEN_EXCHANGE_BASE_URL + "?grant_type=authorization_code&code=" +
accKitReq.getCode() + "&access_token=AA|" + FB_APP_ID + "|" + AK_APP_SECRET;
Object obj = restTemplate.getForObject(uri, Object.class);
@SuppressWarnings("unchecked")
Map<String, Object> info = (HashMap<String,Object>) obj;
String user_id = (String) info.get("id");
String user_access_token = (String) info.get("access_token");
String me_endpoint_uri = ME_ENDPOINT_BASE_URL + "?access_token=" + user_access_token;
Object me = restTemplate.getForObject(me_endpoint_uri,Object.class);
//Set Phone User Object
@SuppressWarnings("unchecked")
Map<String, Object> map = (HashMap<String,Object>) me;
@SuppressWarnings("unchecked")
Map<String, Object> phone = (HashMap<String,Object>) map.get("phone");
String number = (String) phone.get("number");
这是我在 ReactJs 中的代码在我尝试提交表单时不起作用，我收到错误 500 is not sent...
import React, { Component } from 'react';
import AccountKit from 'react-facebook-account-kit';
import { smsLoginRedirect, GetSmsLogin } from '../../util/APIUtils';
function loginCallback(response) {
if (response.status === "PARTIALLY_AUTHENTICATED") {
document.getElementById("code").value = response.code;
document.getElementById("csrf").value = response.state;
// document.getElementById("login_success").submit();
console.log("PARTIALLY_AUTHENTICATED")
} else if (response.status === "NOT_AUTHENTICATED") {
// handle authentication failure
console.log("NOT_AUTHENTICATED")
} else if (response.status === "BAD_PARAMS") {
// handle bad parameters
console.log("BAD_PARAMS")
}
console.log(response)
}
export default class FbAccountKit extends Component{
constructor() {
super();
this.state = {
csrf: '',
code: ''
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange (event) {
this.setState( [event.target.name] : event.target.value )
}
//My endpoint /login/
componentDidMount() {
GetSmsLogin() //endpoinst /login
.then(({ accKitReq }) => {
const data = accKitReq
console.log(data);
})
}
//handdle submit with my endpoint /login/redirect_success
handleSubmit(event) {
event.preventDefault();
const data = {
code: this.state.code.value,
csrf: this.state.csrf.value
}
console.log(data)
smsLoginRedirect(data) //endpoint /login/redirect_success
.then(response => {
notification.success({
description: "Thank you! You're logged in",
});
console.log(response)
}
render() {
return (
<div>
<AccountKit /> //my private details to init account kit
//I'm receiving from my account ki the code and csrf in my form ok
<Form id="login_success" onSubmit={this.handleSubmit} >
<Input id="code" type="" name="code" onChange={event => this.handleChange(event)}/>
<Input id="csrf" type="" name="csrf" onChange={event => this.handleChange(event)}/>
<Button
htmlType="submit"
className="create-poll-form-button">Submit</Button>
</Form>
</div>
);
}
}
我认为这是关于在测试 thymeleaf 时在我的端点发送 object=${accKitReq} 中使用 @ModelAttribute，但使用 ReactJS javascript 根本不起作用。任何想法为什么我的错误在哪里？谢谢。
【问题讨论】：
标签： javascript java spring reactjs spring-boot