Velo 第３２回 ログインとメンバーオブジェクト
ログインバーはサイトにログインを求めるパーツです。
特定の会員に情報を公開したり、会員自身の情報へ他者のアクセス権を制限する等、必要とされる場合があります。
ログインバーは下図のようにパーツを追加/コミュニティから選択できます。
さて、会員が今ログインしているか、しているならメンバーは誰かが特定できなければ必要な情報の提供や、アクセス権の制限はできません。
それを解決する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開発のご依頼はこちら