[前回] Web3.0検証(17)-MeteorでTODO管理アプリの開発(ユーザーアカウント機能)

はじめに

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 />
      ...

ブラウザでアプリを確認

Github認証情報を取得

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

Register a new OAuth applicationページで、OAuthアプリケーションを登録
- Application name
- simple-todos-react
- Homepage URL
  - http://localhost:3000
- Authorization callback URL
  - http://localhost:3000
- Register applicationをクリック
次に表示されるSettings/Developer settings画面で
- Client IDを控える
- Client secretsを作成
  - Generate a new client secretをクリック

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アカウントでログイン

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

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

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

デベロッパーツール(F12)で
- Meteorを選択
- Minimongoを選択
2つ目のusers(githubユーザーレコード)をクリック
- profile.nameはnullで使えない
- services.github.usernameを使用することに

画面右上の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} />
...

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

おわりに

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

[次回] Web3.0検証(19)-MeteorでTODO管理アプリの開発(データアクセス制御)