-
JWT(JsonWebToken)を使った認証付きGraphQL APIを作る
以前にGraphQL+MongoDB+graphql-composeという構成のGraphQL APIの実装についてご紹介させていただきました。 この構成のGraphQL APIにユーザ認証が必要になりましたのでJWT(JsonWebToken)を使った認証機構を追加しました。 JWT認証を作る JWTのパッケージをインストールします。 auth.jsを作成しJWT認証を実装していきます。 内容を見ていきます。まず、/login以外のURLで認証が必要になるように設定します。 JWTをリクエストヘッダに含んだ状態でアクセスしてもらうのでヘッダにトークンが存在しない（もしくはフォーマットが違う）場合はフォーマットエラーを返します。 ヘッダにトークンが含まれていればトークンをチェックして、可否を返します。今回は”secret”をシークレットワードとしています。 server.js server.jsを修正します。 先ほど実装したauth.jsをimportしましょう。 /loginをPOSTで設定し、リクエストパラメータ(user_id, password)を受け取って認証します。 今回はサンプルなので固定値でチェックし、ログインできればJWTを作成して返却します。 authentication(app)をgraphqlの前に追加することで/graphqlはログインが必要となります。 サーバを起動しPostmanからログインAPIを叩いてみますが・・・。 パラメータが取得できません。。。 bodyParser 毎回忘れるのですが、bodyParserのurlencodedを設定しないとパラメータ取得ができません。以下をserver.jsに追加します。 もう一度Postmanで試します。 これでログイン認証に成功し、JWTを取得することができました。 取得したJWTをヘッダに設定してGraphQLのQueryをPOSTしてみます。 無事、データを取得することができました。 ヘッダを設定しない場合は以下のようにエラーとなりますので、これで認証付きGraphQL APIの完成です。 まとめ GraphQLにアクセスする前にログインAPIを叩くのではなくGraphQLで認証する方法もあるようです。 そちらについても機会があれば検証を行い、記事にしてみたいと思います。 今回使用したコードはこちらです。 https://github.com/aizulab-igarashi/graphql_compose_auth
-
【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する
こんにちは、ソリューションの五十嵐です。 MongoDB + GraphQLでデータを提供する案件に携わりました。 その際に使用したgraphql-composeというライブラリが素晴らしかったので記事にまとめます。 GraphQLとは GraphQLはクライアントとサーバでのデータのやりとりに使用するクエリ言語です。 欲しいデータを過不足なく取得できるほか、学習コストが小さいなどのメリットがあります。 デメリットとしてサーバサイドの実装が難しいという情報が多いですが、 graphql-composeを使用することで簡単にCRUD機能を有するGraphQL APIを実装できます。 https://graphql-compose.github.io/ 構成は以下の通りです。 Node.js Express MongoDB Mongoose GraphQL Express まずは必要なパッケージをインストールし、Expressのアプリケーションを作成します。 メインとなるserver.jsを実装していきましょう。 server.jsを実行し、http://localhost:8080/helloにアクセスするとHello Worldが表示されます。 MongoDB MongoDBとの接続を行います。 Mongooseを使用したいので、以下のコマンドで必要なパッケージをインストールしましょう。 次にutilsディレクトリを作成し、その中にDBとの接続を行うdatabase.jsを作成します。 utils/database.js database.jsをimportし、DB.connect()を実行することでMongoDBに接続されるようになりました。 GraphQL GraphQLを実装していきます。 まずはGraphQL関連の必要パッケージをインストールします。 スキーマとモデルのディレクトリを作成します。 今回はサンプルとして本のタイトルと著者のデータとします。 タイトルと著者をString型として定義したモデルを作成します。 models/book.js さらにスキーマも作成します。 ここで本記事の主役であるgraphql-composeを使用します。 graphql-composeはGraphQLのスキーマを作成するToolkitとのことで、 簡単にスキーマを作成することができます。 schemata/book.js これだけでCRUDのGraphQL APIになります。 最後にserver.jsを修正してGraphQLを有効にします。 server.js 再度server.jsを実行して以下のURLを開いてみましょう、GraphQLの実行環境が表示されます。 http://localhost:8080/graphql DBにデータが存在していないのでGraphQLでデータを新規登録してみます。 【GraphQL+MongoDB】graphql-composeで簡単にGraphQL APIを実装する実行環境の左上に以下のmutationを入力します。 さらに左下のQUERY VARIABLESの部分に以下を入力し実行しましょう。 作成されたデータのIDがレスポンスとして返却されます。 データが作成できましたのでGraphQLでデータを取得してみます。 実行環境の左上に以下のqueryを入力して実行してみます。…
-
Node.js + Babelで「ReferenceError: regeneratorRuntime is not defined」となる場合
ES6で開発し、Babelでトランスパイルしたものをnode transpiled.jsの形で実行していますが、 「ReferenceError: regeneratorRuntime is not defined」のエラーが表示されるようになりました。。。 環境 package.json .babelrc 原因 await-aysncが原因らしいです。 Webpackの設定などで解決する情報はありましたがNode.js + Babelで解決するのに手間取ったので備忘録として。 対策１ 調べたところによると.babelrcを以下のようにすると良いと発見したので早速変更 .babelrc Error: Cannot find module ‘@babel/preset-env’ もちろんインストールしていないのでエラー yarn add @babelとしても同じエラーが。。。 yarn add @babel/preset-envでインストール？ と試してみるが次は以下のエラー Error: Cannot find module ‘@babel/core’ yarn add @babel/coreと不足しているパッケージをインストールし続けるのは違う、と思ったので別の方法を模索。。。 対策2 babel-polyfillをインストールしてトランスパイル対象のファイルにimport babel-polyfill;を記述することで解決。 という情報を発見。 そんなにシンプルに解決するのか半信半疑でしたが試してみることに。 yarn add –dev babel-polyfillとしエントリーファイルにimport babel-polyfillを追加してyarn build 以外と呆気なく解決。。。
-
Node.jsのHeadlessCMS「Strapi」を試す
こんにちは、ソリューションの五十嵐です。 Netlify CMS + GatsbyのようなJAMStackなブログが話題になっています。 弊社のブログもJAMStackな構成にしたいと思っていますが、Netlifyなどのサービスを利用するよりは自社のサーバにHeadlessCMSを構築したいと考えています。 調べたところによるとNode.jsで構築できる「Strapi」というオープンソースのHeadlessCMSがありましたので試してみようと思います。 https://strapi.io/ Strapi Strapiのインストールはnpmで行います。 公式のチュートリアル通りに以下のコマンドを実行しましょう。 インストールが完了したらstrapiコマンドでプロジェクトディレクトリを作成します。 公式ではMongoDBを推奨していますが、MySQL、PostgreSQLなども使用できるようです。 今回はMySQLで設定してみましょう。 DBはプロジェクト作成時に設定でき、MySQLの設定も簡単に行うことができました。 プロジェクトディレクトリが作成されたらそのディレクトリに移動しstartコマンドでstrapiを起動します。 無事起動すると以下のページで管理画面を開くことができます。 http://localhost:1337/admin Post作成 管理画面でユーザーを作成、ログインできたらブログ記事を投稿するためのコンテンツを作成しましょう。 コンテンツタイプの項目を選択します。 コンテンツタイプの追加を選び「Post」と入力し、記事コンテンツを作成します。 今回はサンプルなので記事コンテンツはString型のTitleとText型のDetailのみとします。 コンテンツは作成できましたがこのままではAPIで取得できませんので「ロールと権限 > public」から以下のようにチェックを入れ、権限を設定します。 これで記事の公開ができましたので実際にGETで取得してみましょう。 ブラウザでhttp://localhost:1337/postsにアクセスするとJSON形式のPostデータが取得できます GraphQL 最後にGraphQLでデータを取得できるようにします。 デフォルトでREST APIが有効になっているのでそのままでも良いのですが、今回はGatsbyのGraphQLからデータを取得する予定ですのでGraphQLを有効にします。 GraphQLを有効にするにはStrapiにプラグインを追加する必要がありますので、以下のコマンドでプラグインを追加しましょう。 これでGraphQLが有効になりましたので再度Strapiを起動し、http://localhost:1337/graphqlにアクセスしましょう。 GraphQLの実行環境が表示されるはずです。 まとめ Node.jsのHeadlessCMSであるStrapiを試してみましたが、思った以上に簡単に構築でき、GraphQLの有効化もプラグインのインストールだけで済みました。 手軽に構築できる点は良いと思うのですが、カテゴリやタグなどの設定を入れたり、マークダウンの記事エディタを入れたりすることは可能なのでしょうか。。。 その辺りは機会があれば検証してみたいと思います。
-
Node.jsで河川の水位データをスクレイピングする
こんにちは、ソリューションの五十嵐です。 私は釣りが好きで、休日はよく釣りに出かけています。 その際に国土交通省が提供している河川の水位情報をチェックして釣りのポイント選びなどに役立てています。 http://www1.river.go.jp/ この水位情報をもっと手軽に確認できるようにしたいのでNode.jsでスクレイピングして水位データを提供するAPIを作成してみます。 Node.jsによるWebスクレイピング まずNode.jsによるWebスクレイピングのライブラリとしてcheerioをインストールします。 インストールしたcheerioで試しにYahooのトップページをスクレイピングしてみます。 YahooのHTMLソースを取得することができました。 河川の水量データをWebスクレイピングしてみる 指定URLをスクレイピングできることが確認できましたので水位データのページも試してみます。 水位データのページはTopページと詳細ページに分かれており、目標のデータは詳細ページにあります。 しかし、詳細ページのURLとなるデータID？は随時更新されるため、Topページにアクセスし今のデータIDを取得する必要があります。 まずはTopページのスクレイピングを始めましょう。 このページに詳細ページのデータIDが含まれていますのでスクレイピングした結果から抽出します。 データIDを抽出する スクレイピングしたHTMLソースはjQueryのセレクタのような形で操作できますので以下のようにリンクのaタグにデータIDが含まれるかを判定します。 データIDの取得ができましたので詳細ページのスクレイピングを行います。 詳細ページのスクレイピング 取得したデータIDで再度スクレイピングを行います。 無事水位データを取得することができました。 ちなみに水位データは日付,時刻,水位(m)のようです。 まとめ 取得したデータをカンマ区切りで整形し、最終的に以下のようなJSON形式のデータになるように修正しました。 今回はデータの整形までを行いましたので次回はこのデータを提供するAPIと、それを利用するアプリケーションを作成したいと思います。