こんにちは。ファンリピートの鳴海です。
エンジニアとしてファンリピートで開発業務を担当しております。
ノーコードを触るのは初めてだったのですが、当社のチュートリアルを学習してから、基本的な使い方や新しく学びえたことがありましたので、初心者の方や興味がある方は是非やってみてください！
＼ 年末までに限った無料特典 ／
貴社のシステム開発・アプリ開発を爆速で進めるための
【毎月先着２社限定】デモアプリ構築・無料依頼フォーム
【当社では、こんなデモアプリがすぐに作れます】
- 貴社で「まずつくってみたい」試作品アプリの構築を毎月先着２社限定で無料で承っております
- 社内の管理システムからtoB, toCのWebサービスまで幅広くご支援可能です
- ご興味のある方は下記のフォームよりお申し込みください
bubbleとは？
URL:https://bubble.io/blog/content/images/2020/09/Logo-with-clearspace.png
コードを書かずにアプリを作れる
一般的なWebサービスやWebアプリの開発では、プログラミングコードを書くといったイメージがありますが、ノーコードツールBubbleでは名前の通り、ノーコードで開発できるサービスとなっています。
また、クラウドプラットフォームというサイト上でアプリケーションを構築できるので、インターネットがあればいつでもどこでもアクセスできるため、チームで連携してアプリを作れます。
bubbleについての詳細は「ノーコードツール「Bubble」って？特徴・料金・使い方を解説」という記事でも解説しておりますので、気になる方は一度ご覧になってみてください。
他のノーコードツールに比べての違い
ノーコードツールの中でもBubbleでは、様々なツールがあるのですが、その中でプラグインの導入に限らず、プログラミングコードを逆に書けるといったカスタマイズ性やAPIを介してサービスと連携できるといった特徴があります。
bubbleの使用事例について
Joshua_Teirnanさんという方が開発した「リモートワーク型求人情報サイト」
URL：https://weworkremotely.com/
Jonathan Timiankoさんという方が開発した「ボード所有者とボードドック（船着き場）のマッチングプラットフォーム」
agurejonさんという方が開発した「7000以上のマーケティングツールを集めたサイト」
bubbleの無料や有料プランについて
他にも学生や非営利団体向けの割引の提供や受託開発会社専用のプランといった料金に関しては、様々な特典やプランがあります。
OAuthとは？
OAuthとはTwitterやMicrosoftなどにある認証システムです。
OAuthはアプリを連動するもの
通常、WEBアプリにログインする際にはメールアドレスやユーザー名、パスワードを入力後、アカウント認証がされ、アクセスできますが、OAuth認証ではそういった入力を省けます。
なので、複数のWebサービスを連携して動作させるために使われる仕組みとなります。
「登録証明書」を持ったコンシューマーは、ユーザーの操作の有無には関係なく、必要に応じてカギの申請ができます。
画面例でいうとTwitterやMicrosoftなどで「アプリケーションが、あなたのアカウントへの接続を要求しています。」といったのを見かけたことはありませんか？
そちらを許可すると「利用許可証」というのが発行され、Webサイト間でのログインを省けます。
つまり、コンシューマーになるアプリケーションが、ユーザーの意図とは異なる操作をサービスプロバイダーに対して行う可能性もあるということです。
なのでWebサービスを利用するとき、OAuthを求められたら、むやみに「許可」してはいけません。
毎回oAuthを求められたら必ずどのようなサービスで、許可後にどのようなサービスが提供されるかなど確認した上で、行うことが大切です。
Azure Active Directoryとは？
Azure Active DirectoryとはMicrosoft社が提供しているクラウド型のID・アクセスを管理できるサービスです。
URL:https://learn.microsoft.com/ja-jp/azure/architecture/icons/
Azure Active Directoryは認証アプリです！
一回だけアクセス許可するだけで複数サービスの利用ができるSSO（シングルサインオン）ができます。
本来であれば、それぞれのサービスごとにアクセス許可をし、認証する必要があります。
ですが、SSOが搭載されているAzure Active Directoryでは、一回のログインによるアカウント情報の紐づけにより、可能になっています。
Azure Active Directoryの導入メリット
クラウドサービスとして提供がされているので、IT部門の方やアカウント管理する方の負担が減ります。
アナログ型だと管理者がパスワードのリセットやメールアドレスの設定などしなくてはならないのですが、Azure Active Directoryにはユーザーでパスワードリセットができるので、エンドユーザーセルフサービスという機能が備わっています。
そのため、デバイスを社内でしか管理や利用できないといったルールの必要性もないため、ユーザーがアクセスする上での柔軟性や利便性を高めることが可能です。
他のワークスペースを多方面に利用したりすると、サイバー攻撃によるリスクを抑えることにも繋がります。
Azure Active Directoryの無料プラン：Free
FreeはMicrosoft Azure、Dynamics 365、Microsoft 365といった各種のクラウドサービスの月額サービスがあります。
単体で契約するのではなくこれらのクラウドサービスを契約すると自動的に使えるようになるプランとなっています。
そのため、Azure Active Directory単体での料金の請求はありません。
Azure ADの有料プラン
BubbleでAzure Active Directoryを例にOAuth認証してみよう！
それでは実際にノーコードツールBubbleを使ってみて、Azure Active DirectoryでのoAuth認証を試してみましょう。
手順
Bubble側で準備しよう。
Bubble側でアプリを登録する。
初めにこちらのページにアクセスして、Get started for freeからアカウント作成しましょう。
メールアドレスやパスワードを打ち込み、Start buidlingをクリックすると画像のようなポップアップが表示されるので、Build→Nextボタン→other→Completeと進めてください。
そうすると登録したメールアドレスにメールが届くので、そちらをクリックしてあげてください。
リンクをクリックすると、Start buildingのボタンがあるので、クリックしてください。
トップページのCreate a new appをクリックし、Name your appで名前を決めて、他の項目を入力し、Create appをクリックすると編集画面に飛びます。
アシスタントというのが左側に表示されるので、Skip application assistantをクリックしてください。これでアプリの登録が完了です。
プラグインをインストールする。
左タブのPluginsをクリックすると、Add pluginsというボタンがあるのでそちらをクリックし、Search for a plugin…にoutlookと入力し、インストールをクリックします。
インストールが完了しましたら、プラグインのインストールは完了です。
Designタブでの準備
signup_loginページを作成したいので、左上のPage:indexをクリックし、Add a new page…をクリックしてください。
create a new pageというポップアップが表示されるので、Page nameにsignup_pageと入力し、CREATEをクリックします。
Visual elementsからButtonをドラッグし、エレメント名やplaceholderはms signup/loginなど任意の内容に変更が終わったら、Start/Edit workflowをクリックし、WorkFlowを設定します。
Search for an action…にSignup/login with a social networkと入力し、そちらを選択し、OAuth providerにOutlookを選択します。
step2では、ログイン後は別ページに飛ばしたいので、navigationからgo to pageを選択し、新しくmypageというページを作成し、Destinationでmypageを選択します。
mypageでは、メールアドレスを表示したいので、テキストエレメントを配置し、Insert Dynamic dataからCurrent User’s emaiと設定します。
※メールアドレスが長すぎて、表示されないといった可能性が後々出てくるかもしれないので、エレメントのサイズを大きくしておいてあげてください。
Azure Active Directoryの設定
アプリを登録する。
Microsoft 365を既に契約済み、もしくは無料プランであれば無料で設定できます。
無料プランについては、一か月の無料試用期間があります。また、契約する場合はクレジットカードでの契約が必要です。
※また今回は企業や学校のMicrosoft365を使用すると、それぞれの団体が管理権限を持つためoAuth認証で引っかかってしまう可能性があるので、環境については所属する組織や個人の環境で設定可能なものをご利用ください。
こちらのサイトで、アカウント作成してください。
左タブからAzure Active Directoryをクリックします。
追加からアプリの登録をクリックします。
アプリ名を入力し、アカウントの種類については用途に合わせて選択し、登録ボタンをクリック後に「クライアントの資格情報」から証明書またはシークレットの追加をクリックしてください。
新しいクライアントシークレット をクリックし、クライアントシークレットの説明を適当に入力し、テストなので有効期限は特に変えず、追加ボタンをクリックします。
これでAzure Active Directoryの設定は完了です。
BubbleプラグインへのURLの設定
Azure Active Directoryの値をコピー
アプリケーション (クライアント) IDをコピーします。
Bubbleプラグインに貼り付け
Bubbleに戻り、PluginsのOutlookのページを開きます。
App SecretとApp Secret – dev.には値を貼り付けし、App id/Api keyとApp id/Api keyt – dev.にはアプリケーションIDを貼り付けします。
リダイレクトURIを設定する
Azure Active Directoryの画面に戻り、リダイレクトURLを追加するをクリックし、プラットフォームの追加をクリックするとプラットフォームの構成が表示されるので、Webを選択します。
リダイレクトURLにBubbleのOutlookプラグインにあるURLをコピペし終わったら、もう一つversion-testのURLも追加し、保存をクリックします。
例：https://アプリ名.bubbleapps.io/version-test/api/1.1/oauth_redirect
リダイレクトURLにBubbleのOutlookプラグインにあるチェックボックスにチェックを入れることを忘れないようにしてください。
お疲れ様です。これで設定は完了です。
ログインしてみた
signup/loginページで、previewをクリックするとversion-testのテストページが表示されるので、作成したボタンをクリックすると自動的にAzure Adの画面に遷移し、ログインが完了されると、mypageに遷移され、メールアドレスが表示されていると思います。
※もしログインが出来なかった方へ
APIアクセス許可でデータの取得が無効になっている可能性があります。
API のアクセス許可を開きます。
Microsoft Graphを開き、OpenId アクセス許可で4つの項目にチェックボックスを入れて、アクセス許可の更新をクリックすると、委任状態となるので、リダイレクトURLの設定のページに戻ります。
そしてbubbleのプレビューからボタンを押すと許可するような文言が出てくるので、そちらを許可して、進んでください。
bubbleでOAuthは可能！
今回は、BubbleでAzure Active Directoryを使ったOAuth認証を実装してみました。ログイン、画面遷移され、情報がしっかりと取得されているところを見ると何故か嬉しくなりますよね。
BubbleでOAuth認証することの今後の可能性としては、BubbleではAPIを使えるという特徴があるので、今後API連携を伴ったアプリ開発で、ログイン認証をOAuthで行うことで、脆弱性に対して、セキュリティ対策が見込まれると思います。
以上、今回はOAuth認証についてでした。
メンバーを募集中！
当社ではお客様に向き合い、お客様の事業成功にコミットをできる仲間を募集しています。
正社員、インターンから副業まで、幅広く採用活動を進めております。プロジェクトマネージャーやシステムエンジニアとして当社のシステム開発業務に携わってみませんか？
当社と共に、業界トップを目指して挑戦したい方は未経験者から経験者まで広く募集しているので、ぜひエントリーをお待ちしています。
