Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (83)Azure  (26)Blazor  (48)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (53)JavaScript  (134)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (400)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (105)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (100)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (233)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (14)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (140)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (17)UI  (62)Uncategorized  (68)Unix  (2)User interface  (49)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (98)What's new  (62)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
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.
  2. 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
  3. 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
  4. 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
  8. 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/credentialshttps://console.developers.google.com/apis/credentials
  5. 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. You can also explore our AndroidiOS and UWP demo apps.

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 (9)

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.

Dear Vijayakumar,
I can surely tell you yours is the best and most complete sample of integration of Google Sign-In in Xamarin.Forms! Congrats!
Nevertheless still it misses to really claify one key point : the way back from the Google Auth to the app.
I went trough your code and I was able to fit it with the explanations here..
..but still I am stuck there: in https://accounts.google.com with the token being displayed by Google and no way out then to close the browser to get back to the app where, obviously, no Account is available.
This was tested in Android and by no way the ActivityCustomUrlSchemeInterceptor gets fired.
I am a bit lost as fixed all key parameters of Xamarin.Auth.OAuth2Authenticator:

retval_client_id = “..myoauth2clientid…apps.googleusercontent.com”
authorizeUrl: new Uri(“https://accounts.google.com/o/oauth2/auth”),
accessTokenUrl: new Uri(“https://oauth2.googleapis.com/token”),

what still puzzles me is what goes into redirectUrl: i set
redirectUrl = new Uri(“urn:ietf:wg:oauth:2.0:oob”);
but I am not sure is fine!
Can you throw some light on the topic?

Many thanks
Marco

Vijayakumar Yoganandan

Hi Marco,

I am glad that you liked the article.

For the redirection part, you need to provide the package name which is used in creating the application for Android explained in Step 5 under “Credentials for Google Login for Xamarin Android” in the redirect URL of the OAuth2 Authenticator while calling the API. Also, make sure the same package name is provided in the Android project manifest file as well.

Hope, this works for you.

Regards,
Vijayakumar Y.

The difference in replacing
redirectUrl = new Uri(“urn:ietf:wg:oauth:2.0:oob”);
with
redirectUrl = new Uri(“com.mycompany.myapp”);
where “com.mycompany.myapp” il pakage name from AndroidManifest.xml
is that I do not get the token displayed in accounts.google.com after successful authentication, but the browse moves to something that looks like http://www.google.com with a search bar. The ActivityCustomUrlSchemeInterceptor is not hit despite its intent filter is using
DataScheme=”com.mycompany.myapp”
If I close the browser window with the top-left X button, I get back to the app.. ..but authentication is aborted and nothing gets back.
It shouldn’t be so hard! There must be some bit somewhere to turn!

Did you manage to get it working?

How to get rid from the default “Web Authenticator Native Browser” title in the intermediate screen?

@VIJAYAKUMAR YOGANANDAN

Hi Vijay ,
Below code for andorid it is working but in ios presenter is throwing below warning
Could you plz help me out I am getting below warning in xamarin ios project –

Code :
public static string FacebookAuthorizeUrl = “https://www.facebook.com/dialog/oauth/”;
public static string FacebookAccessTokenUrl = “https://www.facebook.com/connect/login_success.html”;
public static string FacebookUserInfoUrl = “https://graph.facebook.com/me?fields=email&access_token={accessToken}”;
public static string FacebookiOSRedirectUrl = “https://www.facebook.com/connect/login_success.html”;

void OnFacebookLoginClicked(object sender, EventArgs e)
{
var authenticator = new OAuth2Authenticator(
clientId: clientId,
clientSecret: string.Empty,
scope: Constants.FacebookScope,
authorizeUrl: new Uri(Constants.FacebookAuthorizeUrl),
redirectUrl: new Uri(redirectUri),
accessTokenUrl: new Uri(Constants.FacebookAccessTokenUrl),
getUsernameAsync: null,
isUsingNativeUI: true
);
authenticator.Completed += OnAuthCompleted;
authenticator.Error += OnAuthError;

//authenticator.IsLoadableRedirectUri = true;

AuthenticationState.Authenticator = authenticator;

var presenter = new Xamarin.Auth.Presenters.OAuthLoginPresenter();
presenter.Login(authenticator);
}

WARNING :
https native ui used with http[s] schema redirect url will be loaded in Native UI !
Oauth data parsing might fails.And it is not progressing ahead.

Vijayakumar Yoganandan

Hi Universal Tushar,

I apologize for the delay in responding to your query.

Based on the code you have provided, you are working Facebook integration and this article i have provided the information about Google login integration only. There are parameters which you have used are not needed like “Secret key”. Below is the model i have used which worked for me that you can try.

new OAuth2Authenticator(
clientId: Constants.FacebookClientId,
scope: “email”,
authorizeUrl: new Uri(Constants.FacebookAuthorizeUrl),
redirectUrl: new Uri(Constants.FacebookRedirectUri)
)

You can also check out the below xamarin slack chat team site under Xamarin Auth channel to get more details from other developers around the world.

https://xamarinchat.slack.com/

Regards,
Vijayakumar Y.

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top