ソーシャルネットワークのユーザープロファイルと設定管理

はじめに このチュートリアルでは、back4appを使用してソーシャルネットワークアプリケーションのユーザープロフィールと設定管理を実装する方法を学びます。すべてをゼロから構築するのではなく、back4appの強力なデータ管理機能を活用して、ユーザープロフィール情報を保存および取得し、アバターのアップロードを処理し、ユーザー設定を管理します。 このチュートリアルの終わりまでに、ユーザーが以下のことを行えるシステムを作成します プロフィール情報を表示および更新する プロフィール写真をアップロードおよび管理する プライバシーおよび通知設定を構成する アカウントの設定をカスタマイズする これらの機能は、ユーザーに自分のアイデンティティとプラットフォーム上での体験を制御するための重要な要素です。 前提条件 このチュートリアルを完了するには、次のものが必要です back4appアカウント。 back4app com https //www back4app com に無料アカウントを登録できます。 parse sdkが設定されたback4appプロジェクト。 動作する認証システム。まだ実装していない場合は、私たちの back4appの認証システムに関するチュートリアル を参照できます。 javascript、react js、および現代のウェブ開発の基本知識。 back4gramプロジェクト 完全なコードを見つけるには こちら で、 back4appで構築されたソーシャルネットワークのサンプルプロジェクト のコードを見つけてください。 ステップ1 – back4appにおけるプロフィールデータ構造の理解 実装に入る前に、back4appでのユーザープロフィールデータの構造を理解しましょう。 parse userクラス back4appの parse user クラスは認証だけでなく、プロフィール情報を保存するのにも最適です。新しいユーザーを作成すると、back4appは自動的にデフォルトフィールドを持つuserクラスにエントリを作成します ユーザー名 パスワード （安全に保存され、取得不可） メール メール確認済み 認証データ しかし、実際の力はこのクラスを拡張してプロフィールデータのカスタムフィールドを追加することから来ます 自己紹介 ユーザーの自己説明 アバター プロフィール写真（parse fileとして保存） フルネーム ユーザーのフルネーム 所在地 ユーザーの都市/国 ウェブサイト ユーザーの個人ウェブサイト ソーシャル ソーシャルメディアプロフィールへのリンク 設定 ユーザーの設定と好み 拡張ユーザープロパティの設定 back4appのダッシュボードで、ユーザークラスにこれらのカスタムフィールドを追加できます データベース → ブラウザに移動 ユーザークラスを選択 「新しい列を追加」をクリック フィールド名（例 "bio"）とタイプ（例 "string"）を定義 \[image back4appダッシュボードがユーザークラスに新しいカラムを追加している様子] これらのフィールドには、他のオブジェクトと同様にparse sdkを通じてアクセスし、更新できます。 back4gramプロジェクト 完全なコードは こちら にあります。 ソーシャルネットワークサンプルプロジェクト はback4appで構築されています。 ステップ2 – ユーザープロファイルデータの取得 プロファイル管理を実装する最初のステップは、現在のユーザーのプロファイルデータを取得することです。 現在のユーザーのプロファイルを取得する back4appは、現在ログインしているユーザーを簡単に取得できます const fetchuserprofile = async () => { try { // get the current user object const currentuser = await parse user current(); if (!currentuser) { // handle the case where no user is logged in navigate('/login'); return; } // access user properties const username = currentuser get('username'); const email = currentuser get('email'); const bio = currentuser get('bio') || ''; const fullname = currentuser get('fullname') || ''; // get avatar if available const avatar = currentuser get('avatar'); const avatarurl = avatar ? avatar url() null; // set state with user data setuserdata({ username, email, bio, fullname, avatarurl }); } catch (error) { console error('error fetching user profile ', error); // handle error appropriately } }; このコードは、次のことを示しています 現在のユーザーオブジェクトを取得するには parse user current() 組み込みプロパティにアクセスするには get('fieldname') オプションフィールドをフォールバック値で処理する アバター画像のファイルurlにアクセスする back4gramアプリケーションでは、これは profilepage js コンポーネントのuseeffectフックで実装されています useeffect(() => { const loadprofile = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } setuser({ id currentuser id, username currentuser get('username'), email currentuser get('email'), bio currentuser get('bio') || '', avatar currentuser get('avatar') ? currentuser get('avatar') url() null }); // set stats setstats({ posts userposts length, followers currentuser get('followers') || 0, following currentuser get('following') || 0 }); setisloading(false); } catch (error) { // error handling } }; loadprofile(); }, \[navigate]); back4gramプロジェクト 完全なコードを こちら で見つけてください ソーシャルネットワークサンプルプロジェクト をback4appで構築しました ステップ 3 – ユーザープロフィール情報の更新 ユーザーがプロフィール情報を更新できるようにすることは、プロフィール管理のコア機能です。 プロフィールフィールドの更新 ユーザーが更新されたプロフィール情報を送信すると、次のようにback4appに保存できます const updateprofile = async (profiledata) => { try { const user = await parse user current(); if (!user) return false; // update user fields user set('fullname', profiledata fullname); user set('bio', profiledata bio); user set('website', profiledata website); user set('location', profiledata location); // save changes to back4app await user save(); return true; } catch (error) { console error('error updating profile ', error); return false; } }; この関数 現在のユーザーオブジェクトを取得します 更新されたフィールド値を設定します back4appに変更を保存します back4gramアプリケーションでは、プロファイルの更新は handleupdateprofile 関数で実装されています const handleupdateprofile = async (e) => { e preventdefault(); setisupdating(true); try { if (!user) return; user set('username', username); user set('email', email); user set('bio', bio); // handle avatar upload if a file is selected if (selectedfile) { const parsefile = new parse file(selectedfile name, selectedfile); await parsefile save(); user set('avatar', parsefile); } await user save(); toaster create({ title 'success', description 'profile updated successfully', type 'success', }); } catch (error) { console error('error updating profile ', error); // handle error } finally { setisupdating(false); } }; back4gramプロジェクト 完全なコードを見つけるには こちら ソーシャルネットワークのサンプルプロジェクト をback4appで構築しました ステップ4 – プロファイル写真のアップロードの処理 プロファイル写真は、ソーシャルネットワークにおけるユーザーのアイデンティティの重要な部分です。back4appはparse fileを使用してファイル処理を簡単にします。 アバター画像のアップロード プロフィール写真をアップロードして保存するには const uploadavatar = async (file) => { try { const user = await parse user current(); if (!user || !file) return null; // create a parse file const parsefile = new parse file(file name, file); // save the file to back4app await parsefile save(); // update the user's avatar field user set('avatar', parsefile); await user save(); // return the file url return parsefile url(); } catch (error) { console error('error uploading avatar ', error); return null; } }; このコード 選択したファイルから新しいparse fileオブジェクトを作成します ファイルをback4appのストレージに保存します ファイルをユーザーのアバターフィールドに関連付けます データベース内のユーザーオブジェクトを更新します back4appにおけるファイル管理 parse fileを使用してファイルをアップロードすると、back4appは ファイルをクラウドストレージに安全に保存します ファイルにアクセスするためのユニークなurlを生成します 親オブジェクトのaclに基づいてファイルの権限を管理します 高速読み込みのためにcdn配信を処理します これにより、自分自身のファイルストレージと管理システムを構築するよりもはるかに簡単になります。 ステップ5 – ユーザー設定の実装 基本的なプロフィール情報を超えて、ソーシャルネットワークは通常、プライバシー、通知、および設定のためのさまざまな設定を提供します。 back4appにおけるユーザー設定の保存 ユーザー設定を保存するための主なアプローチは2つあります： 1\ シンプルな設定のためのユーザークラスフィールドの使用 単純なブール値または列挙設定の場合 const updateprivacysettings = async (settings) => { try { const user = await parse user current(); if (!user) return false; // update privacy settings user set('profilevisibility', settings profilevisibility); // 'public', 'friends', 'private' user set('allowdirectmessages', settings allowdirectmessages); // boolean user set('showonlinestatus', settings showonlinestatus); // boolean await user save(); return true; } catch (error) { console error('error updating privacy settings ', error); return false; } }; 2\ 複雑な設定のためのjsonオブジェクトの使用 より複雑またはグループ化された設定の場合、jsonオブジェクトを使用できます const updateallsettings = async (settingsdata) => { try { const user = await parse user current(); if (!user) return false; // store all settings as a json object user set('usersettings', { privacy { profilevisibility settingsdata profilevisibility, allowdirectmessages settingsdata allowdirectmessages, showonlinestatus settingsdata showonlinestatus }, notifications { emailnotifications settingsdata emailnotifications, pushnotifications settingsdata pushnotifications, mentionalerts settingsdata mentionalerts }, theme { darkmode settingsdata darkmode, fontsize settingsdata fontsize, accentcolor settingsdata accentcolor } }); await user save(); return true; } catch (error) { console error('error updating settings ', error); return false; } }; このアプローチにより、複雑でネストされた設定を単一のフィールドに保存できます。 back4gramのsettingspage jsからの例 back4gramアプリケーションでは、ユーザー設定は settingspage js コンポーネントで管理されています。back4appと対話する主要な部分は次のとおりです // fetching current settings useeffect(() => { const fetchsettings = async () => { try { const currentuser = await parse user current(); if (!currentuser) { navigate('/login'); return; } const usersettings = currentuser get('usersettings') || {}; setprivacysettings({ profilevisibility usersettings privacy? profilevisibility || 'public', postprivacy usersettings privacy? postprivacy || 'friends' }); setnotificationsettings({ emailnotifications usersettings notifications? emailnotifications || false, pushnotifications usersettings notifications? pushnotifications || false }); // other settings } catch (error) { console error('error fetching settings ', error); } }; fetchsettings(); }, \[navigate]); // saving settings const savesettings = async (settingtype, settingdata) => { try { const user = await parse user current(); if (!user) return; // get current settings or initialize if none exist const currentsettings = user get('usersettings') || {}; // update only the specific settings category const updatedsettings = { currentsettings, \[settingtype] settingdata }; // save updated settings user set('usersettings', updatedsettings); await user save(); toaster create({ title 'settings saved', description 'your preferences have been updated ', type 'success', }); } catch (error) { console error('error saving settings ', error); // handle error } }; このコードは、back4gramがどのように 現在のユーザーの設定をback4appから取得します 不足している設定のデフォルトを提供します 変更された設定カテゴリのみを更新します 変更をback4appに保存します back4gramプロジェクト： 見つける こちら 完全なコードを ソーシャルネットワークサンプルプロジェクト back4appで構築された ステップ6 – 高度な機能：アカウントセキュリティ設定 セキュリティはユーザープロファイル管理の重要な側面です。ユーザーアカウントのためにいくつかの高度なセキュリティ機能を実装しましょう。 二要素認証の実装 基本的なback4gramの例には含まれていませんが、back4appのクラウドファンクションを使用して二要素認証を実装できます。 // cloud function to enable 2fa parse cloud define("enable2fa", async (request) => { if (!request user) throw new error("user must be logged in"); // generate a secret key for the user const secret = generatetotpsecret(); // save the secret to the user object request user set("totpsecret", secret); await request user save(null, { usemasterkey true }); // return the secret and qr code data for setup return { secret secret, qrcode generateqrcodeuri(secret, request user get("email")) }; }); // cloud function to verify 2fa code parse cloud define("verify2facode", async (request) => { if (!request user) throw new error("user must be logged in"); const { code } = request params; // get the user's secret const secret = request user get("totpsecret"); // verify the provided code const isvalid = verifytotpcode(code, secret); if (!isvalid) { throw new error("invalid verification code"); } // mark 2fa as enabled request user set("is2faenabled", true); await request user save(null, { usemasterkey true }); return { success true }; }); reactアプリケーションから、これらのクラウドファンクションを呼び出すことができます。 const enable2fa = async () => { try { const result = await parse cloud run("enable2fa"); // show qr code setup to user setqrcodedata(result qrcode); settwofactorsecret(result secret); } catch (error) { console error("error enabling 2fa ", error); } }; const verify2fasetup = async (code) => { try { await parse cloud run("verify2facode", { code }); // 2fa successfully set up setis2faenabled(true); } catch (error) { console error("error verifying 2fa code ", error); } }; メール認証 back4appは、メール確認のための組み込みサポートを提供します。確認メールをトリガーできます const sendverificationemail = async () => { try { const user = await parse user current(); if (user get('emailverified')) { return { success false, message 'email already verified' }; } await parse user requestemailverification(user get('email')); return { success true }; } catch (error) { console error('error sending verification email ', error); return { success false, error error message }; } }; パスワード変更 ユーザーが適切な確認を行ってパスワードを更新できるようにします const changepassword = async (currentpassword, newpassword) => { try { const user = await parse user current(); // verify current password by trying to login await parse user login(user get('username'), currentpassword); // if login succeeded, update password user set('password', newpassword); await user save(); return { success true }; } catch (error) { console error('error changing password ', error); return { success false, error error message }; } }; 本番アプリケーションでは、ユーザー名/パスワードの組み合わせを公開しないように、cloud functionを使用して安全に実装する必要があります。 ステップ7 – ソーシャル機能のためのユーザープロファイルのクエリ ソーシャルネットワークは、ユーザーが他のユーザーのプロフィールを表示できるようにする必要があります。back4appを使用してユーザープロフィールをクエリし、表示する方法は次のとおりです。 他のユーザープロフィールの取得 const fetchuserprofile = async (userid) => { try { const query = new parse query(parse user); // include any pointer fields you want to retrieve query include('settings'); const user = await query get(userid); // check privacy settings const profilevisibility = user get('profilevisibility') || 'public'; const currentuser = await parse user current(); // if profile is private and not viewed by the owner if (profilevisibility === 'private' && (!currentuser || currentuser id !== user id)) { return { id user id, username user get('username'), avatar user get('avatar') ? user get('avatar') url() null, isprivate true }; } // return public profile data return { id user id, username user get('username'), fullname user get('fullname'), bio user get('bio'), avatar user get('avatar') ? user get('avatar') url() null, followerscount user get('followerscount') || 0, followingcount user get('followingcount') || 0, isprivate false }; } catch (error) { console error('error fetching user profile ', error); return null; } }; この関数は parse userクラスのクエリを作成します idによって特定のユーザーを取得します プライバシー設定を尊重します 可視性に基づいて適切なデータを返します ユーザー検索の実装 他のプロフィールを見つけるためにユーザーを許可する const searchusers = async (searchterm) => { try { const query = new parse query(parse user); // create a compound query for username or full name const usernamequery = new parse query(parse user); usernamequery contains('username', searchterm); const fullnamequery = new parse query(parse user); fullnamequery contains('fullname', searchterm); // combine queries with or query orquery(\[usernamequery, fullnamequery]); // only return public profiles query equalto('profilevisibility', 'public'); // limit to 20 results and skip private fields query limit(20); query select(\['username', 'fullname', 'avatar']); const results = await query find(); // format results return results map(user => ({ id user id, username user get('username'), fullname user get('fullname'), avatar user get('avatar') ? user get('avatar') url() null })); } catch (error) { console error('error searching users ', error); return \[]; } }; back4gramアプリでは、ユーザー検索が searchpage js で実装されています。 const handlesearch = async (query) => { if (!query trim()) return; setisloading(true); try { // search for users const userquery = new parse query(parse user); userquery contains('username', query); userquery limit(10); const userresults = await userquery find(); const foundusers = userresults map(user => ({ id user id, username user get('username'), avatar user get('avatar') ? user get('avatar') url() null })); setusers(foundusers); } catch (error) { console error('error searching ', error); // handle error } finally { setisloading(false); } }; back4gramプロジェクト 完全なコードを見つける こちら の ソーシャルネットワークサンプルプロジェクト をback4appで構築しました。 結論 このチュートリアルでは、back4appを使用して包括的なユーザープロフィールと設定管理を実装する方法を学びました。以下のことを見てきました ユーザープロファイルデータの構造 back4appのuserクラスで プロファイル情報を取得および更新する parse sdkを使用して ファイルアップロードを処理する プロファイル写真用のparse fileで ユーザー設定を実装する プライバシーと好みのために セキュリティ機能を追加する 二要素認証やメール確認のような ユーザープロファイルをクエリする ソーシャルネットワーク機能のために back4appの強力なデータ管理機能により、複雑なバックエンドインフラをゼロから構築することなく、堅牢なプロファイルシステムを簡単に作成できます。parse userクラスを使用し、カスタムフィールドで拡張することで、ソーシャルネットワーク用の柔軟なユーザープロファイルシステムを迅速に作成できます。 次のステップ ソーシャル接続を実装する フォロー/フォロワーのようにparse relationsを使用して アクティビティフィードを追加する parse queriesを使用してユーザーアクションを表示するために ユーザー間のダイレクトメッセージングを構築する リアルタイム更新のためのlive queryを使用して ユーザー生成コンテンツのコンテンツモデレーションを実装する cloud functionsを使用して back4appをバックエンドサービスとして使用することで、複雑なインフラを構築するのではなく、魅力的なユーザー体験の創造に集中できます。 プロファイルと設定管理を含むback4gramソーシャルネットワークアプリケーションの完全なコードは、 githubリポジトリ https //github com/templates back4app/back4gram で確認できます。