Issue
I am using angular 6 for frontend and PHP for backend (WAMP) and I want to make a login system. When someone enters valid credentials I want him to get redirected to http://localhost:4200/home
I have auth.php which sets the session variables when someone enters valid username/password and verify.php to check if the session variables are set. Although the app redirects me to home, verify.php can not see the session variables.
Those are my files:
login-form.component.ts
loginUser(event) {
const target = event.target;
const username = target.querySelector('#username').value;
const password = target.querySelector('#password').value;
this.Auth.login(username, password).subscribe(data => {
if(data.success) {
this.router.navigate(['/home']);
}
else {
window.alert(data.message);
}
});
}
which takes the username and password from html and sends it to the service
auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
interface myData {
success: boolean,
message: string
}
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private http: HttpClient) { }
login(username, password) {
return this.http.post<myData>('http://localhost/angular6-app/api/auth.php', {username, password},
{
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
}
auth.php
include 'config.php';
header('Access-Control-Allow-Origin: http://localhost:4200');
$postdata = file_get_contents("php://input");
if(isset($postdata) && !empty($postdata)) {
$request = json_decode($postdata);
$username = $request->username;
$password = $request->password;
$sql = "select * from user where username = '$username'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
if($row['username'] == $username && password_verify($password, $row['password'])) //kanei verify me to hash pou exei ginei
{
$_SESSION['username'] = $username;
$_SESSION['loggedin'] = true;
?>
{
"success": true,
"message": "You have logged in"
}
<?php
}
else {
?>
{
"success": false,
"message": "Invalid credentials"
}
<?php
}
}
?>
and finally verify.php
<?php
session_start();
header('Access-Control-Allow-Origin: http://localhost:4200');
if (isset($_SESSION['loggedin'])) {
?>
{
"success": true,
"message": "You have the right."
}
<?php
}
else {
?>
{
"success": false,
"message": "You DONT have the right."
}
<?php
}
?>
My home.component.ts has this class and I want to display in html "You have the right" but it displays "You DONT have the right" because the variable loggedin is undefined.
export class HomeComponent implements OnInit {
message = "Loading..."
constructor(private user: UserService) { }
ngOnInit() {
this.user.getSomeData().subscribe(data => {
this.message = data.message;
})
}
getSomeData() is implemented in user.service.ts
getSomeData() {
return this.http.get<myData>('http://localhost/angular6-app/api/verify.php');
}
Is there a way to fix this problem with session or do I have to use another method of checking in angular?
Thank you.
Solution
You can't set SESSION on one domain and use on other domain, From your code it's clear you are using two different port, if you want to use sessions javascript and PHP must be on the same Domain/ports.
If you want to use different domains/ports then you have to find other ways like token based auth, i.e in auth.php after successful login create a token which will be saved in your database, send back that token in your successful response.
in your angular save that token to storage ( or wherever you prefer ) and retrieve use data from your PHP API using that token.
so when you do a call in user.service.ts your URL should contain the token
YOUR_TOKEN = '1234'//received after successfull login and saved in local storage
return this.http.get<myData>('http://localhost/angular6-app/api/verify.php?token='+YOUR_TOKEN);
in your verify.php
$token = $_GET['token'];
// check if token is valid in your database and send response
p.s when logout make sure to either expire or delete token from angulare storage and database.
Answered By - user969068
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.