Как получить код авторизации для Google OAuth с использованием пакета SDK Mongo Stitch React-Native?

Question

Из документов кажется, что нет другого способа войти в систему с помощью Google, кроме использования конструктора GoogleCredential, который принимает authCode в качестве обязательного параметра, как мне его получить?

Пример [[loginWithRedirect]] см. В разделе Аутентификация Facebook

Кроме того, в документах есть несколько ссылок на функцию loginWithRedirect, но они нигде не ссылаютсяи в объекте auth отсутствует свойство с именем loginWithRedirect.

Answer 1

Действительно, RN и серверные SDK не поддерживают концепцию перенаправления. Вы должны получить свой собственный код авторизации.

Конструктор Stitch GoogleCredential просто ожидает действительный код авторизации сервера, поэтому служба Stitch может использовать автономный доступ .

Использовать сторонний модуль OAuth

Мне не повезло, используя официальный SDK google-auth-library с RN. Я смог заставить его работать (по крайней мере, на iOS - еще не пробовал Android) с response-native-google-signin от response-native-community . Процесс установки немного сложен, поэтому обязательно внимательно следуйте их инструкциям!

Я покажу, как я использовал эту конкретную библиотеку для входа в систему. Надеемся, эта информация может быть применена к другим библиотекам OAuth и другим поставщикам аутентификации (например, Facebook).

Настройка GoogleSignin

Должен быть указан webClientId, который должен совпадать с идентификатором клиента в конфигурации Google Oauth2 в интерфейсе Stitch ( см. Скриншот ). IosClientId находится в GoogleService-Info.plist, который вы загружаете после выполнения этих шагов . Наконец, установите для offlineAccess значение true.

Если вы используете Google iOS SDK напрямую или другую библиотеку, обратите внимание, что webClientId называется serverClientID , а iosClientId просто называется clientId .

Вот мой код настройки (см. Мой полный файл App.js ):

componentDidMount() {
  // ...
  GoogleSignin.configure({
    webClientId: '<id>', // from Stitch UI > Users > Providers > Google
    offlineAccess: true,
    iosClientId: '<id>', // CLIENT_ID in GoogleService-Info.plist
  });
}

Визуализация GoogleSigninButton

act-native-google-signin предоставляет красивую кнопку, которую я использовал ( смотри скриншот ):

const loginButton = <GoogleSigninButton
  style={{ width: 192, height: 48 }}
  size={GoogleSigninButton.Size.Wide}
  color={GoogleSigninButton.Color.Dark}
  onPress={this._onPressLogin}
  disabled={this.state.isSigninInProgress}
/>

Дайте стич серверу AutCode от GoogleSignin

Моя функция _onPressLogin использует GoogleSignin для получения serverAuthCode. Затем он передает этот код в Stitch:

_onPressLogin = async () => {
  // They recommend calling this before signIn
  await GoogleSignin.hasPlayServices();

  // Call signIn to get userInfo
  const userInfo = await GoogleSignin.signIn();

  // Check if serverAuthCode was received -- it will be null
  // if something wasn't configured correctly. Be sure to
  // log out after changing a configuration.
  const {serverAuthCode} = userInfo;
  if (serverAuthCode === null) {
    throw new Error('Failed to get serverAuthCode!');
  }
  try {
    // Pass serverAuthCode to Stitch via GoogleCredential
    const user = await this.state.client.auth.loginWithCredential(new GoogleCredential(serverAuthCode));
    console.log(`Successfully logged in as user ${user.id}`);
    this.setState({ currentUserId: user.id });
  } catch(err) {
    console.error(`Failed to log in anonymously: ${err}`);
    this.setState({ currentUserId: undefined })
  }

Выход из системы

Я обнаружил, что мне приходилось выходить из системы несколько раз во время тестирования (и выяснения, какие идентификаторы клиентов использовать где), иначе serverAuthCode вернется к нулю. Было хорошо, когда кнопка выхода была видна постоянно. Мой код выхода из системы выглядит следующим образом:

_onPressLogout = async () => {
  await GoogleSignin.revokeAccess();
  await GoogleSignin.signOut();
  const user = await this.state.client.auth.logout();
  console.log(`Successfully logged out`);
  this.setState({ currentUserId: undefined })
}

Надеюсь, это поможет!