ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubbleでログイン処理をしてみよう!~第6回メールアドレスとパスワードを変更しよう

f:id:korokoro-vc:20200225151755p:plain

第6回メールアドレスとパスワードを変更しよう

これまでにログインシリーズとして、5回説明してきましたが、メールアドレスとパスワードの変更について触れていなかったので、説明しようと思います!

メールアドレスとパスワード、この二つをユーザが変更したい場合は多々あります。

各Webアプリによってどういう設計にするかはそれぞれかと思いますが、 パスワードであれば、以前ログインシリーズでも触れたように、変更する場合は「パスワードを忘れた」処理をしてもらう、というのも一つの手です。(これだと説明文がないとユーザはわかりにくいですが)

その時のブログはこちら↓ blog.nocodelab.jp

今回は、単純にユーザがログインしている時に自分でメールアドレスとパスワードを変更する方法をお伝えします。

メールアドレスとパスワードを変更しよう

ここでの前提は、ソーシャルログインを利用していないユーザの前提です。

まずはサンプル画面を以下のように用意しました。

f:id:korokoro-vc:20200218155444j:plain

主な画面エレメント

  • Input:新しいメールアドレス
  • Input:現在のパスワード
  • Input:新しいパスワード
  • Input:新しいパスワード(確認)
  • Button:変更

メールアドレスとパスワードは実際には別々に変更することが多いかと思いますが、ここでは同時に変更できるようにします。

画面ができたら、「変更」ボタンのワークフローを設定しましょう。

「Account」から「Update the user's credentials」を選択します。

f:id:korokoro-vc:20200218191907j:plain

必ず必要なのは、「Old password」です。

メールアドレス、パスワード、パスワード(確認)と変更対象のものをチェックしましょう。
ここでは全て変更するので、「Change email」、「Change password」、「Require password confirmation」のチェックボックスにチェックを入れ、それぞれInputのvalueを設定します。
メールアドレス、パスワードどちらかなら、必要に応じてチェックします。

Emailの登録確認をサインアップ時に行う場合は、メール変更の時も登録確認してもらうようにしましょう。 その時は「Send an email to confirm the email」にチェックを入れましょう。

これでメールアドレスの変更とパスワードが変更できました。

とても簡単ですね!!

ちなみにこの画面はログイン中に行うようにしましょう。

メールアドレスを変更しよう(ソーシャルログイン)

通常のログインであれば、メールアドレス&パスワードは前述のように変更できます。

しかし、ソーシャルログインの場合はどうでしょうか?
ソーシャルログインの場合は、Bubble以外でID、パスワード管理されているので、これでログインしていた場合、アプリ側でSNS側のメールアドレスとパスワード変更するのは不可能です。
※仮に「Update the user's credentials」を利用して変更しようとすると、Bubbleでの認証に変更されたり、整合性がとれなくなります。

ただ、以前ログインシリーズでソーシャルログインについて触れましたが、Twitterの場合(それ以外にもあるかもですが)、メールアドレスはBubble側では取得できないので、必要な場合、ユーザに入力してもらう必要があります。

ちなみにその記事はこちら↓ blog.nocodelab.jp

ということは、アプリ側でメールアドレスの変更の必要がでてきますね。 しかし、パスワードの管理はやはりBubbleではなく、Twitterになります。

ここで気づきましたでしょうか?

先ほどメールアドレス&パスワード変更する際、必須なものがありました。

それは、現パスワードの入力です。

ソーシャルログインのパスワードを入力したところでBubbleでは管理していないので、はじかれてしまいます。

では、どのように変更すれば良いのでしょうか?

それは、一時的にパスワードを発行し、それを利用する、です!!

ワークフローを見てみましょう。

f:id:korokoro-vc:20200218200423j:plain

まずは、「Account」から「Assign a temp password to a user」のActionを選択します。

f:id:korokoro-vc:20200218200841j:plain

次に、「Account」から「Update the user's credentials」を選択します。

ここで、「Old password」のところを、入力の値ではなく、「Assign a temp password to a user」の結果を設定します。

これで、Twitterのように、Bubbleでパスワード管理していないものでも、メールアドレスの変更ができるようになりました!

まとめ

従来の開発なら、認証してO.K.なら項目更新、という風に作らねばなりませんが、Bubbleで開発すると、 メールアドレスとパスワードも他の項目と同じように簡単に変更が可能ですね!
とても便利だと感じます。

メールアドレスとパスワードはBubbleで予め通常の項目と違い、認証を必要とするようになっているので、初めてシステムを作成する方でも「認証が必要と」いう認識することもできます。

是非試してみてください!

ここまで読んでいただき、ありがとうございました!

Bubble でログイン処理をしてみよう!コンテンツ一覧