Git Product home page Git Product logo

angular-directive.g-signin's Introduction

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

  1. Include google-plus-signin.js.
  2. Add directive.g+signin as a dependency to your app.
  3. Add <google-plus-signin clientid="your-client-id"> to your app.
  4. Create a listener on your $scope for event:google-plus-signin-success to detect when your users are authenticated.
  5. 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.

angular-directive.g-signin's People

Contributors

agosto-levitomes avatar alex-reports avatar aziz avatar barryrowe avatar beloglazov91 avatar dbitting avatar devasur avatar djds4rce avatar doingweb avatar frankbille avatar gahen avatar hzooly avatar mohitgoyal707 avatar pbzdyl avatar phw avatar rauno56 avatar reiz avatar sirkitree avatar timmurphy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-directive.g-signin's Issues

Bower package still on version 0.0.1

Hi,

I am using Bower for package management, but I see the current Bower package is still on version 0.0.1, while the package on Github repository is now version 0.0.2? Is it possible to update the Bower package to the latest version by default?

Thanks

Auto login without asking to choose account

Hello,

i am using this directive in one of my project and when i login once i get the user information and i pass that information to backend and gets the user login. but if user comes again on login page he does not get the chance to select accont for login , it automatically selects the previous account and logs user in

How to correctly specify various scopes?

(new lines for readability)

Works:

<google-plus-signin 
clientid="..." 
accesstype="offline" 
scope= 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'>
</google-plus-signin>

Doesn't work:

<google-plus-signin 
clientid="..." 
accesstype="offline" 
scope= 'https://www.googleapis.com/auth/gmail.modify https://www.googleapis.com/auth/gmail.compose https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/contacts.readonly'>
</google-plus-signin>

error_400__oauth2_error___1_and_google_gmail_api

I'll investigate it further but maybe you'll know from top of your head...

e2e protractor Test for the directive

Hi, I am using this directive, pretty cool!
This is the code I am using with protractor to test it (In our case, we are using the force approval prompt)

    describe('Google+ auth', function () {

        var  util = require('util'),
        driver = browser.driver,
        handlePromise, popUpHandle, handle, originalHandle,
        button =  element(by.xpath('//button[contains(@style,"opacity")]'));

        beforeEach(function () {
            //Need to sleep, so the button can be rendered
            browser.sleep(2000);
            button.click();
            handlePromise = browser.getAllWindowHandles();
            browser.sleep(2000);
            var handles = handlePromise.then(function (handles) {
                popUpHandle = handles[1];
                originalHandle = handles[0];
                browser.switchTo().window(popUpHandle);
                handle = browser.getWindowHandle();
                expect(handle).toEqual(popUpHandle);
                browser.driver.executeScript('window.focus();');
            });

        });

        it('If user approval, should login the user', function () {
            element(by.id('Email')).sendKeys('[email protected]');
            element(by.id('Passwd')).sendKeys('foobarpassword');
            element(by.id('signIn')).click();
            browser.sleep(3000);
            element(by.id('submit_approve_access')).click(); //submit_deny_access
            browser.switchTo().window(originalHandle);
            browser.waitForAngular();
            expect(browser.getCurrentUrl()).toBe(browser.baseUrl + 'success-url');
        });

        it('If user disapproval, should remain in login page', function () {
            // --cancel button id:  submit_deny_access
            expect(url).toBe(browser.baseUrl + '/login');            
        });

       it('If window closed without approval, should remain in login page', function () {

        });
});

problem with data-

Angularjs removes data- from attributtes, so !attrs.hasOwnProperty('data-' + propName) is always true and the default values cannot be overwriten.

Than you.

origin_mismatch error

Request Details

from_login=1
e=3100077
scope=https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email
redirect_uri=postmessage
origin=http://localhost:8000
state=275997252|0.2242825375
as=65d870f993af0771
pli=1
request_visible_actions=http://schemas.google.com/AddActivity
hl=en-US
response_type=code token id_token gsession
cookie_policy=single_host_origin
proxy=oauth2relay1066710919
include_granted_scopes=true
client_id=620125449078.apps.googleusercontent.com
authuser=2

Get connected without popup ?

Is it possible to get connected without open the Google popup ?

I would like to redirect the content of the popup in a new tab or in a modal, but I don't know how.. 🤕

Why do I want this ? On mobile device, the user experience is not that good with a popup.

Thanks !

Tag

Release,

Hello, thanks for this module,
maybe it is a good idea to add some tag ?

Cross-origin frame errors disabling button

I've just tried loading the example on your site and am getting cross-origin frame errors on page load. These are stopping the sign-in button from being active. This is happening in Chromium/Chrome on Ubuntu 14.04. The button works in Firefox.

Chromium    34.0.1847.116 (Developer Build 260972) Ubuntu 14.04 aura
OS  Linux 
Blink   537.36 (@170605)
JavaScript  V8 3.24.35.22
Error in event handler for (unknown): Blocked a frame with origin "https://apis.google.com" from accessing a cross-origin frame.
Stack trace: Error: Blocked a frame with origin "https://apis.google.com" from accessing a cross-origin frame.
    at Error (native)
    at setupffoverrides (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:151:86)
    at checkgenpwfillforms (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:152:33)
    at receiveBG (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/onloadwff.js:130:210)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at EventImpl.dispatchToListener (extensions::event_bindings:395:22)
    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
    at publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:69:26)
    at EventImpl.dispatch_ (extensions::event_bindings:378:35)
    at EventImpl.dispatch (extensions::event_bindings:401:17) extensions::event_bindings:383
EventImpl.dispatch_ extensions::event_bindings:383
EventImpl.dispatch extensions::event_bindings:401
publicClass.(anonymous function) extensions::utils:69
dispatchOnMessage

This is only one of the errors - there are similar ones for the accounts.google.com URL.

Add Support For Google plus JS SDK login

Proposal To move the Defaults Array to a Factory so it can be configured in the angular 'config' block and add support Google Plus JS SDK login.
Why?
It would nice if we could Style the google login button to our requirement, but the current implementation of directives doesn't let you do that. Also It would be nice to give a flexibility of implementation.

Thoughts?

New version 0.1.1??

Hi.

The code is available on Github is not the same as the example code. In addition, bower seems to be a new version 0.1.1 but is still github version 0.0.2.

It is correct?
Thank you.

signinCallback()

We should perhaps make this configurable so that the signinCallback() can be some other function which could be used within a controller.

Where to look For user data

Sorry for a lame question, I but could not get from the read me file that where should I look for user data such as name, profile image etc on the success the authResult don't contain it.

Help Required...

IE 11 not working

When I put your directive in my app, I got google auth popup opened, but no content rendered in it. But, when I open your sample in IE 11 it works ok.

Is there something else what I need to add to my app beside what you have listed in documentation?

I am using Angular 1.5.8.

Cannot install using bower

bower install angular-directive.g-signin

Full log

$ bower install angular-directive.g-signin
bower angular-directive.g-signin#~0.1.0       not-cached git://github.com/sirkitree/angular-directive.g-signin.git#~0.1.0
bower angular-directive.g-signin#~0.1.0          resolve git://github.com/sirkitree/angular-directive.g-signin.git#~0.1.0
bower angular-directive.g-signin#*            not-cached git://github.com/sirkitree/angular-directive.g-signin.git#*
bower angular-directive.g-signin#*               resolve git://github.com/sirkitree/angular-directive.g-signin.git#*
bower angular-directive.g-signin#*              checkout master
bower angular-directive.g-signin#*          invalid-meta angular-directive.g-signin is missing "ignore" entry in bower.json
bower angular-directive.g-signin#*              resolved git://github.com/sirkitree/angular-directive.g-signin.git#960b1e3eea
bower angular-directive.g-signin#~0.1.0     ENORESTARGET No tag found that was able to satisfy ~0.1.0

Additional error details:
No versions found in git://github.com/sirkitree/angular-directive.g-signin.git

Google+ APIs will be shut down

Hello,
"Google+ APIs will be shut down on March 7, 2019. This includes Google+ Sign-in. Learn more.
Google+ integrations for web and mobile apps will also cease to function March 7, 2019. Learn more.

This will be a progressive shutdown, with intermittent failures starting as early as January 28, 2019."

https://developers.google.com/+/
I got this message and wanted to know what does it mean about the google login.
I am using your directive .

Thanks,

Forked repo registered in Bower

A bower update earlier this evening broke my build. After a little investigation, I noticed that @andresesfm's fork (which is a number of commits behind) is registered in the Bower registry instead of this one. I feel like this repo should be the one registered for this package in Bower, given that it is the main line of the package.

Thoughts? I'd like to hear @andresesfm's position on this.

update scope after event fires

when scope variable is modified inside the events: 'event:google-plus-signin-success' and 'event:google-plus-signin-failure', changes are not not detected, therefore, the view does not get updated.

you need to call
$rootScope.$apply();

at the end of each event

User Identification

How to get the email-id, username etc for the user. Since the auth token presently doesn't have any field to "identify" the user.

Verify Your Google API Project

I just received the following notice from Google:

Hello Developer of AngularJS Google Auth,You’re receiving this email because you’re listed as a contact on the Google Cloud Project that uses OAuth 2.0 to access Google APIs for your app: AngularJS Google Auth.In July, we announced new security protections to protect users from malicious and deceptive apps. As part of that effort, we need you to submit your app for verification. How? Submit the verification form https://support.google.com/code/contact/oauth_app_verification (Even partial submissions will help launch the review process.)By when? Prior to 2018-01-22Web client(s) that need verifying: 620125449078-4jo21sf1ltlb81o5cbke4sic3ogoo3gm.apps.googleusercontent.comIf you don’t submit the verification form by the deadline, your users will begin to see the “Unverified App” screen. If your app is only used by users within your domain and you have associated your project with a Cloud organization on the same domain, you do not need to file a verification request and your users will not see the “Unverified App” screen. Learn more.What is required to be verified by Google?Follow the steps listed on our FAQ under “How can I ensure the verification process is quick and smooth?”.Your app should use HTTPS for your redirect URIs and POST message origins.Your app must comply with Sign-In Branding Guidelines, changes that can double your conversion rate. More about this changeIf you think you received this email in error, update your app’s contact info in the Google developer console. You can learn more about this change in the Help Center article on Unverified Apps.
--

Override defaults

There's defaults set in the directive. We should allow a way to override these defaults. I'm thinking if the attribute is specified in the element it would override the default.

index.html AngularJS version not up to date

I think you've forgot to change the AngularJS version in your import.
Indeed, with the version on the repository, I got TypeError: linker is not a function.
With the most recent version AngularJS 1.6.4, the error disappears.

Not works it in devices

I am develop a hybrid app and am using directive.g+signin directive but in my device does not leave the table to sign in. Just do not get anything when I click on the button. I have to install any additional plugin to exit the dialog box?

Token expires too quickly. How do I set the token expiration or request a new one?

I have implemented this very useful directive in my application.
However, if I leave the app open for a while, the next server request tells me that the token is invalid/expired.
How do I request a longer-lasting token?
Alternatively, how do I refresh the token before every request to my server (that will authenticate its validity against Google servers)?

ECONFLICT Unable to find suitable version for angular

I kept getting this ECONFLICT Unable to find suitable version for angular error when i tried installing angular-directive.g-sign through bower. So I took a look at your code and realised it was dependent on an older version of angular. I decided to bypass bower, copy the google-plus-signin.js file and part of the demo file to my project before it worked.

I think making the directive compatible with angular 1.5.x or newer would fix the bower issue and prevent future frustrations

oauth 2.0?

Hi there, are you planning to provide support of oauth 2.0? because oath 1 is being deprecated

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.