LexikJWTAuthenticationBundle with ionic app - authentication

Question

I have seen many post on this subject, but i can't make a correct request, regardless all of my tests.
I hope anyone could help me on this.
My current configuration :
I work with wamp - apache 2.4.9 -- php 5.5.12
I work with symfony3
i add all rewrite rules in my vhost :
RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.)
RewriteRule . - [e=HTTP_AUTHORIZATION:%1]
On backend, my security.yml is :
firewalls:
dev:
pattern: ^/(_(profiler|wdt)|css|images|js)/
security: false
api_doc:
pattern: ^/api/doc
anonymous: true
api_login:
pattern: ^/api/login
provider: fos_userbundle
stateless: true
anonymous: true
form_login:
check_path: /api/login_check
require_previous_session: false
success_handler: lexik_jwt_authentication.handler.authentication_success
failure_handler: lexik_jwt_authentication.handler.authentication_failure
api:
pattern: ^/api
stateless: true
provider: fos_userbundle
lexik_jwt:
authorization_header:
enabled: true
prefix: Bearer
query_parameter:
enabled: true
name: Bearer
throw_exceptions: true
create_entry_point: true
Configuration of fosuserbundle :
fos_user:
db_driver: orm
firewall_name: main
user_class: UserBundle\Entity\User
group:
group_class: UserBundle\Entity\Group
form:
type: UserBundle\Form\Type\GroupFormType
profile:
form:
type: UserBundle\Form\Type\ProfileFormType
And side of client, i use ionic with angular js, and i try to get the token with :
var loginData = {
username: this.login.username,
password: this.login.password
};
console.debug(loginData);
$http({
url: 'http://app.local/app_dev.php/api/login_check',
method: 'POST',
data: loginData,
headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
ignoreAuthModule: true
})
.success(function (data) {
console.log("Success -- login ok with ".data);
$scope.token = data;
})
.error(function (data) {
console.log("ERROR -- login fail with ", data);
$scope.token = data;
});
that's always return me 'bad credentials'
But my test with curl send me a token
curl -X POST http://app.local/api/login_check -d _username=username -d _password=pass
I have test to prefix _ my login data, change configuration
If anyone have an idea ??
EDIT :
Maybe i have found my problem.
This request curl work fine :
curl -X POST http://app.local/api/login_check -d _username=username -d _password=pass
But this one doesn't work :
curl -X POST http://app.local/app_dev.php/api/login_check -d '{"username": "user", "password": "pass"}'
I search one solution for solve it, but i guess angular http method cannot send two parameters
EDIT 2 :
This request works fine :
curl -X POST http://app.local/app_dev.php/api/login_check -d '{"_username": "user", "_password": "pass"}' -H "Content-Type: application/json"
I search a solution for copy this request with angular http object
EDIT 3 :
I make my angular request like this :
var loginData = {
_username: this.login.username,
_password: this.login.password
};
$http({
url: 'http://app.local/app_dev.php/api/login_check',
method: 'POST',
data: loginData,
headers: {'Content-Type': 'application/json'}
})
.success(function (data) {
console.log("Success -- login ok with ".data);
})
.error(function (error) {
console.log("ERROR -- login fail with ", error);
});
And my javascript console print an error :
XMLHttpRequest cannot load http://app.local/app_dev.php/api/login_check. Response for preflight has invalid HTTP status code 404
EDIT 4 :
I ddin't found the solution ...
It seems CORS request is the problem. i try do reset all headers in my mobile app, nothing has changed.
I try to install nelmioCorsBundle for authorize OPTIONS headers and control my configuration, nothing has changed
I have installed the sandbox (https://github.com/slashfan/LexikJWTAuthenticationBundleSandbox) and i have exactly the same problem.
When i try to execute curl request, i can get my token. When i use angular/ionic app, i have the error :
https://github.com/slashfan/LexikJWTAuthenticationBundleSandbox
XMLHttpRequest cannot load http://app.local/app_dev.php/api/login_check. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:8100', but only one is allowed. Origin 'http://localhost:8100' is therefore not allowed access.
If anyone have a new idea ?? i don't know what i can test now :s
PS : which version of angular is working with demo app in the LexikJWTAuthenticationBundleSandbox ?

Answer 1

In the first (working) request you are using _username as field with value "username" and _password as field with value "pass".
In the second you are using username (instead of _username) as field with value "user" and password (instead of _password) as field with value "pass".
Change your second request to:
curl -X POST http://app.local/app_dev.php/api/login_check -d '{"_username": "username", "_password": "pass"}'
And it should work.
EDIT
Add the option -H "Content-Type: application/json, that gives:
curl -X POST http://app.local/app_dev.php/api/login_check -H "Content-Type: application/json" -d '{"_username": "username", "_password": "pass"}'
And it should work!
EDIT
It seems to be a CORS related issue.
Try to add the following in your angular application, before doing the POST request:
app.config(function ($httpProvider) {
$httpProvider.defaults.headers.common = {};
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};
});
Where app is your angular module (i.e. var app = angular.module(...)).