Velo 第３２回　ログインとメンバーオブジェクト

2023年9月21日 10:12

ログインバーはサイトにログインを求めるパーツです。
特定の会員に情報を公開したり、会員自身の情報へ他者のアクセス権を制限する等、必要とされる場合があります。
ログインバーは下図のようにパーツを追加/コミュニティから選択できます。

さて、会員が今ログインしているか、しているならメンバーは誰かが特定できなければ必要な情報の提供や、アクセス権の制限はできません。
それを解決するAPIは wix-members-frontend モジュールの authentication と currentMember です。
以下のコードをご覧下さい。

// 冒頭で API を読み込みます
import {authentication} from 'wix-members-frontend';

// 
const isLoggedIn = authentication.loggedIn();
    if (!isLoggedIn){
// ログインしていない場合の対応
　　　　　　　　　　　}
//  ログインしている場合はコードを進める…

ご覧のように、Authentication API に loggedIn( ) 関数があり、結果を論理値で返します。
ログインしてない場合はプロンプトを出すなどの対応が普通です。
では、ログインしている場合は誰がログインしているかですが、以下のコードをご覧下さい。

// 冒頭で API を読み込みます
import {currentMember} from 'wix-members-frontend';

// メンバーIDを取得します
const member = currentMember.getMember()
// 戻り値はプロミスなのでデンデン対応をします
               .then(() => {
　　　　　　　　　　　　　　// ログインメンバーのIDを取得します
                           const member_id = member._id;
                           // 必要なコードを加えます
　　　　　　　　})

ご覧のように、currentMember API の getMember( ) 関数でログインメンバーオブジェクトを取得できます。
ただし、getMember( ) 関数の戻り値は第13回で示しましたプロミスですのでプロミスデンデン、若しくは async/await で対応します。
プロミスが解決すればメンバーオブジェクトが戻ります。
以下のコードをご覧下さい。
プロミス対応のない失敗例です。
初心者にはこう言うところが難しいです。

const member = currentMember.getMember();
// プロミス解決を待たず値を取ろうとしています
const member_id = member._id;

// 結果は member_id = undefined になり、続くコードは無意味になります

このメンバーオブジェクトには、_id、loginEmail などのプロパティがあります。
_id はログインメンバーのIDで、loginEmail は登録時のメルアドです。
言わずもがなですが、同一人物でもログイン方法が変われば ID も変わります。
第06回でもしましましたようにコレクションへの書き込み時にもこの ID がオーナーIDとして使われます。
実際にどんなプロパティがあるかをコンソールで確認してみましょう。
下図をご覧下さい。

注意点が一つあります。
エディターでのプレビュー時はログイン状態ですのでログインに関するコードチェックはそのままではできません。
公開サイトでしっかり動くかどうかを必ずお確かめ下さい。

Velo開発のご依頼はこちら

この記事が気に入ったらサポートをしてみませんか？

Velo 第３２回 ログインとメンバーオブジェクト

Velo 第３２回　ログインとメンバーオブジェクト