Question

从docs看来，除了使用GoogleCredential构造函数（采用authCode作为强制参数）之外，没有其他方法可以使用Google登录。

有关[[loginWithRedirect]]的示例，请参阅Facebook身份验证

此外，文档中有多个对名为loginWithRedirect的函数的引用，但是它们没有链接到任何地方，并且在身份验证对象中没有名为loginWithRedirect的属性。

Answer 1

实际上，RN和服务器SDK不支持重定向概念。您必须拥有自己的authCode。

Stitch的GoogleCredential构造函数只需要一个有效的服务器身份验证代码，以便Stitch服务可以使用offline access。

使用第三方OAuth模块

我对使用带有RN的正式google-auth-library SDK感到不走运。我能够使用react-native-google-signin from react-native-community使它正常运行（至少在iOS上-尚未尝试Android）。安装过程有些繁琐，因此请务必认真遵循其说明！

我将展示如何使用该特定库登录。希望该信息可以应用于其他OAuth库和其他身份验证提供程序（例如Facebook）。

配置GoogleSignin

必须指定WebClientId，并且必须与Stitch UI（see screenshot）上Google Oauth2配置下的Client ID匹配。遵循these steps之后，您就可以在下载的GoogleService-Info.p列表中找到iosClientId。最后，将offlineAccess设置为true。

如果直接使用Google iOS SDK或其他库，请注意，webClientId称为serverClientID，而iosClientClientId简称为clientId。

这是我的配置代码（请参阅完整的App.js file）：

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

渲染GoogleSigninButton

react-native-google-signin提供了一个很好用的按钮，我将其渲染出来了（see screenshot）：

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

缝合GoogleSignin的serverAuthCode

我的_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 })
  }

注销

我发现我必须在测试时注销几次（并弄清楚在哪里使用哪个客户端ID），否则serverAuthCode会返回null。始终使注销按钮可见是一件好事。我的注销代码如下：

_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 })
}

我希望这会有所帮助！

如何使用Mongo Stitch React-Native SDK获取Google OAuth的身份验证代码？

1 个答案:

使用第三方OAuth模块

配置GoogleSignin

渲染GoogleSigninButton

缝合GoogleSignin的serverAuthCode

注销