---
title: アカウント情報の表示・更新・削除画面を構築する
description: Kurocoを利用したNuxt.jsプロジェクトで、アカウント情報の表示・更新・削除画面の作成方法を紹介します。
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## 概要
Kurocoを利用したNuxt.jsプロジェクトで、アカウント情報の表示・更新・削除画面の作成方法を紹介します。

### 学べること
以下の手順でアカウント情報の表示・更新・削除画面を作成します。
- [エンドポイントを設定する](#エンドポイントを設定する)
- [フロントエンドを実装する](#フロントエンドを実装する)
  - [自身のメンバー情報の表示](#自身のメンバー情報の表示)
  - [自身のメンバー情報の更新](#自身のメンバー情報の更新)
  - [自身のメンバー情報の削除](#自身のメンバー情報の削除)

### 前提条件
:::info
このページはKurocoとNuxt.jsでのプロジェクトが構築済みであり、ログイン画面の実装がされていることを前提としています。  
まだ構築していない場合は、下記のチュートリアルを参照してください。  
[Kurocoビギナーズガイド](/ja/docs/tutorials/beginners-guide/)  
[KurocoとNuxt.jsで、ログイン画面を構築する](/ja/docs/tutorials/integrate-login/)
:::

:::info
本チュートリアルでは以下のバージョンでコードを書いています。  
Nuxt2: v2.15.8  
Nuxt3: v3.8.0  
:::

## エンドポイントを設定する
エンドポイントは Login::login_challenge のエンドポイントが設定されたAPI設定に追加します。  
そうすることでログインした認証情報を利用してエンドポイントへのリクエストが行われます。
異なるAPI間で認証情報は共有できませんので注意してください。

今回はメンバー情報を表示するエンドポイントと、メンバー情報を更新するエンドポイント、そしてメンバー情報を削除するエンドポイントの3つを設定します。 
いずれも`self_only`のパラメータを有効にすることで、自身のメンバー情報のみにアクセスできるよう制限します。  

[新しいエンドポイントの追加]をクリックして、それぞれ作成します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1e20df3e56291487f859a3cbd905b261.png)

**メンバー情報を表示するエンドポイント**

|項目|設定内容|
| :--- | :--- |
|パス|member/details|
|カテゴリー|メンバー|
|モデル|Member|
|オペレーション|details|
|self_only|チェックを入れる|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d3e6adf9a7578add039563bf16a2411d.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/64cb3bfbe1738ea841babbcf49cd98d7.png)

:::caution
self_onlyのパラメータを有効にしない場合、エンドポイントのURLが分かれば誰でも任意のメンバー情報を取得できます。  
その場合は、エンドポイントにAPIリクエスト制限をかけてリクエストを送付できるユーザーを制限してください。`custom_search_id`や`group_id`のパラメータを設定して、エンドポイントから取得できるメンバーを制限したり、後処理の[出力許可リスト](/ja/docs/reference/post-processing/#出力許可リスト)を使用して、レスポンスされる項目を絞る方法も有効です。  
:::

**メンバー情報を更新するエンドポイント**

|項目|設定内容|
| :--- | :--- |
|パス|member/update|
|カテゴリー|メンバー|
|モデル|Member|
|オペレーション|update|
|self_only|チェックを入れる|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2a87acd800d2f0e766b0c2e6e88cae9c.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/0e862ce849e1c5bc56562573d2a80466.png)

:::caution
self_onlyのパラメータを有効にしない場合、APIリクエストが許可されたユーザーであれば他人のメンバー情報を更新できます。
APIリクエストを許可するユーザーを注意して設定するとともに、以下のパラメータ設定も併用してください。
- `allowed_group_ids`：所属グループを変更するリクエストを送る場合、このパラメータに設定されたグループIDのみ変更できるよう制限します。
- `use_columns`：このパラメータに設定されたkeyの項目のみ更新できるよう制限します。
- `unuse_columns`：このパラメータに設定されたkeyの項目は更新できないよう制限します。
:::

**メンバー情報を削除するエンドポイント**

|項目|設定内容|
| :--- | :--- |
|パス|member/delete|
|カテゴリー|メンバー|
|モデル|Member|
|オペレーション|delete|
|self_only|チェックを入れる|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5b1bd94ae2131d1e92e669e14540582a.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b0272f79240c4fa210ab5b32b952b641.png)

:::caution
self_onlyのパラメータを有効にしない場合、APIリクエストが許可されたユーザーであれば他人のメンバー情報を削除できます。  
APIリクエスト制限の設定でAPIリクエストを送付できるユーザーを制限し、`allowed_group_ids`のパラメータ設定で削除できるユーザーをグループで制限してください。
:::

## フロントエンドを実装する
### 自身のメンバー情報の表示
まずは自信のメンバー情報を取得し、表示する画面を作成します。

以下のファイルを作成します。

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/mypage/details/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/member_detail.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/mypage/details/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/member_detail.vue
```

</TabItem>
</Tabs>

ログイン後に対象のディレクトリにアクセスすると、メンバー情報の表示が確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/8c748080eee7923fe52c4e4f5b1284dd.png)

### 自身のメンバー情報の更新

以下のファイルを作成します。

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/mypage/update/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/member_update.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/mypage/update/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/member_update.vue
```

</TabItem>
</Tabs>

ログイン後に対象のディレクトリにアクセスすると、メンバー情報の入力ができ、[Update]ボタンをクリックすることで更新できることが確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a17a2a53667018250bcd8ada73794d66.gif)

### 自身のメンバー情報の削除

以下のファイルを作成します。

<Tabs>
<TabItem value="Nuxt2" label="Nuxt2" default>

```markup reference title="/pages/mypage/delete/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxtjs/member_delete.vue
```

</TabItem>
<TabItem value="Nuxt3" label="Nuxt3" default>

```markup reference title="/pages/mypage/delete/index.vue"
https://github.com/diverta/kuroco-documents/blob/main/sample_code/front-end/nuxt3/member_delete.vue
```

</TabItem>
</Tabs>

ログイン後に対象のディレクトリにアクセスすると、削除直前の警告文章が表示され、[Proceed]ボタンをクリックすると自身の情報を削除できることが確認できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7a103565a00aba2e1098b4490a5bbbee.gif)

以上でアカウント情報の表示・更新・削除の動作が実装できました。  
チュートリアルでは最低限の項目の表示・更新としていますので、必要な要件に合わせて表示する項目も調整してください。  

## 関連ドキュメント
- [メンバー詳細設定で利用できる拡張項目一覧](/ja/docs/reference/list-of-extra-column-available-on-member-field-settings/)