ノーコーダーのつかさです。
今回は知っておくと便利なユーザー情報の更新方法についてご紹介します。特にセキュリティ強化のためには定期的にパスワードを更新する必要があると思いますので、Webアプリには必須と言える機能でしょう。
bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！
と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。
ユーザーの新規登録とログイン機能を作る
ユーザー情報のアップデート方法を学習する前に、ユーザーの新規登録機能とログイン機能の実装を行わなくてはなりません。もし分からなければ、bubbleのチュートリアルで解説されているので、下記記事を参考にしながら実装してみてください。
ユーザーの新規登録とログイン機能を用意できたら、テストユーザーを登録してみましょう。なんでも良いですが、今回は下記の通り登録してみます。
Email：test@bubble.com
password：nw2020
次に左上のPage:indexをクリックして、”Add a new page”からパスワード変更用のページを作成しましょう。
Page nameは”update”にしておきます。
updateページを作った後はindexページからリンクを飛ばします。
①Linkをクリックして任意の場所に配置
②Appearanceに”パスワードを変更する”と入力
③Destination page(遷移先のページ)：updateを選択
これでトップページからパスワード更新ページに遷移できるようになりました。
次にupdateページを更新していきます。見た目を作るのは今まで通りです。Input formsからInputを３つ並べてそれぞれのAppearanceに①old password②new password③confirmationと入力しましょう。パスワードの更新ページではおなじみの入力項目ですね。
またButtonを下部に配置し”パスワードを変更する”とAppearanceに入力します。その後Start/Edit workflowをクリックしてワークフローの設定を行なっていきます。
Workflowワークスペースに移動したら、下記の通り処理を進めます。
①Click here to add an action
②Accountを選択
③Update the user”s credentialsをクリック
Update the user’s credentialsの設定画面が開いたら下記の通り設定してください。
①Old password：Input old password’s value
②New password：Input new password’s value(Change passwordに✔を入れる)
③Confirmation：Input confirmation’s value(Require password confirmationに✔を入れる)
これで完成です！後はPreviewから動作を確認してみましょう！
古いパスワードを一番上のインプットに入力し、新しいパスワードを二番目に、確認のためのパスワードを三番目のインプットに入力します。
更新に成功したら”successfully updated”と表示されます。
まとめ
リリースまで見据えたプロダクトを開発しようと思ったら、今回のようなユーザー情報の更新は必須機能です。同じ要領でEmailの更新もできるので、チャレンジしてみましょう。
それではEnjoy NoCode！
コメント