npm i @aws-amplify/ui-react aws-amplify| アプリ開発者 | | ユーザープールを設定します。 | 次の例を参考に、`aws-exports.js` ファイルを作成して `src` フォルダに保存します。このファイルには次の情報が含まれています。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)
// replace the user pool region, id, and app client id details| アプリ開発者 | | Amplify サービスをインポートして設定します。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | アプリ開発者 | | Authenticator UI コンポーネントを追加します。 | `Authenticator` UI コンポーネントを表示するには、アプリケーションのエントリポイントファイル (`App.js`) に次のコード行を追加します。
const awsmobile = {
"aws_project_region": "put_your_region_here",
"aws_cognito_region": "put_your_region_here",
"aws_user_pools_id": "put_your_user_pool_id_here",
"aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}
export default awsmobile;
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';サンプルのコードスニペットは、`Authenticator` UI コンポーネントと Amplify UI styles.css ファイル (コンポーネントの事前ビルド済みテーマを使用するときに必要) をインポートします。`Authenticator` UI コンポーネントは 2 つの戻り値を提供します。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)次のコンポーネント例を参照してください。function App() {
return (
{({ signOut, user }) => (
Welcome {user.username}
)}
);
}`App.js` ファイルの例については、このパターンの[追加情報](#authenticate-react-app-users-cognito-amplify-ui-additional)セクションを参照してください。 | アプリ開発者 |
| (オプション) セッション情報を取得します。 | ユーザーが認証されると、AAmplify クライアントからセッションに関するデータを取得できます。たとえば、ユーザーのセッションから JSON Web トークン (JWT) を取得して、そのユーザーのセッションからバックエンド API への要求を認証できます。JWT を含む要求ヘッダーの次の例を参照してください。import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString(); | アプリデベロッパー |
## トラブルシューティング
| 問題 | ソリューション |
| --- | --- |
| 新規ユーザーはアプリケーションにサインアップできません。 | 次のとおり、ユーザーがユーザープールにサインアップできるよう Amazon Cognito ユーザープールが設定されていることを確認します。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ja_jp/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) |
| v5 から v6 にアップグレードしたら認証コンポーネント動作しなくなりました。 | `Auth` カテゴリは Amplify v6 の機能アプローチと名前付きパラメータに移行しました。今後は、機能 API は `aws-amplify/auth` パスから直接インポートする必要があります。詳細については、Amplify ドキュメントの「[Migrate from v5 to v6](https://docs.amplify.aws/gen1/react/build-a-backend/auth/auth-migration-guide/)」を参照してください。 |
## 関連リソース
+ [Amazon Cognito の開始方法](https://aws.amazon.com/cognito/getting-started/) (AWS ウェブサイト)
+ [新しい React アプリを作成する](https://reactjs.org/docs/create-a-new-react-app.html) (React ドキュメント)
+ [Amazon Cognito とは](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) (Amazon Cognito ドキュメント)
+ [Amplify UI library](https://ui.docs.amplify.aws/) (Amplify ドキュメント)
## 追加情報
`App.js` ファイルには次のコードが含まれています。
```
import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
return (
Welcome {user.username}
Your token is: {token}