AndroidでのGoogleログイン

はじめに

このガイドでは、Capgo Social LoginでAndroid用のGoogleログインを設定する方法を学びます。一般的なセットアップガイドをすでに読んでいることを前提としています。

Androidでのgoogleログインの使用

このパートでは、AndroidでGoogleログインを設定する方法を学びます。

AndroidのSHA1証明書は非常に面倒で、この設定をしなければならない人には同情します。次の手順は、Google Play Storeに公開されておらず、ローカルシミュレータまたは開発用ハードウェアデバイスでのみ使用されるアプリの最も単純なシナリオを前提としています。

Google Play Storeにアプリをデプロイした場合は、本番環境リリース用のGoogle Play consoleからのSHA1を含む追加のAndroid client IDを追加する必要があります。Google Playがリリースバンドルの署名に使用するSHA1ハッシュは、Test and release > Setup > App Signingで確認できます。

最後に、間違えた場合、エラーは明確ではありません。デバッグが非常に困難な場合があります。セットアップで苦労している場合は、Githubの問題を確認してください。

さらに、詳細についてはAndroidのGoogleログインセットアップのトラブルシューティングセクションを参照してください。

Android client IDを作成します。
1. 検索バーをクリックします
2. credentialsを検索し、APIs and Services（スクリーンショットの2番）をクリックします
3. create credentialsをクリックします
4. OAuth client IDを選択します
5. Androidアプリケーションタイプを選択します
6. Android Studioを開きます
7. ナビゲーターの一番下にあるGradle Scriptsを見つけます
8. モジュールappのbuild.gradleを見つけます
9. android.defaultConfig.applicationIdをコピーします。これがGoogle consoleのpackage nameになります
10. ターミナルを開きます。アプリのandroidフォルダにいることを確認し、./gradlew signInReportを実行します
1. このコマンドの先頭までスクロールします。次のように表示されるはずです。SHA1をコピーします。
1. Google Consoleに戻ります。Package NameとしてapplicationIdを入力し、証明書フィールドにSHA1を入力してcreateをクリックします
Webクライアントを作成します（これはAndroidに必要です）
1. Google ConsoleのCreate credentialsページに移動します
2. アプリケーションタイプをWebに設定します
3. Createをクリックします
4. client IDをコピーします。これをJS/TSコードでwebClientIdとして使用します

MainActivityを変更します

Android Studioでアプリを開いてください。cap open androidを実行できます
MainActivity.javaを見つけます
1. appフォルダを開きます
2. javaを見つけます
3. MainActivity.javaを見つけてクリックします

MainActivity.javaを変更します。次のコードを追加してください

import ee.forgr.capacitor.social.login.GoogleProvider;
import ee.forgr.capacitor.social.login.SocialLoginPlugin;
import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
import com.getcapacitor.PluginHandle;
import com.getcapacitor.Plugin;
import android.content.Intent;
import android.util.Log;
import com.getcapacitor.BridgeActivity;

// ModifiedMainActivityForSocialLoginPlugin is VERY VERY important !!!!!!
public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {

      @Override
      public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
          PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
          if (pluginHandle == null) {
            Log.i("Google Activity Result", "SocialLogin login handle is null");
            return;
          }
          Plugin plugin = pluginHandle.getInstance();
          if (!(plugin instanceof SocialLoginPlugin)) {
            Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
            return;
          }
          ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
        }
      }

      // This function will never be called, leave it empty
      @Override
      public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

ファイルを保存します

アプリケーションでGoogleログインを使用します

まず、SocialLoginをインポートします

import { SocialLogin } from '@capgo/capacitor-social-login';

initializeを呼び出します。これは一度だけ呼び出す必要があります。

// onMountedはVue固有のものです
// webClientIdは、Android client IDではなく、Webクライアント作成ステップで取得したclient IDです。
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
    }
  })
})

SocialLogin.loginを呼び出します。ボタンを作成し、クリック時に次のコードを実行します。

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// レスポンスを処理します
console.log(JSON.stringify(res))

テスト用のエミュレータを設定します
1. Device managerに移動してプラスボタンをクリックします
2. 仮想デバイスを作成します
3. Play Storeアイコンがあるデバイスを選択します
  
  ご覧のとおり、pixel 8はPlay Storeサービスをサポートしています
4. nextをクリックします
5. OSイメージがGoogle Playタイプであることを確認します。Google Playタイプである必要があります
6. nextをクリックします
7. デバイスを確認します。エミュレータに好きな名前を付けることができます
8. Device Managerに移動してシミュレータを起動します
9. シミュレータが起動したら、設定に移動します
10. Google Playに移動します
1. Updateをクリックして約60秒待ちます
アプリケーションをテストします

すべて正しく行った場合、Googleログインフローが正しく動作することを確認できます: