アンプのフロントエンド認証
28135 ワード
このチュートリアルでは、完全なスタックアプリケーションを構築する方法について説明します.
我々がするものは、Aをつくるために一歩ずつ行くことです
あなたが動けなくなるならば、どんな質問か、またはちょうどあなた自身のような他のアンプ開発者にHiを言いたいですDiscord !
ステップ1 - axos ステップ2 -承認要求 ステップ3 - Authコンポーネント ステップ4 -ログイン ステップ5 -ラップアップ
ユーザーがログインできるようにする
バックエンドへのリクエストを行い、Axiosライブラリへのアクセスを容易にする際に、ユーザのアクセストークンを使用するようaxaxosを設定したいので、他の関数と同様にインターセプターを設定する必要があります.次のファイルを作成する
次に次のコードをペーストします.現在、Axiosが作るすべての要求はユーザのJWTアクセストークンを取ります.そして、それはローカル記憶装置に格納されて、あらゆる要求の認可ヘッダーにそれを割り当てます.
いくつかのタスクを簡素化するために、エンドポイント、ローカルトークンにアクセストークンが既に存在するかどうかをチェックする関数、ローカルストレージ内のアクセストークンを保存する関数を提供するときにAPIリクエストの完全なURLを生成する関数を追加します.
最後に、私たちは
私たちのコンポーネントから直接axixを使用してAPIエンドポイントを呼び出す代わりに、我々は要求のロジックを抽象化しますので、コードの動作を変更する必要がある場合は、1つの場所でそれを行うことができます.
次のファイルを作成する
まず、
次に、
最後に
ユーザ名とパスワードをユーザから収集し、追加した関数を使って適切なリクエストを作成できるコンポーネントが必要です.クリエイト
このコンポーネントは、ユーザーがログインしてユーザー名とパスワードを入力するようにフォームをレンダリングします.彼らがまだアカウントを持っていないならば、ページの下部のボタンは新しいアカウントを作成するためにフォームをトグルするでしょう.
提出すると
認証コンポーネントを作成するだけで、ユーザーにそれを表示する必要があります.インポートを先頭に戻す
その後、
最後に
アプリケーションを実行し、新しいアカウントを作成します.
ユーザーは現在、ログインすることができます
次の週のステップ5をチェックしてくださいAmplication docs site 今すぐフルガイド!
この手順の変更を表示するにはvisit here .
我々がするものは、Aをつくるために一歩ずつ行くことです
Todos
あなたのフロントエンドとあなたのバックエンドのための増幅のための反応を使用してアプリケーション.あなたが動けなくなるならば、どんな質問か、またはちょうどあなた自身のような他のアンプ開発者にHiを言いたいですDiscord !
目次
ステップ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 .
Reference
この問題について(アンプのフロントエンド認証), 我々は、より多くの情報をここで見つけました https://dev.to/amplication/amplication-react-frontend-authentication-3fkmテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol