Angular Google Plus Sign-in Button Directive

Homepage

A good starting place for a Google Plus sign-in button. Specify your client id and you're done. Well, almost. You'll also want to set up a listener for event:google-plus-signin-success so you can do something once your users are authenticated.

Usage

Include google-plus-signin.js.
Add directive.g+signin as a dependency to your app.
Add <google-plus-signin clientid="your-client-id"> to your app.
Create a listener on your $scope for event:google-plus-signin-success to detect when your users are authenticated.
Optional: Listen for event:google-plus-signin-failure to handle authentication errors and sign outs.

Options

1: Language (supported languages):

  <google-plus-signin clientid="620125449078" language="sv"></google-plus-signin>

2: Auto Render - defaults to true. If false, will not render a context-aware button generated by the gapi.signin2.render() method

  <google-plus-signin clientid="620125449078" autorender="false"></google-plus-signin>

3: Custom Target ID - When autorender is set to false, this will tell the directive what element ID to attach the sign-in click listener to.

  <google-plus-signin clientid="620125449078" autorender="false" customtargetid="my-custom-element">
      <div id="my-custom-element"><button>Sign In With Google</button></div>
  </google-plus-signin>

Bower

Installable via bower:

bower install angular-directive.g-signin

Example

See the homepage for an example.

<div ng-app="directive.g+signin">
  <google-plus-signin clientid="620125449078"></google-plus-signin>
  <p>^ This is a Google Plus sign-in button</p>
</div>

Handling Signin Callback from Google Plus

You can listen for event:google-plus-signin-success and event:google-plus-signin-failure and handle them appropriately.

  $scope.$on('event:google-plus-signin-success', function (event,authResult) {
    // Send login to server or save into cookie
  });
  $scope.$on('event:google-plus-signin-failure', function (event,authResult) {
    // Auth failure or signout detected
  });

License

MIT

♡ CopyHeart 2013 by Jerad Bitner | Copying is an act of love. Please copy.

sirkitree / angular-directive.g-signin