Question

因此，我无法在具有移动应用程序的IOS上使用Google登录。

最初我的代码是

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

此链接对我帮助很大。花了我一段时间才能完全实现所有功能，但它适用于ionic 4。

链接中的所有步骤必须完成。

结束代码：

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”科尔多瓦

1 个答案: