0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[React] Reactの学習をします(2-5)ユーザー認証

0
Last updated at Posted at 2021-01-26

Reactの学習をします(2-5)

引き続き、Reactの学習をしています。

前回の記事 : [React] Reactの学習をします(2-4)OR マッパーによるデータベースの利用

教材

Reactチュートリアル2:レビューサイトを作ろう

引き続き、likr さんが公開している「Reactチュートリアル2:レビューサイトを作ろう」という記事を教材に学習させて頂きます。

素晴らしい教材をありがとうございます。

成果物

このチュートリアル2につきましては、チュートリアルの通りに作成し既にNetlifyに公開させて頂いております。

こちらです → 日大文理ラーメンレビュー

学習日記

既に作成済ですが、少しずつチュートリアルの内容を読み返してみたいと思います。

※ 教材から箇条書き的に抜粋させて頂きます。

ユーザー認証

・本チュートリアルではユーザーの認証機能を提供してくれる Auth0 というサービスを利用します。

・メニューの「Applications」を開き、「CREATE APPLICATION」と書かれたボタンを押して新しくアプリケーションを作成しましょう。
・開発環境と本番環境で 2 つのアプリケーションを作る必要があります。
・「Name」は何でも構いませんが、資料流では開発環境は「Development」、本番環境は「Review App」としておきます。

025a.png
「Development」と「Review App」という2 つのアプリケーションを作ります。

・それぞれのアプリケーションで (中略) 開発環境と本番環境のフロントエンドの URL を入力し、画面下部の「SAVE CHANGES」ボタンを押して保存します。

・開発環境の URL は http://localhost:3000 、本番環境の URL は https://aaa-bbb-ccc.netlify.app/ のような Netlify にデプロイした結果の URL となります。

サーバーの実装 クライアントの実装

サーバー側、クライアント側で認証機能を加えるため、それぞれチュートリアルの通りにプログラムを変更していきます。

(この辺はもう私の能力を超えすぎていて、プログラムの内容はよくわかっていないです……とりあえず、ヨシとしましょう。)

レビューの投稿フォームが機能するようにする

以下2点の作業をします。

・client/src/pages/RestaurantDetails.js を編集
・実際に API サーバーに対して認証情報を付けて POST リクエストを行う処理を client/src/api.js に加える

最後にデータベースをクリアして本番環境の更新を行う

サーバー側、クライアント側の更新を行い、本番環境が動作するようにします。

これで、このチュートリアルは終わりますが、私にはまだ難しかったですね・・・。(もう少し理解を深められるようにしていきたいと思います。)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?