Ionic IOS Google 登录手机 "location.protocol" Cordova

Question

所以我在使用移动应用程序 Google 登录 IOS 时遇到了问题。

最初我的代码是

auth.service.ts

constructor(
  private afAuth: AngularFireAuth,
  private afs: AngularFirestore,
  private router: Router
) {
  this.user$ = this.afAuth.authState.pipe(
    switchMap(user => {
      if (user) {
        return this.afs.doc<any>(`users/${user.uid}`).valueChanges();
      } else {
        return of(null);
      }
    })
  );
}

googleSignIn() {
  const provider = new firebase.auth.GoogleAuthProvider();
  return this.oAuthLogin(provider);
}
private async oAuthLogin(provider) {
  const credential = await this.afAuth.signInWithPopup(provider);
  return this.updateUserData(credential.user);
}

private updateUserData({ uid, email, displayName, photoURL }) {
  const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${uid}`);

  const data = {
    uid,
    email,
    displayName,
    photoURL
  };
  __email = email;
  __id = uid;
  this.router.navigate(['/tabs']);
  return userRef.set(data, { merge: true });
}

使用此代码，一切都可以在 Web 和 Android 上完美运行。显示一个弹出窗口，我可以使用 Google.

登录

IOS 抛出错误

Error: Uncaught (in promise):  Error: This operation is not supported in the environment this 
application is running on. "location.protocol" must be http, https or chrome-extension and 
web storage must be enabled.

所以我添加了一些 Cordova 插件，因为我的应用程序同时使用 Capacitor 和 Cordova。

官方 Firebase Cordova Google-登录文档

https://firebase.google.com/docs/auth/web/cordova

但是，文档中的代码似乎也没有 IOS 运行。

signInWithPopup() signInWithRedirect() linkWithPopup() 和 linkWithRedirect()

全部导致与之前相同的错误。

而且 Google 似乎不再允许网络视图登录

https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html

Answer 1

我终于明白了！！

https://jsmobiledev.com/article/ionic-google-login

这个 link 对我帮助很大。我花了一段时间才完全实现所有这些，但它适用于 ionic 4。

必须完成 link 中的所有步骤。

结束代码：

auth.service.ts

constructor(
  private afAuth: AngularFireAuth,
  private afs: AngularFirestore,
  private router: Router,
  private googlePlus: GooglePlus,
) {
  this.user$ = this.afAuth.authState.pipe(
    switchMap(user => {
        if (user) {
        return this.afs.doc<any>(`users/${user.uid}`).valueChanges();
      } else {
        return of(null);
      }
    })
  );
}


googleSignIn() {
  this.googlePlus.login({
    'webClientId': 'THIS_IS_YOUR_WEB_CLIENT_ID',
    'offline': false
  }).then( res => {
   this.afAuth.signInWithCredential
   (firebase.auth.GoogleAuthProvider.credential(res.idToken))
      .then( success => {
        console.log("Firebase success: " + JSON.stringify(success));
    
        return this.updateUserData(success.user);
      })
      .catch( error => console.log("Firebase failure: " + 
      JSON.stringify(error)));
    }).catch(err => console.error("Error: ", err));
}


private updateUserData({ uid, email, displayName, photoURL }) {
  const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${uid}`);

  const data = {
    uid,
    email,
    displayName,
    photoURL
  };
  __email = email;
  __id = uid;
  this.router.navigate(['/tabs']);
  return userRef.set(data, { merge: true });
}

Ionic IOS Google 登录手机 "location.protocol" Cordova

Ionic IOS Google Log-In mobile "location.protocol" Cordova

ios

cordova

firebase

typescript

google-signin