Проблема X-frame-options при интеграции входа в FB с IONIC PWA - PullRequest
Новая
       26

Проблема X-frame-options при интеграции входа в FB с IONIC PWA

0 голосов
/ 30 августа 2018

Я создаю приложение Ionic, в которое интегрирую логин Facebook. Я строю его с помощью ionic cordova build browser --prod . Сборка прошла успешно, но я получаю сообщение об ошибке на консоли:

Refused to display 'https://www.facebook.com/v2.7/dialog/oauth' in a frame because it set 'X-Frame-Options' to 'deny'.

Я знаю, что этот вопрос задавался много раз, но я не понимаю, что здесь делать. В некоторых ответах говорилось, что удаление cordova-plugin-inappbrowser решит эту проблему, но если я удаляю этот плагин, то получаю ошибку Cordova not found.

Как мне избавиться от этой проблемы?

My Home.ts - это: 

`import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';
/**
 * Generated class for the HomePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {


   isLoggedIn:boolean = false;
users: any;


   constructor(private fb: Facebook) {
  fb.getLoginStatus()
    .then(res => {
      console.log(res.status);
      if(res.status === "connect") {
        this.isLoggedIn = true;
      } else {
        this.isLoggedIn = false;
      }
    })
    .catch(e => console.log(e));
}
   login() {
       console.log("IN LOGIN");
  this.fb.login(['public_profile', 'email'])
    .then(res => {
        console.log(res.status+"----- STATUS");
      if(res.status === "connected") {
        this.isLoggedIn = true;
        this.getUserDetail(res.authResponse.userID);
      } else {
        this.isLoggedIn = false;
      }
    })
    .catch(e => console.log('Error logging into Facebook', e));
}

 logout() {
  this.fb.logout()
    .then( res => this.isLoggedIn = false)
    .catch(e => console.log('Error logout from Facebook', e));
}

    getUserDetail(userid) {
  this.fb.api("/"+userid+"/?fields=id,email,name,picture,gender",["public_profile"])
    .then(res => {
      console.log(res);
      this.users = res;
    })
    .catch(e => {
      console.log(e);
    });
}
}

` Мой Home.html: 

  <ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div *ngIf="isLoggedIn; else facebookLogin">
    <h2>Hi, {{users.name}} ({{users.email}})</h2>
    <p>
      Gender: {{users.gender}}
    </p>
    <p>
      <img src="{{users.picture.data.url}}" width="100" alt="{{users.name}}" />
    </p>
    <p>
      <button ion-button icon-right (click)="logout()">
        Logout
      </button>
    </p>
  </div>
  <ng-template #facebookLogin>
    <button ion-button icon-right (click)="login()">
      Login with
      <ion-icon name="logo-facebook"></ion-icon>
    </button>
  </ng-template>
</ion-content>
...