Web3.0検証(18)-MeteorでTODO管理アプリの開発(Githubアカウントでログイン)

##### [前回] [Web3.0検証(17)-MeteorでTODO管理アプリの開発(ユーザーアカウント機能)](https://qiita.com/mingchun_zhao/items/9b3b32ae18845439d478)

## はじめに

Githubアカウントでアプリにログインできるようにします。

## 準備

- 端末を二つ用意します。
    - 端末1: meteor起動/確認
    - 端末2: ソースコード修正

- 端末1から、Meteorアプリを実行
```
$ cd simple-todos-react
$ meteor run
```

- ブラウザでアプリを確認
    - `http://localhost:3000/`にアクセス
    - デベロッパーツールを開く(F12)
    - `デバイスのツールバーを切り替え`アイコンをクリック
    - デバイスを選択
        - 今回は、`iPhone SE`を選択

## Githubアカウントによるログイン機能を追加

### Github認証

- 作業内容
    - Meteorには、サードパーティ認証方法とアカウント管理システムが付属されている
    - GitHubアカウントによるログインに、`accounts-github`パッケージを使用

- 端末1から、`accounts-github`パッケージをインストール
```
$ cd simple-todos-react
$ meteor add accounts-github
```

- Githubシークレットキーを設定するため、`service-configuration`パッケージを追加
```
$ meteor add service-configuration
```

## `Login with Github`ボタンを作成

- 作業内容
    - Githubアカウントでログインするため`button`コンポーネントを作成
        - クリックされたら、ポップアップを開く
    - Github認証に、`Meteor.loginWithGithub()`関数を使用
        - 第1引数: `requestPermissions`
            - Githubからユーザー情報取得するため
        - 第2引数: `loginStyle`
            - ポップアップを開くため
- 端末2から、コード追加
```
$ cd simple-todos-react
$ vi imports/ui/LoginWithGithub.jsx
```
```imports/ui/LoginWithGithub.jsx
import React from 'react';
import { Meteor } from 'meteor/meteor';

export const LoginWithGithub = () => {
  const handleGithubLogin = () => {
    Meteor.loginWithGithub({
      requestPermissions: ['user'],
      loginStyle: 'popup',
    });
  };

  return (
    <button type="button" className="github-btn" onClick={handleGithubLogin}>
      Login with Github
      <div>
        <svg fill="#000000" viewBox="0 0 30 30" width="20px" height="20px">
          <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z" />
        </svg>
      </div>
    </button>
  );
};
```

- スタイルを追加し、かっこよく見えるように

```client/main.css
.github-btn {
  border: 1px solid #e1e5f0;
  background-color: #fff;
  width: 245px;
  margin: 0 auto 16px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.github-btn > div {
  margin-left: 4px;
}
```

## ログインフォームを作成

- `LoginForm.jsx`に`LoginWithGithub `コンポーネントをインポート
```imports/ui/LoginForm.jsx
import { Meteor } from 'meteor/meteor';
import React, { useState } from 'react';
import { LoginWithGithub } from './LoginWithGithub';

export const LoginForm = () => {
  ...
  return (
    <form onSubmit={submit} className="login-form">
      <LoginWithGithub />
      ...
```

### ブラウザでアプリを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/19ce2a85-3203-80e9-4df4-19d544de9676.png)

## Github認証情報を取得

Githubログインを機能させるため、Github認証情報が必要。

- [Register a new OAuth application](https://github.com/settings/applications/new)ページで、OAuthアプリケーションを登録
    - `Application name`
    - `simple-todos-react`
    - `Homepage URL`
        - `http://localhost:3000`
    - `Authorization callback URL`
        - `http://localhost:3000`
    - `Register application`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/21cc9e91-80a2-c4aa-cfba-01f4130c4977.png)

- 次に表示される`Settings/Developer settings`画面で
    - `Client ID`を控える
    - `Client secrets`を作成
        - `Generate a new client secret`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/334c6bdf-3141-2400-da4c-e6c5ab75133c.png)

## Github接続できるようにサーバーを構成

- 作業内容
    - `server/main.js`に`ServiceConfiguration`コンポーネントをインポート
    - Github認証情報を指定
        - `Client ID`
        - `Client secrets`
- コード
```server/main.js
import { Meteor } from 'meteor/meteor';
import { Accounts } from 'meteor/accounts-base';
import { TasksCollection } from '/imports/api/TasksCollection';
import { ServiceConfiguration } from 'meteor/service-configuration';

...

Meteor.startup(() => {
...
});

ServiceConfiguration.configurations.upsert(
  { service: 'github' },
  {
    $set: {
      loginStyle: 'popup',
      clientId: '', // 実際のclientIdを入力
      secret: '', // 実際のClient secretsを入力
    },
  }
);
```

Github認証が構成されました。

## ログイン画面で、自分のGithubアカウントでログイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/56180277-baf3-52ef-0b56-07e3c7e5db3c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/4c2567b9-d62f-fc97-1673-3f2f767f9edd.png)

認証成功しました。
試しに、いくつかタスク登録します。

## ちょっと待った、画面にユーザー名が表示されていないぞ

### ユーザー名が表示されない原因調査

- デベロッパーツール(F12)で
    - `Meteor`を選択
    - `Minimongo`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/13f1c5b3-8923-1105-8f42-f8de74ce0457.png)

- 2つ目の`users`(githubユーザーレコード)をクリック
    - `profile.name`は`null`で使えない
    - `services.github.username`を使用することに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/6e9860f7-57b4-7b37-997a-5c034544bb5f.png)

- 画面右上の`Logout`アイコンの左にユーザー名を表示する
    - ユーザー情報として、`user.services.github.username`を表示
```imports/ui/App.jsx
export const App = () => {
  ...
    {user ? (
      <Fragment>
        <div className="user" onClick={logout}>
          {user.username || user.services.github.username} 🚪
        </div>

        <TaskForm user={user} />
...
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/73e9629d-2827-19eb-b00c-b43334d79afa.png)

ユーザー名、表示されました。やったー。

## おわりに

Githubアカウントによるログイン機能を追加できました。
次回も続きます。お楽しみに。

##### [次回] [Web3.0検証(19)-MeteorでTODO管理アプリの開発(データアクセス制御)](https://qiita.com/mingchun_zhao/items/fef9d71e03962042f999)