Android 上的 Google 登录

简介

在本指南中，您将学习如何为 Android 设置 Capgo Social Login 的 Google 登录。我假设您已经阅读了通用设置指南。

在 Android 上使用 Google 登录

在这部分中，您将学习如何在 Android 中设置 Google 登录。

创建 Android client ID。
1. 点击搜索栏
2. 搜索 credentials 并点击 APIs and Services 选项（屏幕截图中的数字 2）
3. 点击 create credentials
4. 选择 OAuth client ID
5. 选择 Android 应用程序类型
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
Create 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() {}
}

Save the file

Use Google Login in your application

First, import SocialLogin

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

Call initialize. 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 testing
1. Go into Device manager and click the plus button
2. Create a virtual device
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 next
7. Confirm your device. 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 settings
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 login flow working properly: