Google Auth/Signinは、Firebaseなしでネイティブに反応します.

Google Authは、モバイルおよびWebアプリケーションで最も一般的に使用される認証方法の一つです.さて、それはまた、通常のユーザーのメールとパスワード認証に比べてトリッキーなものです.
このポストでは、我々はどのように完全に動作Google Authを統合することを学ぶ方法をネイティブ(FireBaseなし).

1 .ネイティブアプリケーションに反応する
私たちの反応ネイティブプロジェクトを作成することから始めましょう.npx react-native init myapp今すぐインストール@react-native-google-signin/google-signin モジュール使用npm i @react-native-google-signin/google-signin プロジェクトフォルダーで.
「

アンドロイド環境の設定
必要なモジュールをインストールした後、いくつかのAndroidファイルを適切に動作させるように設定しましょう.

更新android/build.gradle 次の設定を実行します.

追加classpath 'com.google.gms:google-services:4.3.10' あなたのdependencies インbuildscript .

更新android/app/build.gradle 次の設定を実行します.

追加apply plugin: 'com.android.application' あなたのビルドグレード(Android/アプリ)の上部にある.

追加implementation 'com.google.android.gms:play-services-auth:20.0.0'
implementation "androidx.browser:browser:1.2.0" 依存関係で同じです.
`

3 .アプリケーションでモジュールをインポートする
インストール済みのモジュールをインポートします

import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin';

その後、モジュールをインポートした後、私たちのサインアップの構成コードを設定しましょう.

React.useEffect(() => {
    GoogleSignin.configure({
      webClientId: "Your-web-client-id", 
      offlineAccess: true
    });
  }, [])

クライアントIDについて心配しないでください.
設定が完了したら、私たちのサインアップ機能を我々がちょうどインポートしたGoogle Authモジュールを使用する時間です.

const GoogleSingUp = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      await GoogleSignin.signIn().then(result => { console.log(result) });
    } catch (error) {
      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
        // user cancelled the login flow
        alert('User cancelled the login flow !');
      } else if (error.code === statusCodes.IN_PROGRESS) {
        alert('Signin in progress');
        // operation (f.e. sign in) is in progress already
      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        alert('Google play services not available or outdated !');
        // play services not available or outdated
      } else {
        console.log(error)
      }
    }
  };

今すぐあなたのボタンにこの機能を接続しますonPress={GoogleSingUp} 支柱
「

WebクライアントIDとSHA 1キーの生成
さて、これはほとんどの開発者が立ち往生するか、かなり一般的で刺激的なエラーを得る主要な部分です.Error: Status{statusCode=DEVELOPER_ERROR}しかし、このエラーの原因は何ですか?これはかなり簡単です.Googleによると、Googleコンソールであなたのリリースkeystoreキーを置く必要があります.しかし、ほとんどのブログや記事は、あなたが使用しているモジュールに関係なく、非常に重要であるこのポイントを言及することを忘れないでください.

1 )リリースキーストアを生成します.
システムでJDKを既にインストールしていると仮定して、リリースキーの生成に移りましょう.あなたのAndroid/APPでCMDでこのコマンドを実行します
KeyTool - Vキー-キーストアMyRenReleaseRainキー.keystore - 2048 -有効性10000
それは慎重にそれらを記入し、あなたが入力したパスワードを覚えていくつかの詳細を求めるでしょう.
このコマンドはあなたのandroid/app ディレクトリ.

今すぐあなたのandroid/gradle.properties 追加
MyAppHandのアップロードファイルです.キーストア
MyAppChordのアップロードキー
パスワードを指定します.
パスワードのパスワードを入力します

そして、あなたのandroid/app/build.gradlesigningconfig
デバッグ
//ファイルファイル(' debug . keystore ')を保存します
//単語をアンドロイド
//キーとして' androidDebugkey '
//キーワードを' Android '
ファイルを保存します.
パスワードを入力します.
keyaliasのバージョンアップ
キーパッドパスワード
｝
リリース
プロジェクトの場合、
ファイルを保存します.
パスワードを入力します.
keyaliasのバージョンアップ
キーパッドパスワード
｝
｝
｝

さて、これはあなたのデバッグkeystore shaとしてリリースSHAを生成するでしょう
では、このコマンドを使用してリリースSHA 1を生成しますandroid/appキーツール-リスト- v -キーストアアプリ/myRenReleaseRainキー.エイリアスMyLes Keysieエイリアス
SHA 1キーをコピーし、次のステップのどこかに貼り付けます.
「

2 ) Google開発コンソールにSHA 1キーを挿入する.
今、そのハードワークをした後、この最後の部分をしましょう.Googleは我々のアプリとその認証についてGoogleに伝えるためにこの開発者コンソールにこのキーをペーストしなければなりません.

Google開発者コンソールまたはGoogle Cloudプラットフォームでサインアップした後に、資格証明タブに向かいます.そこでは、“資格を作成する”と言うボタンを見つける、宣誓クライアントのIDを選択します.

次に、「アプリケーションの種類」を選択し、パッケージ名を入力し、前の手順でSHA 1キーを入力します.ヒットを作成し、あなたのAndroid APIは準備ができています.

同様にAndroidの代わりにWebクライアントのOathIDを作成し、他のすべてのフィールドをそのままにします.

すぐに作成した誓約からWebクライアントIDをコピーします.

それは、我々が我々が上記のステップ3のために必要としたウェブクライアントIDを得たということです.

仕上げ
さて、このWebクライアントIDを上記の手順3でGoogle Configオブジェクトに貼り付けて、アプリケーションを実行します.
ボタンを押すと、ポップアップが表示されます.ログインしたいアカウントを選択し、アカウントを選択した後に、idtokenやその他のものを含むオブジェクトを返します.
あなたが全く同じことをして、どこでも混乱しなかったならば、我々はこのような若干の結果を見なければなりません
{ }
「あなたのGoogle Authトークン」.
"スコープ":
"https://www.googleapis.com/auth/userinfo.email」
"https://www.googleapis.com/auth/userinfo.profile"
、
"ServerAuthCode ": "サーバ認証コード"
"ユーザ": {
「メール」:"[email protected]」
"姓名": "最後の名前"
"givenname ": "あなたの名前"
"id ": "id id "
"name ":"あなたのフルネーム"
「写真」:“A‐URL‐フォー‐プロ‐フォト”
｝
｝
そして、我々は正常に我々の反応ネイティブアプリにGoogle Authを統合しました.
あなたがポストが好きなら、または単に何か貴重なものを追加したいコメントを残してください.