Last active
December 25, 2015 20:39
-
-
Save sethladd/7037269 to your computer and use it in GitHub Desktop.
Testing an encapsulated gplus in polymer, both JS and Dart. Lots of caveats here. Make sure the plusone.js file is loaded before polymer (or, figure out all the async calls to wait until plusone is done loading). Note: normal gplus doesn't work because it scans the page looking for elements to upgrade. Of course, polymer puts everything into the…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:polymer/polymer.dart'; | |
| import "package:google_oauth2_client/google_oauth2_browser.dart"; | |
| import "package:js/js.dart" as js; | |
| import 'dart:html'; | |
| import 'package:logging/logging.dart'; | |
| typedef OnSignInCallback(SimpleOAuth2 authenticationContext, [Map authResult]); | |
| typedef OnSignOutCallback(); | |
| final Logger log = new Logger('google-sign-in-element'); | |
| @CustomTag('google-sign-in') | |
| class GoogleSignIn extends PolymerElement { | |
| @observable bool isConnected = false; | |
| @published String clientId; | |
| OnSignInCallback signInCallback; | |
| OnSignOutCallback signOutCallback; | |
| SimpleOAuth2 authenticationContext; | |
| _onSignInCallback() { | |
| print('here!'); | |
| } | |
| GoogleSignIn.created() : super.created() { | |
| /** | |
| * Calls the method that handles the authentication flow. | |
| * | |
| * @param {Object} authResult An Object which contains the access token and | |
| * other authentication information. | |
| */ | |
| js.scoped(() { | |
| js.context["onSignInCallback"] = new js.Callback.many((js.Proxy authResult) { | |
| _onSignInCallback(); | |
| }); | |
| js.context.gapi.signin.render($['signin'], js.map($['signin'].dataset)); | |
| }); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- DOES NOT WORK --> | |
| <html> | |
| <head> | |
| <title>Sign-in with Google+</title> | |
| <script src="packages/polymer/boot.js"></script> | |
| <script src="https://plus.google.com/js/client:plusone.js"></script> | |
| </head> | |
| <body> | |
| <polymer-element name="google-sign-in"> | |
| <template> | |
| <div id="google-connect"> | |
| <button | |
| id="signin" | |
| class="g-signin" | |
| data-scope="https://www.googleapis.com/auth/games https://www.googleapis.com/auth/appstate" | |
| data-clientId="{{clientId}}" | |
| data-callback="onSignInCallback" | |
| data-accesstype="offline" | |
| data-cookiepolicy="single_host_origin"> | |
| <content select=".sign-in-msg"></content> | |
| </button> | |
| </div> | |
| </template> | |
| <script type="application/dart" src="google_sign_in.dart"></script> | |
| </polymer-element> | |
| <google-sign-in clientId="250963735330.apps.googleusercontent.com"> | |
| <span class="sign-in-msg">Please Sign In</span> | |
| </google-sign-in> | |
| <script src="packages/browser/interop.js"></script> | |
| <script src="packages/js/dart_interop.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>google signin</title> | |
| <script src="polymer.min.js"></script> | |
| <script src="https://plus.google.com/js/client:plusone.js"></script> | |
| </head> | |
| <body> | |
| <polymer-element name="g-signin"> | |
| <template> | |
| <button | |
| id="signin" | |
| class="g-signin" | |
| data-scope="https://www.googleapis.com/auth/games https://www.googleapis.com/auth/appstate" | |
| data-clientId="{{clientId}}" | |
| data-callback="onSignInCallback" | |
| data-accesstype="offline" | |
| data-cookiepolicy="single_host_origin"> | |
| <content select=".sign-in-msg"></content> | |
| </button> | |
| </template> | |
| <script> | |
| Polymer('g-signin', { | |
| publish: { | |
| clientId: '' | |
| }, | |
| created: function() { | |
| console.log('in created'); | |
| gapi.signin.render(this.$.signin, this.$.signin.dataset); | |
| } | |
| }); | |
| </script> | |
| </polymer-element> | |
| <g-signin clientId="250963735330.apps.googleusercontent.com"> | |
| <span class="sign-in-msg">Please Sign In</span> | |
| </g-signin> | |
| <script> | |
| function onSignInCallback() { | |
| console.log('here!!!'); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment