Share on twitter
Share on facebook
Share on linkedin
Google login integration in Xamarin

Google Login Integration in Xamarin.Forms: A Complete Guide

Social login integration

Logging in is an important aspect of any application. An application uses login details to segregate the users’ data. Making the login process easier for users has become an important goal for all developers, especially in mobile applications.

A good way to make logins easier is to use social media login integration in mobile applications. Nowadays, most people have an account in one (or all) of the social websites like Google, Facebook, Twitter, or LinkedIn. Therefore, we can make use of these to authenticate the users in our app, which will make it easy for users to remember their credentials since they do not have to create new ones for every web or mobile application they use.

In this blog, we are going to learn about integrating the Google login into a Xamarin.Forms application using the Xamarin Auth package.

Prerequisites for Google login integration

  • Install the latest stable package of Xamarin Auth in PCL and target platform (Android and iOS) projects. You can find the NuGet package link for Xamarin Auth below. https://www.nuget.org/packages/Xamarin.Auth
  • Create applications in the Google developer console for Android and iOS separately to get the client IDs necessary to authenticate the Google login. The steps to create the applications are explained in the following.

Google project creation for Xamarin.Forms applications

To integrate Google login in your Xamarin.Forms application, you need to create a project for your application in the Google developer console. This is to get the respective client credentials to access the Google login API and get the user details.

  1. Open this Google developer console link and login using your Gmail account:

https://console.developers.google.com/apis/credentials.

  1. Click the button in the top-left corner beside the Google API logo. You will be shown a list of projects that can be created in your Google developer console account. Clicking on it will show the following drop-down box and the NEW PROJECT button.

Google developer console - Google login integration in XamarinCreating new project - Google login integration in Xamarin

  1. Clicking the NEW PROJECT button will take you to the page where you can specify the name of your project and click CREATEDetails of the new project - Google login integration in Xamarin
  1. After creating the project for your mobile application, create the credentials of the Google login individually. This is to make Google login work in both Android and iOS platforms in the Xamarin.Forms application.

Credentials for Google login for Xamarin.Android

  1. After creating the project for your application, go to this Google page and select the project name you have created in the drop-down box in the top-left column. Here I have named the project as XamarinLogin. Then, select the User Type in the right pane, either it is for Internal or External. Refer to the following screenshot.Choosing User Type
  2. Click the OAuth consent screen as shown in the previous screenshot. Fill in the details you see in the following image, which are necessary for your mobile application.Filling details in OAuth consent screen
  3. The details provided here will be shown to users as the authentication page to your application for those who use their Gmail account to log in.
  4. Go to the Credentials tab and in the CREATE CREDENTIALS drop-down, select OAuth Client ID.Creating credentials
  5. On the next page, select Android in the radio button provided. Other options related to Android will then be shown.Choosing Android
  6. On this page, provide any value in the Name field. Then provide the package name of your Android project manifest file from your Xamarin.Forms solution. The highlighted value in the following screenshot should be provided in the Package name field.Configuring Android Project Manifest
  7. Regarding the SHA-1 fingerprint, you can get the fingerprint code using the steps in the following link.

https://docs.microsoft.com/en-us/xamarin/android/deploy-test/signing/keystore-signature?tabs=vswin

  1. After providing these values, click Create and the Client ID for the Android application will be created.Google Android Application Created

Credentials for Google login for Xamarin.iOS

We have created the Client ID for the Android platform. Now, we need to create one for the iOS application:

  1. In the Credentials tab, click the CREATE CREDENTIALS drop-down and select OAuth Client ID.Creating credentials
  2. Select iOS in the application type and provide the relevant details in the subsequent fields.
  3. Provide the bundle identifier used in the Info.Plist file in the Xamarin.iOS project in this link.Create OAuth client ID for iOS
  4. Click Create after providing all the details, and the Client ID for the iOS platform will be shown in the Credentials tab with the name you have provided here.OAuth 2.0 Client IDs

Code snippets for the Google login integration

We need to provide the following code in the click event of any control using OAuth2 authenticator.OAuth Authenticator

Google has deprecated the use of WebViews for security reasons, so we should use the device-native browser authentication for the Gmail account and get the details back.

So, in order to get the redirection from the device browser back to the Xamarin application, we need to write the redirection codes for the Android and iOS projects separately.

You can find the code related to the Google redirection from the browser in the Android project from the following link.

https://github.com/moljac/Xamarin.Auth.Samples.NugetReferences/blob/master/Xamarin.Forms/Evolve16Labs/Droid/Xamarin.Auth/ActivityCustomUrlSchemeInterceptor.cs

The code related to redirection in iOS is in the following link.

https://github.com/moljac/Xamarin.Auth.Samples.NugetReferences/blob/master/Xamarin.Forms/Evolve16Labs/iOS/Xamarin.Auth/AppDelegate.OpenUrl.cs

For Xamarin iOS, we need to specify the URL types:

  1. Go to the Plist file in the Xamarin iOS project and click the Advanced tab.
  2. Click Add URL Type and provide a name for the identifier field.
  3. In the Credentials tab in the Google developer console for your iOS credentials give the Bundle Identifier of the application.
  4. Provide the reverse of the iOS Client ID as “iOS URL scheme”.

https://console.developers.google.com/apis/credentials

  1. Select the role Editor and save the file. These steps are necessary for redirection in Xamarin.iOS.

Conclusion

I hope you have a clear idea of integrating Google login into your Xamarin.Forms mobile application now. Use this to provide a hassle-free login experience to your mobile application users.

Syncfusion provides 65+ lightweight, modern, and responsive Xamarin UI controls such as DataGrid, ListView, and Charts. You can use these controls to speed up your Xamarin.Forms application development. If you are an existing Syncfusion user, please download the latest version from the License and Downloads page and try these controls yourself. Also, our NuGet packages are available on NuGet.org. If you aren’t a customer yet, you can try our 30-day free trial to check out these controls.

If you liked this article, we think you’ll also enjoy the following free eBook and blog posts:

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (2)

Do you have a completed sample project to follow along with?

Vijayakumar Yoganandan

Hi David,

We have implemented this login process in our Syncfusion succinctly series app and published in both the Play Store and App Store.

https://play.google.com/store/apps/details?id=com.syncfusion.syncfusionsuccinctlyseries&hl=en
https://apps.apple.com/us/app/syncfusion-succinctly-series/id1336430099

Please find the sample under the Xamarin.Auth for your reference.

https://github.com/moljac/Xamarin.Auth.Samples.NugetReferences/tree/master/Xamarin.Forms/Evolve16Labs

Regards,
Vijayakumar Y.

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top