如何使用 Mongo Stitch React-Native SDK 获取 Google OAuth 的授权码?
How to get auth code for Google OAuth using the Mongo Stitch React-Native SDK?
从 docs 看来,除了使用将 authCode 作为强制参数的 GoogleCredential 构造函数之外,似乎没有其他方法可以使用 Google 登录,我该如何获取?
For an example of [[loginWithRedirect]], see Facebook Authentication
此外,文档中有多个对名为 loginWithRedirect 的函数的引用,但它们没有 link 任何地方,并且在名为 loginWithRedirect 的身份验证对象中没有 属性。
确实,RN 和服务器 SDK 不支持重定向概念。您必须获得自己的授权码。
Stitch 的 Google 凭据构造函数只需要一个有效的服务器授权代码,以便 Stitch 服务可以使用 offline access。
使用第三方 OAuth 模块
我在使用带有 RN 的官方 google-auth-library SDK 时运气不佳。我能够使它在 react-native-google-signin from react-native-community 上工作(至少在 iOS 上 -- 还没有尝试过 Android)。安装过程有点复杂,所以一定要仔细按照他们的说明去做!
我将展示我如何使用这个特定的库进行登录。希望这些信息可以应用于其他 OAuth 库和其他身份验证提供程序(例如 Facebook)。
配置Google登录
必须指定 webClientId,并且必须与 Stitch Google Oauth2 配置下的客户端 ID 匹配 UI(see screenshot). The iosClientId is found in the GoogleService-Info.plist you download after following these steps。最后,将 offlineAccess 设置为 true。
如果直接使用GoogleiOSSDK或者其他库,注意webClientId调用的是serverClientID and iosClientId is simply called 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
});
}
呈现 Google登录按钮
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 })
}
希望对您有所帮助!
从 docs 看来,除了使用将 authCode 作为强制参数的 GoogleCredential 构造函数之外,似乎没有其他方法可以使用 Google 登录,我该如何获取?
For an example of [[loginWithRedirect]], see Facebook Authentication
此外,文档中有多个对名为 loginWithRedirect 的函数的引用,但它们没有 link 任何地方,并且在名为 loginWithRedirect 的身份验证对象中没有 属性。
确实,RN 和服务器 SDK 不支持重定向概念。您必须获得自己的授权码。
Stitch 的 Google 凭据构造函数只需要一个有效的服务器授权代码,以便 Stitch 服务可以使用 offline access。
使用第三方 OAuth 模块
我在使用带有 RN 的官方 google-auth-library SDK 时运气不佳。我能够使它在 react-native-google-signin from react-native-community 上工作(至少在 iOS 上 -- 还没有尝试过 Android)。安装过程有点复杂,所以一定要仔细按照他们的说明去做!
我将展示我如何使用这个特定的库进行登录。希望这些信息可以应用于其他 OAuth 库和其他身份验证提供程序(例如 Facebook)。
配置Google登录
必须指定 webClientId,并且必须与 Stitch Google Oauth2 配置下的客户端 ID 匹配 UI(see screenshot). The iosClientId is found in the GoogleService-Info.plist you download after following these steps。最后,将 offlineAccess 设置为 true。
如果直接使用GoogleiOSSDK或者其他库,注意webClientId调用的是serverClientID and iosClientId is simply called 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
});
}
呈现 Google登录按钮
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 })
}
希望对您有所帮助!