【5.ユーザに紐付けた投稿編】Ruby on Rails + ReactでSNSアプリを作る
pepe87
ミニマリストいずのブログ
【4.ログイン編】Ruby on Rails + ReactでSNSアプリを作る
pepe87
記事内に商品プロモーションを含む場合があります
こんにちは、ミニマリストいずです。
Rail +ReactでSNS機能を持ったWEBアプリの作り方を紹介していく連続企画の第4弾です。
今回はログインができるようにしていきます。
初学者の方にもわかるようにまとめていきますが、不明点がありましたら以下から質問をいただければと思います。
Contents
作成するアプリの機能紹介（再掲）
サンプル動画（再掲）
作成する機能一覧（再掲）
動画でご覧いただくとお分かりになるかと思いますが、以下の機能を本アプリでは実装していきます。
作成する機能一覧
- ユーザ管理機能
- 新規登録
- ログイン
- メモカテゴリ機能
- 作成
- 取得
- 動画内ではクレドと表現されている部分
- メモ機能
- 作成
- 一覧取得
- 詳細取得
- 動画内ではアクションメモと表現されている部分
- コメント機能
- 作成
- 取得
Webアプリの基本であるCRUDを実装しています。
どのアプリを作るにも参考になると思いますので、初学者の方にもおすすめのアプリになっています。
ログイン登録機能（バックエンド編）
今回も各実行後の確認方法は省きますね。
もし確認方法を忘れてしまったら、前の記事に戻って確認してみてください。
あわせて読みたい
【1.カテゴリ新規登録編】Ruby on Rails + ReactでSNSアプリを作る
もしそれでもわからなければ以下から無料質問してみてください。
ログイン機能の設定
新規登録のコントローラーと同様に、通信に必要なトークンがログイン時に発行されるようにコントローラーのコードを追加していきます。
api/v1/auth/sessions_controller.rbとなるようにファイルを作成してください。
以下のように追記してください。
1class Api::V1::Auth::SessionsController < DeviseTokenAuth::SessionsController
2 def create
3 super do |resource|
4 if resource.errors.empty?
5 auth_token = resource.create_new_auth_token
6 @resource_json = resource.token_validation_response.merge({
7 'access-token': auth_token['access-token'],
8 client: auth_token['client'],
9 uid: auth_token['uid']
10 })
11 end
12 end
13 end
14end
15
ログインのルーティングの設定
デフォルトでは追加したコントローラーを使ってもらえないので、ルーティングを変更します。
1Rails.application.routes.draw do
2 namespace :api do
3 namespace :v1 do
4 mount_devise_token_auth_for 'User', at: 'auth', controllers: {
5 registrations: 'api/v1/auth/registrations',
6 sessions: 'api/v1/auth/sessions',
7 }
8
9 resources :categories, only: [:index, :create]
10 resources :memos, only: [:create]
11 end
12 end
13end
14
前回devise-token-authを使うにあたっての設定を終えているので、バックエンドはこれだけで完了です。
言われるがままに設定してきただけだし、本当に理解できているのかな？と不安になるのがさらに強くなった方もいらっしゃるかと思います。
写しているだけになっていないか？と不安になったら是非無料質問してみてください。
ログイン機能（フロントエンド編）
まずはログイン用のjsxファイルを新しく用意します。
次に以下のようなコードを追記します。
1import React, { useState } from 'react';
2import {
3 Box,
4 Input,
5 Button,
6 Center,
7} from "@chakra-ui/react";
8import { useToast } from "@chakra-ui/react";
9import axios from 'axios';
10
11export default function Login() {
12 const [ email, setEmail ] = useState('');
13 const [ password, setPassword ] = useState('');
14 const [isLoading, setIsLoading] = useState(false);
15 const toast = useToast();
16
17 async function fetchLogin() {
18 setIsLoading(true);
19
20 try {
21 if (!email || !password) {
22 toast({
23 title: 'メールアドレス、パスワードを入力をして下さい。',
24 status: 'error',
25 isClosable: true,
26 });
27
28 return;
29 }
30
31 const res = await axios.post("http://localhost:3010/api/v1/auth/sign_in", {
32 email, password
33 });
34
35 if (!res.status || (res.status < 200 && res.status >= 300)) {
36 throw new Error(`HTTP error! status: ${res.status}`);
37 }
38
39 localStorage.setItem('access-token', res.headers['access-token']);
40 localStorage.setItem('client', res.headers['client']);
41 localStorage.setItem('uid', res.headers['uid']);
42
43 console.log(localStorage.getItem('access-token'));
44 console.log(localStorage.getItem('client'));
45 console.log(localStorage.getItem('uid'));
46
47 toast({
48 title: 'ログインしました。',
49 status: 'success',
50 isClosable: true,
51 });
52 }
53 catch (error) {
54 console.error('Error creating credos:', error);
55 toast({
56 title: 'ログインに失敗しました。',
57 status: 'error',
58 isClosable: true,
59 });
60 }
61 finally {
62 setIsLoading(false);
63 setEmail('');
64 setPassword('');
65 }
66 }
67
68 return (
69 <Center>
70 <Box w={["100%", "90%", "80%", "70%", "60%"]} mt={["50px", "100px", "150px", "200px"]}>
71 <Input
72 mt="6px"
73 value={email}
74 onChange={(e) => setEmail(e.target.value)}
75 placeholder="Eメールを入力"
76 />
77 <Input
78 mt="6px"
79 type='password'
80 value={password}
81 onChange={(e) => setPassword(e.target.value)}
82 placeholder="パスワード"
83 />
84 <Center>
85 <Button mt="6px" onClick={fetchLogin} isLoading={isLoading} disabled={!email || !password}>送信</Button>
86 </Center>
87 </Box>
88 </Center>
89 );
90 }
以下のような挙動になっていたらOKです。
今回もconsole.logと検証を使って、トークンがレスポンスに含まれているかも確認しているので、一緒に確認してみてください。
ログイン登録機能はいかがでしたか？
一般的な書籍とは違い、新規登録を中心に繰り返し紹介してきましたので、同じことをやっている感覚がある方もいらっしゃるかと思います。
同じことをやっていく中で理解が深まる部分が多いと思っておりますので、少しでもわかった！と感じてもらえる部分があったら嬉しいなと思っております。
ただ細部は違うので、コードが違って結局何やっているかわからない！となる方もいらっしゃると思うので、気になる方は是非質問してください。
まとめ
SNSアプリを作成していくにあたり、RailsとReactを連携し、ログインできるようになりました。
次回はメモの投稿にユーザを紐付け、カテゴリとメモを投稿できるようにしていきます。
次へ進む
【5.ユーザに紐付けた投稿編】Ruby on Rails + ReactでSNSアプリを作る
ABOUT ME
Hard Funな時間を増やすためにミニマリストに。ライフコーチ、プログラミングのサービス開発・メンターをやりながら、ブログを運営。ミニマリストのおすすめアイテムや、考え方を発信していきます。