# Googleでサインイン *スキルレベル: エキスパート* ## 開始前に * [画面とコンポーネント](https://help.adalo.com/ja/component-basics)、および[アクション](https://help.adalo.com/ja/action-basics/action-basics)について知っておくこと。 * [Google Developerの設定](https://help.adalo.com/ja/testing-your-app/publishing-to-the-google-play-store/create-your-google-developer-account)が完了していること。 * この手順は、iOSおよびAndroidのビルドとリストがアプリストアにすでに設定されていると、Bundle IDやその他の情報が必要になるため、はるかに簡単になります。iOSの場合は[こちら](https://help.adalo.com/ja/testing-your-app/publishing-to-the-apple-app-store)、Androidの場合は[こちら](https://help.adalo.com/ja/testing-your-app/publishing-to-the-google-play-store)を参照してください。 * ネイティブまたはXano外部コレクションを使用するには有料プランが必要になる場合があります。 ## 手順 {% tabs %} {% tab title="ビルダーの設定" %} #### マーケットプレイスからコンポーネントをインストール **1.)** Adaloの左ツールバーのプラスボタンをクリックします。 **2.)** スクロールして**マーケットプレイスを探索**ボタンをクリックします。 **3.)** マーケットプレイスで**Googleでサインイン**コンポーネントを見つけて**インストール**をクリックします。 #### サインアップとログイン画面にコンポーネントを追加 **4.)** Adaloの左ツールバーのプラスボタンをクリックします。 **5.)** Googleでサインインコンポーネントを検索します。 **6.)** コンポーネントをサインイン画面にドラッグします（ログイン画面にも同様に行います）。設定を完了するのは数分後です。 {% endtab %} {% tab title="Google Devの設定" %} {% endtab %} {% tab title="undefined" %} #### OAuth Consent Screenを作成 {% endtab %} {% tab title="undefined" %} **7.)** に移動します。 {% endtab %} {% tab title="undefined" %} **8.)** プロジェクトを選択するか、新しいプロジェクトを作成します（まだプロジェクトがない場合）。 {% endtab %} {% tab title="undefined" %} プロジェクトがまだない場合は新しいプロジェクトを作成する必要があります {% endtab %} {% tab title="undefined" %} **9.)** アプリが**内部**（組織内の人向け）か**外部/一般**（組織外のユーザー向け）かを選択します。 {% endtab %} {% tab title="undefined" %} {% hint style="info" %} 外部を選択すると、Googleがアプリを審査する必要があるというメッセージが表示されます。カスタムロゴを同意画面に含めない場合、Googleはアプリを審査する必要はありません。 {% endhint %} {% endtab %} {% tab title="undefined" %} {% endtab %} {% tab title="undefined" %} **10.)** アプリの情報を入力し、**続行**をクリックします。 {% endtab %} {% tab title="undefined" %} * アプリ名 * サポートメールアドレス * アプリのロゴ（オプション）- 🚨ロゴをアップロードするとアプリが審査および承認される必要があります（Googleサインインを使用できるようになるまでに時間がかかります）🚨 * アプリのウェブサイトのホームページ * アプリの利用規約のURL * アプリのプライバシーポリシーのURL * 認可されたドメイン（アプリのウェブサイトと同じドメインを含める） * 開発者連絡先情報 {% endtab %} {% tab title="undefined" %} **11.)** **スコープの追加または削除**ボタンをクリックし、最初の3つのスコープを選択します。 ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-0394231dafde29a77dac73dbc1ae59a2147c89a6%2FScreenshot%202020-10-01%20at%209.42.36%20PM.png?alt=media) {% endtab %} {% tab title="undefined" %} {% endtab %} {% tab title="undefined" %} **12.)** スクロールして **Update** ボタンをクリックします。その後、スクロールして **Save and Continue** ボタンをクリックします。 {% endtab %} {% tab title="undefined" %} **13.)** 任意の情報を入力せずにスキップします。 {% endtab %} {% tab title="undefined" %} **14.)** Summary ステップで、スクロールして **Back to Dashboard** ボタンをクリックします。"Verification not required" というメッセージが表示されるはずです。 {% endtab %} {% tab title="undefined" %} {% hint style="info" %} デフォルトでは、同意画面はテストモードになっています。このダッシュボードで **Publish** ボタンをクリックするまで、Google Developer アカウントとテスターだけが Google でサインインを使用できます。いつでもテストと本番の間を切り替えることができます。 {% endhint %} {% endtab %} {% tab title="undefined" %} #### Web クライアント ID を作成する {% endtab %} {% tab title="undefined" %} **15.)** に移動します。 {% endtab %} {% tab title="undefined" %} **16.)** **Create Credentials** ボタンをクリックします。 {% endtab %} {% tab title="undefined" %} **17.)** **OAuth Client ID** オプションを選択します。 {% endtab %} {% tab title="undefined" %} {% endtab %} {% tab title="undefined" %} **18.)** アプリケーションタイプとして **Web Application** を選択し、Web クライアント ID の内部名を入力します（任意の名前を付けることができます）。 {% endtab %} {% tab title="undefined" %} **19.)** 認可された JavaScript オリジンに、2つの URI を入力します: "" および Adalo アプリのカスタム Web ドメイン（Web アプリとしてアクセス可能な場合）、その後 **Create** をクリックします。 {% endtab %} {% tab title="undefined" %} {% endtab %} {% tab title="undefined" %} **20.)** クライアント ID をコピーして、Google Sign-in コンポーネントのクライアント ID 入力欄に貼り付けます。 {% endtab %} {% tab title="undefined" %} {% endtab %} {% tab title="undefined" %} #### iOS クライアント ID を作成する {% endtab %} {% tab title="undefined" %} **21.)** [https://console.developers.google.com/apis/credential](https://console.developers.google.com/apis/credentials) に移動します。 {% endtab %} {% tab title="undefined" %} **22.)** **Create Credentials** ボタンをクリックし、**OAuth Client ID** オプションを選択します。 {% endtab %} {% tab title="undefined" %} {% endtab %} {% tab title="undefined" %} **23.)** アプリケーションタイプとして **iOS** を選択し、iOS バンドル ID を入力して **Create** をクリックします（まだ iOS バンドルを作成していない場合は、[こちらのヘルプ](https://help.adalo.com/testing-your-app/publishing-to-the-apple-app-store) を参照してください — Web クライアント ID ステップを完了していれば、Web および PWA でテストできます）。 {% endtab %} {% tab title="undefined" %} {% endtab %} {% tab title="undefined" %} **24.)** クライアント ID をコピーして、Sign in with Google コンポーネントを選択したときに Adalo の左パネルに貼り付けます。 {% endtab %} {% tab title="undefined" %} {% endtab %} {% tab title="undefined" %} **25.)** **🚨注意🚨**: アプリストアのガイドラインにより、'Sign In with Apple' コンポーネントを追加する必要があります。[こちらから'Sign In with Apple' を設定してください。](https://help.adalo.com/component-basics/marketplace-components/sign-in-with-apple) {% endtab %} {% tab title="undefined" %} #### Android クライアント ID を作成する {% endtab %} {% tab title="undefined" %} **26.)** に移動します。 {% endtab %} {% tab title="undefined" %} **27.)** **Credentials** ページで **Create Credentials** ボタンをクリックし、**OAuth Client ID** オプションを選択します。 {% endtab %} {% tab title="undefined" %} {% endtab %} {% tab title="undefined" %} **28.)** **Application type** ドロップダウンメニューから **Android** を選択し、**Name** フィールドにアプリの名前を入力します。 {% endtab %} {% tab title="undefined" %} **29.)** パッケージ名には、Android APK のセットアップ時に作成したパブリッシュ設定からバンドル ID を入力します（まだ行っていない場合は、Web クライアント ID を作成している場合は Web および PWA でテストできます。まだ行っていない場合は、[こちらのAndroidアプリの作成ヘルプリンク](https://help.adalo.com/testing-your-app/publishing-to-the-google-play-store)を参照してください）。 {% endtab %} {% tab title="undefined" %} **30.)** Fingerprint は、アプリのビルドによって異なります。各ビルドタイプの手順については、以下の表を参照してください。 {% endtab %} {% tab title="undefined" %} {% tabs %} {% tab title="AAB ファイル" %} *発生頻度: 最も一般的* Adalo App のビルドが次の場合にこの方法を使用します: * AAB (.aab) ファイル または * Adalo APK で Google App Signing にオプトインしている場合（[確認方法](https://help.adalo.com/ja/glossary#play-app-signing)） **1.)** [Play ストア コンソール](https://play.google.com/console) に移動し、アプリを選択します。 **2.)** 左メニューの **Setup** ドロップダウンメニューから **App Integrity** オプションを選択します。 ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-b8385ac811342f965737d1e6fa7555e043974842%2FScreen%20Shot%202021-10-12%20at%2012.39.08%20PM%20\(1\).png?alt=media) **3.)** **SHA-1** Fingerprint をコピーし、Android クライアント ID のセットアップの **Fingerprint** フィールドに貼り付けます。 {% endtab %} {% tab title="Adalo App からの APK ファイル" %} *発生頻度: かなり一般的* Adalo App が次の場合にこの方法を使用します: * APK (.apk) ファイルであり、Play App Signing に登録されていない場合（[確認方法](https://help.adalo.com/ja/glossary#play-app-signing)） * APK が Play App Signing に登録されている場合は、代わりに AAB プロセスタブを使用してください。 `FF:71:AA:98:E9:5F:7A:66:E9:86:AC:C5:33:F7:A7:F1:6B:68:E7:C6` {% endtab %} {% tab title="他所からの APK ファイル" %} *発生頻度: 非常に稀* Adalo アプリを APK または AAB ビルドで Play ストアに公開する場合で、Adalo で作成されていない場合（[Play App Signing](https://help.adalo.com/ja/glossary#play-app-signing) の状態は関係ありません）、キーストアファイルをダウンロードする必要があります。サポートが必要な場合は、[Adalo サポートに連絡](https://info.adalo.com/submit-a-support-ticket?subject=Google%20Sign-in%20-%20Need%20SHA-1%20Key%20from%20Keystore%20File\&content=I%20am%20bringing%20a%20previously%20non%20Adalo%20app%20to%20publish%20with%20Adalo.%20I%20need%20this%20key%20to%20utilize%20the%20Google%20Sign%20in%20component.%20%0A%0AFILL%20IN%20YOUR%20DETAILS%20HERE) してください。 {% endtab %} {% endtabs %} {% endtab %} {% tab title="undefined" %} **31.)** その後、**Create** をクリックします。Adalo に貼り付ける必要はありませんが、Android で Google Sign In が機能するためには作成しておく必要があります。 {% endtab %} {% tab title="終了処理" %} #### Sign in with Googleコンポーネントの設定を完了する * 組織内でのみ使用するアプリを開発している場合は、組織のメールアドレスのドメインを入力して、ログインを組織内の人物に制限することができます。 * ボタン自体の外観をカスタマイズすることができます。 * ユーザーがボタンをクリックすると、アプリに新しいアカウントが作成されるか、既存のアカウントにログインします。ユーザーをアプリのホーム画面にリンクさせるなど、ボタンに追加のアクションを追加することもできます。 {% endtab %} {% endtabs %} ## もっと詳しく Xano External Collectionsを使用している場合は、上記の手順を完了した後、[Xano+Google Sign In Help Doc](https://help.adalo.com/ja/integrations/xano/google-sign-in-with-xano-database)の手順に従ってください。 ## ヘルプ この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿にこの記事へのリンクを貼り付けることも忘れずに！ チュートリアルやヘルプドキュメントのリクエストがありますか？[お知らせください！](https://ideas.adalo.com/tutorial-requests)