Ionic Google Login Tutorial

(Ionic login with google plus) explains about implementing google plus login using cordova-plugin-google-plus plugin with ionic native. Create Client Reversed Client Id: https://codesundar.com/tutorials/create-reverse-client-id-for-google-login/

Create a New Project & Change working directory

ionic <span class="hljs-built_in">start</span> gplogin blank
<span class="hljs-built_in">cd</span> gplogin

Add your platform

<span class="hljs-selector-tag">ionic</span> <span class="hljs-selector-tag">cordova</span> <span class="hljs-selector-tag">platform</span> <span class="hljs-selector-tag">add</span> <span class="hljs-selector-tag">android</span>
<span class="hljs-selector-tag">npm</span> <span class="hljs-selector-tag">install</span> <span class="hljs-selector-tag">--save</span> @<span class="hljs-keyword">ionic</span>-<span class="hljs-keyword">native</span>/<span class="hljs-keyword">googleplus</span>

Add plugin

ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=com<span class="hljs-selector-class">.googleusercontent</span><span class="hljs-selector-class">.apps</span>.<span class="hljs-number">877300201036</span>-<span class="hljs-number">6</span>lp9u547lbqcsk7hk3qn4tt35iopqh5u

or

ionic cordova plugin <span class="hljs-built_in">add</span> http<span class="hljs-variable">s:</span>//github.<span class="hljs-keyword">com</span>/EddyVerbruggen/cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=<span class="hljs-keyword">com</span>.googleusercontent.apps.<span class="hljs-number">877300201036</span>-<span class="hljs-number">6</span>lp9u547lbqcsk7hk3qn4tt35iopqh5u

working with home.html

<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ion-content</span> <span class="hljs-attr">padding</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">"isUserLoggedIn"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align:center"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{userInfo.imageUrl}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">h3</span>></span></span><span class="hljs-template-variable">{{userInfo.displayName}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">h3</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span>></span></span><span class="hljs-template-variable">{{userInfo.email}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">ion-button</span> <span class="hljs-attr">clear</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"logout()"</span>></span>Logout<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-content</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ion-footer</span> *<span class="hljs-attr">ngIf</span>=<span class="hljs-string">"!isUserLoggedIn"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">ion-button</span> <span class="hljs-attr">block</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"loginWithGP()"</span>></span>Login with Google+<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ion-footer</span>></span></span>

Explanation: In the above code, we have created div content for displaying users information and footer for login if a user is not logged in

working with home.ts

loginWithGP(){
    <span class="hljs-keyword">this</span>.gp.login({}).<span class="hljs-keyword">then</span>(res=>{
    <span class="hljs-keyword">this</span>.userInfo=res;
    <span class="hljs-keyword">this</span>.isUserLoggedIn=<span class="hljs-literal">true</span>;
    }).<span class="hljs-keyword">catch</span>( err => <span class="hljs-built_in">console</span>.log(err));
}
logout(){
    <span class="hljs-keyword">this</span>.gp.logout().<span class="hljs-keyword">then</span>( <span class="hljs-function"><span class="hljs-params">()</span>=></span>{
    <span class="hljs-keyword">this</span>.isUserLoggedIn=<span class="hljs-literal">false</span>;
    });
}

Explanation: In the above code we have created an object for google plus module. Using that, we’re calling both login and logout operations.

Download