2
votes

Impossible de passer l'autorisation JWT à l'aide d'Angular8

Ci-dessous le script api php donné par le client lorsque je rencontre des données locales puis statiques stockées avec succès dans le serveur api.

  fetchData(url: string, data: any): Observable<any> {
    const headers = {
    
    Authorization: "Bearer "+"1234",
     "My-Custom-Header": "foobar",
    contentType: "application/json"
    };

   return this.http.post(url, data, {
    headers
    });
   }

Directement, je passe les paramètres à l'api php ci-dessus, puis cela ne fonctionne pas non plus, mon supérieur m'a dit que vous devez appeler le code ci-dessus à partir d'angular J'ai écrit du code mais je ne suis pas en mesure de stocker avec succès ci-dessous mon code angulaire.

Ci-dessous ma classe de modèle

import { Schedule1 } from '../Models/Schedule1.model'


   Schedule1: Schedule1 = new Schedule1();

    addSchedule(scheduleForm: NgForm): void {

    //static data parameter passing
    this.Schedule1.classTitle='hi Class on 3rd April, 2020';
    this.Schedule1.classInfo= 'This is a demo class scheduled to understand API';
    this.Schedule1.classDateTime= '2020-11-12 11:30 AM';
    this.Schedule1.timezone= 'Asia/Kolkata';
    this.Schedule1.classDuration= 15;
    this.Schedule1.classRecording= 'yes';
    this.Schedule1.classAutoStart= false;
    this.Schedule1.recordingAutoStart= false;
    this.Schedule1.classVideoRes= 720;


    //const data = JSON.stringify(this.Schedule1);
    const data = { 
    apiKey: "dcbf187d-bdfe-431b-8f60-fa19bf51cd85", 
    data:  JSON.stringify(this.Schedule1)
    } 

    this.subscription = this.userSvc
    .fetchData("https: //xyz.com/client/schedule", data)
    .subscribe(
    data => {
    // Data on Success
    console.log("data", data);
    },
    error => {
    console.log("error", error);
    }
    );

    }

Ci-dessous se trouve component.ts sur le clic du bouton passant des valeurs statiques

export class Schedule1 {

classTitle: string;
classInfo: string;
classDateTime: string;
timezone: string;
classDuration: number;
classRecording:string;
classAutoStart: boolean;
recordingAutoStart: boolean;
classVideoRes: number;
    
   constructor() {
    
      
   }

  }

Ci-dessous, service.ts

<?php
    //creating payload parameters:
    $classTitle = 'Demo Class on 3rd April, 2020';
    $classInfo = 'This is a demo class scheduled to understand API';
    $classDateTime = '2020-11-12 11:30 AM';
    $timezone = 'Asia/Kolkata';
    $classDuration = 15;
    $classRecording = 'yes';
    $classAutoStart = false;
    $recordingAutoStart = false;
    $classVideoRes = 720;


    /*xyz.com*/
    $apiKey = '12345';
    $secretKey = '12345';

    // Create token header as a JSON string
    $header = json_encode(['alg' => 'HS256','typ' => 'JWT']); // ensure to place first alg part and next typ part

    // Create token payload as a JSON string
    $payload = json_encode(['classTitle' => $classTitle ,'classInfo' => $classInfo ,'classDateTime' => $classDateTime ,'timezone' => $timezone ,'classDuration' => $classDuration ,'classRecording' => $classRecording ,'classAutoStart' => $classAutoStart ,'recordingAutoStart' => $recordingAutoStart ,'classVideoRes' => $classVideoRes ,'apiKey' => $apiKey]);

    // Encode Header to Base64Url String
    $base64UrlHeader = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($header));

    // Encode Payload to Base64Url String
    $base64UrlPayload = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($payload));

    // Create Signature Hash
    $signature = hash_hmac('sha256', $base64UrlHeader . "." . $base64UrlPayload, $secretKey , true);

    // Encode Signature to Base64Url String
    $base64UrlSignature = str_replace(['+', '/', '='], ['-', '_', ''], base64_encode($signature));

    // creating JWT token variable
    $jwt_token = $base64UrlHeader . "." . $base64UrlPayload . "." . $base64UrlSignature;

    // creating authorization varibale
    $authorization = 'Bearer '.$jwt_token;

    ?>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $.ajax
        ({
        type: "POST",
         url: 'https://xyz/client/schedule',
        contentType: 'application/json',
        data: JSON.stringify({
            "apiKey": "12345"
        }),
        dataType : 'json',
        headers: {
        'authorization': '<?php echo $authorization; ?>'
        },
        success: function(retval)
        {
        // alert(retval);
        console.log(retval);
        // var success = retval.success;
        }
        });
    </script>

dans la console obtenant cette erreur.

entrez la description de l'image ici


2 commentaires

Vous obtenez une erreur 403 et cela signifie que vous ne transmettez pas correctement le jeton. Le code PHP que vous avez donné ci-dessus sert à générer le jeton. Vous pouvez utiliser n'importe laquelle des bibliothèques pour générer des jetons. Ensuite, votre code angulaire doit d'abord appeler cette URL et stocker le jeton dans le stockage de session local. Vous pouvez utiliser le jeton dans tous les appels consécutifs.


vérifiez la section de demande dans l'onglet réseau et voyez ce qui est envoyé au serveur.


4 Réponses :


2
votes

Pouvez-vous essayer les modifications suivantes dans votre code pour vérifier si cela fonctionne:

Premier changement:

 fetchData(url: string, data: any): Observable<any> {
    const headers = {
    
    Authorization: "Bearer "+"dcbf187d-bdfe-431b-8f60-fa19bf51cd85",
     "My-Custom-Header": "foobar",
    contentType: "application/json"
    };

   return this.http.post(url, data, {
    headers
    });
   }

Deuxième changement

 const data = this.Schedule1; 


7 commentaires

xyz.com/client/schedule:1 POST https: //xyz.com/client/schedule 502 (Bad Gateway) Schedule: 1 Accès à XMLHttpRequest à 'https: //xyz.com/client/schedule' from origin ' localhost : 4200 'a été bloqué par la stratégie CORS: aucun en-tête' Access-Control-Allow-Origin 'n'est présent sur la ressource demandée. schedule.component.ts: erreur 145 HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https: //xyz.com/client/schedule", ok: false,…} obtenant une erreur dans journal de la console. @Prince


Veuillez utiliser ce lien pour résoudre le problème CORS - techiediaries.com/fix-cors-with-angular-cli-proxy-configurat‌ ion /… .


J'ai ajouté proxyconfig dans l'option: "serve": {"builder": "@ angular-devkit / build-angular: dev-server", "options": {"browserTarget": "my: build", "proxyConfig": " src / proxy.conf.json "}," configurations ": {" production ": {" browserTarget ":" my "}}}. @Prince


Ajout d'un nouveau fichier dans scr également: src / proxy.conf.json obtenant la même erreur. @Prince


{"/ api / *": {"target": " example.com/client/schedule ", "secure": false, "logLevel": "debug"}}. @Prince


J'obtiens la même erreur que celle que vous avez mentionnée ci-dessus. @Prince


Pouvez-vous essayer d'ajouter ci-dessous deux lignes au début de votre code php: header ("Access-Control-Allow-Origin: *"); en-tête ("Access-Control-Allow-Headers: *");



2
votes

Je pense que vous devez définir le type d'option de demande que vous passez à request afin que vous deviez utiliser

import { HttpHeaders } from '@angular/common/http';

également, vous devez importer HttpHeaders

return this.http.post(url, data, headers: new HttpHeaders({
   'Content-Type':  'application/json',
   'My-Custom-Header': 'foobar',
   Authorization: 'my-auth-token'
}));`

Essayez d'utiliser l'extension débloquer cors sur votre navigateur et vérifiez-la à nouveau


13 commentaires

Après la réponse de Prince, l'erreur de xyz.com/client/schedule:1 POST https: //xyz.com/client/schedule 502 (Bad Gateway) Schedule: 1 Accès à XMLHttpRequest à 'https: //xyz.com/client/ schedule 'from origin' localhost: 4200 'a été bloqué par la stratégie CORS: aucun en-tête' Access-Control-Allow-Origin 'n'est présent sur la ressource demandée. schedule.component.ts: erreur 145 HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https: //xyz.com/client/schedule", ok: false,…} obtenant une erreur dans journal de la console. @Mohammadamd


vous devez donc ajouter Access-Control-Allow-Headers: Authorization from the backend ou votre nginx @mohdmazharkhan


quel est votre langage backend peut-être que je peux vous aider ou utilisez-vous Nginx? @mohdmazharkhan


En réponse, je reçois ce code HTML: <html> <head> <title> 502 Bad Gateway </title> </head> <body bgcolor = "white"> <center> <h1> 502 Bad Gateway </h1> < / center> <hr> <center> nginx / 1.14.0 (Ubuntu) </center> </body> </html>. @Mohammadamd


Api développé par le client, je ne peux pas avoir l'autorisation du backend, je devrais passer directement d'angular, d'angular seulement, je dois donner le réglage de certains paramètres de cors, comment je dois ajouter des en-têtes access-control-allow-headers dans angular pouvez-vous mettre à jour votre réponse entièrement, @Mohammadamd


avez-vous accès au serveur? veuillez vérifier /var/log/nginx/error.log pour plus de détails sur l'erreur


vous ne pouvez pas ajouter cet en-tête angulaire en fait, vous devez l'ajouter depuis le côté backend enable-cors.org/server_nginx.html cela devrait vous aider @mohdmazharkhan


où je peux obtenir cet emplacement /var/log/nginx/error.log à partir de mes fichiers angulaires. @Mohammadamd


non, vous devez obtenir cet emplacement depuis votre serveur Nginx


parlons. @Mohammadamd


Serveur Nginx signifie serveur api na. @Mohammadamd


Avez-vous le numéro de l'application. @Mohammadamd


Cela peut être sur le serveur api ou sur un autre serveur



0
votes

vous obtenez cette erreur 'https ://xyz.com/client/schedule' from origin 'localhost:4200' has been blocked by CORS policy car le serveur et le client s'exécutent sur un hôte différent, vous devez exécuter le serveur localement ou essayer ce,

ouvrez chrome à l'aide de cette commande et vérifiez l'onglet réseau du navigateur

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

image


0 commentaires

0
votes

Avez-vous essayé de configurer un fichier de configuration "src / proxy.conf.json"

"architect": {
  "serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

et faites pointer votre "angular.json" vers le fichier de configuration

{
    "/api/*": {
       "target": "http://localhost:4200",
       "secure": false,
       "logLevel": "debug"
    }
}

ce ne sera qu'à des fins de test (puisque vous n'avez pas accès au serveur, non?)


0 commentaires