おすすめ記事

おすすめ記事一覧

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!

 

 

 

 

 

岡澤克信

岡澤克信

自動車評論家
主に自動車業界のDXというテーマで自動車業界で使用され
ているウェブサービスを紹介







関連記事

  1. Adalo Resource・ワンタイムカードペイメントとサブスクペイメント(Stripe)(スクリ…

  2. 記事画像

    Web製作が誰でもできるノーコードツール8選をご紹介

  3. 特集記事

    ノーコードで爆速モバイルアプリ作成!オススメツールを紹介

  4. 記事作成

    Bubble・プラグインエディタ&プラグインの一般的な設定について

  5. 記事作成

    Bubbleの主なインターフェースセクションと主要な原則

  6. 記事作成

    Bubbleの専用クラスタについて解説!!

  7. 記事作成

    Bubble・Slack(スラック)&Box(ボックス)

  8. 記事作成

    Bubble・API使用ケース&APIを使う

  9. 記事作成

    Bubbleアプリに独自ドメイン名を使用する方法を解説してみた!!

人気記事

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

おすすめ記事一覧

  1. maidoh concept picture
  2. 勤怠管理
  3. Productivity
  4. 記事画像
  5. 記事画像
PAGE TOP