Google Connexion on Android

Introduction

In this Guide, you will learn how to Configuration Google Connexion with Capgo Social Connexion for Android. I assume that you have already read the general Configuration Guide.

Using Google Connexion on Android

In this part, you will learn how to Configuration Google Connexion in Android.

The Android SHA1 certificate is beyond painful and I wouldn’t wish it on anyone to have to set this up. The following steps assume the simplest scenario of an Application that isn’t published to Google Play Store and that is only used by the local simulator, or Développement hardware Appareil.

If you have deployed your app to Google Play Store, you MUST add an additional Android client ID that contains the SHA1 from Google Play console for production releases. You can find the SHA1 hash that Google Play uses to sign your release bundle under Test and release > Setup > App Signing.

Finally, it’s Important to mention that if you mess up, the Erreur will NOT be obvious. It may be very difficult to Débogage. If you struggle with the Configuration, please look at the Github issues.

Additionally, you may look at the Dépannage section of the Google Connexion Configuration for Android for more Information.

You may Créer multiple Android client IDs. This is required if you have multiple SHA1 certificates.

Créer an Android client ID.
1. Click on the Recherche bar
2. Search for credentials and click on the APIs and Services one (number 2 on the screenshot)
3. Click on the create credentials
4. Select OAuth client ID
5. Select the Android application type
6. Open Android Studio
7. At the very bottom of the navigator, find the Gradle Scripts
8. Find build.gradle for the module app
9. Copy the android.defaultConfig.applicationId. This will be your package name in the Google console
10. Now, open the terminal. Make sure that you are in the android folder of your app and run ./gradlew signInReport
1. Scroll to the top of this command. You should see the following. Copy the SHA1.
1. Now, go back to the Google Console. Enter your applicationId as the Package Name and your SHA1 in the certificate field and click create
Créer a web client (this is required for Android)
1. Go to the Create credentials page in Google Console
2. Set application type to Web
3. Click Create
4. Copy the client ID, you’ll use this as the webClientId in your JS/TS code

Modify your MainActivity

Please open your app in Android Studio. You can run cap open android
Find MainActivity.java
1. Open the app folder
2. Find java
3. Find your MainActivity.java and click on it

Modify MainActivity.java. Please add the following code

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() {}
}

Enregistrer the file

Use Google Connexion in your Application

First, import SocialLogin

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

Call Initialiser. This should be called only once.

// onMounted is Vue specific
// webClientId is the client ID you got in the web client creation step not the android client ID.
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
    }
  })
})

Call SocialLogin.login. Create a button and run the following code on click.

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response
console.log(JSON.stringify(res))

Configure the emulator for Test
1. Go into Device manager and click the plus button
2. Créer a virtual Appareil
3. Select any device with a Play Store icon
  
  As you can see, the pixel 8 supports the Play Store services
4. Click next
5. Make sure that the OS image is of type Google Play. IT MUST be of type Google Play
6. Click Suivant
7. Confirm your Appareil. You can name your emulator as you prefer
8. Go into Device Manager and boot up your simulator
9. After the simulator boots up, go into its Paramètres
10. Go into Google Play
1. Click Update and wait about 60 seconds
Test your Application

If you did everything correctly, you should see the Google Connexion flow working properly:

Dépannage

If you have any issues, please look at the Github issues.

The issues with Google Connexion are ALWAYS related to the SHA1 certificate.

If you cannot get the Développement SHA1 certificate, try to use a custom keystore. Here is a comment explaining how to Ajouter keystore to your project.