使用平台瀏覽器的離子社交登錄，我嘗試在我的項目中使用openfb怎么使用？

Question

我制作離子應用程序，在其中我使用社交名流登錄時，單擊以Facebook或google-plus登錄，然后給出錯誤，表明cordova不可用。 在backen中，我正在使用laravel-passport進行身份驗證。如何解決此問題，請幫助我.....

login.page.ts

import { Component, OnInit } from '@angular/core';
import { NavController, MenuController, ToastController, 
    AlertController, LoadingController } from '@ionic/angular';
import { Router, ActivatedRoute } from '@angular/router';
import { User } from '../user';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import { first } from 'rxjs/operators';
import { UserService } from '../user.service';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';

import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  public onLoginForm: FormGroup;
  submitted = false;

  constructor(public navCtrl: NavController,
    public menuCtrl: MenuController,
    public toastCtrl: ToastController,
    public alertCtrl: AlertController,
    public loadingCtrl: LoadingController,
    private formBuilder: FormBuilder,
    private userService: UserService,
    private nativeStorage: NativeStorage,
    private googlePlus: GooglePlus,
    private fb: Facebook,
    public router: Router) {

  }

  ionViewWillEnter() {
    this.menuCtrl.enable(false);
  }

  ngOnInit() {
    return this.onLoginForm = this.formBuilder.group({
      'email': [null, Validators.compose([
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])],
      'password': [null, Validators.compose([
        Validators.required,
        Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$')
      ])]
    });
  }

  onSubmit() {

    //console.log(this.onLoginForm.value);
    this.userService.login(this.onLoginForm.get('email').value, this.onLoginForm.get('password').value)
      .pipe(first())
      .subscribe(
        async data => {

          if (data['error'] == 'Unauthorised.') {
            //console.log('Unauthorised');
            const toast = await this.toastCtrl.create({
              message: 'Please enter valid Email Or Password.',
              duration: 3000
            });
            this.router.navigate(['login']);
            toast.present();
          }
          else {

            const toast = await this.toastCtrl.create({
              message: 'You have successfully logged in.',
              duration: 3000
            });
           // this.router.navigate(['/start']);
           this.navCtrl.navigateRoot('/app/tabs/tab1');
            toast.present();
          }
        }
      );
  }

  async doGoogleLogin(){
    const loading = await this.loadingCtrl.create({
      message: 'Please wait...'
    });
    //this.presentLoading(loading);

    this.googlePlus.login({
      'scopes': '', // optional, space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
      'webClientId': '456961607151-r2kjrs0k5qnk7r40auuvv5idndafmpqv.apps.googleusercontent.com', // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
      'offline': true // Optional, but requires the webClientId - if set to true the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server
    })
    .then(user =>{
      loading.dismiss();

      this.nativeStorage.setItem('google_user', {
        name: user.displayName,
        email: user.email,
        //picture: user.imageUrl
      })
      .then(() =>{
        this.router.navigate(["/user"]);
      }, error =>{
        console.log(error);
      })
      loading.dismiss();
    }, err =>{
      console.log(err)
      loading.dismiss();
    });


  }
  doFacebookLogin(){
    this.fb.login(['public_profile', 'user_friends', 'email'])
    .then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
    .catch(e => console.log('Error logging into Facebook', e));

  }
}

在login.page.html中，對於社交名流登錄，myfunction被清除。

login.page.html

 <ion-grid class="btn-group">
        <ion-row>
          <ion-col size="4">
            <ion-button shape="round" (click)="doFacebookLogin()" expand="full" color="secondary">
              <ion-icon  name="logo-facebook"></ion-icon>
            </ion-button>
          </ion-col>
          <ion-col size="4">
            <ion-button shape="round" expand="full" color="secondary">
              <ion-icon slot="icon-only" name="logo-twitter"></ion-icon>
            </ion-button>
          </ion-col>
          <ion-col size="4">
            <ion-button  (click)="doGoogleLogin()" shape="round" expand="full" color="secondary">
              <ion-icon  name="logo-googleplus"></ion-icon>
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>

Answer 1

您是否正在瀏覽器或移動設備中對此進行測試。 在瀏覽器中，cordova本機功能將無法使用，並且將顯示錯誤“未找到cordova”。

根據Ionic Docs，在下面安裝了cordova插件

cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="123456789" --variable APP_NAME="myApplication"

$ cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid --variable WEB_APPLICATION_CLIENT_ID=mywebapplicationclientid

參考鏈接： https : //github.com/EddyVerbruggen/cordova-plugin-googleplus https://github.com/jeduan/cordova-plugin-facebook4