概要

このラボでは、Identity Platform を使用してアプリケーションに認証を追加する方法を説明します。認証によりユーザーを識別し、ユーザーが行えるアクションの範囲を決定します。詳しくは、認証の概要に関するドキュメントをご確認ください。

Identity Platform では、ユーザーの登録とログインを管理するカスタマイズ可能なドロップイン認証サービスを利用できます。管理 SDK（Node.js、Java、Python など）のほか、さまざまなアプリ SDK（Android、iOS、ウェブ）に対応しているため、開発作業や管理作業が簡素化されます。Identity Platform の詳細については、Identity Platform のウェブサイトをご覧ください。

このラボでは、オンライン クイズ アプリケーションを使用します。このアプリケーションに Identity Platform の認証を追加して、メールアドレスとパスワードのシンプルな認証情報を使用するように構成します。これにより、ユーザーはクイズを行う前に登録とログインが必要になります。

目標

このラボでは、次のタスクを行います。

• クライアント側のウェブ アプリケーションに Identity Platform の構成を追加する
• Java のコードを記述して Identity Platform 認証をクライアント側のウェブ アプリケーションと統合する

設定と要件

各ラボでは、新しい Google Cloud プロジェクトとリソースセットを一定時間無料で利用できます。

1. Qwiklabs には、必ずシークレット ウィンドウでログインしてください。

2. ラボのアクセス時間（例: ）に注意し、時間内に完了できるよう注意してください。

3. 準備が整ったら をクリックします。

4. ラボの認証情報をメモしておきますこの情報は、Google Cloud Console にログインする際に使用します。

5. [Google Console を開く] をクリックします。

6. [別のアカウントを使用] をクリックし、このラボの認証情報をコピーしてプロンプトに貼り付けます。

7. 利用規約に同意し、再設定用のリソースページをスキップします。

Google Cloud Shell の有効化

Google Cloud Shell は、開発ツールと一緒に読み込まれる仮想マシンです。5 GB の永続ホーム ディレクトリが用意されており、Google Cloud で稼働します。

Google Cloud Shell を使用すると、コマンドラインで Google Cloud リソースにアクセスできます。

1. Google Cloud コンソールで、右上のツールバーにある [Cloud Shell をアクティブにする] ボタンをクリックします。

   

2. [続行] をクリックします。

環境がプロビジョニングされ、接続されるまでしばらく待ちます。接続した時点で認証が完了しており、プロジェクトに各自のプロジェクト ID が設定されます。次に例を示します。

gcloud は Google Cloud のコマンドライン ツールです。このツールは、Cloud Shell にプリインストールされており、タブ補完がサポートされています。

• 次のコマンドを使用すると、有効なアカウント名を一覧表示できます。

gcloud auth list

出力:

Credentialed accounts: - @.com (active)

出力例:

Credentialed accounts: - google1623327_student@qwiklabs.net

• 次のコマンドを使用すると、プロジェクト ID を一覧表示できます。

gcloud config list project

出力:

[core] project =

出力例:

[core] project = qwiklabs-gcp-44776a13dea667a6 注: gcloud ドキュメントの全文については、 gcloud CLI の概要ガイド をご覧ください。

タスク 1. ケーススタディ用アプリケーションを準備する

このタスクでは、クイズ アプリケーションのクローンを作成し、構成して実行します。

Cloud Shell でソースコードのクローンを作成する

1. このラボのリポジトリのクローンを作成するには、次のコマンドを入力します。

git clone --depth=1 https://github.com/GoogleCloudPlatform/training-data-analyst

2. 作業ディレクトリへのソフトリンクを作成します。

ln -s ~/training-data-analyst/courses/developingapps/v1.3/java/firebase ~/firebase

ケーススタディ用アプリケーションを構成、実行する

1. このラボのサンプル ファイルが含まれているディレクトリに移動します。

   cd ~/firebase/start

2. アプリケーションの依存関係を構成します。

   . prepare_environment.sh

   このスクリプト ファイルを実行すると、以下の処理が行われます。

   • App Engine アプリケーションを作成する。
   • gs://[Project-ID]-media という名前の Cloud Storage バケットを作成する。
   • GCLOUD_PROJECT と GCLOUD_BUCKET の 2 つの環境変数をエクスポートする。
   • mvn clean install を実行する。
   • Cloud Datastore にエンティティを作成する。
   • Google Cloud Platform のプロジェクト ID を出力する。

   アプリケーション依存関係が構成されると、次の出力が表示されます。

   [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 11.775 s [INFO] Finished at: 2021-12-06T15:39:11Z [INFO] ------------------------------------------------------------------------

3. アプリケーションを実行します。

   mvn spring-boot:run

   アプリケーションが開始すると、次の例のような行が出力の最後に表示されます。

   15:40:08.312 [restartedMain] INFO c.g.training.appdev.QuizApplication - Started QuizApplication in 7.767 seconds (JVM running for 9.86)

クイズ アプリケーションを開始する

• Cloud Shell でウェブでプレビューアイコン（） > [ポート 8080 でプレビュー] をクリックして、クイズ アプリケーションをプレビューします。

このラボの後半で Cloud Shell のウェブ プレビューのドメイン（8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-europe-west1-ctgq.cloudshell.dev のような形式）が必要となるため、このウィンドウは開いたままにします。

タスク 2. ケーススタディ用のアプリケーション　コードを確認する

このタスクでは、ケーススタディ用のアプリケーション　コードを確認します。Cloud Shell にインストールされている nano や vim などの shell エディタや、Cloud Shell コードエディタを使用できます。

このラボでは、Cloud Shell コードエディタを使用してクイズのアプリケーション コードを確認します。

Cloud Shell テキスト エディタを起動する

1. Cloud Shell で、上部のリボンにある [エディタを開く] アイコンをクリックします。必要に応じて、[新しいウィンドウで開く] をクリックします。

   ブラウザの別のタブで Cloud Shell とコードエディタが起動します。

2. エディタの左側にあるファイル ブラウザパネルを使用して、/firebase/start フォルダに移動します。

3. firebase フォルダに end フォルダがあることを確認します。この end フォルダには start フォルダと同じファイルが含まれていますが、end フォルダの各ファイルには、このラボを実行するための完全なコードが記述されています。

クライアント アプリケーションを確認する

1. .../src/main/resources/static/client フォルダで index.html を選択します。static フォルダの index.html とは異なりますので注意してください。

   このファイルは AngularJS SPA の 1 ページです。アプリケーションのライブラリとコード用の <script> </script> タグと、SPA が動的に出力内容をレンダリングするマークアップが含まれます。

2. .../src/main/resources/static/client/app/auth/ フォルダで qiq-login-template.html を選択します。

   このファイルには、ログイン コンポーネント用の AngularJS のテンプレートが含まれます。

   また、いくつかのテキストボックスと 1 つのボタンも含まれています。ボタンにはイベント ハンドラが設定されており、クリック時にコードが実行されます。

3. qiq-login.js を選択します。

   このファイルには、AngularJS のコンポーネントが含まれています。このコンポーネントにより、ユーザーはアプリケーションにログインしたり、登録ページに移動したりできるようになります。

タスク 3. Identity Platform の認証を構成する

このタスクでは、Cloud プロジェクトに対して課金が有効になっていることを確認します。次に、メールアドレスとパスワードを使用してユーザーがログインできるように Identity Platform を構成します。その後、クイズ アプリケーションへのログインに使用するユーザーを作成します。

課金が有効になっていることを確認する

1. Google Cloud コンソールのナビゲーション メニュー（）で、[お支払い] をクリックします。

2. 請求先アカウントがプロジェクトにリンクされていることを確認します。「請求先アカウント「Qwiklabs Production gcpd xx」はこのプロジェクトにリンクされています」というメッセージが表示されます。

Identity Platform のメールアドレスとパスワードを構成する

1. Google Cloud コンソールのナビゲーション メニュー（）で、[ID プラットフォーム] をクリックします。

2. [IDENTITY PLATFORM を有効化] をクリックします。

   注: 「このサイトを離れますか？」というポップアップ メッセージが表示された場合、[離れる] をクリックします。

   Cloud コンソールに Identity Platform のページが表示されます。

   

3. [プロバイダを追加] をクリックします。

4. [ログイン方法] ウィンドウの [プロバイダの選択] で、[メール / パスワード] を選択します。

5. [有効] をクリックします。

6. [承認済みドメイン] ペインで、[ドメインの追加] をクリックします。

7. 実行中のクイズ アプリケーションに戻り、ドメインをコピーします（8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-europe-west1-ctgq.cloudshell.dev のような形式）。

8. [保存] をクリックします。

9. [新しい ID プロバイダ] ウィンドウで [保存] をクリックします。

   [保存] ボタンが表示されるまでスクロールが必要になる場合があります。

ユーザーを追加する

1. [ID プラットフォーム] ペインで、[ユーザー] をクリックします。

2. [ユーザーを追加] をクリックします。

3. [ユーザーを追加] ダイアログ ボックスで、次のように指定します。

   メール	user1@example.com
   パスワード	abc123!

4. [追加] をクリックします。

タスク 4. クライアントサイド ウェブ アプリケーションを Identity Platform と統合する

このタスクでは、Identity Platform の構成をクライアントサイド ウェブ アプリケーションに適用します。

1. ナビゲーション パネルで、[プロバイダ] をクリックします。

2. [アプリケーション設定の詳細] をクリックします。

3. [アプリケーションの構成] ダイアログ ボックスで、Identity Platform のマークアップをコピーします。

   

4. [閉じる] をクリックします。

5. Cloud Shell コードエディタで、.../src/main/resources/static/client/ にある index.html ファイルを開きます。

6. ページの下部にある <script></script> タグの直前に、構成のマークアップを貼り付けます。

7. index.html ファイルを保存します。

8. Cloud Shell で、Ctrl+C キーを押してアプリケーションを停止し、次のコマンドをもう一度入力してアプリケーションを再起動します。

mvn spring-boot:run

タスク 5. アプリケーションを実行する

このタスクでは、前のステップで作成した Identity Platform の認証情報を使用してクイズ アプリケーションにログインできることを確認します。その後、クイズ アプリケーションに新しいユーザーを登録し、認証情報が Identity Platform に追加されることを確認します。

1. クイズ アプリケーションに戻り、ブラウザを更新します。

2. ナビゲーション バーで、[Take Test] をクリックします。

3. ナビゲーション バーで、[GCP]、[People]、[Places] のいずれかをクリックします。

   注: ログインしていない場合は、テストを受けることはできません。

4. ナビゲーション バーで、次の無効な認証情報を入力します。

   メール	user2@example.com
   パスワード	abcd1234$

5. [Login] をクリックします。

   注: ユーザーが登録されていないため、ログインに失敗します。

6. 前のタスクで作成した次の認証情報を入力します。

   メール	user1@example.com
   パスワード	abc123!

7. [Login] をクリックします。

   ユーザーのメールアドレスがナビゲーション バーに表示され、最初の質問が提示されます。

   注: ログインできない場合は、パスワードが正しく構成されていない可能性があります。[ID プラットフォーム] の [ユーザー] ページに戻り、user1@example.com を削除してから正しいパスワードで user1@example.com を追加します。

8. ナビゲーション バーで、[Logout] をクリックします。

9. [Register] のリンクをクリックします。

10. 新しいフォームで、次の認証情報を入力します。

    メール	user2@example.com
    パスワード	abcd1234$

11. [Register] をクリックします。

    複雑なパスワードを使用する必要があります。要件を満たすパスワードを入力すると、ログインが完了し、GCP のクイズにリダイレクトされます。

    問題に解答し、解答を送信できます。

12. ナビゲーション バーで、[Logout] をクリックします。

    注: ログアウトされ、クイズのホームページにリダイレクトされます。

13. Google Cloud コンソールの [ID プラットフォーム] ナビゲーション パネルで、[ユーザー] をクリックします。

    注: user2@example.com がユーザーとして追加されています。

お疲れさまでした

このラボでは、Identity Platform を使用して、アプリケーションのメールアドレスとパスワード登録を有効にする方法を学習しました。

ラボを終了する

ラボが完了したら、[ラボを終了] をクリックします。ラボで使用したリソースが Google Cloud Skills Boost から削除され、アカウントの情報も消去されます。

ラボの評価を求めるダイアログが表示されたら、星の数を選択してコメントを入力し、[送信] をクリックします。

星の数は、それぞれ次の評価を表します。

• 星 1 つ = 非常に不満
• 星 2 つ = 不満
• 星 3 つ = どちらともいえない
• 星 4 つ = 満足
• 星 5 つ = 非常に満足

フィードバックを送信しない場合は、ダイアログ ボックスを閉じてください。

フィードバックやご提案の送信、修正が必要な箇所をご報告いただく際は、[サポート] タブをご利用ください。

Copyright 2020 Google LLC All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。