Reactアプリにユーザー認証を追加する

Add User Authentication To Your React App
Add User Authentication To Your React App

ウェブアプリケーションを構築するとき、ユーザ認証はアプリケーションに追加する必要のある機能です。ユーザー認証によって、認証されたユーザーはアプリケーションで利用可能な機能にアクセスでき、認証されていないユーザーはアクセスできません。

Reactアプリケーションにユーザー認証を統合するのは簡単な作業ではなく、パスワードのハッシュ化、認証トークンの生成と管理など、いくつかの複雑な処理が必要になるため、時間がかかる。

しかし、Back4Appのようなプラットフォームを使えば、Reactアプリケーションにユーザー認証を統合するのは簡単でシンプルだ。この記事では、Back4Appを使ってReactアプリにユーザー認証を追加する方法を紹介する。

ユーザー認証について

ユーザ認証は、アプリケーションにアクセスしようとする人の身元を決定するプロセスです。

アプリケーションにアクセスしようとする人が、ユーザ名とパスワード、バイオメトリクスデータ、アクセスキー／トークンなどの形で、検証可能な認証情報を提供することが要求されます。

認証メカニズムが認証情報を有効だと判断した場合は、アプリケーションへのアクセスを許可し、そうでない場合は適切なエラーメッセージとともに認証要求を拒否します。

一般的な認証方法

一般的な認証方法には以下のようなものがある：

  • ユーザー名とパスワード：この認証方式では、ユーザーの身元を認証するために、有効なユーザー名とパスワードを入力する必要があります。ユーザがユーザ名とパスワードを提供した後、この認証メカニズムはデータベースに保存されているデータと比較し、一致した場合のみ認証要求を承認する。
  • 多要素認証（MFA）：MFA とは、複数の認証メカニズムを組み合わせてユーザを認証することを指す。MFA を使用する認証システムでは、ユーザは自分の ID を複数回検証する必要がある。たとえば、ユーザは、ユーザ名とパスワー ドを使用して ID を認証した後、認証コードの入力を要求されることがある。
  • バイオメトリクス認証：バイオメトリクス認証とは、顔、虹彩パターン、指紋、音声認識などの生物学的特徴に依存してユーザーを認証する認証メカニズムを指す。
  • OAuth：OAuthとは、FacebookやX（旧Twitter）などのOAuthプロバイダへのアクセスをアプリケーションに許可することで、ユーザーが自分のIDを認証できるようにする認証プロトコルです。ユーザーがOAuthを使用して認証しようとすると、OAuthプロバイダのログイン画面にリダイレクトされ、身元が認証されます。
  • JSONウェブトークン（JWT）：JWTは、ポータブルでURIセーフなコンパクトなトークン・フォーマットであり、通常、異なる当事者間で認証と認可の詳細を安全に送信するために使用される。JWTを使用した認証では、ユーザーがリクエストにJWTアクセストークンを送信し、本人であることを検証します。

Back4appでアプリケーションにユーザー認証を追加する

Back4appは、Backend-as-a-service（BaaS）機能を含む幅広いサービスを提供するクラウドプラットフォームです。Back4appのBaaSオプションは、ユーザー認証を含む様々な機能を提供しています。

Back4appでユーザー認証を実装するには、いくつかのステップがあります。このチュートリアルでは、Reactを使ってシンプルな銀行管理アプリを作ります。

このアプリはBack4appの認証機能を統合し、アカウントの作成、アカウントへのログイン、現在のログイン情報へのアクセス、ログアウトを可能にします。

Reactアプリケーションの作成

新しいReactアプリケーションを作成するには、Viteを使用して新しいReactアプリケーションをscaffoldingすることから始めます。Viteは、より高速で効率的な開発体験を提供するWeb開発ビルドツールです。

ターミナルで以下のコマンドを実行し、新しいReactアプリをscaffoldする：

npm init vite

上記のコマンドを実行すると、アプリケーションの名前、選択したフレームワーク、使用する言語バリアントを指定するよう求める一連のプロンプトが画面に表示されます。

こんな感じだ：

ViteでReactアプリを作る

上の画像では、アプリケーションの名前はreact-authentication-appで、選択されたフレームワークはReactで、言語バリエーションはJavaScriptである。

次に、カレント・ディレクトリをアプリケーションのディレクトリに変更し、以下のコマンドを実行して必要な依存関係をインストールする：

cd react-authentication-app && npm install

次に、以下のコマンドを実行して、アプリケーションにReact Routerをインストールする：

npm install react-router-dom

次に、IDE（統合開発環境）でReactアプリケーションを開き、main.jsxファイルの内容を以下のコードブロックに置き換えて修正する。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

このコードブロックは、react-router-domパッケージからBrowserRouterコンポーネントをインポートし、Appコンポーネントをラップしています。

これにより、アプリケーション全体のルーティングが可能になります。Appコンポーネントで、アプリケーション内のさまざまなルートを定義します。

こんな感じだ：

import { Route, Routes } from "react-router-dom";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import Home from "./pages/Home";

function App() {

  return (
    <>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="" element={<Signup />}/>
        <Route path="/login" element={<Login />}/>
      </Routes>
    </>
  )
}

export default App

上記のコードブロックは、3つの別々のルートを定義し、ユーザーがURLパスに基づいてサインアップ、ログイン、ホームページ間を移動できるようにしています。

アプリケーションのsrcディレクトリにcomponentsフォルダを作成します。このフォルダにAuthnavbar.jsxファイルを作成します。このコンポーネントには、サインアップページとログインページに表示されるナビゲーションバーが含まれます。

Authnavbarコンポーネントに次のコードを記述する：

import React from "react";
import { Link } from "react-router-dom";

function Authnavbar(props) {
  return (
    <nav>
      <h3>Banka</h3>
      {props.type === "signup" ? (
        <div>
          If you already have an account{""}
          <Link to="/login" className="link">
            Log in
          </Link>
        </div>
      ) : props.type === "login"? (
        <div>
          If you don't have an account{""}
          <Link to="/" className="link">
            Sign Up
          </Link>
        </div>
      ) : null}
    </nav>
  );
}

export default Authnavbar;

上記のコードブロックは、typepropの値に基づいた条件付きレンダリングでナビゲーションバーを作成し、ユーザーがアプリケーション内でサインアップとログインページの間をナビゲートできるようにします。

次に、アプリケーションのsrcディレクトリにpagesフォルダを作成します。このフォルダに、3つのコンポーネントを作成します：Home.jsx、Sign-up.jsx、Login.jsxです。これらのファイルは、ホーム、サインアップ、ログインのページとなります。

サインアップページには、ユーザーがユーザー名、Eメール、パスワードなどの詳細を入力できるフォームがあります。

例えば、こうだ：

import React from "react";
import Authnavbar from "../components/Authnavbar";

function Signup() {
  const [formData, setFormData] = React.useState({
    username: "",
    email: "",
    password: "",
  });

  const handleChange = (event) => {
    setFormData((prevState) => ({
      ...prevState,
      [event.target.name]: event.target.value,
    }));
  };

  return (
    <>
      <Authnavbar type= "sign-up"/>
      <form>
        <input
          type= "text"
          name= "username"
          placeholder= "Username..."
          onChange={handleChange}
          value={formData.username}
        />
        <input
          type= "email"
          name= "email"
          placeholder= "Email..."
          onChange={handleChange}
          value={formData.email}
        />
        <input
          type= "password"
          name= "password"
          placeholder= "Password..."
          onChange={handleChange}
          value={formData.password}
        />
        <div>
          <button>Sign Up</button>
        </div>
      </form>
    </>
  );
}

export default Sign-up;

このコードブロックはサインアップページを表しています。ユーザーのユーザー名、メールアドレス、パスワードなどの入力フィールドを持つフォームが含まれています。

また、ユーザー名、メールアドレス、パスワードの入力フィールドの値を格納するformDataステートもあります。handleChange関数は、ユーザが入力フィールドに入力するたびにformData状態を更新します。

Loginコンポーネントに以下のコードを記述する：

import React from "react";
import Authnavbar from "../components/Authnavbar";

function Login() {
  const [formData, setFormData] = React.useState({
    username: "",
    password: "",
  });

  const handleChange = (event) => {
    setFormData((prevState) => ({
      ...prevState,
      [event.target.name]: event.target.value,
    }));
  };

  return (
    <>
      <Authnavbar type= "login"/>
      <form>
        <input
          type= "text"
          name= "username"
          placeholder= "Username..."
          onChange={handleChange}
          value={formData.username}
        />
        <input
          type= "password"
          name= "password"
          placeholder= "Password..."
          onChange={handleChange}
          value={formData.password}
        />
        <div>
          <button>Log In</button>
        </div>
      </form>
    </>
  );
}

export default Login;

ログイン・ページはサインアップ・ページとよく似ているが、ログイン・フォームにEメール入力フィールドがないことと、formDataオブジェクトのステートにEメール・プロパティがないことが異なる。

では、index.cssファイルのコードを以下のコードに置き換えて、アプリケーションのスタイルを決めてください：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  color: #333333;
  background-color: #E8F7F5;
  inline-size: 50%;
  margin: auto;
  font-family: "Montserrat", sans-serif;
}

input{
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #333333;
  background-color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  inline-size: 100%;
}

input::placeholder{
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}

button{
  padding: 0.7rem 1rem;
  background-color: #00C3A5;
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  border-radius: 7px;
  border: none;
}

form{
  margin-block-start: 25%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.link{
  text-decoration: none;
  color: #00C3A5;
}

アプリケーションをスタイリングしたら、以下のコマンドを実行してアプリケーションを起動します：

npm run dev

上記のコマンドを実行すると、リンク（http://localhost:5173/）が表示されます。ウェブブラウザでこのリンクに移動して、アプリケーションを表示します。

定義したスタイルで、サインアップページは以下のページのようになるはずです：

バンカ登録ページ

ログインページは下の画像のようになるはずです：

バンカ・ログイン・ページ

Reactアプリケーションを作成したので、認証を処理するために新しいBack4appアプリケーションを作成する必要があります。

新しいBack4Appアプリケーションの作成

Back4appを使用するには、アカウントが必要です。アカウントをお持ちでない場合は、無料でご登録いただけます。

このチュートリアルでは、Back4app AIエージェントを使用して新しいBack4appアプリケーションを作成します。Back4app AIエージェントは、プロンプトを使ってBack4app上でタスクを実行する手助けをしてくれるAIヘルパーです。

Back4appアカウントにサインインし、ダッシュボードのナビゲーションバーにある “AI Agent“ボタンをクリックします。

Back4app ホームダッシュボード

Back4app AIエージェントを使用してアプリケーションを生成するには、以下のプロンプトを入力してください：

create a new application named react-authentication

下の画像のような応答が返ってくるはずだ：

AIエージェントで新しいBack4appアプリを作成する

上の画像のように、Back4app AI Agentはreact-authenticationという名前のアプリケーションを作成しました。このアプリケーションは “My App “ウェブページで見つけることができます。

また、Back4appの直感的なUI (ユーザーインターフェース) を使って、新しいBack4appアプリケーションを作成することもできます。

Back4appのreact-authenticationアプリで、ウォレットクラスを作成する。このウォレットクラスは、ユーザーのウォレットに関する貴重な情報を保持します。

以下のプロンプトを使用して、AIエージェントでクラスを作成できます：

Create a Wallet class and add the following fields: balance, owner(relation to the User class indicating which user owns the wallet), createdAt, and updatedAt in the react-authentication app

AIエージェントはウォレットクラスを作成するプロセスを開始し、以下の画像に示すように、指定されたウォレットを追加します。

AIエージェントで財布クラスを作成する

ReactアプリをBack4appに接続する

Back4appアプリケーションを作成したら、Parse SDKを使用してBack4appアプリケーションをReactアプリに接続する必要があります。

以下のコマンドを実行して、アプリケーションにParseをインストールします：

npm install parse

次に、アプリコンポーネントに Parseオブジェクトをインポートし、Back4app のアプリケーションキーで設定することで、アプリケーションで初期化します。

こんな感じだ：

import Parse from 'parse';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com/>';

YOUR_APP_ID'と'YOUR_JAVASCRIPT_KEY'をBack4Appが提供するそれぞれのキーに置き換えてください。アプリのキーは、Back4App AI Agentでアプリを作成した後の画面で確認できます。

アプリ認証情報

アプリケーションでは常に、できればenv変数を使用してキーを適切に保護する必要があることに注意してください。

Parse SDKを使用したユーザー認証の実装

Parse を初期化すると、React アプリケーションにユーザー認証を実装できるようになります。

Back4Appは自動的にユーザー認証用のUserクラスを提供します。このクラスには、ユーザ名、パスワード、Eメールなどのデフォルトのフィールドがあります。

サインアップコンポーネントに以下のコードを追加して、Reactアプリケーションにユーザーサインアップを実装します。

import Parse from "parse"
import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const signUpUser = async () => {
  try {
    const newUser = new Parse.User();
    newUser.set("username", formData.username);
    newUser.set("email", formData.email);
    newUser.set("password", formData.password);
    const user = await newUser.signUp();

    let Wallet = Parse.Object.extend("Wallet");
    let wallet = new Wallet();

    let userPointer = {
      __type: "Pointer",
      className: "_User",
      objectId: user.id,
    };

    wallet.set("owner", userPointer);
    wallet.set("balance", 100);
    wallet.save();

    console.log(`${user} have successfully signed up`);
    navigate("/login");
  } catch (error) {
    console.log("you encountered an error signing up");
  }
};

上のコードブロックは、react-router-domの useNavigateフックを使って、プログラムで異なるルートにナビゲートしています。useNavigateフックは、変数navigateに代入されたnavigate関数を返します。

signUpUser関数は、新規ユーザの登録を行います。この関数は、Parse.Userメソッドを使用して新しい Parse User オブジェクトnewUserを生成し、そのusername、email、passwordプロパティの値を、formDataオブジェクトの state の対応するプロパティの値に設定します。そして、signUpメソッドをnewUserオブジェクトに対して非同期に呼び出します。

新しいユーザーを作成した後、Parse.Object.extendメソッドで「Wallet」というParseクラスを定義します。

これは、クラス名_Userと新しくサインアップしたユーザのオブジェクト ID を持つユーザへのポインタを表します。setメソッドを使用して、コードはウォレットの所有者をuserPointerオブジェクトに設定し、ウォレットの初期残高を100に設定します。

サインアップに成功すると、この関数は成功メッセージを記録し、navigate関数を使用してログインルートにリダイレクトします。サインアップ中にエラーが発生した場合は、それをキャッチしてエラーメッセージをログに記録します。

次に、signUpUser関数を呼び出すhandleSubmit関数を作成します。onSubmitイベントハンドラを使用して、この関数をサインアップフォームにバインドします。

これにより、ユーザーがサインアップフォームを送信すると、handleSubmit関数が自動的にトリガーされるようになります。

handleSubmit関数は次のようにする：

const handleSubmit = (event) => {
  event.preventDefault();
  signUpUser();
};

ユーザーログインを実装するには、ユーザーログインのロジックを保持するlogInUser関数を作成します。

以下のコードブロックをLoginコンポーネントに追加します：

import Parse from "parse"
import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const logInUser = async () => {
    try {
      const user = await Parse.User.logIn(formData.username, formData.password);
      console.log("User logged in successfully:", user);
      navigate("/home");
    } catch (error) {
      console.log("Error logging in user:", error);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    logInUser();
  };

logInUser関数は、Parse.UserクラスのlogInメソッドを非同期に呼び出し、formDataオブジェクトの状態からユーザー名と パスワードのプロパティの値を渡します。

この関数は、ユーザが入力したユーザ名とパスワードがBack4AppのUserクラスに格納されているものと一致するかどうかをチェックします。もし一致すれば、ユーザーはログインに成功します。

onSubmitイベントを使用して、ログインフォームにhandleSubmit関数をバインドします。handleSubmit関数はlogInUser関数を呼び出し、ユーザのログインを試みます。

ログイン後、Parse SDK はユーザーのセッションを管理します。現在のユーザーにはParse.User.currentメソッドでアクセスできます。このメソッドはHomeコンポーネントで使用します。

Homeコンポーネントを開き、次のコードを書く：

import React from "react";
import Parse from "parse";
import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();
  
  const [balance, setBalance] = React.useState(0);

  const user = Parse.User.current();

  const fetchBalance = async () => {
	  const Wallet = await Parse.Object.extend("Wallet");
	  const query = new Parse.Query(Wallet);
	  query.equalTo("owner", user);
	  const wallet = await query.first();
	  setBalance(wallet.get("balance"));
};

fetchBalance();

  return (
    <>
      <nav>
        <h1 className="title">Banka</h1>
        <button>Log out</button>
      </nav>
      <div className="home">
        <p className="top">Welcome {user.get("username")}</p>

        <div className="balance-card">
          <p>Total Wallet Balance</p>
          <h1>{balance}</h1>
          <button>Top Up</button>
        </div>

        <div className="features">
          <div className="card">
            <p>Pay Bills</p>
          </div>
          <div className="card">
            <p>Airtime/Data</p>
          </div>
          <div className="card">
            <p>Transfers</p>
          </div>
          <div className="card">
            <p>Withdraw</p>
          </div>
        </div>
      </div>
    </>
  );
}

export default Home;

上のコードブロックは、アプリケーションのホームページを表しています。fetchBalance関数は、現在のユーザのウォレット残高をフェッチします。

Parse.Queryメソッドで “Wallet “クラスにクエリを発行し、query.equalToメソッドを使用して、ownerプロパティが現在のユーザーと等しいウォレットを取得するようにクエリに制約を設定します。

query.firstメソッドはクエリを実行し、クエリ制約にマッチする最初の結果を返します。

setBalance関数で、コードはウォレットの残高をバランス状態に設定します。コードはユーザの名前とウォレットの残高を表示します。

コードブロックのJSXセクションで、クラスbalance-cardの divタグの中に「top up」ボタンがあります。

このボタンをクリックすると、ウォレットの残高が 10 増えます。これを可能にするために、残高を増やすロジックを含むtopUp関数を作成します。

こんな感じだ：

const topUp = async () => {
  const Wallet = await Parse.Object.extend("Wallet");
  const query = new Parse.Query(Wallet);
  query.equalTo("owner", user);
  const wallet = await query.first();
  wallet.increment("balance", 10);
  const newBalance = await wallet.save();
  setBalance(newBalance.get("balance"));
};

このコードは、Parse バックエンドからユーザのウォレットを取得し、incrementメソッドで残高を 10 増やし、更新されたウォレットをバックエンドに保存し、残高の状態を更新します。クリックイベントハンドラを使用して、topUp関数を“top up”ボタンにバインドします。

次に、Homeコンポーネントに、ユーザーをログアウトさせるlogOutUser関数を追加します。関数は次のようにします：

const logOutUser = async () => {
  try {
    const user = await Parse.User.logOut();
    console.log("User logged out successfully:", user);
    navigate("/");
  } catch (error) {
    console.error("Error logging out user:", error);
  }
};

logOutUser関数は、Parse.UserクラスのlogOutメソッドを非同期に呼び出し、現在のユーザーをログアウトします。logOutUser関数を、click イベントを使用してHomeコンポーネントの「ログアウト」ボタンにバインドします。

Homeコンポーネントのスタイルを設定するには、以下のCSSクラスをindex.cssファイルに追加します。

.home{
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-block-start: 4rem;
}

.title{
  text-align: center;
  margin-block-start: 2rem;
}

.top{
  font-size: 25px;
  font-weight: 500;
}

.balance-card{
  background-color: #FFFFFF;
  inline-size: 40%;
  padding: 1rem 2rem;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.features{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.card{
  background-color: #FFFFFF;
  color: #00C3A5;
  margin-block-end: 1rem;
  padding: 1rem 2rem;
  font-size: 25px;
  border-radius: 10px;
}

.card:hover{
  opacity: 0.6;
}

アプリケーションのテスト

Reactアプリケーションのビルドが完了し、Back4appを使ったユーザー認証の実装が完了しました。

次のステップはアプリケーションのテストです。これを行うには、ウェブブラウザでリンクhttp://localhost:5173/に移動すると、サインアップページが画面に表示されます。

登録フォームに必要事項を記入し、送信してください。

バンカに登録

サインアップ後、サインアップが成功したかどうかは、Back4appのアプリケーションダッシュボードで確認できます。サインアップが成功すると、Back4appはアプリケーションのUserクラスにユーザーの詳細を追加します。

こんな感じだ：

サインアップ後、アプリケーションはログインページにリダイレクトし、サインアップフォームで使用したユーザー名とパスワードを使用してログインします。

例えば、こうだ：

バンカにログイン

ログインが完了すると、ホームページが表示されます：

バンカ・ダッシュボード

ここで「トップアップ」ボタンをクリックし、残高を10増やす。

トップ・アップ・バンカ

Back4appでReactアプリケーションをデプロイする

Back4appにReactアプリケーションをデプロイするには、Back4appのCaaS（Container as a Service）アプリケーションを使用します。

Back4AppのCaaSは、Back4Appが提供するクラウド環境でDockerコンテナのデプロイと管理を可能にします。

Reactアプリケーションをデプロイする前に、まずアプリケーションをDocker化する必要があります。これを行うには、アプリケーションのルート・ディレクトリにDockerfileを作成し、以下のコード行を追加する：

FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

このDockerfileは、Node.js環境をセットアップし、作業ディレクトリを作成し、依存関係をインストールし、アプリケーションコードをコピーし、ポートを公開し、アプリケーションを実行するデフォルトコマンドを指定します。

また、.dockerignoreファイルを作成する。.dockerignoreファイルに、Dockerイメージをビルドする際にコンテキストから除外するファイルとディレクトリを追加する。

例えば、こうだ：

#.dockerignore
node_modules

ViteでReactアプリケーションを作成したので、DockerをサポートするようにViteの設定ファイルを更新する必要があります。vite.config.jsファイルで、既存のコードを以下のコードブロックに置き換えてください：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    strictPort: true,
    port: 5173,
   },
})

このコードブロックは、デフォルトのホスト（通常はlocalhost）を使用するようにサーバを設定します。開発サーバーがリッスンするポート番号をポート5173に設定し、指定したポートが使用できない場合にViteがサーバーの起動に失敗するようにします。

ターミナルで以下のコマンドを実行すれば、アプリケーションの docker イメージを構築できる：

docker build -t quote-generator .

Back4appにアプリケーションをデプロイする前に、GitHubアカウントにアプリケーションをプッシュしてください。アプリケーションのプッシュが完了したら、GitHubアカウントとBack4appを統合してください。

これはBack4appのGithubアプリで行うことができます。GitHubとBack4appを統合したら、Back4app AI Agentを使ってアプリケーションをデプロイすることができます。

アプリケーションをデプロイするには、以下のプロンプトを入力します：

Deploy my repository <<repository-url>> on Back4app containers

上のコードブロックのrepository-urlを、アプリケーションの GitHub リポジトリの URL に置き換えます。

アプリケーションをBack4appコンテナにデプロイする

上の画像のように、AIエージェントと通信する際に、デプロイしたいアプリケーションのGitHubリポジトリリンクを提供する。

Back4appのAIエージェントがアプリケーションのデプロイを開始した後、数分待ち、デプロイの現在のステータスを確認します。

例えば、こうだ：

アプリライブURL

デプロイに成功すると、Back4app AI Agentはアプリケーションのデプロイステータスを「デプロイ済み」に更新し、ブラウザからアプリケーションにアクセスするためのリンクを提供します。

完成したアプリはこのGitHubリポジトリで、ライブアプリはこのURLで見ることができる。

結論

この記事では、バックエンドをサービスとして使ってReactアプリに認証を追加する方法を説明した。

Back4Appを使用してReactアプリにユーザー認証を統合することは、アプリケーションのセキュリティと機能を大幅に強化する簡単なプロセスです。

Back4Appのサービスを利用することで、信頼性の高いプラットフォームにバックエンドの管理と認証タスクを任せながら、優れたユーザーエクスペリエンスを備えたWebアプリケーションの構築に専念することができます。


David Ekete

デイビッド・エケテは、経験豊富なテクニカルライターとしてのスキルと実績あるバックエンド開発者としての専門知識を兼ね備えており、明確で包括的な技術ドキュメンテーションの提供や、堅牢でスケーラブルなウェブアプリケーションの構築において卓越した権威としての地位を確立しています。彼の豊富な経歴には、back4app、Draft.dev、MUOなどの業界リーダーに貢献した高いプロファイルの役割が含まれ、さらにElevate AppsやTerrahaptixといった企業でバックエンドエンジニアやエンジニアリングインターンとしても優れた成果を上げています。 実践的な経験を補完する形で、デイビッドはThe Linux Foundation、Sololearn、Udemyから業界で認められた認定資格を取得しており、技術ドキュメンテーション、API開発、最新のプログラミング言語における習熟度を証明しています。彼の資格と実績は、技術的な卓越性と革新的な問題解決を求めるチームにとって欠かすことのできない存在であることを示しています。 彼の最先端プロジェクトやコードリポジトリは GitHub 🛠️ でご覧いただけます。また、LinkedIn 🔗 で彼と繋がり、彼の専門知識があなたのテクノロジーイニシアティブをどのように高めるかをご確認ください。専門的な技術ドキュメンテーション、堅牢なバックエンド開発、または確固たるエンジニアリング基盤を持つ協力的な問題解決者が必要な場合、デイビッド・エケテは大きなインパクトをもたらす準備ができています。

Leave a reply

Your email address will not be published.