ADVANCED PLAN + 


The MemberMouse Google login extension will allow your customers to create a new membership using their Google login credentials.


Creating A Google App

The first step to enabling the Google login extension on your site is to create a Google App. To create your app, follow these steps:

  1. First, you need to create a project. To access the Google developers page, visit https://console.developers.google.com/project. If you have previously created Google applications, you will see them here.

     Click Create Project.  



  2.  You will have to fill out some information about your new project:


    Once you click 'Create' the popup will disappear and you will see a message that your project is being created.  Then you will either see the page refresh, with a notification telling you that name is taken, in which case you should try again:
    or you will be taken to the API Library Page.


  3. Once at the library page, you will see a long list of possible APIs. Scroll down to Google+ API and click the link:


  4. Click the Enable button on the top.



  5. Once it is enabled, click Credentials:



  6. Once on the Add Credentials Screen, select Google API, Web Browser (JavaScript), and User Data. Then click 'What credentials do I need?'



  7. The second Credentials section will load:


    Authorized Javascript Origins: This is your base URL (as used in your MemberMouse license
    Authorized Redirect URL: This is the URL you see on the MemberMouse Google configuration screen:





  8. Click Create Client ID.  The third credentials section will load:

    Email Address: This is the address of the gmail account you are using,.
    Product name shown to users: Usually this is your website name.  This is what Google will list on the access request for the user to confirm.
    Homepage URL: This will be your website homepage, it is optional
    Product Logo:  Your logo is optional, but it will appear on the request
    Privacy Policy URL: This is optional
    Terms of service URL: Also Optional


  9. Click 'Continue'.  Section 4 will load with your Client ID.  Click 'Done'.



  10. You will be taken back to the Credentials section of your dashboard.  Click the pencil icon next to the project you just created.  That will take you to the configuration screen with all the details you need to configure Google+ in MemberMouse.



  11. Open up a new tab on your web browser, and move to configuring the Google Login Extension.



Configuring The Google Login Extension



To enable the Google login extension, follow the steps below:

  1. In the MemberMouse menu, click on General Settings.

  2. Next, click on the Extensions tab and from the following page, click on the Google logo.

  3. You will need to provide some information from your Google app, as well as make a few selections:



    Client ID - From your Google project dashboard.
    App Secret
    - From your Google project dashboard.
    Allow Signups?
    - If you want to allow new customers to sign up using their Google login credentials, then click this box. Otherwise, members will only be able to login using their Google credentials, but not sign up for a new membership.
    Membership Level - Customers can only signup for a free membership level when they are using their Google login credentials. Once they are members, they can purchase a paid membership. You need to select the default free membership you would like customers to join when using Google.
    Callback URL:
    - This is the URL that is used in the Google project in the steps above.


  4. Click Save Configuration.



Adding Google Signup And Login To Your Site






Once you have configured your site to accept Google login, you need to add the following SmartTags to allow for signup and login:


Signup Button SmartTag


The following SmartTag generates a button that customers can use to sign up for a new account:

[MM_Social_Signup_Button provider='Google']


Attributes:

provider - Set the provider attribute to all to generate signup buttons for all active social login providers, or you can use an individual tag for each provider Twitter, Facebook and Google. For example:

[MM_Social_Signup_Button provider='all']


Optional Attributes:
 
membershipLevel - You can optionally use this attribute to override the default signup membership level defined above. It takes a membership level ID for free membership levels only. For example:

[MM_Social_Signup_Button provider='Google' membershipLevel='2']


Read this article to learn how to find your membership level IDs.


Login Button SmartTag


The following SmartTag generates a button that customers can use to log into an existing account:


[MM_Social_Login_Button provider='Google']



Attributes:

provider - Set the provider attribute to all to generate signup buttons for all active social login providers, or you can use an individual tag for each provider Twitter, Facebook and Google. For example:

[MM_Social_Login_Button provider='all']


MM_Form Section Update


If you installed MemberMouse prior to version 2.2.0, and you want to use the SSO extension, you will also need to add the code below to your login core page (read this article to learn more about the login core page)

[MM_Form_Section type='socialLogin']
<div id="mm-social-login-section" class="mm-myaccount-module">
    <div id="mm-social-login-header" class="mm-myaccount-module-header">
        Social Networks
    </div>
    <div class="mm-myaccount-content-wrapper">
    <div id="mm-social-login-body">
        [MM_Form_Data name='socialLogin']
    </div>
       </div>
</div>
[/MM_Form_Section]


Troubleshooting


In some systems the standard callback URL will return the following error when attempting to use the login:



This means that the URL listed is not configured with Google as an authorized redirect URI. To fix this, go to the Google Developers Console, click APIS & AUTH > Credentials and then make sure that the URI in the error message above is pasted in the Redirect URIs area on this page. The URI Google is referring to in the error message needs to be included here exactly as it appears in the error message.