Проверка подлинности Ionic Angular Firebase в Google Plus не работает - PullRequest
Новая
       20

Проверка подлинности Ionic Angular Firebase в Google Plus не работает

0 голосов
/ 11 июля 2019

Я потратил много времени, пытаясь аутентифицировать своих пользователей в Firebase с помощью учетной записи Google в моем приложении Ionic. Я использую Ionic 4 с Angular.

Я отправляю этот вопрос и отвечаю с исследованием, которое я провел, потому что я не мог найти все, что мне нужно, в одном месте, и мне пришлось пройти через много поисков и попытаться получить желаемый результат.

Прежде всего, я попробовал 2 способа с пакетами Firebase, которые никуда меня не ведут:

Наличие поставщика Google от firebase: 

import * as firebase from 'firebase';
import { auth } from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';
...
const provider = new auth.GoogleAuthProvider();

Первой попыткой было всплывающее окно (хотя я знаю, что это не рекомендуется): 

firebase.auth().signInWithPopup(provider).then(function(result) {

Но я сразу же наткнулся на барьер Google, который говорит мне, что я использую disallowed_useragent (из-за WebView) ... так что это не вариант.

Второй - это signInWithRedirect, использующий того же поставщика: 

firebase.auth().signInWithRedirect(provider).then(function(result) {

Затем пользователь перенаправляется в Chrome и логин работает хорошо, НО после этого он перенаправляется на localhost / login (URL, с которого он покинул приложение). Так что на этом все заканчивается и логин не завершен.

Моим последним вариантом был плагин Google Plus от Ionic:
https://ionicframework.com/docs/native/google-plus Но после следующего кода: 

this.googlePlus.login({
  'webClientId': 'webclientid',
  'offline': true,
  'scopes': 'profile email'
}).then(res => {
  ...
});

Ничего не произошло ... даже не было возвращено сообщение об ошибке (также использовалось с try - catch).

Ответы [ 2 ]

0 голосов
/ 11 июля 2019 
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import { LoadingController, AlertController, Platform } from '@ionic/angular';
import { Router } from '@angular/router';
import { environment } from '../../environments/environment';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {

  constructor(
    private afAuth: AngularFireAuth,
    private googlePlus: GooglePlus,
    public loadingController: LoadingController,
    private router: Router,
    private platform: Platform,
    public alertController: AlertController,

  ) {
  }

  async nativeGoogleLogin(): Promise<void> {
    try {
      const user = await this.googlePlus.login({
        'scopes': '', // optional - space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
        'webClientId': environment.googleWebClientId, // 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
      })
      const firebaseUser = await this.afAuth.auth.signInWithCredential(firebase.auth.GoogleAuthProvider.credential(user.idToken));
      this.updateUserData(firebaseUser);
      this.router.navigate(["/tabs/profile"]);
    } catch (err) {
      // console.log(err)
    }
  }
}

В папке Environment, файле environment.ts измените свой ключ API 

export const environment = {
  production: false,
  googleWebClientId: "78565xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
  firebase : { 
      apiKey: "AIxxxxxxxxxxxxxxxxxxxxxxxxxxxxTn-0",
      authDomain: "xxxxxxxxxx.firebaseapp.com",
      databaseURL: "https://xxxxxxxxxx.firebaseio.com",
      projectId: "xxxxxxxxxx",
      storageBucket: "xxxxxxxxxx.appspot.com",
      messagingSenderId: "725xxxxxxxx765"
}};
0 голосов
/ 11 июля 2019

Проблема в том, что android project.properties некоторых библиотек, где используются старые версии. Решение заключается в том, чтобы переписать их в платформы / Android / Project.properties.

Я также использую Ionic Appflow для сборки, поэтому мне пришлось сделать это в config.xml. Итак ... Я установил cordova-plugin-platform-replace и добавил следующие строки в config.xml: 

    <platform name="android">
        <replace-string file="project.properties" find="com.google.android.gms:play-services-auth:11.8.0" replace="com.google.android.gms:play-services-auth:+" />
        <replace-string file="project.properties" find="com.google.android.gms:play-services-identity:11.8.0" replace="com.google.android.gms:play-services-identity:+" />

Теперь все работает как шарм.

Я нашел ответ на этот пост: https://github.com/EddyVerbruggen/cordova-plugin-googleplus/issues/487#issuecomment-402683868

Надеюсь, это поможет другим сэкономить время.

...