1We have a plugin deployed on the buildfire platform that is a standalone model. We use OAuth from the login screen presented upon accessing the plugin within our app. This plugin is made up of API calls into one of our vendor partners platforms. The entire plugin is written using JavaScript, HTML and CSS. It functions perfectly on Android devices and in testing from Windows PCs, however, iOS devices do not work. Using the same credentials, verified on an Android device, iOS devices immediately throw a login error. Need direction on what might be causing this. Login code in post. screenshot of error
function setToken() {
let header = document.getElementById("loginHeader");
let user = document.getElementById("username");
let pw = document.getElementById("password");
const bodyText = 'grant_type=cloud_contact&username=' + user.value + '&password=' + pw.value;
console.log(bodyText);
fetch('https://example.cloud.com/oauth/token', {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
timeout: 0,
mode: 'cors', // no-cors, *cors, same-origin
headers: {
'Content-Type': 'text/plain'
},
body: bodyText
})
.then(response => response.json())
.then(data => {
header.innerHTML = 'logging in...';
let token = data.access_token;
if (token) {
authManager.enforceLogin();
buildfire.userData.save({ token }, "myToken", (err, result) => {
if (err) console.log("error in setToken(): " + err);
});
header.innerHTML = "Login successful";
console.log('login successful and token saved successfully');
} else {
header.innerHTML = "Login failed";
}
})
.then(noObject => {
navHome();
})
.catch(error => console.log('try again', error));
}
function loggedIn() {
console.log("checking login...");
authManager.enforceLogin();
buildfire.userData.get("myToken", (err, response) => {
if (err) console.log('login error in loggedIn(): ' + err);
if (response) {
if (!response.data.token) {
navToLogin();
}
console.log("we have a response token");
fetch('https://example.cloud.com/api/userinfo?token=' + response.data.token, {
method: 'GET', // *GET, POST, PUT, DELETE, etc.timeout: 0,
mode: 'cors', // no-cors, *cors, same-origin
})
.then(response => response.json())
.then(result => {
let contexts = result.contexts;
buildfire.userData.save({ contexts }, "contexts", (err, result) => {
if (err) console.log("error saving contexts: " + err);
});
})
.catch(error => redoLogin('error using token to verify login', error));
}
});
return checkLogin();
}
function checkLogin() {
var retVal = true;
buildfire.userData.get("myToken", (err, response) => {
if (err) console.log('error in checkLogin(): ' + err);
if (response) {
console.log("we have a response token");
fetch('https://example.cloud.com/api/customers/0/activity/search?token=' + response.data.token, {
method: 'GET', // *GET, POST, PUT, DELETE, etc.timeout: 0,
mode: 'cors', // no-cors, *cors, same-origin
})
.then(response => response.json())
.catch(error => redoLogin('error using token to verify login', error));
console.log("token is valid");
retVal = true;
} else {
console.log("invalid response");
retVal = false;
}
});
return retVal;
}
function redoLogin(message) {
console.log(message);
logoutAndNavToLogin();
}
function console.log(data) {
let logBox = document.getElementById("logBox");
if (logBox) {
logBox.innerHTML += 'Log: ' + data + '. ';
}
console.log(data);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="../../../scripts/buildfire.js"></script>
<body>
<div>
<p class="page-header text-center text-info" id="loginHeader">Enter your BoldNet credentials</p>
</div>
<form action="setToken()">
<div class="container">
<div class="form-group">
<p class="text-muted">Username:</p>
<input class="form-control" id="username"></input>
<p class="text-muted">Password:</p>
<input class="form-control" type="password" id="password"></input>
</div>
<form-button class="btn btn-primary" type="submit" onclick="setToken()">Login</form-button>
</div>
</form>
<div>
<p id="logBox"></p>
</div>
<script src="login.js"></script>
<script src="nav.js"></script>
<script src="authManager.js"></script>
<script src="dal.js"></script>
</body>
</html>
This does not seem like an issue with BuildFire OAuth since it does not seem to be using BuildFire OAuth but rather a custom code setting user data to the standard BuildFire login user.
You can troubleshoot by creating a testing version of the plugin with some logging on the UI to see where it is exactly failing on iOS.
Here is also link that explains how to integrate with BuildFire OAuth 2 https://sdk.buildfire.com/docs/using-oauth2-sign-in-integration/
Related
I am trying to make an application that allows user to upload images and videos posts to the facebook page by uploading them to the application.
My access token and all other stuffs are working fine for uploading pictures, but not for videos.
const [file, setFile] = useState([]);
code for uploading picture (working)
const formData = new FormData();
formData.append("source", file)
axios.post("https://graph.facebook.com/<pageId>/photos?",
formData,
{
headers:
{
"Content-Type": "multipart/form-data",
"Authorization": "Bearer <access_token>"
}
}
).then(
(res) => {
if (res.data["id"]) {
alert("Upload Successfully")
}
}
).catch((err) => {
alert("Error communicating to server")
console.log(err)
})
code for uploading video (not working)
const formData = new FormData();
formData.append("file", file);
axios.post("https://graph-video.facebook.com/v16.0/<page_id>/videos",
formData,
{
headers:
{
"Content-Type": "multipart/form-data",
"Authorization": "Bearer <same_access_token>"
}
}
).then(
(res) => {
if (res.data["id"]) {
alert("Upload Successfully")
}
}
).catch((err) => {
alert("Error communicating to server")
console.log(err)
})
code for getting input
<input className="btn" type="file" accept="video/mp4,video/x-m4v,video/*"
onChange=
{
(e) => { handleChange(e) }
}
/>
<input className="btn" type="file" accept="image/png, image/jpeg"
onChange=
{
(e) => { handleChange(e) }
} />
const handleChange = (e) => {
setFile(e.target.files[0]);
}
var checkBox = document.getElementById("myCheck");
var checkBoxChecked = "false";
if (checkBox.checked == true){
checkBoxChecked = "true";
}
const uri = 'https://jsonplaceholder.typicode.com/posts?exact' + checkBoxChecked;
const initDetails = {
method: 'get',
headers: {
"Content-Type": "application/json; charset=utf-8"
},
mode: "cors"
}
function getData() {
fetch(uri, initDetails)
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
console.log(response.headers.get("Content-Type"));
return response.json();
}
)
.then(myJson => {
console.log(JSON.stringify(myJson));
})
.catch(err => {
console.log('Fetch Error :-S', err);
});
}
window.onload=function() {
let myButton = document.getElementById("getData");
myButton.addEventListener('click', getData);
}
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">Search:</label><br>
<input type="text" id="fname" name="fname" value="John">
<input type="radio" id="myCheck" name="fav_language" value="HTML">
<label for="html">Exact</label><br><br>
<input type="submit" id="getData" value="Submit">
</form>
<script>
</script>
</body>
</html>
I have one text box and radio button name is exact
Onsubmit i call fetch api.
I need to check fetch api request url have exact query parameter
if exact parameter is not added in request fetch api call it will be error.
if exact parameter not added in fetch api request i need to throw error in rtl test case.
URL: https://jsonplaceholder.typicode.com/posts?exact=true
EX: expect(fetch.url()).toContain('?exact=true');
I am trying to do a challenge where I have to send this data through a post request to http://challenge-react.alkemy.org/
email: challenge#alkemy.org
password: react
const baseUrl = "http://challenge-react.alkemy.org/";
const user = {
'email': 'challenge#alkemy.org',
'password': 'react'
}
const getToken = async () => {
fetch(baseUrl, {
method: 'POST',
request: {"Content-Type": "application/json"},
body: JSON.stringify(user)
})
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log(err));
}
export default getToken;
For some reason that I can't understand, it is returning this to me
{error: "Please provide valid email and password"}
I don't know if my problem is with my function or what.
If I make this same request via postman, it returns the token I need
request should be headers.
See more here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_json_data
I don't think this will ever work in the browser because it keeps forcing the requests over HTTPS, erroring with: (unknown) POST https://challenge-react.alkemy.org/ net::ERR_SSL_PROTOCOL_ERROR. You can check for yourself by opening the console tab in developer tools (F12 on Chrome).
function App() {
const baseUrl = "http://challenge-react.alkemy.org";
const user = {
email: "challenge#alkemy.org",
password: "react",
};
React.useEffect(() => {
fetch(baseUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(user),
})
.then((response) => response.json())
.then((json) => console.log(json))
.catch((err) => console.error(err)); // "oh, no!"
}, []);
return <div />;
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
I'm trying to send a POST fetch request from reactjs app to API . I tried with Postman and the API works, but my fetch does not and get the error I wrote in the title. Please see below my following my code:
function handleSubmit(event) {
alert('A form was submitted: ' + vendorName);
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://localhost:8080/api/newuser";
console.log('lets roll')
fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
// We convert the React state to JSON and send it as the POST body
body: JSON.stringify({
firstParam: vendorName
})
})
// .then(res => res.json())
.then(function (response) {
console.log(response)
return response.json();
}).catch((err) => {
console.log(err)
})
event.preventDefault();
}
return (
<div>
<Navy vendorsdb={Vendorsdb} />
<form onSubmit={handleSubmit}>
<h2><a>Register your business</a></h2>
<input onChange={event => setVendorName(event.target.value)} class="form-control" type="text" placeholder="enter business name" aria-label="Search"></input>
<h1>{vendorName}</h1>
<button type="submit">Submit</button>
</form>
</div>
)
}
Here's the server-side code, it's an API to update a js file with new route.
It works with Postman but , a fetch or axios call from my ReactJS client-side
doesn't reach it.
module.exports = function (app) {
app.post("/api/newuser", function (req, res) {
console.log("yes can post") //didn't log
newVendorReceived = (req.body.newVendor);
//add new route for new vendor in App.js
var jsFile;
fs.readFile('./src/App.js', "utf8", function (err, data) {
if (err) throw err;
jsFile = data;
console.log(jsFile)
var appArray = jsFile.split(" ");
console.log("appArray ", appArray.length)
//find marker and insert new route statement
for (i = 0; i < appArray.length; i++) {
if (appArray[i] === "<Marker") {
appArray.splice(i, 1, `<Route exact path="/${newVendorReceived}" props="${newVendorReceived}" render={() => <Chat />} />\n <Marker`);
newJsFileData = appArray.join(" ");
stringyVersion = JSON.stringify(newJsFileData)
console.log("appArray after join is ", newJsFileData)
fs.writeFileSync('./src/App.js', newJsFileData, function (err) {
if (err) {
return console.log(err);
}
console.log("Success!");
});
break;
}
}
//find marker and insert new import statement
for (let i = 0; i < 2; i++) {
// console.log("sc")
// console.log(appArray[i])
// console.log("count ", i);
if (appArray[i] === "/*!*/") {
// console.log("##############")
// console.log("found importmarker!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! marker is ", appArray[i])
appArray.splice(i, 1, `import ${newVendorReceived} from './${newVendorReceived}'; /*!*/`);
var newJsFileData = appArray.join(" ");
var stringyVersion = JSON.stringify(newJsFileData)
console.log("appArray after join is ", newJsFileData)
fs.writeFileSync('./src/App.js', newJsFileData, function (err) {
if (err) {
return console.log(err);
}
console.log("Success!");
});
}
}
});
axios is making or redirecting to this weird url. i don't what's happening. i also check other solutions available here, but no help.
i also checked it with public api urls, but it's redirecting to same url.
i'm making request from https://d52890213a1f40e2b2XXXXXXX5ab4e.vfs.cloud9.ap-southeast-1.amazonaws.com:8081/teachers
axios method:
export function apiCall(method, url, data) {
console.log(method, url, data)
debugger
return axios[method]({
url,
params: { origin: "*" },
data
})
.then(res => {
console.log(res);
return res.data;
})
.catch((err) => {
if (err.response) {
// debugger
return Promise.reject(err.response.data);
}
else if (err.request) {
// debugger
return Promise.reject(err);
}
else {
// debugger
return Promise.reject(err);
}
});
}
console output
get https://d52890213a1f40e2b2XXXXXXX5ab4e.vfs.cloud9.ap-southeast-1.amazonaws.com:8080/api/questionset undefined
calling function
componentDidMount(){
apiCall('get', `${process.env.REACT_APP_BASE_URL}/api/questionset`)
// apiCall('get', `https://randomuser.me/api/`, undefined)
.then(data =>{
console.log(data);
if(!data.success){
throw Error(data.message);
}
else{
this.setState({
isLoading: false,
questionSets: data.questionSets
})
}
})
.catch(err=>{
debugger
console.log(err);
this.setState({
isLoading: false
})
return this.props.addError(err.message)
});
}
errors:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /teachers/[object%20Object]</pre>
</body>
</html>
What about try to use Promise?
export function apiCall(method, url, data) {
return new Promise((resolve, reject) =>
axios({
method,
url,
params: { origin: "*" },
data
})
.then(res => {
resolve(res.data)
})
.catch((err) => {
if (err.response) {
// debugger
reject(err.response.data);
}
else if (err.request) {
// debugger
reject(err);
}
else {
// debugger
reject(err);
}
})
)
}