おすすめ記事

おすすめ記事一覧

Adalo Resource・Googleを使ってサインイン(スクリーンとコンポーネントセクション)について

Adalo - Build Your Own No Code App

みなさんこんにちは。いかがお過ごしでしょうか。本日はノーコードツールAdaloのAdalo Resourceよりスクリーンとコンポーネントセクション内のGoogleを使ってサインインについて日本語で解説します。それでは早速いってみましょう!

Googleでサインイン

1, Adalo MarketplaceからSign in with Googleコンポーネントをインストールする

Adaloの左ツールバーのプラスボタンをクリックします。スクロールダウンして、Explore Marketplaceボタンをクリックします。マーケットプレイスで、「Sign in with Google component」を探してスクロールし、インストールボタンをクリックします。

2, 「Sign in with Google」コンポーネントをサインアップ画面やログイン画面に追加する

Adaloの左ツールバーのプラスボタンをクリックします。Sign in with Googleコンポーネントを検索します。コンポーネントをログイン画面にドラッグしてください(ログイン画面も同様にドラッグしてください)。以下の手順でコンポーネントを設定します。

3, OAuthの同意画面を作成する

 OAuthログインとはアプリにサインインするときにGoogleやFacebookなどすでにオープンしている別のアプリのアカウントを使う ことです。

1, https://console.developers.google.com/apis/credentials/consent に移動します。

2, プロジェクトを選択するか、(まだ持っていない場合は)新規プロジェクトを作成します。すでにプロジェクトを持っていない場合は、新しいプロジェクトを作成する必要があります。

3, アプリをInternal(組織内のユーザーのみ)にするか、External/Public(組織外のユーザー)にするかを選択します。外部を選択した場合、Googleがアプリを審査する必要があるというメッセージが表示されます。 カスタムロゴを同意画面に表示しない場合は、Googleがアプリを審査する必要はありません。

4, アプリの情報を入力します。

・アプリ名
・サポートEメールアドレス
・アプリのロゴ(オプション) – ロゴをアップロードした場合、アプリのレビューと検証が必要になります(Googleサインインを使用できるようになるまでに時間がかかります)。
・アプリのWebサイトのトップページ
・アプリの利用規約のURL
・アプリのプライバシーポリシーのURL
・認可されたドメイン(アプリのウェブサイトと同じドメインを含む
・開発者の連絡先

5, アプリのスコープを選択します。

・「スコープの追加と削除」ボタンをクリックします。

・最初の3つのスコープのみを選択します。

・下にスクロールして「Update」ボタンをクリックします。 その後、下にスクロールして「Save and Continue」ボタンをクリックします。

6, オプション情報の入力を省略します

7, Summary(要約)のステップで、下にスクロールしてBack to Dashboard(ダッシュボードに戻る)ボタンをクリックします。 “Verification not required “というメッセージが表示されるはずです。

4, ウェブクライアントIDを作成する

・https://console.developers.google.com/apis/credentials にアクセスします。
・「Create Credentials」ボタンをクリックします。
・「OAuth Client ID」を選択します。

・アプリケーションタイプとして「Web Application」を選択し、WebクライアントIDの内部名称を入力します。

・「Authorized Javascript Origins」には、2つのURIを入力します。”https://previewer.adalo.com “とあなたのAdaloアプリのドメインです。

・「作成」ボタンをクリックします。

・クライアントIDをコピーして、Googleでログインを選択した状態で、Adaloの左パネルに貼り付けてください。

5, iOSクライアントIDを作成する

・https://console.developers.google.com/apis/credentials にアクセスします。
・「Create Credentials」ボタンをクリックします。
・「OAuth Client ID」を選択します。

アプリケーションタイプとしてiOSを選択し、iOSバンドルIDを入力して、「作成」をクリックします(まだiOSバンドルを作成していない場合は、こちらのヘルプを参照してください。

・クライアントIDをコピーして、Googleでログインを選択しているときに、Adaloの左パネルに貼り付けてください。

App Storeのガイドラインにより、「Sign In with Apple」コンポーネントを追加しないと、アプリが拒否されてしまいます。

6, AndroidクライアントIDを作成する

・https://console.developers.google.com/apis/credentials にアクセスします。
・「Create Credentials」ボタンをクリックします。
・OAuth Client IDオプションを選択し、ドロップダウンからAndroidを選択します。

・名前にはアプリの名前を入力することができます。
・パッケージ名には、Android APKのセットアップ時に作成したパブリッシュ設定のバンドルIDを入力します(WebクライアントIDを作成していれば、WebおよびPWAでテストすることができます。

指紋は以下のように入力します。FF:71:AA:98:E9:5F:7A:66:E9:86:AC:C5:33:F7:A7:F1:6B:68:E7:C6
・その後、「作成」をクリックします。なお、 これをAdaloに貼り付ける必要はなく、Google Sign InをAndroidで動作させるために作成しておく必要 があります。

7, Sign in with Googleコンポーネントの設定完了

組織内専用のアプリを開発している場合は、組織のメールアドレスのドメインを入力することで、組織内の人だけにログインを制限することができます。ボタン自体の外観をカスタマイズできます。ユーザーがボタンをクリックすると、アプリの新規アカウントにサインアップするか、既存のアカウントにログインします。ユーザーをアプリのホーム画面にリンクさせるなど、ボタンに追加のアクションを加えることができます。

まとめ

いかがだったでしょうか。OAuthログインに関してはノーコードツールBubbleでもご紹介しましたので、多くの方が概要を理解されたうえでこの記事にお読みになったかと思います。そのうえでAdalo特有の設定方法を学んでいただければ幸いです。それではまた別の記事でお会いしましょう。See You Soon!

 

 

 

 

 

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. SaaSロゴ

    Landbot

  2. 記事作成

    BubbleのAgencyプランとテンプレート・プラグイン販売について解説!!

  3. 記事作成

    Bubble・データを表示する、ダイナミックな式を構築する

  4. Adalo Resource・フォームとトグル(スクリーンとコンポーネントセクション)について

  5. Getresponse

  6. SaaSロゴ

    Webflow(CMS)

  7. 記事作成

    Bubble・データを保存する&データタブ

  8. 記事作成

    Bubbleのバージョン管理とデータベースのコピー・バックアップを解説してみた!!

  9. 記事画像

    Glide、Adalo、bubbleとは?アプリケーション開発向けノーコードツール3つを比較

人気記事

  1. topimage
  2. 記事画像
  3. top_image
  4. 特集記事

おすすめ記事一覧

  1. 記事画像
  2. 記事画像
  3. 記事画像
  4. Bubble
  5. Productivity
PAGE TOP