#github:browser example
Authenticate users with GitHub by writing only client-side code. Uses the OAuth2 Flow of firebase.
Main library: github:browser
Main element: Authentication.withToken
Gist: https://gist.github.com/kasperpeulen/ec3f3717f398ccce389e
Tags: #OAauth2
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src="https://cdn.firebase.com/js/client/2.2.7/firebase.js"></script> | |
| <!--material design lite--> | |
| <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> | |
| <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.purple-orange.min.css"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="wrapper mdl-shadow--2dp"> | |
| <div id="info"></div> | |
| <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled> | |
| Login with GitHub | |
| </button> | |
| </div> | |
| <script type="application/dart" src="main.dart"></script> | |
| </body> | |
| </html> |
| import 'dart:html'; | |
| import 'package:firebase/firebase.dart'; | |
| import 'package:github/browser.dart'; | |
| DivElement infoDiv = querySelector('#info'); | |
| ButtonElement loginButton = querySelector('button'); | |
| main() async { | |
| // Or specify your own firebase url. | |
| String firebaseUrl = 'https://dartnow-example.firebaseio.com/'; | |
| Firebase firebase = new Firebase(firebaseUrl); | |
| // enable the button for logging in | |
| loginButton.disabled = false; | |
| // If your use your own firbase url, make sure to do the steps in: | |
| // https://www-staging.firebase.com/docs/web/guide/login/github.html | |
| loginButton.onClick.listen((e) => firebase.authWithOAuthRedirect('github')); | |
| firebase.onAuth().listen((authJson) async { | |
| if (authJson['provider'] == 'github') { | |
| loginButton..text = "Already logged in."..disabled = true; | |
| String accessToken = authJson['github']['accessToken']; | |
| Authentication auth = new Authentication.withToken(accessToken); | |
| GitHub gitHub = createGitHubClient(auth: auth); | |
| CurrentUser user = await gitHub.users.getCurrentUser(); | |
| infoDiv.setInnerHtml(template(user), treeSanitizer: NodeTreeSanitizer.trusted); | |
| } | |
| }); | |
| } | |
| String template(CurrentUser user) => | |
| ''' | |
| Hello, ${user.name} <img src="${user.avatarUrl}" height="20px"><br> | |
| You've got ${user.publicGistsCount} public gists. | |
| '''; |
| name: github.browser_Authentication.withToken_'OAauth2' | |
| description: | | |
| Authenticate users with GitHub by writing only client-side code. | |
| Uses the OAuth2 Flow of firebase. | |
| homepage: https://gist.github.com/kasperpeulen/ec3f3717f398ccce389e | |
| environment: | |
| sdk: '>=1.12.0-dev.4.0 <2.0.0' | |
| dependencies: | |
| firebase: | |
| git: | |
| url: https://github.com/kasperpeulen/firebase-dart | |
| ref: onAuth | |
| github: '>=2.2.3+1 <3.0.0' |
| .wrapper { | |
| margin: 20px auto; | |
| max-width: 500px; | |
| padding: 20px; | |
| } |