ソーシャルログインをAngularとFirebase Authenticationで簡単に作る

こんにちは、スープです。
AngularとFirebaseを使ってソーシャルログインを簡単に作ってみます。[Angular Authentication made easy with Firebase](https://medium.freecodecamp.com/angular-2-authentication-made-easy-with-firebase-246c282d9ef8#.bk5abnpsc) のやり方に倣って作っていきます。

### ステップ
- Firebaseのプロジェクト作成
- 環境設定
- コードを書く

### Firebaseのプロジェクト作成

Firebaseの[コンソール](https://console.firebase.google.com/)でプロジェクトを作成します。

使用するSign-in providersを選択して有効にします。
コード例ではGoogleとTwitterを利用しています。

`Authentication` → `SIGN-IN METHOD` から使用するSign-in providersを有効にします。

![Firebase_Console_Auth.png](https://qiita-image-store.s3.amazonaws.com/0/98752/3090ef2e-fd07-9450-d7c2-e363dd8a2b88.png "Firebase_Console_Auth.png")

providerによって、Key/Secret等の設定が必要です。
例えばTwitterなら、アプリの作成後、API KeyとAPI Secretを取得してきて、設定する必要があります。
→[Twitter Application Management](https://apps.twitter.com/)


### 環境設定

angular-cliをインストール

```
$ npm install -g angular-cli
```

anglar-cliでスキャフォルディング

```
$ ng new firebase-auth-sample
$ cd firebase-auth-sample
```

開発サーバー起動

```
$ ng serve
```

`localhost:4200`にブラウザでアクセス

[angularfire2](https://www.npmjs.com/package/angularfire2)と[firebase](https://www.npmjs.com/package/firebase)のモジュールを入れます。

```
$ npm install angularfire2 firebase --save
$ npm install @types/firebase --save-dev
```

`tsconfig.json` にtypes追加

![tsconfig.png](https://qiita-image-store.s3.amazonaws.com/0/98752/522c7063-a73f-5442-0b92-c9222e78736e.png "tsconfig.png")

### コードを書く

Firebaseのコンソールの`WEB SETUP`をクリックすると、ポップアップで設定が表示されるので、コピーして`app.module.ts`に貼り付けます。

![WEB_SETUP.png](https://qiita-image-store.s3.amazonaws.com/0/98752/8edd9cb3-9b82-43a3-32e3-4b1661f504e3.png "WEB_SETUP.png")
(※apiKeyが見えていますが、プロジェクトの識別に用いられるだけなので問題ありません)

```src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {
  AngularFireModule,
  AuthMethods,
  AuthProviders
} from "angularfire2";

import { AppComponent } from './app.component';

// ポップアップの設定をここに貼り付ける
const firebaseConfig = {
    apiKey: "<your-apiKey>",
    authDomain: "<your-auth-Domain>",
    databaseURL: "<your-database-URL>",
    storageBucket: "<your-storage-Bucket>"
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig,{
      provider: AuthProviders.Twitter,
      method: AuthMethods.Popup
      // method: AuthMethods.Redirect // Redirectが良いならこっち
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

AngularFireのauthはobservableなので、subscribeする

```src/app/app.component.ts
import { Component } from '@angular/core';
import { AngularFire, AuthProviders } from 'angularfire2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = {};
  constructor(public af: AngularFire) {
    this.af.auth.subscribe(user => {
      if(user) {
        this.user = user;
        console.log(this.user);
      }
      else {
        this.user = {};
      }
    });
  }

  login(from: string) {
    this.af.auth.login({
      provider: this._getProvider(from)
    });
  }

  logout() {
    this.af.auth.logout();
  }

  private _getProvider(from: string) {
    switch(from){
      case 'twitter': return AuthProviders.Twitter;
      case 'google': return AuthProviders.Google;
    }
  }
}

```

```src/app/app.component.html
<button (click)="login('google')">
  Google Login
</button>
<button (click)="login('twitter')">
  Twitter Login
</button>
<button (click)="logout()">
  Logout
</button>

```

ここでログインボタンを押すと、ユーザーオブジェクトが返ってきて中身にいろいろな情報が入っているのが確認できました！(ง ˙ω˙)ว
![console_log_twitter.png](https://qiita-image-store.s3.amazonaws.com/0/98752/0ec3e865-1e75-6521-37d1-ae079f58f64c.png "console_log_twitter.png")


Firebaseのコンソールからはユーザーの情報が確認できます。
ユーザーの有効・無効化、停止もここから簡単にできます。

![Firebase_Users.png](https://qiita-image-store.s3.amazonaws.com/0/98752/de87ba46-6200-50e3-07ea-475a413a3d61.png "Firebase_Users.png")

コードは[こちら](https://github.com/souppower/firebase-auth-sample)に置いています。

### 参考

- [Angular Authentication made easy with Firebase](https://medium.freecodecamp.com/angular-2-authentication-made-easy-with-firebase-246c282d9ef8#.bk5abnpsc)

- [Angularfire2](https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md)