Social Login using Github with Angular
HTML
<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.css">
<script src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<my-app></my-app>
TypeScript
let { Component, NgModule } = ng.core;
@Component({
selector: 'my-app',
template: `
<a (click)="singin()" [ngClass]="'btn btn-social btn-github'">
<i [ngClass]="'fa fa-github'"></i> Sign in with {{name}}
</a>
`,
})
class HomeComponent {
counter = 0;
name = 'Github'
singin() {
// Initializes OAuth.io with API key
// Sign-up an account to get one
window.OAuth.initialize('BTfcjv51Sd9sJJrfLVp8QyIBZUM');
// Popup facebook and ask for authorization
window.OAuth.popup('github').then((github) => {
console.log('github:', github);
// Prompts 'welcome' message with User's name on successful login
// #me() is a convenient method to retrieve user data without requiring you
// to know which OAuth provider url to call
github.me().then((data) => {
console.log("data: ", data);
alert("Your Github email: " + data.email + ".\nCheck console logs for more info.");
});
// You can also call Github's API using #.get()
github.get('/user').then(data => {
console.log('self data:', data);
});
});
}
}
const { BrowserModule } = ng.platformBrowser;
@NgModule({
imports: [ BrowserModule ],
declarations: [ HomeComponent ],
bootstrap: [ HomeComponent ]
})
class AppModule { }
const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);