Here is my (login.service.ts) code:
private pageURL = 'http://localhost/social/src/app/api/ws/react_signup_login/login.php';
user = new UserLogin();
login(value: Object): Observable<any> {
const body = new URLSearchParams();
Object.keys(value).forEach(key => {
body.set(key, value[key]);
});
let headers = new Headers();
headers.append('Content-Type',
'application/x-www-form-urlencoded');
return this._http.post(this.pageURL, this.user.toString(), {
headers: headers
}).map(res => res.json());
}
And this is my login.ts class
export class UserLogin {
username: string;
password: string;
constructor() {
}
}
in (login.component.ts)
user = new UserLogin();
login(value) {
this._loginService.login({value})
.subscribe(
response => this.user = response,
error => console.log(error)
);
}
Finally my (login.php) that I expect the error is here
header("Access-Control-Allow-Origin: *");
header("Content-type:application/json");
if ($_SERVER['REQUEST_METHOD'] == 'POST' && empty($_POST))
$_POST = json_decode(file_get_contents('php://input'), true);
$params['username'] = $_POST['username'];
$params['password'] = $_POST['password'];
When I'm trying to (var_dump) the $params I got this:
array(2) {
["username"]=>
NULL
["password"]=>
NULL
}
In your POST Http call you should use your defined URLSearchParams as body and not user, because your user object is empty.
Change your http call code block in login.service.ts from this:
return this._http.post(this.pageURL, this.user.toString(), {
headers: headers
}).map(res => res.json());
to this:
return this._http.post(this.pageURL, body.toString(), {
headers: headers
}).map(res => res.json());
Try to use:
return this._http.post(this.pageURL, value, {
headers: headers
}).map(res => res.json());
Where value is your user object
Related
The form has text input and file-input. I studied the tutorial from here.
This is my add.component.ts file:-
import { AdminPage } from '../../../_models/admin.page.model';
import { AdminPageService } from '../../../_admin_service/admin.page';
import { ImageUploadService } from '../../../_common_service/image.upload';
export class AddComponent implements OnInit, AfterViewInit {
.............
.............
adminPageModel = new AdminPage('', '', '', '','');
constructor(private route: ActivatedRoute,
private router: Router,
private _adminPage: AdminPageService,
private _imageUpload: ImageUploadService,
fb: FormBuilder,
private _flashMessagesService: FlashMessagesService) {
this.addPageFormGroup = fb.group({
'title' : [null, Validators.compose([Validators.required])],
'meta_keyword': [null, Validators.required],
'meta_description': [null, Validators.required],
'image':[],
'desc': [null, Validators.required]
});
}
formImageUpload(event){
this._imageUpload.onFileChange(event,this.addPageFormGroup);
}
submitAddPage(value:any){
this.addPageFormGroup.get('desc').setValue($('.Editor-editor').html());
const adminPageModule = this._imageUpload.prepareSave(this.addPageFormGroup);
this._adminPage.postAdminPageAdd(adminPageModule).subscribe(
data => {
this.responseStatus = data;
if(this.responseStatus.status == 1)
{
this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-success', timeout: 2000 });
}
else
{
this._flashMessagesService.show(this.responseStatus.message, { cssClass: 'alert-danger', timeout: 2000 });
}
},
err => {
console.log(err)
},
() => {}
);
this.status = true;
}
}
This is the image.upload.ts service file, where we are setting the formdata from the form:-
#Injectable()
export class ImageUploadService {
constructor() {}
onFileChange(event, formHasImage:any) {
if(event.target.files.length > 0) {
let file = event.target.files[0];
formHasImage.get('image').setValue(file);
}
}
prepareSave(formHasImage): any {
let input = new FormData();
input.append('image', formHasImage.get('image').value);
input.append('title', formHasImage.get('title').value);
input.append('desc', formHasImage.get('desc').value);
input.append('meta_keyword', formHasImage.get('meta_keyword').value);
input.append('meta_description', formHasImage.get('meta_description').value);
console.log(input);
return input;
}
}
This is the admin.page.ts service file where we are hitting the API. This is made by referring to this answer here.
#Injectable()
export class AdminPageService {
http : Http;
actionUrl : string;
admin_page_add_url: string;
postAdminPageAddData: AdminPage;
adminPageAddResponse:Object= [];
constructor(public _http: Http) {
this.http = _http;
this.admin_page_add_url = 'http://localhost/angproject/phpscript/adminpage2.php';
}
// The form Data is being sent as parameter
postAdminPageAdd(postAdminPageAddFormData: any) {
let headers = new Headers();
headers.append('enctype', 'multipart/form-data');
headers.append('Accept', 'application/json');
this.actionUrl = this.admin_page_add_url;
return this.http.post(this.actionUrl,
{ postAdminPageAddFormData },
{ headers: headers })
.map(res => res.json()).share();
}
}
This is the server side php file where we are sending the data. This is made on the accepted answer here:-
<?php
error_reporting(E_ALL);
header("Access-Control-Allow-Origin: http://localhost:4200");
header("Access-Control-Allow-Headers: Content-Type, enctype");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header('Content-Type: application/json; charset=utf-8');
header('enctype: multipart/form-data');
include('connection.php');
$error = array();
if(isset($_FILES['image']))
{
$image = 'Image Exists';
}
else
{
$error[] = "Image was not entered";
$image = '';
}
if(isset($_POST['title']) && !empty($_POST['title']))
$title = $_POST['title'];
else
$error[] = "Title was not entered";
if(empty($error))
{
$response['status'] = 1;
$response['message'] = $image;
$response['error'] = $conn->error;
}
else
{
$response['status'] = 0;
$response['message'] = "Parameter missing";
$response['error'] = $error;
}
$respond = json_encode($response);
echo $respond;
exit;
?>
My issue is, I am always getting this json response:-
{
"status": 0,
"message": "Parameter missing",
"error": [
"Image was not entered",
"Title was not entered"
]
}
It seems like the formdata aren't being sent to the server end. What am I doing wrong here? Mind it, I have other process too, to submit the form. But in that case, I can send data to server successfully by not using formdata and hence, I can't implement file-upload in that method.
Note: When I do console.log(input), I get this:-
You have two problems with your AdminPageService's postAdminPageAdd method.
First, Headers.append() does not mutate the Headers object, it returns a new Headers object with the original headers and the new one. So you need to do something like:
let headers = new Headers();
headers = headers.append('enctype', 'multipart/form-data');
headers = headers.append('Accept', 'application/json');
Second, the FormData object in the post should not be surrounded with curly brackets - it should work if you do:
return this.http.post(
this.actionUrl,
postAdminPageAddFormData,
{ headers: headers }
).map(res => res.json()).share();
Try appending file directly to FormData object.
#Injectable()
export class ImageUploadService {
file: File;
constructor() {}
onFileChange(event, formHasImage:any) {
if(event.target.files.length > 0) {
file = event.target.files[0];
}
}
prepareSave(formHasImage): any {
let input = new FormData();
input.append('image', this.file);
input.append('title', formHasImage.get('title').value);
input.append('desc', formHasImage.get('desc').value);
input.append('meta_keyword', formHasImage.get('meta_keyword').value);
input.append('meta_description', formHasImage.get('meta_description').value);
console.log(input);
return input;
}
}
I Am trying to make a simple login check , using angular 4 , php my sql .
Now i am able to send the details to the php , but i am not able to receive the status after it , i have no idea why.
Simply, i want to check if the username and password are correct, then return some json , else , return false result.
Help please.
Angular :
import { Injectable } from '#angular/core';
import { Http, Response ,RequestOptions,Headers} from '#angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'
#Injectable()
export class appService {
postResponse:any ;
status;
constructor(private http:Http) { }
insertData() {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post('http://localhost:80/angularsql/sql.php',JSON.stringify({firstName:'Joe',lastName:'Smith333'}),{headers:headers})
.map((res: Response) => res.json())
.subscribe((res:'') => this.postResponse = res);
}
}
PHP
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$data = json_decode( file_get_contents('php://input'),true );
$fname = $data['firstName'];
$lname = $data['lastName'];
$con = new mysqli('localhost','root','','angular');
if($fname=='anan' && $lname=='kassis') {
$sql = "insert into users_tbl(firstName,lastName) values('".$fname."','".$lname."')";
$result = $con->query($sql);
$data = [ "status" => "CORRECT" ];
echo json_encode($data);
}
else {
$data = [ "status" => "wrong details inserted" ];
echo json_encode($data);
}
//echo $result;
?>
I think you should change
subscribe((res:'') => this.postResponse = res);
to
subscribe(res: any =>
{
this.postResponse = res);
console.log(res.status)
}
Here, res will be an object and you can console.log(res.status)
Edit: You cannot have the console.log after the subscribe call, because at this stage the http call has not received a response yet.
Other things to consider:
And probably set json type headers in your php response
header('Content-Type: application/json');
Also, you should use parametrized queries (like PDO) when querying your database
I think this line is the issue:
.subscribe((res:'') => this.postResponse = res);
Change your call into:
insertData(): Observable<any> {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post('http://localhost:80/angularsql/sql.php', JSON.stringify({
firstName: 'Joe',
lastName: 'Smith333'
}), { headers: headers })
.map(res => res.json())
.catch((error: any) => Observable.throw(
{ message: error.json().message, details: error.json().details }));
}
You should subscribe to the insertData() method. And in your .post() you map the result and you catch the errrors (if any).
Trying to integrate APIs built in Laravel 5.4 with ionic 2 and struggling handle the error
What I want to do:
Authenticate the login using Laravel Password service ( OAuth2 ).
Once authenticated, it would return the access token.
Access Token is passed in the header in a GET API call to receive the
user details.
I am able to #1 and #2 but got stuck at #3.
Here is my code of login.ts
public login() {
this.showLoading();
this.auth.login(this.loginCredentials).subscribe(allowed => {
if (allowed) {
setTimeout(() => {
this.loading.dismiss();
this.nav.setRoot(HelloIonicPage)
});
} else {
this.showError("Access Denied");
}
},
error => {
this.showError(error);
});
}
auth is a service provider, that has login method.
//Function to get access token
public login(credentials) {
if (credentials.email === null || credentials.password === null) {
return Observable.throw("Please insert credentials");
} else {
return Observable.create(observer => {
var link = 'http://localhost/XXX/public/oauth/token';
var vars = {
password: "XXX",
username: "XXXXXX",
grant_type: 'password',
client_id: "XXXXX",
client_secret: 'XXXXXX',
scope: ''
}
this.http.post(link, vars)
.map(res => res.json())
.subscribe(
data => { let user = this.getUserFromAccessToken(data);
console.log(user);
observer.next(user);
},
err => { observer.error(err.json()); }
() => {
console.log('Completed..');
}
);
});
}
}
//Function to get user from the accessToken
private getUserFromAccessToken(oAuthData) {
let headers = new Headers({ 'Content-Type': 'application/json','Accept': 'application/json','Authorization': 'Bearer ' + oAuthData.access_token });
let options = new RequestOptions({ headers: headers });
let link = 'http://localhost/XXXX/public/api/v1/user';
return this.http.get(link, options)
.map(res => res.json())
.subscribe(
data => this.currentUser = data.user,
err => this.error = err
);
}
currentUser and error are defined as properties of the AuthService class.
How should I ensure that an error is thrown either in case the access token is not returned or user is not returned from the access token.
I'm trying to recreate Post JSON from angular 2 to php but it doesn't work as there's nothing in the $_REQUEST variable on php side
The code:
searchHttp({body}: any): Promise<any>
{
let headers = new Headers ({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers, method: "post" });
let test_this = {"search": "person"};
return this.http.post(this.post_url, JSON.stringify(test_this), options)
.toPromise()
.then(response =>
{
return response.text();
})
.catch(this.handleError);
}
Is there something I'm missing? I know that posts works with another format because I have that answered in another question.
Also, is http.request better than http.post?
Edit:
After much consultation with Angular/Javascript experts, they believe this is a php issue. So anyone with knowledge of how to accept JSON objects on php side will be gladly welcomed.
angular 2 client side part
ngOnInit() {
let body=Api+'product.php'+'?id=' + this.link_id;
this._callservice.callregister(body)
.subscribe( data => {
this.outputs=data;
},
error => console.log("Error HTTP Post"),
() => console.log("completed") );
}
}
call.service.ts
import {Injectable} from '#angular/core';
import {Router} from '#angular/router';
import {Http, Response, Headers, RequestOptions} from '#angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
#Injectable()
export class AuthenticationService {
constructor(private _http:Http){}
postregister(api:any){
// console.log(api);
let headers = new Headers({'Content-Type':'application/x-www-form-urlencoded'});
let options = new RequestOptions({ headers: headers, method: "post"});
return this._http.get(api,options)
.map(res => res.json())
.catch(this.handleError);
}
private handleError (error: Response) {
console.error(error);
return Observable.throw(error.json().error || ' error');
}
}
Server side PHP
make sure on server side you have these three lines in php code.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
Php file:
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
$servername = "localhost";
$username1 = "root";
$password = "root";
$dbname = "product";
$e=array("error"=>1,"message"=>"Account Already Exists");
$accountCreated = array( "error" =>0,
"data" => array(
"username" => "amit" ,
"password" => "anypassword",
"role"=> "user",
"id" => "anyid" ) );
// Create connection
$conn = mysqli_connect($servername, $username1, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$username = $_GET["username"];
$Pass = $_GET["password"];
$role= $_GET["role"];
$sql="SELECT COUNT(*) as user FROM users WHERE username = '$username'";
$result = mysqli_query($conn,$sql);
$line = mysqli_fetch_assoc($result);
$count = $line['user'];
if($count!=0)
{
echo json_encode($e);
}
else
{
$sql="INSERT INTO users(username,password,role)VALUES('$username','$Pass','$role')";
$result=mysqli_query($conn,$sql);
$sql="select * from users where username ='$username'";
$result=mysqli_query($conn,$sql);
$line=mysqli_fetch_assoc($result);
{
$accountCreated['data']['username']=$line['username'];
$accountCreated['data']['password']=$line['password'];
$accountCreated['data']['role']=$line['role'];
$accountCreated['data']['id']=$line['id'];
}
echo json_encode($accountCreated);
}
?>
i hope this will work for you .. for json i guess you should pass as options and use json decode for values you get in options.
There doesn't appear to be anything wrong with the Angular code. The issue is in what the PHP is expecting to receive. I am not a PHP expert, but as you've mentioned that it works fine with jQuery, then that indicates that your PHP is expecting a URL-encoded value (as jQuery tends to work with that), not a JSON value.
In other words, what the server is trying to parse is:
search=person
What you are sending is:
{ "search": "person" }
Try something more like the following to send it in the format you're wanting:
let test_this = { "search": "person" };
let headers = new Headers ({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers, method: "post" });
http.post(this.post_url, test_this, options)
I am using laravel as backend and angujarjs as frontend to make an application. The frontend is sitting in another server, and therefore I have to deal with cross domain policy. I have enabled CORS, so I can "send" post request.
The problem is that when I am trying to get Input::all() in laravel, the request gets cancelled. (status shown 'cancelled' in Chrome network). But when I dont use Input, everything is OK.
//laravel
class SessionController extends BaseController {
protected $entity;
public function __construct(SessionEntity $entity)
{
$this->entity = $entity;
}
public function getLogin()
{
return Response::json('hello')->header('Access-Control-Allow-Origin', '*');
}
public function postLogin()
{
//$data = Input::all();
//return Response::json($data);
// $user = $entity->login($data);
// if($user)
// {
// return Response::json($user);
// } else {
// return Response::json($entity->errors(), 400);
// }
//the code below is OK (able to send response back) , but the code above is not, because I am using Input::all()
$data = array(
"email" => "324234",
"password" => "654321"
);
return Response::json($data);
}
}
//angularjs
.controller('LoginController', ['$scope', '$http', function($scope, $http) {
$scope.send = function(credential) {
$http({
method: 'POST',
url: 'http://localhost:8000/api/session/login',
data: credential,
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
})
.success(function(data, status, headers) {
console.log(data);
console.log(status);
console.log(headers);
});
};
}]);
Here's the headers to enable CORS
App::after(function($request, $response)
{
$response->headers->set('Access-Control-Allow-Origin', '*');
$response->headers->set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
$response->headers->set('Access-Control-Allow-Headers', 'Content-Type');
$response->headers->set('Access-Control-Allow-Credentials', 'true');
$response->headers->set('Access-Control-Max-Age', '1728000');
$response->headers->set('Content-Type', 'application/json; charset=UTF-8');
return $response;
});
What did I miss??
I found it. I use namespace but didn't include 'use Input'.
silly me...
Also, I found that I have to explicitly set Content-Type to 'application/json' in order to receive data using Input::all() in laravel, otherwise I get no data.
For cross domain requests you must use jsonp instead json