アンプのフロントエンド認証


このチュートリアルでは、完全なスタックアプリケーションを構築する方法について説明します.
我々がするものは、Aをつくるために一歩ずつ行くことですTodos あなたのフロントエンドとあなたのバックエンドのための増幅のための反応を使用してアプリケーション.
あなたが動けなくなるならば、どんな質問か、またはちょうどあなた自身のような他のアンプ開発者にHiを言いたいですDiscord !

目次

  • ステップ1 - axos
  • ステップ2 -承認要求
  • ステップ3 - Authコンポーネント
  • ステップ4 -ログイン
  • ステップ5 -ラップアップ
  • ステップ1 - axos


  • ユーザーがログインできるようにするTodos アプリケーションは、ユーザー名とパスワードを入力し、バックエンドを確認する必要があります.HTTPリクエストをバックエンドにするには、axiosというライブラリを使います.まず、axosをweb サブフォルダ:
    cd web
    npm install axios
    

  • バックエンドへのリクエストを行い、Axiosライブラリへのアクセスを容易にする際に、ユーザのアクセストークンを使用するようaxaxosを設定したいので、他の関数と同様にインターセプターを設定する必要があります.次のファイルを作成するweb/src/lib/http.js とファイルのインポートaxosの上部に.
    import axios from "axios";
    

  • 次に次のコードをペーストします.現在、Axiosが作るすべての要求はユーザのJWTアクセストークンを取ります.そして、それはローカル記憶装置に格納されて、あらゆる要求の認可ヘッダーにそれを割り当てます.
    const apiUrl = "http://localhost:3000";
    const jwtKey = "accessToken";
    axios.interceptors.request.use(
     (config) => {
       const { origin } = new URL(config.url);
       const allowedOrigins = [apiUrl];
       const accessToken = localStorage.getItem(jwtKey);
       if (allowedOrigins.includes(origin)) {
         config.headers.authorization = `Bearer ${accessToken}`;
       }
       return config;
     },
     (error) => {
       return Promise.reject(error);
     }
    );
    

  • いくつかのタスクを簡素化するために、エンドポイント、ローカルトークンにアクセストークンが既に存在するかどうかをチェックする関数、ローカルストレージ内のアクセストークンを保存する関数を提供するときにAPIリクエストの完全なURLを生成する関数を追加します.
    export const createUrl = (endpoint) => new URL(endpoint, apiUrl).href;
    export const isStoredJwt = () => Boolean(localStorage.getItem(jwtKey));
    export const setStoredJwt = (accessToken) =>
     localStorage.setItem(jwtKey, accessToken);
    

  • 最後に、私たちはget , patch , and post メソッドaxiosを提供します.
    export const get = axios.get;
    export const patch = axios.patch;
    export const post = axios.post;
    
  • ステップ2 -承認要求


    私たちのコンポーネントから直接axixを使用してAPIエンドポイントを呼び出す代わりに、我々は要求のロジックを抽象化しますので、コードの動作を変更する必要がある場合は、1つの場所でそれを行うことができます.

  • 次のファイルを作成するweb/src/lib/auth.js そして、ファイルの最上位で、我々は我々が作成した機能のいくつかを輸入しますweb/src/lib/http.js ファイル.
    import { createUrl, get, isStoredJwt, post, setStoredJwt } from "./http";
    

  • まず、me 関数.me アクセストークンが格納されているかどうかを調べます.トークンが存在する場合、GET へのリクエスト/api/me 我々が作成したエンドポイント.リクエストの成功時には、現在のユーザのユーザオブジェクトが返されます.
    export const me = async () => {
     return isStoredJwt()
       ? (await get(createUrl("/api/me")).catch(() => null))?.data
       : null;
    };
    

  • 次に、login 関数.login を作成するPOST へのリクエスト/api/login エンドポイント、ユーザー名とパスワードを送信します.要求が失敗した場合、ユーザが存在しない場合のように、アラートが失敗したことをユーザーに通知します.リクエストが成功すると、アクセストークンはローカルストレージに保存され、me 関数は、現在のユーザのユーザオブジェクトを返すために呼び出されます.
    export const login = async (username, password) => {
     const result = (
       await post(createUrl("/api/login"), { username, password }).catch(
         () => null
       )
     )?.data;
    
     if (!result) {
       return alert("Could not login");
     }
     setStoredJwt(result.accessToken);
     return me();
    };
    

  • 最後にsignup 関数.signup を作成するPOST へのリクエスト/api/signup エンドポイントは、私たちも、私たちの新しいユーザーのユーザー名とパスワードを送信する作成した.リクエストが失敗した場合、ユーザ名が既に使用されているかのように、アラートが失敗したことをユーザーに通知します.リクエストが成功すると、アクセストークンはローカルストレージに保存され、me 関数は、現在のユーザのユーザオブジェクトを返すために呼び出されます.
    export const signup = async (username, password) => {
     const result = (
       await post(createUrl("/api/signup"), { username, password }).catch(
         () => null
       )
     )?.data;
    
     if (!result) {
       return alert("Could not sign up");
     }
     setStoredJwt(result.accessToken);
     return me();
    };
    
  • ステップ3 - Authコンポーネント


  • ユーザ名とパスワードをユーザから収集し、追加した関数を使って適切なリクエストを作成できるコンポーネントが必要です.クリエイトweb/src/Auth.js 次のコードをペーストします.
    import { useState } from "react";
    import { login, signup } from "./lib/auth";
    export default function Auth({ setUser }) {
     const [isLogin, setIsLogin] = useState(true);
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
     const [confirm, setConfirm] = useState("");
     const handleUsernameChange = (e) => setUsername(e.target.value.toLowerCase());
     const handlePasswordChange = (e) => setPassword(e.target.value);
     const handleConfirmChange = (e) => setConfirm(e.target.value);
     const handleSubmit = async (e) => {
       e.preventDefault();
       const func = isLogin ? login : signup;
       if (!isLogin) {
         if (password !== confirm) {
           return alert("Passwords do not match");
         }
       }
       const result = await func(username, password);
       setUser(result);
     };
    
     return (
       <div>
         <form onSubmit={handleSubmit}>
           <h2>{isLogin ? "Login" : "Sign Up"}</h2>
           <input
             name="username"
             type="text"
             placeholder="username"
             value={username}
             onChange={handleUsernameChange}
             required
           />
           <input
             name="password"
             type="password"
             placeholder="password"
             value={password}
             onChange={handlePasswordChange}
             required
           />
           {!isLogin && (
             <input
               name="confirmPassword"
               type="password"
               placeholder="confirm password"
               value={confirm}
               onChange={handleConfirmChange}
               required
             />
           )}
           <button type="submit">Submit</button>
           <button type="button" onClick={() => setIsLogin(!isLogin)}>
             {isLogin ? "Need an account?" : "Already have an account?"}
           </button>
         </form>
       </div>
     );
    }
    
  • このコンポーネントは、ユーザーがログインしてユーザー名とパスワードを入力するようにフォームをレンダリングします.彼らがまだアカウントを持っていないならば、ページの下部のボタンは新しいアカウントを作成するためにフォームをトグルするでしょう.
    提出するとlogin or signup 機能からweb/src/lib/auth.js が呼び出され、結果がsetUser 関数.

    ステップ4 -ログイン


  • 認証コンポーネントを作成するだけで、ユーザーにそれを表示する必要があります.インポートを先頭に戻すweb/src/App.js これで
    import { useState, useEffect } from "react";
    import "./App.css";
    import { me } from "./lib/auth";
    import Auth from "./Auth";
    import CreateTask from "./CreateTask";
    import Tasks from "./Tasks";
    

  • その後、user and setUser を追加し、useEffect フック.我々は、我々をつくりましたuser 変数とそれを更新することができますsetUser 関数.また、私たちはuseEffect フックは、コンポーネントがマウントされたときにコードを実行できるようになります.だから、App コンポーネントのマウントme 機能からweb/src/lib/auth.js 現在のユーザを設定するにはuser 変数.
    function App() {
    +  const [user, setUser] = useState();
     const [tasks, setTasks] = useState([]);
    +  useEffect(() => {
    +    async function getUser() {
    +      const result = await me();
    +      setUser(result);
    +    }
    +    getUser();
    +  }, [setUser]);
    

  • 最後にreturn 以下で.今ならuser オブジェクトが存在します.これは、ログイン時にのみ発生し、アプリケーションがユーザーのタスクを表示します.もしuser オブジェクトは存在しません.Auth画面は、ユーザーがログインしたりサインアップするときにuser 変数setUser に渡される関数.
    return (
     <div>
       {user ? (
         <div>
           <CreateTask addTask={addTask} />
           <Tasks tasks={tasks} toggleCompleted={toggleCompleted} />
         </div>
       ) : (
         <Auth setUser={setUser} />
       )}
     </div>
    );
    
  • ステップ5 -ラップアップ


    アプリケーションを実行し、新しいアカウントを作成します.

    ユーザーは現在、ログインすることができますTodos しかし、我々はまだ我々のバックエンドで彼らの仕事を保存していません...それは次になければならないでしょう.
    次の週のステップ5をチェックしてくださいAmplication docs site 今すぐフルガイド!
    この手順の変更を表示するにはvisit here .