[Google Login Plugin] How to Configure the Google Plus Login Plugin for Android

[Google Login Plugin] How to Configure the Google Plus Login Plugin for Android

  
Forge Component
(6)
Published on 2017-07-06 by Labs
6 votes
Published on 2017-07-06 by Labs

With the Google Plus Login, you can integrate a Google login plugin in your application, easing the login process, and making it unnecessary to create a new account.

Follow the steps below to configure the Google Plus login plugin.

1. Go to the Google API Manager console and log in using your Google credentials.

2. Create a new project.


3. Enter your app's name in the name input.

4. Select and enable the Google + API.


5. Click the Create credentials button.


6. Add credentials to your project.
    a. Select Google+ API in the kind of credentials you need.
    b. Select Web server (e.g. node js, Tomcat) as the setting you'll need to configure.
    c. Choose User data as the data you will be accessing.
    d. Click the What credentials do I need? button.


7. Add authorized redirect URIs.
    a. To authorize all the URLs from the server, add “/*” in Authorized redirect URIs.
    b. To authorize a specific app, add to the URL, the application name and in the end, add “/*” to authorize all application screens.


8. Add the product name that the users will see.


9. Save the Client ID. You will need it during the Android configuration.
Click Done.


The following steps are Android-specific.

1.  Go to Enable Google services for your Android app.

2. Choose the App Name (this should be the same name that you gave to the project), and enter the application identifier (the same as your iOS certificate).

3. Open the command line as Administrator, from the C:\Program Files\Java\<java folder name>\bin directory, and write the following command to generate a release Android certificate (if you want a build for debug mode follow this):

keytool -genkey -v -keystore {my-release-key}.keystore -alias {alias_name} -keyalg RSA -keysize 2048 -validity 10000

a. Replace {my-release-key} with your project name, and {alias_name} with your application name, for example.
b. Save these credentials, to later generate a native build in the Development Environment.
c. You will be asked for a password, your first and last name, your organizational unit, your organizational city, your state and your country. Then you will need to confirm the inserted data and to enter the password you previously defined.
d. The certificate will be created in the following directory: C:\Program Files\Java\<java folder name>\bin.

 

4. After the certificate is generated, you will need to extract the SHA1 to continue the Google Plus Android configuration. Write the following command line:

keytool -list -v -keystore {keystore_file_path}

a. Replace {keystore_file_path} with the path to the generated certificate.


5. Copy the SHA1 and return to the browser. Paste the SHA1 in the Android Signing Certificate SHA-1 field.


6. Click the Enable Google Sign-in button. The Android configuration is now available in the Dashboard.

7. Go to Service Studio, open the Native Builder for Android and fill in the fields:
    a. App identifier: Same as iOS.
    b. Keystore: Select the generated certificate.
    c. Enter the password that you defined when the certificate was generated.
    d. Enter the alias name defined.
    e. Enter the password again.
    f. Don’t generate the app yet.


8. Open the application module where you want to use Google Login Plugin and add the following JSON to the Extensibility Configuration. This field is mandatory.

9. Add the following Extensibility configuration:
"
{
    "plugin":
        {
            "url": "https://github.com/EddyVerbruggen/cordova-plugin-googleplus#5.0.3"
        }
}
"

10. Return to the browser, copy the Client ID from WebClient1. You will need it later.

11. Reference all actions from the GoogleLoginPlugin. Drag the GoogleLogin action to your client side login action.

12. Define the following parameters, only two are mandatory:

  • IsSilent: Check if the user is already signed in to the app and sign them in silently if they are. You should use the default: False. Change it to True, only if you are sure that the user is already logged in through Google Login.

  • Scopes: The default scopes requested are the profile and the email. To request other scopes, add them as a space-separated list. Refer to the Google Scopes documentation for info on valid scopes that can be requested. Default:
    "https://www.googleapis.com/auth/plus.login
    https://www.googleapis.com/auth/userinfo.email
    https://www.googleapis.com/auth/plus.me 
    https://www.googleapis.com/auth/userinfo.profile"

  • ClientId: It's the webClientId value from your Google account/project. It identifies the target account to log in to. This field is mandatory.

  • Offline: Optional, but requires the ClientId. If set to True the plugin will also return a serverAuthCode, which can be used to grant offline access to a non-Google server.

  • ForceApprovalPrompt: Forces the permission popup to appear in each login. Default value: False.

  • IsMapUsers: If True, it means that you want to map the user between the client and the server side. This field is mandatory.

  • OneToOneEmailMapping: Ensures that the given email only matches one user on the server database. Default value: False.

  • CreateGoogleUsers: Ensures that the plugin can create a server user to matches the given email if no user is found.

13. The GoogleLogin action validates the Google account, however, if you want a system login you should code that. Google Core provides you with an action to do that, and it’s explained above.

14. Reference Google Core actions and drag ValidateAndLoginGoogleUser action after the GoogleLogin action.
ValidateAndLoginGoogleUser has the following input parameters: 

  • IdToken: GoogleLogin action returns an IdToken when it’s successful.
  • UserId: GoogleLogin user ID.
  • IsPersistent: If True, the login will be persistent for 15 days.

16. After you call this action, your user is logged in using the OutSystems login, so you can GrantRoles and manage it as you want.

17. The Google Login Plugin is ready. Publish your app.

Hi,

I followed this guidelines, and also the ones from this page:

https://www.outsystems.com/forums/discussion/26075/using-google-login-plugin/

But I'm allways getting "Error 10" when calling Login method.

This error code (10), doesn't help much, since it has no description.

From what I investigate, I think this is a configuration / Certificate problem, but no matter what I try, I allways get the same error. (happens on Android - debug or release mode).

Any suggestion / Tip? :)


My best regards 

Hi Gonçalo,


Please make sure that you have a matching package id: "my.appidentifier.id" on Google's console should match the App identifier on Service Studio's Native Platform tab (when your generating the Android build)

Also make sure when generating the Android app you're using the certificate for which the SHA1 fingerprint was extracted and configured on Google's console.

For Android, It's these two settings (App Identifier/Bundle Id and package signing Certificate) that will ensure the application you're running is configured on Google for authentication. IOS uses a different mechanism based on the "iOS URL scheme" or Reverse Client Id, which needs to be set on extensibility configuration.


Kind Regards,

João Grazina



Hello There,


I was attempting to use the plugin to access Google Fit Data on my android platform.I am at a stage where the application grants permission to access the Google Fit Data and is successful in granting the access to the Google Fit Scope for my android app.I can see that on my google user account. After which the Login fails and displays a error.

GoogleLoginPlugin.InvalidUserException: login failed:::Thissssss
    at https://Test-dev.outsystemsenterprise.com/Sandbox_Mobile_Sunil/scripts/GoogleLoginPlugin.controller.js?_KdPDaV5mIcNyGM2n8ka9w:386:7
    at p (https://spotcheck-dev.outsystemsenterprise.com/Sandbox_Mobile_Sunil/scripts/OutSystems.js?wx3+I5+CMvuKnbo8GOLRfg:2:1450)
    at Object.d [as executeSequence] (https://Test-dev.outsystemsenterprise.com/Sandbox_Mobile_Sunil/scripts/OutSystems.js?wx3+I5+CMvuKnbo8GOLRfg:2:1196)
    at https://Test-dev.outsystemsenterprise.com/Sandbox_Mobile_Sunil/scripts/GoogleLoginPlugin.controller.js?_KdPDaV5mIcNyGM2n8ka9w:321:16
    at <anonymous>


I am unable to go beyond this and aquire a valid token to perform the rest of the activities.


Any help would be highly appreciated.


Regards,


Sunil

Dear Outsystems Labs,

Please add to this document about the needed REVERSED_CLIENT_ID Variable for IOS.

Reversed Client ID is well, reversed version of client ID.

I almost panic when I cannot generate IPA with Google Plus error, until I read the plugin's Github page.


Here's the extensibility configuration needed for IOS:

{
    "plugin":
        {
            "url": "https://github.com/EddyVerbruggen/cordova-plugin-googleplus#5.0.3",
            "variables": [{
                "name": "REVERSED_CLIENT_ID",
                "value": "com.googleusercontent.apps.478731357925-99lxxxxxxxxxxxxxxxxxx"
                }]
        }
}

Hi All,

For me Warning:
The JKS keystore uses a proprietary format. It is recommended to migrate to PKCS12 which is an industry standard format using "keytool -importkeystore -srckeystore Barcode.keystore -destkeystore Barcode.keystore -deststoretype pkcs12".

this error is getting in CoomandPromt

Please help me to solve this..

Thank You,

Hi,

I solved my Previous Issue,

Currently am getting a list of mail id in my mobile, after choosing it, it not logging in to the Main Screen, Its Keep on loading in login Page itself.


Think that due to the last point in this demo

""16. After you call this action, your user is logged in using the OutSystems login, so you can GrantRoles and manage it as you want. ""

Please help me to solve this..

ManiKandan K   

Anyone successfully used and implemented the technique? 

Sharizad Mohamad wrote:

Anyone successfully used and implemented the technique? 

I did. What do you want to ask? I will gladly help.


ManiKandan Kaliamoorthy wrote:

Hi,

I solved my Previous Issue,

Currently am getting a list of mail id in my mobile, after choosing it, it not logging in to the Main Screen, Its Keep on loading in login Page itself.


Think that due to the last point in this demo

""16. After you call this action, your user is logged in using the OutSystems login, so you can GrantRoles and manage it as you want. ""

Please help me to solve this..

ManiKandan K   

Have you done step 7? 

7. Add authorized redirect URIs.
    a. To authorize all the URLs from the server, add “/*” in Authorized redirect URIs.

Hi Harlin Setiadarma,

yes, i done step 7 to add authorized URLs.

Successfully completed my task, Thank you for your responds,

Regards,

Manikandan K

Harlin Setiadarma wrote:

ManiKandan Kaliamoorthy wrote:

Hi,

I solved my Previous Issue,

Currently am getting a list of mail id in my mobile, after choosing it, it not logging in to the Main Screen, Its Keep on loading in login Page itself.


Think that due to the last point in this demo

""16. After you call this action, your user is logged in using the OutSystems login, so you can GrantRoles and manage it as you want. ""

Please help me to solve this..

ManiKandan K   

Have you done step 7? 

7. Add authorized redirect URIs.
    a. To authorize all the URLs from the server, add “/*” in Authorized redirect URIs.

Hi Harlin,

I've been trying to follow exactly like the steps mentioned above and as well as from this document https://www.outsystems.com/forums/discussion/26075/using-google-login-plugin/ 
I would like to ask a few question and I hope you can help me:

1. Do I need to create a "Google Login' button or google will make one for me? 


2. For step number 11, " Drag the GoogleLogin action to your client side login action." Hence, I've created a my own google button and the Button action is as shown in the diagram below and this is what I've implemented and I think there're error(s) because when I published the apps for testing on web browser, that button seems not to be working as in, once I click the button, there's no output (remain unchange) 



3. Do you have any reference on how you successfully used the Google Login? 

4. Do you have any tips that you think I should be wiser on implementing the Google Login Plugin?


Thank you for your time. 

Hi Sharizad Mohamad,

Think your going in a right way only,

As, You Mentioned in 2, step...

""""2. For step number 11, " Drag the GoogleLogin action to your client side login action." Hence, I've created a my own google button and the Button action is as shown in the diagram below and this is what I've implemented and I think there're error(s) because when I published the apps for testing on web browser, that button seems not to be working as in, once I click the button, there's no output (remain unchange) ""


  • Try to build the app in which you need (Android or IOS), install it in your device then try, it will fetch from the device the mail id's which your using in it.

let me know need more clarification..

Regards,

Manikandan K


1. You need to create the button

2. You can't test it on browser, you need to generate apk or ipa and test it directly on android/ios device. 

3. I follow the steps carefully and I did it without any help. 

Only things I stumbled was when generating ipa file for ios, it needs special configuration (read my post above about Variable needed on Extensibility Configuration) 

ManiKandan Kaliamoorthy wrote:

Hi,

I solved my Previous Issue,

Currently am getting a list of mail id in my mobile, after choosing it, it not logging in to the Main Screen, Its Keep on loading in login Page itself.


Think that due to the last point in this demo

""16. After you call this action, your user is logged in using the OutSystems login, so you can GrantRoles and manage it as you want. ""

Please help me to solve this..

ManiKandan K   

Hi, I've experienced the same problem, once I click on my google account, it remains on the login page. If it's not burdening, how to do you manage to fix this? The picture below is my Authorized redirect URIs

Thank you

Hi Sharizad Mohamad,

If Possible Can you share your Oml so that i can see wat issue you are facing, 

else, try to debug using device and have a look on the issue, Ping me back.

Regards,

Manikandan K

13. The GoogleLogin action validates the Google account, however, if you want a system login you should code that. Google Core provides you with an action to do that, and it’s explained above.

14. Reference Google Core actions and drag ValidateAndLoginGoogleUser action after the GoogleLogin action.
ValidateAndLoginGoogleUser has the following input parameters: 

  • IdToken: GoogleLogin action returns an IdToken when it’s successful.
  • UserId: GoogleLogin user ID.
  • IsPersistent: If True, the login will be persistent for 15 days.

16. After you call this action, your user is logged in using the OutSystems login, so you can GrantRoles and manage it as you want.


Point 13 said that Google Login only validates Authentication in Google Account, you still haven't authenticated to Outsystems, that's why you can't enter Homescreen (which need Registered role), and it will redirect to login screen again.


Point 14 tells how to authenticate this Google UserId returned by Google Login via Outsystems User Provider, after that your session will get Registered role, and your Homescreen will be accessible.


Point 16 tells you, after completing point 14, now your Google User is logged in inside Outsystems, so you can grant role if you needed, but this is completely optional.

This will be a long post, so I'm splitting up.

Google Login client action can be set to map Google Users to your Outsystems User Provider.

In my use case above, I don't really need to login to my app using Google Users, I just need to get some basic info (email, etc).

So I set IsMapUsers property and CreateGoogleUser to False.


If you need to login to Outsystems using Google Users, then you need:

isMapUsers = True

After successful Google Login, this will search for Outsystems User with the same email as the Google User, then map it in component's internal entity.


OneToOneEmailMapping =True/False

You may have more than 1 Outsystems users with the same email.

I don't really understand this property, maybe if you have more than 1 Outsystems user with the same email, it will throw error or something.


CreateGoogleUser = True

If Google Login can't find Google User's email in Outsystems, this property will allow Google Login to create Outsystems User automatically using same name and email as the Google User.


Remember, all this was just to map (or create) Outsystems User from Google User.

But this does not do Login.

To actually login to Outsystems, and get the Registered role so you can access your Homescreen, you need to do point 14 and point 16 together.

Use ValidateAndLoginGoogleUser to actually login to Outsystems using the user map we're doing previously.