見出し画像

Adalo × Zapier × Gmail を使って、メール認証つき会員登録を実装しよう!

NoCodeでネイティブアプリも作れるAdaloで、ユーザーの会員登録時のメール認証機能を実装していきます。

Adalo のアプリテンプレート2つ(スマホ版・ PC版)つきです。

下記の3つが、事前に必要です。ご購入前に、ご確認ください。
・Adaloの有料プラン以上(Pro プラン or Bussiness プラン)
・Zapierアカウント(無料プランでも実装可能ですが、機能などに制限があります。「Zapierの料金プラン」で、解説しています。)
・Gmailアカウント(無料で作成可能。認証コードのメールをユーザーに送信するために、Gmailのメールアドレスを使います。)

画像53

またアプリテンプレートのご購入の前に、下記の記事も合わせてご確認ください。


Zapier とは?

スクリーンショット 2020-10-05 13.26.18

異なるサービスやアプリを連携して、自動化できるノーコードツールの一種です。
ちなみに、読み方は「ザピアー」です。(ザピエルではない)

スクリーンショット 2020-10-05 13.27.46

Zapier経由で、Adaloと連携できるサービス・ツールは、こちらで確認できます。

この説明では、抽象的でよくわからないかと思いますので次回のチャプターで、
「Adaloのデータベースに新しくデータが追加されたら」、「Gmailでメールを送信する」というZap(Zapierで作ったこのようなフローのこと)を、作っていきます。このZapを何回行ったかが、Tasksになります。

「Adaloのデータベースに新しくデータが追加されたら」の部分を、Trigger。
「Gmailでメールを送信する」の部分を、Action といいます。

Zapierで使う用語をまとめると、

1. Trigger = 引き金
2. Action = Trigger の次にどうするかの部分
3. Zap = Trigger と Action のフロー単位
4. Task = Zapが実行された回数
5. Update = Zapが動くまでの所要時間


になります。


Zapierの料金プラン

このページで説明されていますが、かなり細かく料金プランごとに区分されています。
また、Freeプランでも、初回会員登録時の最初の1ヶ月間は、1000Tasksまで使え、Update(ZapierのZapが動くまでの所要時間)も2分、Zap数に制限なし、というお試し期間限定の設定になっています。(2020/10現在)

スクリーンショット 2020-10-09 13.55.25

スクリーンショット 2020-10-09 13.56.02

上記だと、どこを見ればいいのかわかりづらいので、特に重要な部分のみ抜粋してまとめ直すと、以下のようになります。(個人で使う場合、最高でもProfessionalプランの$49で十分なので、3つのプランのみご紹介します)

スクリーンショット 2020-10-09 13.57.00

FreeプランやStarterプランですと、Zapが動くまでの所要時間がそれぞれ20分と15分です。
(したがって次回のレッスンで作る「メールアドレスの認証つき会員登録機能」の場合だと、メールを受信できるまでの時間も、その分開いてしまいます。

Adaloを使って個人開発するかつ、メールアドレスの認証つき会員登録機能をつける場合、理想は「Professionalプランの$49」に加入することになります。

他のサービスを使ったメールの送信方法も、次のセクションでご紹介していますが、こちらは迷惑メールフォルダに分類されてしまいます。
現状ですと、Zapierのほうがいいのではないかと筆者は考えています。


Adaloで、メールを送信するその他の方法

今回は、Zapierを使って、メールの送信をしますが、実は他のサービスを使っても、実装は可能です。

Sendinblue

SendGrid


(SendGridは、会員登録時に認証が必要で、情報を登録してもすぐには使えません)

上記のサービスでも可能ですが、デメリットが複数あります。

・受信したメールは、迷惑フォルダに分類されてしまう(回避方法が今のところ不明です)
・実装の難易度が、少し高い(Adalo の Custom Action を使う必要がある)


メリットは、

Zapier より、無料で送信できるメール数が多い

ことです。

個人開発で初心者の方は、まずZapierの使い方を知るためと、容量もZapierで十分であるため、バランスを考慮して、今回はZapierを採用しています。


実装する、メールアドレス認証の流れ(ご購入前に、ご確認ください)

この記事で採用している方法で、Adaloにメール認証機能を実装するには、

1. Adaloの有料プラン以上(Pro プラン or Bussiness プラン)
2. Zapierアカウント(無料プランでも実装可能ですが、機能などに制限があります。「Zapierの料金プラン」で、解説しています。)
3. Gmailアカウント(無料で作成可能。認証コードのメールをユーザーに送信するために、Gmailのメールアドレスを使います。)

が必要です。

クローンアプリ内でロジックは完成しています。この記事では、クローンアプリの全体のロジックの細かい解説は省き、Zapierを使ったメールの送信方法に、フォーカスしてます。


メールアドレス認証の流れ

こちらでは、教科書の購入の参考になるように、ざっくりとしたメールアドレス認証の流れを記載しています。
PC版でも流れは同じであるため、PC版での解説は省略いたします。

1. トップ画面

スクリーンショット 2020-10-08 0.20.37

2. 確認メールの送信

スクリーンショット 2020-10-08 18.01.36

ユーザーがこのページで、メールアドレスを入力。

3. メールアドレスの認証

スクリーンショット 2020-10-08 18.03.31

登録されたメールアドレスと認証コードが一致していれば、会員登録へ進めます。


スマホ メール認証機能 教科書特典 キャンバス画像

スマホ版のアプリでは、・お問い合わせフォーム・プロフィールページ・パスワード変更時の2段階認証などのスクリーンもございます。
不要な場合は適宜、スクリーンやリンクの削除、デザインの調整などして、アレンジしていただいければと思います。

スクリーンショット 2020-10-08 0.15.58

Pc メール認証機能 教科書特典 キャンバス画像

スクリーンショット 2020-10-08 0.16.12


この続きをみるには

この続き: 3,944文字 / 画像37枚

Adalo × Zapier × Gmail を使って、メール認証つき会員登録を実装しよう!

Yukari✨Adalo公式Expert. @AdaloCamp メンバー。 DEKAKERU × Facebook clone を作った人。#NoCodeCamp @AdaloHQ

1,700円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
スキありがとうございます^^ スキって響きがいい⛄️
11
Adalo公式エキスパート & Airtable Webflow Zapier Pory Dorik使い⛄ デザインできる人として認識されてます。「DEKAKERU」制作& NoCodeCampコンテストで1位獲得!アダロ公式「Make A Clone Challenge 」入賞
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。