Custom Google Sign-In button - iOS

Question

I want to customize Google Sign-In button like below:-

I have tried below links, but none of them helped really much:- How to customize google sign in button?
https://developers.google.com/identity/sign-in/ios/

Could somebody please guide what I should do? I can't use Google+ Sign-In button because "Google+ Sign-In is deprecated".

Edited:- I tried the code provided on below link:-
https://developers.google.com/identity/sign-in/ios/sign-in#add_the_sign-in_button

Answer 1

Try this for swift, its very simple and works like a champ.

1. Create reference for your Google Sign In button

   @IBOutlet weak var signInButton: GIDSignInButton!

2. set style for it in viewDidLoad

   override func viewDidLoad() {
   super.viewDidLoad()
   //Do any additional setup after loading the view.
     signInButton.style = GIDSignInButtonStyle.iconOnly
   

3.Place your custom button above the google sign in button in main story board and create an action reference for it. Inside it click the google sign in button programmatically.

    @IBAction func googleSignIn(_ sender: Any) {
    signInButton.sendActions(for: .touchUpInside)
    }

Answer 2

You can add your own button instead of using Google Sign-In button Do follwing things

Objective C Version

1)Add your own button into storyBoard

2)drag action into viewController

- (IBAction)googlePlusButtonTouchUpInside:(id)sender {
     [GIDSignIn sharedInstance].delegate = self;
     [GIDSignIn sharedInstance].uiDelegate = self;
     [[GIDSignIn sharedInstance] signIn];
  }

3)handle delegate methods

#pragma mark - Google SignIn Delegate

- (void)signInWillDispatch:(GIDSignIn *)signIn error:(NSError *)error {

  }

// Present a view that prompts the user to sign in with Google

- (void)signIn:(GIDSignIn *)signIn presentViewController:(UIViewController *)viewController
{
    [self presentViewController:viewController animated:YES completion:nil];
}

// Dismiss the "Sign in with Google" view

- (void)signIn:(GIDSignIn *)signIn dismissViewController:(UIViewController *)viewController {
    [self dismissViewControllerAnimated:YES completion:nil];

}

//completed sign In

- (void)signIn:(GIDSignIn *)signIn didSignInForUser:(GIDGoogleUser *)user
     withError:(NSError *)error {
//user signed in
//get user data in "user" (GIDGoogleUser object)
}

Swift 4 Version

In Swift make sure you have added briding header as the library is written in objective C

1)Add your own button into storyBoard

2)drag action into viewController

@IBAction func googlePlusButtonTouchUpInside(sender: AnyObject) {
      GIDSignIn.sharedInstance().delegate=self
      GIDSignIn.sharedInstance().uiDelegate=self
      GIDSignIn.sharedInstance().signIn()
} 

3)handle delegate methods

//MARK:Google SignIn Delegate

func signInWillDispatch(_ signIn: GIDSignIn!, error: Error!) {
}

// Present a view that prompts the user to sign in with Google

func signIn(_ signIn: GIDSignIn!,
    presentViewController viewController: UIViewController!) {
  self.present(viewController, animated: true, completion: nil)
}

// Dismiss the "Sign in with Google" view

func signIn(_ signIn: GIDSignIn!,
    dismissViewController viewController: UIViewController!) {
  self.dismiss(animated: true, completion: nil)
}

//completed sign In

   public func signIn(_ signIn: GIDSignIn!, didSignInForUser user: GIDGoogleUser!,
      withError error: Error!) {
        if (error == nil) {
          // Perform any operations on signed in user here.
          let userId = user.userID                  // For client-side use only!
          let idToken = user.authentication.idToken // Safe to send to the server
          let fullName = user.profile.name
          let givenName = user.profile.givenName
          let familyName = user.profile.familyName
          let email = user.profile.email
          // ...
        } else {
          print("\(error.localized)")
        }
    }

Edit: Here is the reference/evidence for usage of custom button, Google Doc reference

5.If you want to customize the button, do the following: In your view controller's .h file, declare the sign-in button as a property.

@property(weak, nonatomic) IBOutlet GIDSignInButton *signInButton;

Connect the button to the signInButton property you just declared. Customize the button by setting the properties of the GIDSignInButton object. Next, you can implement and handle the sign-out button.

Answer 3

For Swift 4.2

to make a custom Google button :

1-add your button to storyboard

2-create @IBaction for your button

3-follow instructions on https://developers.google.com/identity/sign-in/ios/sign-in but replace this step

"2 .In the view controller, override the viewDidLoad method to set the UI delegate of the GIDSignIn object, and (optionally) to sign in silently when possible"

with

-> insert this code in the button action

    GIDSignIn.sharedInstance().uiDelegate=self
    GIDSignIn.sharedInstance().signIn()

now you can happily customize your button,hope this answer help you.

Answer 4

Swift 3 Version

In Swift make sure you have added briding header as the library is written in objective C.

1. Add your own button into storyBoard

2. drag action into viewController

   @IBAction func googlePlusButtonTouchUpInside(sender: AnyObject) {
         GIDSignIn.sharedInstance().signIn()
   } 
   

3. handle delegate methods

   //MARK:Google SignIn Delegate
    func signInWillDispatch(signIn: GIDSignIn!, error: NSError!) {
     // myActivityIndicator.stopAnimating()
       }
   
   // Present a view that prompts the user to sign in with Google
      func sign(_ signIn: GIDSignIn!,
                 present viewController: UIViewController!) {
           self.present(viewController, animated: true, completion: nil)
       }
   
   // Dismiss the "Sign in with Google" view
    func sign(_ signIn: GIDSignIn!,
                 dismiss viewController: UIViewController!) {
           self.dismiss(animated: true, completion: nil)
       }
   
   //completed sign In    
   public func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!, withError error: Error!) {
   
           if (error == nil) {
         // Perform any operations on signed in user here.
               let userId = user.userID                  // For client-side use only!
              let idToken = user.authentication.idToken // Safe to send to the server
               let fullName = user.profile.name
              let givenName = user.profile.givenName
              let familyName = user.profile.familyName
              let email = user.profile.email
             // ...
           } else {
               print("\(error.localizedDescription)")
           }
       }
   

Answer 5

You can add your own button instead of using Google Sign-In button Do follwing things

1)Add this code in AppDelegate.m file

2)Add your own button into storyBoard and give class name as GPPSignInButton and set UIImageView on that button.

3)drag action into viewController

AppDelegate.m file

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    GPPSignIn *SignIn = [GPPSignIn sharedInstance];

    [GPPSignIn sharedInstance].clientID = @"532796865439-juut4g2toqdfc13mgqu5v9g5cliguvmg.apps.googleusercontent.com";

    SignIn.scopes = @[kGTLAuthScopePlusLogin];
    return YES;
} 

-(BOOL) application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
    if ([GPPURLHandler handleURL:url sourceApplication:sourceApplication annotation:annotation]) {

        return YES;
    }

    return wasHandled;
}




ViewController.m file

@property (strong, nonatomic) IBOutlet GPPSignInButton *btn;

- (void)viewDidLoad {
    [super viewDidLoad];

   [GPPSignIn sharedInstance].delegate = self;
    [[GPPSignIn sharedInstance] trySilentAuthentication];

    AppDelegate *appDelegate = (AppDelegate *)
    [[UIApplication sharedApplication] delegate];
  }



-(void) finishedWithAuth:(GTMOAuth2Authentication *)auth error:(NSError *)error
{
    GPPSignIn *signIn = [GPPSignIn sharedInstance];
    signIn.shouldFetchGoogleUserEmail = YES;
    signIn.delegate = self;

    if (error == nil) {
        if(auth.canAuthorize){
            GTLServicePlus *service = [[GTLServicePlus alloc] init];
            [service setRetryEnabled:YES];
            [service setAuthorizer:auth];

            GTLQueryPlus *query = [GTLQueryPlus queryForPeopleGetWithUserId:@"me"];


            // 1. Create a |GTLServicePlus| instance to send a request to Google+.
            GTLServicePlus* plusService = [[GTLServicePlus alloc] init] ;
            plusService.retryEnabled = YES;

            // 2. Set a valid |GTMOAuth2Authentication| object as the authorizer.
            [plusService setAuthorizer:[GPPSignIn sharedInstance].authentication];

            // 3. Use the "v1" version of the Google+ API.*
            plusService.apiVersion = @"v1";
            [plusService executeQuery:query
                    completionHandler:^(GTLServiceTicket *ticket,
                                        GTLPlusPerson *person,
                                        NSError *error) {
                        if (error) {
                            //Handle Error
                        } else {
                            NSLog(@"\nEmail= %@", [GPPSignIn sharedInstance].authentication.userEmail);
                            NSLog(@"\nGoogleID=%@", person.identifier);
                            NSLog(@"\nUser Name=%@", [person.name.givenName stringByAppendingFormat:@" %@", person.name.familyName]);
                            NSLog(@"\nGender=%@", person.gender);
                        }
                    }];

        }
    }
}

Answer 6

For Swift 4: (This is working code Enjoy)

@IBAction func logimByGoogle(_ sender: Any) {
    GIDSignIn.sharedInstance().delegate = self
    GIDSignIn.sharedInstance().uiDelegate = self
    GIDSignIn.sharedInstance().signIn()
}
//MARK:- Google Delegate
func sign(inWillDispatch signIn: GIDSignIn!, error: Error!) {

}

func sign(_ signIn: GIDSignIn!,
          present viewController: UIViewController!) {
    self.present(viewController, animated: true, completion: nil)
}

public func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!,
                   withError error: Error!) {
    if (error == nil) {
        // Perform any operations on signed in user here.
        let userId = user.userID                  // For client-side use only!
        let idToken = user.authentication.idToken // Safe to send to the server
        let fullName = user.profile.name
        let givenName = user.profile.givenName
        let familyName = user.profile.familyName
        let email = user.profile.email
        // ...
    } else {
        print("\(error)")
    }
}