web-dev-qa-db-ja.com

ReactネイティブでGoogle+サインインを実装する

G +サインイン（ https://developers.google.com/+/mobile/ios/sign-in ）をReact）に統合したい=ネイティブアプリ。Facebookサインインは http://brentvatne.ca/facebook-login-with-react-native/ 経由で機能していますが、完全に機能していますが、どうすればよいかわかりません。 G +ドキュメントのこの時点で：

ビューコントローラーの.hファイルで、GooglePlus/GooglePlus.hをインポートし、このコントローラークラスがGPPSignInDelegateプロトコルを実装することを宣言します

誰かがいくつかのポインタ/コードサンプルを提供できたら？

ありがとう！

google-plusreact-native
13
DaBeeeenster

2017年編集

現在react-nativeアプリのデフォルトとなっているExpoフレームワーク内には、次のような組み込みのGoogle認証があります。

Expoのドキュメント： https://docs.expo.io/versions/latest/sdk/google.html

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

古い答え

これで、react-native用にGoogle+でサインインするためのライブラリがあります： https://github.com/devfd/react-native-google-signin

7
Danny Sullivan

つまり、これはReact Nativeに半関連しているだけです。主な問題は、G +サインインのObj-C側を書き込むことであるようです。そのためには、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

また、私が考えることができる最も単純なネイティブモジュールを示す投稿を書きました。これは、一般的な概念を非常によく説明していると思います。

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

4
Colin Ramsay

非常に苦労した後、ReactネイティブアプリでのGoogle+サインインの統合で直面するすべての問題を経験しました。段階的な変更を行う必要があることを確認してください1.Google CloudPlatformでプロジェクトを作成します： 無料のトレイルを試してください 私はグーグルクラウドプラットフォームを使用しています、それを使用していない場合は、グーグルコンソールでAPIを有効にするだけです

  1. プロジェクトでGoogle + APIを有効にし、GoogleクラウドコンソールでAPIキーを生成します

  2. AndroidプロジェクトのYourSHA-1キーとパッケージ名（AndroidManifest.xmlで指定）を設定します（注：これにexpoを使用している場合は、最初にexpoを取り出してこれを実現する必要があります。 Expoを排出する方法を読む ）

独自のSHA-1を生成するには、コマンド-> keytool -list -v -keystoremystore.keystoreを使用します。

注：ビルドがデバッグビルドの場合、上記のコマンドで生成されたSHA-1は機能しません。adbログを注意深く確認してください。Androidデバッグビルドで使用されているSHA-1がログに記録されます）デバイスログでデバイスログを確認するには、/ Users // Library/Android/sdk/platform-tools —> adblogcatから以下のコマンドを実行します。

  1. 同じプロジェクトをfirebaseにインポートする：firebaseを使用していない場合は、この手順と次の手順をスキップしてください

  2. FirebaseプロジェクトでAndroidプロジェクトをセットアップしてから、アプリで使用されている認証方法をセットアップします。

  3. 次に、FirebaseプロジェクトにsameSHA-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 {リポジトリ{google（）jcenter（）}依存関係{クラスパス 'com.Android.tools.build:gradle:3.0.1'クラスパス '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. コマンドの下にun

npmインストール

react-nativeリンク

  1. React native linkを実行したら– Android/settings.gradleファイルを確認し、コンテンツの重複行がないことをクロスチェックします。

これまでプロジェクトレベルの構成を行ってきましたが、コードの変更を見てみましょう

  1. Firebaseコードを使用してネイティブGoogleのサインイン/サインアップに対応する

    import {GoogleSignin} from'react-native-google-signin '; 'firebase'からfirebaseをインポートします。

    function googleAuthConfig（successCallback、failureCallback）{GoogleSignin.configure（{iosClientId：CLIENT_IDS.GOOGLE_IOS_CLIENT_ID、webClientId： ''、hostedDomain： ''、forceConsentPrompt：true、accountName： ''}）。then（（）=> {console.log （ 'Google Config Success'）; successCallback（）;}）。catch（（err）=> {console.log（ 'Google Config Error'）; failureCallback（err）;}）; }

    function googleSignin（）{googleAuthConfig（（）=> {GoogleSignin.signIn（）。then（（user）=> {const {accessToken} =ユーザー; var認証情報= firebase.auth.GoogleAuthProvider.credential（null、accessToken）; firebase）; .auth（）。signInWithCredential（credentials）.then（（firebaseResult）=> {loginToSG（dispatch、firebaseResult、props、 'Google'、registerCallback）;}）。catch（error => console.log（ 'error while check with firebase '、error））;}）。catch（（err）=> {console.log（err）;}）;}、（googleConfigErr）=> {console.log（googleConfigErr）;}）; }

  2. 最後に、最も重要なステップは-> npmキャッシュをクリーンアップしたら、デバイスから既存のアプリを削除し、ビルドフォルダーを削除してからアプリを実行します

react-nativerun-Android

クレジット： スクリーンショットとコードスニペットを含むステップバイステップガイド

0
Sadanand