FirebaseのGoogleアカウントOAuth認証を試したのでメモ



サーバサイド実装しなくても手軽にOAuth認証やデータ保存ができるということで便利そうなのでためしてみた。

## プロジェクトを作成する

- https://console.firebase.google.com/ で「新規プロジェクトを作成」をクリックしてプロジェクトをつくる

<img width="985" alt="スクリーンショット 2016-09-24 13.46.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/15637/a56710fb-514a-3d84-c460-1902b4fdfcb1.png">

- 「ウェブアプリに Firebase を追加」をクリックするとWebページに貼り付けるコードが表示される

<img width="915" alt="スクリーンショット 2016-09-24 13.48.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/15637/5704e1b8-85f1-709a-c157-ff3597baa3f6.png">

## googleアカウントで認証できるように設定する

- https://console.firebase.google.com/project/hoge-proj/authentication/users で「ログイン方法を設定」をクリック
- 「Google」を有効にする

## firebase-toolsを使う

- `npm install -g firebase-tools`
- `firebase login`でgoogleアカウントでログインする
- プロジェクト用のディレクトリを適当につくって`firebase init`する

<img width="651" alt="スクリーンショット 2016-09-24 13.55.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/15637/e2205d8f-5ea6-b631-c2a6-1291d748260f.png">

- いろいろ聞いてくるので以下のように回答
	- Hosting: Configure and deploy Firebase Hosting sites
	- [don't setup a default project]
	- その他はデフォルトどおり
- 以下のようにファイルがつくられる

<img width="208" alt="スクリーンショット 2016-09-24 13.57.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/15637/d00f0cb3-329a-2f46-3588-3cdbd40df3a5.png">

- `firebase serve`で http://localhost:5000 が立ち上がり`public/index.html`にアクセスできる

<img width="854" alt="スクリーンショット 2016-09-24 14.00.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/15637/9b602e70-1823-04dd-a419-f7ff110f0635.png">


## googleのOAuth認証を組み込む

- `public/index.html`に「ウェブアプリに Firebase を追加」で表示される貼り付けコードを貼る
- 以下のようなコードを書く

```html
<button class="authBtn" disabled></button>
<span class="userId"></span>

<script>
var AuthUI = {
  init: function(){
    AuthUI.provider = new firebase.auth.GoogleAuthProvider();
    AuthUI.elAuthBtn = document.querySelector('.authBtn');
    AuthUI.elUserId = document.querySelector('.userId');
    AuthUI.draw();
    AuthUI.elAuthBtn.addEventListener('click', function(){
      AuthUI.doAuth();
    });
    firebase.auth().getRedirectResult().then(function(result) {
      AuthUI.elAuthBtn.disabled = false;
      if (result.credential) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
      }
      if(result.user){
        AuthUI.data.authed = true;
        AuthUI.data.userId = result.user.email;
        AuthUI.draw();
      }
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      // The email of the user's account used.
      var email = error.email;
      // The firebase.auth.AuthCredential type that was used.
      var credential = error.credential;
      // ...
    });
  },
  data: {
    authed: false,
    userId: '',
    info: ''
  },
  draw: function(){
    AuthUI.elAuthBtn.textContent = AuthUI.data.authed ? 'LOGOUT' : 'LOGIN';
    AuthUI.elUserId.textContent = AuthUI.data.userId;
  },
  doAuth: function(){
    if(AuthUI.data.authed){
      firebase.auth().signOut().then(function() {
        AuthUI.data.authed = false;
        AuthUI.data.userId = '';
        AuthUI.draw();
      }, function(error) {
        // An error happened.
      });
    }
    else {
      firebase.auth().signInWithRedirect(AuthUI.provider);
    }
  }
};
AuthUI.init();
</script>
```

以下のように動く

１回目のログイン
![login.gif](https://qiita-image-store.s3.amazonaws.com/0/15637/34f5857d-2ce9-0b5e-35a5-68eb8a1e1d35.gif)

２回目以降のログイン
![login2.gif](https://qiita-image-store.s3.amazonaws.com/0/15637/ff7b77f4-c555-8489-cb24-77007ef1a179.gif)

Googleアカウントの接続許可は以下で管理
https://security.google.com/settings/security/permissions?utm_source=OGB&pli=1

で、これをこのままgh-pagesとかで動かそうとしてもエラーになるので、https://console.firebase.google.com/project/hoge-proj/authentication/providers にてOAuthリダイレクトドメインを設定する。

<img width="959" alt="スクリーンショット 2016-09-24 15.40.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/15637/fa7fe265-351d-44c0-d29e-0d3514dce898.png">

[Demo](https://cyokosaturn.github.io/cyokodog_net_demo/firebase/public/)