使用 React Native 实现 Google+ 登录

关键词：

【中文标题】使用 React Native 实现 Google+ 登录【英文标题】：Implement Google+ Sign-In with React Native 【发布时间】：2015-06-01 00:16:26 【问题描述】：

我想在 React Native 应用程序中集成 G+ 登录（根据 https://developers.google.com/+/mobile/ios/sign-in）。我通过http://brentvatne.ca/facebook-login-with-react-native/ 进行了 Facebook 登录，它运行良好，但我不确定在 G+ 文档的这一点上该怎么做：

在视图控制器的 .h 文件中，导入 GooglePlus/GooglePlus.h，并声明此控制器类实现 GPPSignInDelegate 协议

如果有人可以提供一些指针/代码示例？

谢谢！

【问题讨论】：

我即将实现同样的事情。你有什么见解吗？ 我还没有@Premasagar！仍在等待解决方案... 如果有人可以使用 react-native-google-signin 发布示例 react-native 应用程序，我将不胜感激。 【参考方案1】：

所以这只是与 React Native 半相关，因为您的主要问题似乎是编写 G+ 登录的 Obj-C 端。为此，请获取适用于 Google Plus 的 iOS 快速入门应用：

https://developers.google.com/+/quickstart/ios

按照说明打开示例项目，您将找到包含此行的 SignInViewController.m 文件：

@interface SignInViewController () <GPPSignInDelegate>

这似乎就是你所追求的。

一旦你完成了这项工作，你就需要实现与 React Native 的连接。您链接到的 Facebook 帖子显示了如何做到这一点，但官方文档在这里：

http://facebook.github.io/react-native/docs/nativemodulesios.html#content

我还写了一篇文章来展示我能想到的最简单的 Native Module，我认为它很好地描述了一般概念：

http://colinramsay.co.uk/2015/03/27/react-native-simple-native-module.html

【讨论】：

感谢科林的回答。是否有任何示例说明如何从反应中生成新的本机视图？我想这就是我需要在这里做的，对吧？抱歉，我的 ObjC 技能基本为零…… 我的 Obj-C 技能也相当一般，但这就是为什么我提到我觉得这更像是一个 Obj-C 问题而不是 React Native 问题。如果你想做这种事情，那么你必须至少学习一点 Obj-C！在 RN 主页 (facebook.github.io/react-native) 上，有一些关于在“可扩展性”标题下公开自定义 iOS 视图的内容，这可能是一个很好的起点。【参考方案2】：

2017 年编辑

在 Expo 框架（现在是 react-native 应用程序的默认设置）中，内置了可用的 Google 身份验证：

展会文档：https://docs.expo.io/versions/latest/sdk/google.html

获取 Android 和 iOS 客户端 ID：https://console.developers.google.com/apis/credentials

import React from 'react'
import Expo from 'expo'
import Button from 'react-native-button'

class Login extends React.Component 
  signInWithGoogleAsync = async () => 
    try 
      const result = await Expo.Google.logInAsync(
        androidClientId: process.env.GOOGLE_ANDROID_CLIENT_ID,
        iosClientId: process.env.GOOGLE_IOS_CLIENT_ID,
        scopes: ['profile'],
      )

      if (result.type === 'success') 
        return result
      
      return  cancelled: true 
     catch (e) 
      return  error: e 
    
  


  onLoginPress = async () => 
    const result = await this.signInWithGoogleAsync()
    // if there is no result.error or result.cancelled, the user is logged in
    // do something with the result
  

  render() 
    return (<Button onPress=this.onLoginPress>Login</Button>)
  

老答案

现在有一个用于使用 Google+ 登录 react-native 的库：https://github.com/devfd/react-native-google-signin

【讨论】：

@ShariqMusharaf 我已经更新了答案，希望它对你更好 Expo 远非 react native 的“默认”。 Facebook 正在研究它，但它是一个不同的系统，而且看起来还没有准备好迎接黄金时段，例如medium.com/2-minute-revolution-developer-blog/… 对于其他希望集成的人，这声称可以替代现已损坏的 react-native-google-signin 包：github.com/joonhocho/react-native-google-sign-in（注意模块名称略有不同）【参考方案3】：

经过这么多的努力，我已经解决了我们在 React Native 应用程序中集成 Google+ 登录时遇到的所有问题。 请找到需要做的一步一步的改变 1.在谷歌云平台创建项目：Try free trail 我用的是谷歌云平台，如果你不使用，你只需要在谷歌控制台下启用api即可

为您的项目启用 Google+ API 并在您的谷歌云控制台中生成 API 密钥

设置您的 android 项目的 YourSHA-1 密钥和包名称（如 AndroidManifest.xml 中给出）（注意：如果您为此使用 expo，则应先弹出 expo 以实现此目的，Read How To Eject Expo )

要生成您自己的 SHA-1，请使用命令 -> keytool -list -v -keystore mystore.keystore

注意：如果您的构建是调试构建，则使用上述命令生成的 SHA-1 将不起作用，请仔细检查您的 adb 日志，您的 android 调试构建使用的 SHA-1 将记录在设备日志中。要检查设备日志，请从 /Users//Library/Android/sdk/platform-tools 运行以下命令 —> adb logcat

在 firebase 中导入同一个项目：如果您不使用 firebase，请跳过此步骤和下一步

在您的 firebase 项目中设置 android 项目，然后设置在您的应用中使用的身份验证方法。

然后为您的 firebase 项目设置相同的 SHA-1 密钥：从侧边栏导航到项目设置并点击常规，选择 android 应用并设置 SHA-1 密钥

注意：设置 SHA-1 后，请在同一页面下载 google-services.json 文件。并将文件保存在您的 android 项目主管应用文件夹 /ReactNativeProjectFolder/android/app 下

添加“react-native-google-signin”和“firebase”模块

npm install react-native-google-signin –save

npm install firebase –save

在 /app/bundle.gradle 中添加依赖项

注意：在下面的代码中，那些排除是最重要的，否则你会遇到奇怪的链接错误。

implementation project(':react-native-google-signin')

如果您的应用正在使用其他一些依赖项，例如 react-native-maps 或 react-native-social-share，那么也请执行以下更改

implementation(project(":react-native-google-signin"))
    exclude group: "com.google.android.gms" // very important

compile(project(':react-native-maps')) 
      exclude group: 'com.google.android.gms', module: 'play-services-base'
      exclude group: 'com.google.android.gms', module: 'play-services-maps'
    
implementation 'com.google.android.gms:play-services-base:11.+'
implementation 'com.google.android.gms:play-services-maps:11.+'

您的 android/bundle.gradle 文件应如下所示 // ***构建文件，您可以在其中添加所有子项目/模块通用的配置选项。

构建脚本 存储库 谷歌（） 中心（） 依赖 类路径'com.android.tools.build:gradle:3.0.1' 类路径 'com.google.gms:google-services:3.0.0' //

所有项目 存储库 mavenLocal() 中心（） 行家 // 所有的 React Native（JS、Obj-C 源代码、Android 二进制文件）都是从 npm 安装的 网址“$rootDir/../node_modules/react-native/android”

下一个 compileSdkVersion = 23 targetSdkVersion = 23 buildToolsVersion = "23.0.1" googlePlayServicesVersion = "10.2.4" androidMapsUtilsVersion = "0.5+"

在命令下方

npm 安装

反应原生链接

运行 react native 链接后 - 检查 android/settings.gradle 文件，交叉检查不应该有重复的内容行。

到目前为止，我们已经完成了项目级别的配置，现在让我们看看代码变化

使用 firebase 代码反应原生 Google 登录/注册

进口 谷歌登录 来自'react-native-google-signin'； 从'firebase'导入firebase；

函数 googleAuthConfig(successCallback, failureCallback) GoogleSignin.configure( iosClientId: CLIENT_IDS.GOOGLE_IOS_CLIENT_ID, webClientId: '', 托管域：''， forceConsentPrompt：真， 帐户名称： '' ) .then(() => console.log('谷歌配置成功'); 成功回调（）； ) .catch((错误) => console.log('谷歌配置错误'); 失败回调（错误）； );

函数 googleSignin() googleAuthConfig(()​​ => GoogleSignin.signIn() .then((用户) => 常量 访问令牌 = 用户； var credentials = firebase.auth.GoogleAuthProvider.credential(null, accessToken); firebase.auth().signInWithCredential(凭证) .then((firebaseResult) => loginToSG(dispatch, firebaseResult, props, 'Google', registerCallback); ) .catch(error => console.log('使用 firebase 检查时出错', error)); ) .catch((错误) => 控制台日志（错误）； ); , (googleConfigErr) => 控制台.log(googleConfigErr); );

最后最重要的一步是 -> 执行 npm 缓存清理后，从设备中删除现有应用程序，删除构建文件夹然后运行应用程序

react-native run-android

致谢：Step by step guide with screenshots and code snippets

【讨论】：

在 React Native 中使用 Firebase 进行 Google 登录

】在ReactNative中使用Firebase进行Google登录【英文标题】：GoogleSign-InusingFirebaseinReactNative【发布时间】：2018-05-0413:33:01【问题描述】：请注意，由于需要解释，问题可能会很长，否则可能会非常模糊并导致相同的旧答案。我在使用fi... 查看详情

React-native google 登录给开发人员错误

...【发布时间】：2019-06-2208:31:31【问题描述】：我正在尝试使用React-native-google-signin插件登录Google，但它给了我一个Developer_Error。我所做的与文档中提到的完全相同。这是我的代码和步骤。1.使用npmireact-nat 查看详情

react-native-google-signin 与 AWS Cognito

...我正在开发一个react-native应用程序，我想让我的用户能够使用google登录。但是，当我向googleAPI发出请求时，它会返回WRONGSIGNINError:DEVELOPER_ERROR。我 查看详情

React Native 中的 Google 字体

...5【问题描述】：我想知道是否可以在我的ReactNative项目中使用Google字体。我一直在寻找一些信息，但没有找到任何信息。有可能吗？谢谢。P.D.：我知道我可以下载它并将其包含到我的项目中。【问题讨论】：Usecustom-fontinReact-Nati... 查看详情

使用 React Native 的 Google Firebase 动态链接在 IOS 上无法正常工作

】使用ReactNative的GoogleFirebase动态链接在IOS上无法正常工作【英文标题】：GoogleFirebasedynamiclinksnotworkingproperlyonIOSusingReactNative【发布时间】：2020-01-1314:44:13【问题描述】：在我们的ReactNativeIOS应用程序上使用@react-native-firebase/dynamic-... 查看详情

google 登录崩溃 Apk(React Native)

】google登录崩溃Apk(ReactNative)【英文标题】：googleSign-inCrashingApk(ReactNative)【发布时间】：2021-12-2910:19:00【问题描述】：我正在尝试在ReactNative中实现Google登录。expo不支持我实现登录的方式，它仅在生产中受支持，但是当我构建apk... 查看详情

React-Native：如何从 React Native 应用程序打开 google play 商店？

...native应用程序内的按钮时，我正在尝试找到一种方法如何使用我的应用程序打开googleplay商店。有没有办法做到这一点？【问题讨 查看详情

React-Native-Maps：地图为空。仅显示 Google 徽标和标记

...ogoandMarker【发布时间】：2021-11-2502:52:35【问题描述】：我使用的是react-native-maps，版本是"react-native-maps":"0.27.1"。我能够在2021年10 查看详情

使用 react-native-web 实现组件

】使用react-native-web实现组件【英文标题】：Implementingcomponentswithreact-native-web【发布时间】：2016-09-2215:08:18【问题描述】：我使用react-native-web来拥有不仅可以在移动设备上使用，还可以在网络浏览器中使用的组件。我对这个想法... 查看详情

Google App Engine Channels API / 使用 React Native 加载外部 JS

】GoogleAppEngineChannelsAPI/使用ReactNative加载外部JS【英文标题】：GoogleAppEngineChannelsAPI/LoadingexternalJSwithReactNative【发布时间】：2015-06-0305:46:12【问题描述】：我正在将项目移植到ReactNative，之前我从外部服务器引用了google频道api，用... 查看详情

此商家未启用 Google Pay。 [Android，React-Native]

...题描述】：我需要在我的应用程序中集成android/googlePay。使用react-native-payments集成原生支付钱包。Sheet在类型osTEST模式下打开， 查看详情

如何在 React Native 中实现 Google 地图以在 Web、Android 和 iOS 上运行？

...用于Web、Android和iOS的地图。我在网上找到的资源是用于使用react-na 查看详情

React Native Maps - 使用 Google Maps API 从 JSON 文件中显示标记

】ReactNativeMaps-使用GoogleMapsAPI从JSON文件中显示标记【英文标题】：ReactNativeMaps-DisplayingmarkersfromJSONfileusingGoogleMapsAPI【发布时间】：2021-10-2101:19:11【问题描述】：我在我的ReactNative应用程序中使用GoogleMapsAPI作为屏幕。目前我可以显... 查看详情

反应原生 |应用程序因“react-native-google-signin”而崩溃

】反应原生|应用程序因“react-native-google-signin”而崩溃【英文标题】：ReactNative|AppCrashbecauseof"react-native-google-signin"【发布时间】：2019-09-2410:03:43【问题描述】：反应原生|react-native-google-signin在我安装react-native-google-sigin之... 查看详情

Fastlane 和 React-Native：Google Api 错误：无效请求 - 未配置访问

...布时间】：2020-10-0310:51:47【问题描述】：在运行此程序后使用Fastlane和React-Native时导致以下错误的原因：fastlanebeta[22:36:3 查看详情

在 React Native 应用程序和 Expo 中使用 Google Maps 等原生模块

】在ReactNative应用程序和Expo中使用GoogleMaps等原生模块【英文标题】：UsingnativemoduleslikeGoogleMapsinaReactNativeappandExpo【发布时间】：2019-04-0503:25:08【问题描述】：ReactNative相对较新，我在我的应用程序中使用AirBnb的reactnative地图包，... 查看详情

React Native 与 Google VR SDK 不兼容

...它很容易复制。步骤：创建一个新的空白ReactNative项目。使用react-nativerun-ios 查看详情

如何使用 React Native 实现 Stripe？

】如何使用ReactNative实现Stripe？【英文标题】：HowtoimplementStripewithReactNative?【发布时间】：2017-02-2619:28:56【问题描述】：我研究过如何使用Reactnative实现Stripe，但还没有找到可靠的方法。显然，ReactNative不支持http模块，因此必须... 查看详情