Google Login on iOS

Este contenido aún no está disponible en tu idioma.

Introduction

In this guide, you will learn how to setup Google Login with Capgo Social Login for iOS. I assume that you have already read the general setup guide.

In this part, you will learn how to setup Google login in iOS.

Create an iOS client ID in the Google console
1. Click on the search 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 Application type to iOS
6. Find the bundle ID
  1. Open Xcode
  2. Double click on App
  3. Ensure that you are on Targets -> App
  4. Find your Bundle Identifier
  5. Go back to the Google Console and paste your Bundle Identifier into Bundle ID
7. Optionally, add your App Store ID or Team ID into the client ID if you have published your app to App Store
8. After filling all the details, click create
9. Click OK
10. Open the newly created iOS client
11. Copy the following data
  
  The nr. 1 in this image will later become the iOSClientId in the initialize call.
  The nr. 2 in this image will later become YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modify your app’s Info.plist
1. Open Xcode and find the Info.plist file
2. Right click this file and open it as source code
3. At the bottom of your Plist file, you will see a </dict> tag
4. Insert the following fragment just before the closing </dict> tag
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Change the YOUR_DOT_REVERSED_IOS_CLIENT_ID to the value copied in the previous step
  
  Ensure that this value STARTS with com.googleusercontent.apps
6. Save the file with Command + S

Modify the AppDelegate.swift

Open the AppDelegate
Insert import GoogleSignIn at the top of the file
Find the func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) function

Modify the function to look like this

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    // Called when the app was launched with a url. Feel free to add additional processing here,
    // but if you want the App API to support tracking app url opens, make sure to keep this call

    var handled: Bool

    handled = GIDSignIn.sharedInstance.handle(url)
    if handled {
      return true
    }

    return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
}

Modified application openURL function with GoogleSignIn handling

Save the file with Command + S

Setup Google login in your JavaScript/TypeScript code

Import SocialLogin and Capacitor

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

Call the initialize method (this should be called only once)

// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
    }
  })
})

Implement the login function. 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))

Test your application
1. Build your app and run cap sync
2. If you’ve done everything correctly, you should see the Google login flow working properly

Google Login on iOS

Google Login setup for iOS

Introduction

Using Google login on iOS