こんにちは。

近々お客様のサイトに会員機能を実装するのですが、サイトパーツのみでは会員が退会（アカウントを削除）することができず困っていました。（過去にもディスカッションされていたみたいですね。）

Veloのリファレンスには削除機能があったので、Veloを使用して実装したお話をしようと思います。

使用したのは主にwix-members APIとwix-members-backend APIです。

wix-membersのgetMemberを使用しログインしているユーザーの情報を取得し、

wix-members-backendのdeleteMemberを使用して削除するという流れです。

また、アカウント削除後にエラーを発生しないためにユーザーをログアウトさせる処理も併せて実装しています。こちらはwix-membersのlogoutを使用しました。

注意する点としては、wix-membersはフロントエンドで稼働し、wix-members-backendはバックエンドで稼働しますので、スクリプトファイルの作成場所に気をつけてください。（これで躓きました・・・）

用意するもの

用意するページは以下の通りです。

・削除確認ページ：

「本当に削除しますか？」という確認文言を置くページです。ライトボックスでも大丈夫です。 このページに削除機能のスクリプトを書いていきます。

・削除完了ページ：

「削除が完了しました。」の文言を書いたページです。

このページで削除をお知らせする他にログアウトもさせます。削除しただけではログインされたままとなり、エラーになってしまうのでここでログアウトするという次第です。

・アカウント削除ボタン：

削除確認ページへ飛ばすボタンを会員ページ上に配置します。

実装方法

まず、フロントエンドとバックエンドにファイルを作成します。

フロントエンドは削除確認ページに直接すべて書いても問題ありませんが、今回は他ページでの流用を考えてpublicフォルダに作成して記述しました。

バックエンドのファイルの拡張子は.jswです。ここにwix-members-backend APIを使用した処理を記述します。

フロントエンドの記述は以下のとおりです。こちらのサンプルを活用しました。

import { authentication, currentMember } from 'wix-members';

let currentMemberId;

// ログイン中のユーザーのIDを取得
export async function getCurrentMemberId() {
  const res = await currentMember.getMember();
  currentMemberId = res._id;
  return currentMemberId;
}

（バックエンドでID取得を試みたのですがエラーで取得できず、フロントエンドから取得することにしました。）

バックエンドの記述は以下のとおりです。リファレンスのとおりです。

import { currentMember, members } from 'wix-members-backend';

export function myDeleteMemberFunction(id) {

  return members.deleteMember(id)
    .catch((error) => {
      //　例外処理
    });
}

以下は削除確認ページへの記述の一例です。

ここでは、削除確認ページに削除実行ボタンを置いて、押した際に削除が実行されるようにしています。

import { getCurrentMemberId } from 'public/repeatFunctions.js';
import { myDeleteMemberFunction } from 'backend/deleteAccount.jsw';

$w.onReady(async function () {
    let memberId = await getCurrentMemberId();
    $w('#deleteAccountButton').onClick(() => myDeleteMemberFunction(memberId)
    );
})

最後に、ユーザーをログアウトさせます。

削除完了ページに下記のようなログアウト処理を記述します。

import { authentication } from 'wix-members';

$w.onReady(function () {

 authentication.logout();
 
});

以上でアカウント削除を実装することができます。

できる限り独自性を排除した作りにはなってると思うので皆さんの環境でも実装出来るかなと思います。

最後までご覧頂きありがとう御座いました。