HTMLファイル１つでFirebaseのGithub認証

## HTML

```html:index.html
<!DOCTYPE html>
<body>
  <p id="message"><!-- hello, *** --></p>
  <button id="signin">signin</button>
  <button id="signout">signout</button>

  <!-- 依存 -->
  <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-auth.js"></script>

  <!-- メイン処理 -->
  <script>
document.addEventListener('DOMContentLoaded', () => {
  const config = {
    apiKey: '<api-key>',
    authDomain: '<project-name>.firebaseapp.com'
  };
  firebase.initializeApp(config);

  const provider = new firebase.auth.GithubAuthProvider();

  /**
   * `firebase.auth().signInWithRedirect`から戻ってきた時に
   * 問題なければ`then`で`user`や`accessToken`が渡ってくる
   */
  (async () => {
    try {
      const {user, credential} = await firebase.auth().getRedirectResult();
      /* 何か... */
    } catch (err) {
      /* エラー時の処理 */
    }
  })();

  /**
   * ログインユーザーが変わったら発火
   */
  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      document.getElementById('message').innerHTML = `hello, ${user.displayName}`;

      /**
       * ログイン中なのでログアウトできるように
       */
      document.getElementById('signout').addEventListener('click', async () => {
        try {
          await firebase.auth().signOut();
        } catch (_) {
          /* エラー時の処理 */
        }
      });
    } else {
      document.getElementById('message').innerText = '';

      /**
       * ログインまだなので、クリックでログインできるように
       */
      document.getElementById('signin').addEventListener('click', () => {
        firebase.auth().signInWithRedirect(provider);
      });
    }
  });
});
  </script>
</body>

```

## Gif

![Kapture 2017-10-25 at 11.01.15.gif](https://qiita-image-store.s3.amazonaws.com/0/84144/3cab9c01-e453-50c1-84a9-69c9fda971b9.gif)

## ちょっと補足

### 依存

ここでは認証しか使ってないのでファイルサイズを減らすために個別に読み込むようにしてますが、Firebaseが提供する機能をすべて使いたい場合は、

```html
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase.js"></script>
```

だけでもいけます。これは、

```html
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/*.*.*/firebase-messaging.js"></script>
```

と同じようです。

### メイン処理

Firebaseの機能を使うには、まずはじめに必ず`firebase.initializeApp(config)`が必要です。（じゃないと`firebase.auth()`とかでエラーになります）

#### APIキーの確認

歯車から「プロジェクトの設定」に載ってます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/84144/de8e9212-a2b5-02da-f744-bcee7746c899.png" width="50%"><img src="https://qiita-image-store.s3.amazonaws.com/0/84144/cff595d6-4a3d-9bb0-0342-339299f78a54.png" width="50%">

#### Githubで「OAuth Apps」を作る

`new firebase.auth.GithubAuthProvider()`する為に必要です。

<p align="center">
<img src="https://qiita-image-store.s3.amazonaws.com/0/84144/f100272f-4263-417d-f619-3c54a7f6bcef.png" width="50%"><img src="https://qiita-image-store.s3.amazonaws.com/0/84144/0ed7b618-f12f-af7a-3b73-677971957776.png" width="50%">
</p>

<img src="https://qiita-image-store.s3.amazonaws.com/0/84144/686b80ab-3fce-49b8-17d9-c4fa71547c43.png" width="50%">

登録後に出てくる「Client ID」と「Client Secret」をGithubのAuth設定のフォームにコピペします。


<img src="https://qiita-image-store.s3.amazonaws.com/0/84144/c75d9e97-b4f1-b85b-635b-7cd43e07ec08.png" width="50%">

コールバックはGithubの方にコピペしてください。



#### ログインしてるかどうかの確認

`firebase.auth().onAuthStateChanged(...)`をしておくとユーザーがログインしていればそのユーザー情報が渡ってきますし、していなければ`null`が回ってくるので、これを使って判断することができます。