core.js:9110 錯誤類型錯誤：無法讀取未定義的屬性“post”

Question

我正在構建和 api 以在 Angular 中包含linkedin 登錄。 我在這里使用了 Linkedin 的文檔來逐步完成： https ://docs.microsoft.com/fr-fr/linkedin/shared/authentication/authorization-code-flow?context=linkedin/context

我 console.log 要發送的 url 以獲取令牌，一切都很好，但我仍然有：“無法讀取未定義的屬性 'post'”。 所有信息都可以在post發送的url中找到以獲取結果。

    import { Injectable } from '@angular/core';
    import { Router } from '@angular/router';
    import {  HttpClient, HttpHeaders } from '@angular/common/http';

    //INTERFACE UTILISATEUR
    import { User } from './user.model';

    import { auth } from 'firebase/app';
    import { AngularFireAuth } from '@angular/fire/auth';
    import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';

    import { Observable, of, interval, Subscription } from 'rxjs';
    import { switchMap } from 'rxjs/operators';

    @Injectable({ providedIn: 'root' })

    export class AuthService {

    //PROPERTIES --------------
      user$: Observable<User>;
      state:string = '<hide>';
      clientID: String = '<hide>';
      keyID: String = '<hide>';
      urlLinkedin = `https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${this.clientID}&redirect_uri=http://localhost:4200/authentification/sign-in&scope=r_liteprofile%20r_emailaddress%20w_member_social&state=${this.state}`;
      windowAttributes:string = "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=520,height=700";
      windowTarget:string = "_blank";
      codeRecup:string;
      subscription$: Subscription;
      sendURL:string;

    //END PROPERTIES --------------

    //CONSTRUCTOR
      constructor(
        private afAuth: AngularFireAuth,
        private afs: AngularFirestore,
        private router: Router,
        private http:HttpClient
      ) {}

    //Linkedin  ---------------------- 
    linkedinSignin(){
        window.open(this.urlLinkedin, this.windowTarget, this.windowAttributes);
        window.addEventListener('message', this.linkedinGetCode, false);
      }

    linkedinGetCode (event){
      this.clientID =  '<hide>';
      this.keyID = '<hide>';

      if (event.origin !== "http://localhost:4200")
      return;
      this.codeRecup = event.data;

      this.sendURL = `https://www.linkedin.com/oauth/v2/accessToken`+
      `&grant_type=authorization_code`+
      `&code=${this.codeRecup}`+
      `&redirect_uri=http://localhost:4200/authentification/sign-in`+
      `&client_id=${this.clientID}&client_secret=${this.keyID}`;

    //URL to get the token is perfect
      console.log(this.sendURL);

      this.http.post(this.sendURL,{headers: new HttpHeaders({'Host': 'www.linkedin.com', 'Content-Type':'application/x-www-form-urlencoded'})}
        ).subscribe(responseData =>
          {
            console.log(responseData), err => console.error(err)
          });
      event.preventDefault();
    }

Answer 1

我猜你正在失去上下文。 嘗試這個

window.addEventListener('message', this.linkedinGetCode.bind(this), false);

Answer 2

使用 Tiep Phan 解決方案的代碼：

linkedinSignin(){
    window.open(this.urlLinkedin, this.windowTarget, this.windowAttributes);
    window.addEventListener('message', this.linkedinGetCode.bind(this), false);
  }

linkedinGetCode (event){
  this.clientID =  'hide';
  this.keyID = 'hide';
  //Si le message en provenance du Child a une autre origine que la  Window parente alors on stop tout
  if (event.origin !== "http://localhost:4200")
  return;
  //On récupère le code pour générer un TOKEN
  this.codeRecup = event.data;
  //console.log(this.codeRecup);
  //On prépare l URL pour POSTER le code et recevoir le TOKEN
  this.sendURL = `https://www.linkedin.com/oauth/v2/accessToken`+
  `&grant_type=authorization_code`+
  `&code=${this.codeRecup}`+
  `&redirect_uri=http://localhost:4200/authentification/sign-in`+
  `&client_id=${this.clientID}&client_secret=${this.keyID}`;
  console.log(this.sendURL);
  this.http.post(this.sendURL,{headers: new HttpHeaders({'Host': 'www.linkedin.com', 'Content-Type':'application/x-www-form-urlencoded'})}
    ).subscribe(responseData =>
      {
        console.log(responseData), err => console.error(err)
      });
  event.preventDefault();
}