13

我想在 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 协议

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

谢谢！

4

3 回答 3

7

编辑 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

于 2016-08-21T06:55:36.473 回答
4

因此，这仅与 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

于 2015-03-27T15:49:12.720 回答
0

经过这么多的努力，我已经解决了我们在 React Native 应用程序中集成 Google+ 登录时遇到的所有问题。请找到需要逐步更改的步骤 1. 在 Google Cloud Platform 中创建项目：尝试免费试用 我使用的是 google 云平台，如果您没有使用，您只需在 google 控制台下启用 apis

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

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

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

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

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

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

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

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

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

npm install react-native-google-signin –save

npm install firebase –save

  1. 在 /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.+'

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

    buildscript { repositories { google() jcenter() } dependencies { classpath 'com.android.tools.build:gradle:3.0.1' classpath 'com.google.gms:google-services:3.0.0' // <-- - 添加这个 // 注意：不要将你的应用程序依赖项放在这里；它们属于 // 在单个模块 build.gradle 文件中 } }

    allprojects { repositories { mavenLocal() jcenter() maven { // 所有 React Native（JS、Obj-C 源代码、Android 二进制文件）都是从 npm url "$rootDir/../node_modules/react-native/android" } } }

    ext { compileSdkVersion = 23 targetSdkVersion = 23 buildToolsVersion = "23.0.1" googlePlayServicesVersion = "10.2.4" androidMapsUtilsVersion = "0.5+" }

  2. 联合国下面的命令

npm 安装

反应原生链接

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

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

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

    从 'react-native-google-signin' 导入 { GoogleSignin }；从'firebase'导入firebase；

    功能 googleAuthConfig(successCallback, failureCallback) { GoogleSignin.configure({ iosClientId: CLIENT_IDS.GOOGLE_IOS_CLIENT_ID, webClientId: '', hostsDomain: '', forceConsentPrompt: true, accountName: '' }) .then(() => { console.log ('Google 配置成功'); successCallback(); }) .catch((err) => { console.log('Google 配置错误'); failureCallback(err); }); }

    function googleSignin() { googleAuthConfig(()​​ => { GoogleSignin.signIn() .then((user) => { const { accessToken } = user; var credentials = firebase.auth.GoogleAuthProvider.credential(null, accessToken); firebase .auth().signInWithCredential(credentials) .then((firebaseResult) => { loginToSG(dispatch, firebaseResult, props, 'Google', registerCallback); }) .catch(error => console.log('检查时出错firebase', error)); }) .catch((err) => { console.log(err); }); }, (googleConfigErr) => { console.log(googleConfigErr); }); }

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

react-native run-android

致谢：带有屏幕截图和代码片段的分步指南

于 2018-05-08T04:36:49.570 回答